/* ============================================
   KAYJAH DESIGN STUDIO — Responsive
   Apple HIG: 44pt touch targets, 17px min body,
   8pt spacing grid, safe-area support
   ============================================ */


/* ---- LARGE TABLET (max 1024px) ---- */

@media (max-width: 1024px) {
  /* Tighten section spacing */
  .section-lg {
    padding: var(--space-sm) 0 var(--space-lg);
  }
}


/* ---- TOUCH DEVICES: hide carousel arrows below 1024px ---- */

@media (max-width: 1023px) {
  /* Navigation — switch to hamburger below desktop */
  .nav {
    min-height: var(--nav-height-tablet);
  }

  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Nav gradient background for readability over hero */
  .nav--light {
    background: linear-gradient(180deg, rgba(26, 23, 20, 0.9) 0%, rgba(26, 23, 20, 0.5) 60%, transparent 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .nav--light.scrolled {
    background: rgba(248, 246, 241, 0.92);
  }

  /* Bug 2: Hide hero carousel arrow buttons on touch devices */
  .hero-nav-btn {
    display: none;
  }

  /* Keep dot indicators visible and centered */
  .hero-nav {
    right: 50%;
    transform: translateX(50%);
    gap: 8px;
  }

  /* Hero side label — hide below desktop */
  .hero-side-label {
    display: none;
  }

  /* Works slider — hide arrow buttons on touch devices */
  .works-sl-btn {
    display: none;
  }

  .works-nav {
    justify-content: center;
  }
}


/* ---- TABLET (max 900px) ---- */

@media (max-width: 900px) {
  .nav {
    padding: 1.25rem var(--gutter);
  }

  .nav.scrolled {
    padding: 0.6rem var(--gutter);
  }

  /* Logo scaling for tablet */
  .nav-logo-text {
    font-size: 1.2rem;
    letter-spacing: 0.25em;
  }

  .nav-logo-sub {
    font-size: 0.55rem;
    letter-spacing: 0.25em;
  }

  .nav-logo-img {
    max-height: 36px;
    width: auto;
  }

  /* Grids collapse to single column */
  .grid-60-40,
  .grid-40-60,
  .grid-55-45,
  .grid-45-55,
  .grid-70-30,
  .grid-30-70,
  .grid-halves {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .grid-thirds {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  /* Philosophy layout — single column, image first (DOM order) */
  .philosophy-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Product grid — 2 columns on tablet */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Works slider */
  .work-card {
    height: clamp(380px, 60vh, 520px);
  }

  /* Footer — stack brand + grid */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer typography — Apple HIG min 17px body */
  .footer-col a {
    font-size: 0.9rem;
    padding: 0.55rem 0;
  }

  .footer-col-title {
    font-size: 0.7rem;
    margin-bottom: 1rem;
  }

  .footer-philosophy {
    font-size: 1.05rem;
    max-width: 100%;
  }

  .footer-bottom {
    font-size: 0.78rem;
  }

  /* Social icons — 44px minimum touch target */
  .footer-social-icon.footer-social-icon {
    width: 44px;
    height: 44px;
  }

  /* About page — responsive rules are in about.css */

  /* Portfolio archive — tablet
     Hero responsive rules are in portfolio.css */

  .pf-filters {
    position: static;
  }

  .pf-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pf-card--featured .pf-card-visual {
    aspect-ratio: 16 / 9;
  }

  .pf-card-overlay,
  .pf-card-view {
    opacity: 1;
    transform: none;
  }

  /* Journal archive — tablet (Apple HIG) */
  .jn-layout {
    grid-template-columns: 1fr;
  }

  .jn-sidebar {
    order: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .jn-featured-link {
    grid-template-columns: 1fr;
  }

  .jn-featured-body {
    padding: 28px;
  }

  .jn-posts-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pf-featured .pf-card-img {
    aspect-ratio: 16 / 9;
  }

  /* Contact */
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
  }

  /* Project detail — tablet (Apple HIG) */
  .pj-hero {
    height: 75vh;
    min-height: 480px;
  }

  .pj-meta-bar-inner {
    flex-wrap: wrap;
    border-radius: 16px;
  }

  .pj-meta-item {
    flex: 0 0 calc(50% - 1px);
    padding: 20px 16px;
  }

  .pj-meta-divider {
    display: none;
  }

  .pj-meta-divider:nth-child(2) {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0;
    flex: 0 0 100%;
  }

  .pj-gallery-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pj-gallery-featured {
    aspect-ratio: 16 / 10;
  }

  .pj-gallery-hover,
  .pj-gallery-expand-btn,
  .pj-gallery-caption {
    opacity: 1;
    transform: none;
  }

  .pj-nav-inner {
    flex-direction: column;
    gap: 16px;
  }

  .pj-nav-card {
    max-width: 100%;
    width: 100%;
  }

  .pj-nav-card--next {
    flex-direction: row;
    text-align: left;
  }

  .pj-nav-back-btn {
    order: -1;
  }

  /* Single journal article — tablet (Apple HIG) */
  .sj-hero {
    height: 70vh;
    min-height: 440px;
  }

  .sj-hero-title {
    font-size: clamp(28px, 4.5vw, 44px);
  }

  .sj-related-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .sj-related-card:nth-child(3) {
    display: none;
  }

  .sj-author {
    padding: 24px;
  }
}


/* ---- SMALL TABLET / LARGE PHONE (max 768px) ---- */

@media (max-width: 768px) {
  /* Nav compact for smaller tablets */
  .nav {
    min-height: var(--nav-height-mobile);
    padding: 12px 16px;
  }

  .nav.scrolled {
    padding: 8px 16px;
  }

  .works-slider-outer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Logo — ensure readability */
  .nav-logo-text {
    font-size: 1.15rem;
    letter-spacing: 0.2em;
  }

  .nav-logo-sub {
    font-size: 0.55rem;
    letter-spacing: 0.25em;
  }

  /* Mobile overlay — improve layout and touch targets */
  .nav-mobile {
    gap: 2rem;
    padding: 5rem var(--gutter) 3rem;
    justify-content: flex-start;
    padding-top: 25vh;
  }

  .nav-mobile .nav-mobile-link {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    padding: 0.35rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Hero — reduce height on tablet */
  .hero {
    height: 85vh;
    height: 85dvh;
    max-height: 750px;
    min-height: 550px;
  }

  .hero-content {
    max-width: 100%;
    padding: 5rem var(--gutter) 90px;
  }

  .hero-title {
    font-size: clamp(2.2rem, 5vw, 3rem);
    margin-bottom: 8px;
  }

  .hero-subtitle {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    max-width: 100%;
    line-height: 1.75;
    margin-bottom: 16px;
  }

  .hero-authority {
    font-size: 0.7rem;
    margin-bottom: 6px;
  }

  .hero-overline {
    margin-bottom: 8px;
  }

  /* CTA buttons — touch-friendly sizing */
  .hero-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  .hero-actions .btn {
    padding: 10px 20px;
    font-size: 0.65rem;
    min-height: 44px;
  }

  .hero-actions .link-arrow {
    font-size: 0.75rem;
    padding: 8px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Hero nav — centered dots on tablet */
  .hero-nav {
    bottom: 28px;
  }

  /* Scroll indicator — hide on tablet and below */
  .scroll-indicator {
    display: none;
  }

  /* Section padding — tablet */
  .section-lg {
    padding: var(--space-sm) 0 var(--space-md);
  }

  /* Philosophy — image capped on tablet */
  .philosophy-image-wrap {
    max-height: 420px;
  }

  .philosophy-quote {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    padding-left: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .philosophy-text {
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .philosophy-heading {
    margin-bottom: 16px;
  }

  /* Product cards — increase body text */
  .product-card-desc {
    font-size: 0.88rem;
  }

  .product-card-body {
    padding: 1rem 1.1rem 1.2rem;
  }

  /* Collection header — stack */
  .collection-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  /* Footer — 2-column link grid */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  /* Footer brand — full width philosophy */
  .footer-philosophy {
    max-width: 100%;
  }

  /* Video showcase */
  .video-showcase-heading {
    font-size: clamp(1.8rem, 6vw, 3rem);
  }

}


/* ---- MOBILE (max 600px) ---- */

@media (max-width: 600px) {
  /* Bug 3: Navigation — increased height, visibility, safe-area aware */
  .nav {
    padding: 12px max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    min-height: 56px;
  }

  .nav.scrolled {
    padding: 8px max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }

  /* Bug 3: Logo — larger for readability */
  .nav-logo-text {
    font-size: 1.15rem;
    letter-spacing: 0.2em;
  }

  .nav-logo-sub {
    font-size: 0.55rem;
    letter-spacing: 0.25em;
  }

  .nav-logo-img {
    max-height: 34px;
    min-width: 34px;
  }

  /* Bug 3: Hamburger — 24px icon with 44px touch area */
  .nav-toggle {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 8px;
  }

  .nav-toggle span {
    width: 24px;
  }

  /* Mobile nav overlay — full-screen, safe-area aware */
  .nav-mobile {
    padding: 20vh max(2rem, env(safe-area-inset-left)) 3rem;
    padding-right: max(2rem, env(safe-area-inset-right));
    padding-bottom: max(3rem, env(safe-area-inset-bottom));
    gap: 1.5rem;
  }

  .nav-mobile .nav-mobile-link {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    padding: 0.4rem 0;
    min-height: 48px;
  }

  /* Hero — reduced height on mobile */
  .hero {
    height: 80vh;
    height: 80dvh;
    max-height: 650px;
    min-height: 480px;
  }

  /* Stronger overlay on mobile for text readability */
  .hero::after {
    background: linear-gradient(
      to top,
      rgba(15, 13, 10, 0.82) 0%,
      rgba(15, 13, 10, 0.5) 40%,
      rgba(15, 13, 10, 0.3) 100%
    );
  }

  .hero-content {
    padding: 4.5rem var(--gutter) 80px;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }

  /* Hero text sizing — tighter spacing for capped height */
  .hero-title {
    font-size: clamp(2rem, 8vw, 2.4rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }

  .hero-title em {
    font-size: clamp(2.2rem, 9vw, 2.6rem);
  }

  .hero-overline {
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    margin-bottom: 8px;
  }

  .hero-authority {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    line-height: 1.5;
  }

  .hero-subtitle {
    font-size: clamp(0.8rem, 2vw, 0.92rem);
    line-height: 1.6;
    max-width: 90%;
    margin-bottom: 16px;
    color: var(--light);
  }

  /* CTAs — centered on phone */
  .hero-actions {
    gap: 12px;
    flex-direction: column;
    align-items: center;
  }

  .hero-actions .btn {
    text-align: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    min-height: 44px;
  }

  .hero-actions .link-arrow {
    justify-content: center;
    padding: 8px 0;
    min-height: 44px;
    font-size: 0.75rem;
  }

  /* Hero nav — centered dots only (arrows hidden by 1023px rule) */
  .hero-nav {
    bottom: max(20px, env(safe-area-inset-bottom));
    right: 50%;
    transform: translateX(50%);
  }

  /* Keep dots visible on mobile (overrides previous hide) */
  .hero-dots {
    display: flex;
  }

  /* Scroll indicator — hide on mobile to reduce clutter */
  .scroll-indicator {
    display: none;
  }

  /* Ken Burns — reduce motion intensity on mobile for performance */
  .hero-images img {
    animation-duration: 20s;
  }

  /* Grids */
  .grid-thirds {
    grid-template-columns: 1fr;
  }

  /* Tighten general section spacing on mobile */
  .section {
    padding: var(--space-sm) 0 var(--space-md);
  }

  .section-lg {
    padding: var(--space-sm) 0 var(--space-md);
  }

  /* Product grid — single column on mobile */
  .product-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .product-card-gallery {
    aspect-ratio: 4 / 3;
  }

  .product-card-body {
    padding: 1rem;
  }

  .product-card-name {
    font-size: 1.15rem;
  }

  .product-card-desc {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .product-card-price {
    font-size: 1rem;
  }

  .product-card-action {
    font-size: 0.72rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Journal archive — mobile (Apple HIG) */
  .jn-posts-grid {
    grid-template-columns: 1fr;
  }

  .jn-sidebar {
    grid-template-columns: 1fr;
  }

  .jn-filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .jn-featured-image {
    aspect-ratio: 16 / 10;
  }

  .jn-card-image {
    aspect-ratio: 16 / 10;
  }

  .jn-load-more {
    width: 100%;
  }

  /* Video showcase border-radius */
  .video-showcase-player {
    border-radius: 8px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Works section — mobile */
  .works-section {
    padding: var(--space-sm) 0 var(--space-md);
  }

  .works-heading {
    font-size: clamp(1.5rem, 6vw, 2.4rem);
  }

  .works-gold-bar {
    width: 24px;
    margin-bottom: 8px;
  }

  .works-eyebrow {
    font-size: 0.6rem;
    margin-bottom: 8px;
  }

  .works-sec-head {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }

  .work-card {
    height: clamp(320px, 55vw, 480px);
  }

  .work-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  .work-cta {
    font-size: 0.68rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .works-nav {
    margin-top: 1.2rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .works-counter {
    font-size: 0.68rem;
  }

  .works-cta {
    margin-top: var(--space-sm);
  }

  .works-cta .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Philosophy — mobile */
  .philosophy {
    padding: var(--space-sm) 0 var(--space-md);
  }

  /* Constrain philosophy image height on mobile — 3:4 is too tall */
  .philosophy-image-wrap.aspect-3-4 {
    aspect-ratio: 4 / 3;
    max-height: 280px;
  }

  .philosophy-heading {
    margin-bottom: 16px;
  }

  .philosophy-quote {
    font-size: clamp(0.95rem, 2.5vw, 1.25rem);
    padding-left: 12px;
    margin-bottom: 12px;
  }

  .philosophy-text {
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 100%;
    margin-bottom: 16px;
  }

  .philosophy-image-caption {
    font-size: 0.6rem;
    margin-top: 12px;
    gap: 8px;
  }

  .philosophy-caption-line {
    width: 24px;
  }

  /* Collection — mobile */
  .collection-preview {
    padding: var(--space-sm) 0 var(--space-md);
  }

  .collection-preview-heading {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }

  .collection-preview-text {
    font-size: 0.92rem;
    max-width: 100%;
  }

  .collection-header-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Video showcase — mobile */
  .video-showcase {
    padding: var(--space-xs) 0 var(--space-sm);
  }

  .video-showcase-header {
    margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  }

  .video-showcase-heading {
    font-size: clamp(1.6rem, 7vw, 2.6rem);
    margin-bottom: var(--space-xs);
  }

  .video-showcase-sub {
    font-size: 0.92rem;
    max-width: 100%;
  }

  .video-play-btn svg {
    width: 48px;
    height: 48px;
  }

  /* Quote + CTA closer — mobile */
  .cta-closer {
    padding: var(--space-sm) 0 var(--space-md);
  }

  .cta-quote {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  }

  .cta-heading {
    font-size: clamp(1.3rem, 5vw, 1.75rem);
  }

  .cta-sub {
    font-size: 0.95rem;
  }

  /* Footer — single column, Apple HIG spacing */
  .footer {
    padding: var(--space-md) 0 var(--space-sm);
    padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  }

  .footer .container {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }

  .footer-inner {
    gap: 2.5rem;
  }

  .footer-brand {
    gap: 0.85rem;
  }

  .footer-logo {
    font-size: 1.2rem;
    letter-spacing: 0.25em;
  }

  .footer-logo-img {
    max-height: 32px;
    width: auto;
  }

  .footer-logo-sub {
    font-size: 0.55rem;
  }

  .footer-philosophy {
    font-size: 1rem;
    line-height: 1.65;
    max-width: 100%;
  }

  .footer-zbom {
    font-size: 0.75rem;
  }

  .footer-signature {
    font-size: 0.75rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-col-title {
    font-size: 0.7rem;
    margin-bottom: 0.75rem;
  }

  /* Footer links — Apple HIG 44px touch targets, 17px min text */
  .footer-col a {
    font-size: 0.95rem;
    padding: 0.6rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Social icons — ensure 48px touch on mobile */
  .footer-socials {
    gap: 12px;
  }

  .footer-social-icon.footer-social-icon {
    width: 48px;
    height: 48px;
  }

  .footer-social-icon.footer-social-icon svg {
    width: 22px;
    height: 22px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    font-size: 0.78rem;
    padding-top: 1.25rem;
    margin-top: 2rem;
  }

  /* Typography scaling — Apple HIG minimum readability */
  .t-display {
    font-size: clamp(2.4rem, 10vw, 4rem);
  }

  .t-h1 {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }

  .t-h2 {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }

  .t-body {
    font-size: 1rem;
    line-height: 1.75;
  }

  .t-body-lg {
    font-size: 1.05rem;
  }

  .t-overline {
    font-size: 0.65rem;
  }

  /* Buttons — full width on mobile, 48px min height */
  .btn {
    min-height: 48px;
    font-size: 0.72rem;
    padding: 0.85rem 1.75rem;
  }

  /* Portfolio archive — mobile
     Hero responsive rules are in portfolio.css */

  .pf-filters-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 16px;
    gap: 8px;
  }

  .pf-filters-inner::-webkit-scrollbar {
    display: none;
  }

  .pf-filter-pill {
    flex-shrink: 0;
    font-size: 13px;
    padding: 10px 18px;
    min-height: 44px;
  }

  .pf-card-visual {
    border-radius: var(--pf-radius-xs);
  }

  .pf-card--featured .pf-card-visual {
    border-radius: var(--pf-radius-sm);
    aspect-ratio: 4 / 3;
  }

  .pf-card-body {
    padding: 0 2px;
  }

  .pf-cta-btn {
    width: 100%;
    padding: 16px 32px;
    min-height: 48px;
  }

  /* Project detail — mobile (Apple HIG) */
  .pj-hero {
    height: 70vh;
    height: 70svh;
    min-height: 400px;
  }

  .pj-hero-content {
    bottom: 64px;
    bottom: max(64px, env(safe-area-inset-bottom));
  }

  .pj-hero-badge {
    font-size: 10px;
    padding: 6px 16px;
    margin-bottom: 16px;
  }

  .pj-meta-bar {
    margin-top: -32px;
  }

  .pj-meta-bar-inner {
    border-radius: var(--pj-radius-sm);
    flex-direction: column;
  }

  .pj-meta-item {
    flex: none;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .pj-meta-label {
    margin-bottom: 0;
    font-size: 0.65rem;
  }

  .pj-meta-value {
    font-size: 15px;
  }

  .pj-meta-divider {
    display: block;
    width: auto;
    height: 1px;
    margin: 0 16px;
    flex: none;
  }

  .pj-about {
    padding: 48px var(--gutter);
  }

  .pj-gallery {
    padding: 0 var(--gutter) 48px;
  }

  .pj-gallery-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pj-gallery-featured {
    aspect-ratio: 4 / 3;
    border-radius: var(--pj-radius-sm);
  }

  .pj-gallery-item {
    border-radius: var(--pj-radius-xs);
  }

  .pj-gallery-item:nth-child(2):last-child {
    aspect-ratio: 4 / 3;
  }

  .pj-testimonial {
    padding: 48px var(--gutter);
  }

  .pj-nav-inner {
    padding: 32px var(--gutter);
  }

  .pj-nav-card {
    padding: 12px 16px;
    border-radius: var(--pj-radius-xs);
    min-height: 48px;
  }

  .pj-cta-btn {
    width: 100%;
    padding: 16px 32px;
    min-height: 48px;
  }

  .pj-lightbox-nav {
    width: 44px;
    height: 44px;
  }

  .pj-lightbox-prev { left: 12px; }
  .pj-lightbox-next { right: 12px; }

  .pj-lightbox-img {
    max-width: 94vw;
    max-height: 75vh;
    border-radius: var(--pj-radius-xs);
  }

  /* Single journal article — mobile (Apple HIG) */
  .sj-hero {
    height: 65vh;
    height: 65svh;
    min-height: 380px;
  }

  .sj-hero-content {
    bottom: 56px;
    bottom: max(56px, env(safe-area-inset-bottom));
  }

  .sj-hero-cat {
    font-size: 11px;
    padding: 8px 16px;
    margin-bottom: 14px;
    min-height: 36px;
  }

  .sj-hero-title {
    font-size: clamp(24px, 7vw, 34px);
    margin-bottom: 12px;
  }

  .sj-hero-meta {
    font-size: 13px;
    gap: 10px;
  }

  .sj-scroll-hint {
    display: none;
  }

  .sj-article {
    padding: 40px var(--gutter);
  }

  .sj-pullquote {
    font-size: clamp(19px, 5vw, 24px);
    padding: 32px 0;
  }

  .sj-pullquote::before {
    font-size: 48px;
  }

  .sj-body {
    font-size: 16px;
    line-height: 1.75;
  }

  .sj-body > p:first-child::first-letter {
    font-size: 3em;
  }

  .sj-body img {
    border-radius: var(--sj-radius-xs);
    margin: 24px 0;
  }

  .sj-related-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sj-related-card:nth-child(3) {
    display: block;
  }

  .sj-related-img {
    aspect-ratio: 16 / 10;
  }

  .sj-author {
    flex-direction: column;
    text-align: center;
    padding: 28px 20px;
  }

  .sj-share {
    flex-wrap: wrap;
    justify-content: center;
  }

  .sj-cta-btn {
    width: 100%;
    padding: 16px 32px;
    min-height: 48px;
  }

  /* Form fields — Apple HIG min 17px, 48px height */
  .form-input,
  .form-textarea,
  .form-select {
    font-size: 1rem;
    min-height: 48px;
    padding: 0.85rem 0;
  }

  .form-label {
    font-size: 0.72rem;
  }

  /* About page responsive — handled in about.css */
}


/* ---- SMALL MOBILE (max 380px) ---- */

@media (max-width: 380px) {
  /* Extra-small phone adjustments */
  .nav-logo-text {
    font-size: 1.05rem;
    letter-spacing: 0.15em;
  }

  .nav-logo-sub {
    font-size: 0.5rem;
    letter-spacing: 0.2em;
  }

  .hero-title {
    font-size: clamp(1.6rem, 9vw, 2rem);
  }

  .hero-subtitle {
    font-size: 0.88rem;
  }

  .footer-logo {
    font-size: 1.05rem;
    letter-spacing: 0.2em;
  }

  .footer-philosophy {
    font-size: 0.95rem;
  }

  .t-display {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .t-h1 {
    font-size: clamp(1.6rem, 9vw, 2.4rem);
  }

  /* Buttons — slightly smaller padding on tiny screens */
  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.68rem;
  }

  /* Product card — tighter spacing */
  .product-card-body {
    padding: 0.85rem;
  }
}


/* ---- LANDSCAPE PHONE (max-height 500px, landscape) ---- */

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero-content {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  .hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  /* Nav mobile — horizontal layout in landscape */
  .nav-mobile {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 5rem;
    gap: 0.5rem 2rem;
  }

  .nav-mobile .nav-mobile-link {
    font-size: 1.4rem;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ---- CURSOR: disable on touch ---- */

@media (pointer: coarse) {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }

  body {
    cursor: auto;
  }

  body a, body button {
    cursor: pointer;
  }
}


/* ---- WORDPRESS: Admin bar offset for fixed nav ---- */

.admin-bar .nav {
  top: 32px;
}

.admin-bar .nav-mobile {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .nav {
    top: 46px;
  }

  .admin-bar .nav-mobile {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .admin-bar .nav {
    top: 0;
  }

  .admin-bar .nav-mobile {
    top: 0;
  }
}


/* ---- WORDPRESS: Ensure WP-generated images match static reference ---- */

.hero-images img[width],
.hero-images img[height] {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.philosophy-image-wrap img[width],
.philosophy-image-wrap img[height] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-img img[width],
.work-img img[height] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-gallery-track img[width],
.product-gallery-track img[height] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Override WP auto-sizes contain-intrinsic-size */
.hero-images img,
.philosophy-image-wrap img,
.work-img img,
.product-gallery-track img {
  contain-intrinsic-size: auto;
}


/* ---- SAFE AREA: notched devices (iPhone X+) ---- */

@supports (padding: env(safe-area-inset-bottom)) {
  .footer {
    padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  }

  .whatsapp-float {
    bottom: max(2rem, calc(1rem + env(safe-area-inset-bottom)));
    right: max(2rem, env(safe-area-inset-right));
  }

  @media (max-width: 600px) {
    .whatsapp-float {
      bottom: max(1.25rem, calc(0.75rem + env(safe-area-inset-bottom)));
      right: max(1.25rem, env(safe-area-inset-right));
    }
  }
}