/* ════════════════════════════════════════════════════════════════════════════
   experience.css — Carlo Schembri · Homepage cinematic polish layer
   ----------------------------------------------------------------------------
   Loaded LAST. Refines spacing, typography, section transitions, mobile
   behaviour, navbar legibility, hotspot scaling, and ambient atmosphere
   so every section reads as one continuous editorial experience.

   Strategy
     • Mobile-first: refinements stack from 360px upward.
     • Token tightening: subtler clamps for mid breakpoints (1024–1440).
     • Section seams: ivory↔ink transitions become gradient bridges, not cuts.
     • Reduced-motion: thorough kill-switch for all decorative animation.
     • No new HTML, no JS dependency: pure CSS.
   ════════════════════════════════════════════════════════════════════════════ */


/* ── 0. Token refinements ──────────────────────────────────────────────── */
:root {
  /* Slightly cooler ivory so light sections feel less yellow next to bronze. */
  --ivory:        #ede8df;
  --ivory-soft:   #e6e0d4;
  --ivory-warm:   #f1ebe1;
  /* Section transition bridges */
  --bridge-ink-h: clamp(56px, 8vh, 96px);
  /* A unified body-text colour on ivory backgrounds (avoids three different
     greys depending on which section you're in). */
  --on-ivory:        #2a2520;
  --on-ivory-muted:  #6b655c;
  /* On-ink body text */
  --on-ink:        #ede6da;
  --on-ink-muted:  rgba(232, 226, 214, 0.62);
}


/* ── 1. Global polish ──────────────────────────────────────────────────── */

/* Stop iOS from amplifying type and forcing horizontal scroll. */
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }

/* Universal anti-overflow rail. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, picture, svg { max-width: 100%; height: auto; }

/* Make every interactive element comfortable to tap (Apple HIG: 44pt). */
@media (pointer: coarse) {
  a, button, [role="button"], summary, .nav-cta, .nav-burger,
  .preview-cta, .about-cta, .atelier-cta, .andbold-cta, .categories-cta,
  .cf-submit, .hero-enter, .hero-scroll, .hs-quick-step, .hs-quick-open,
  .nav-drawer-cta, .nav-drawer-shop, .nav-drawer-links a,
  .foot a, .ovl-close, .lb-close, .lb-prev, .lb-next {
    min-height: 44px;
  }
}

/* The film-grain canvas was painting at 35% over a 0% blend on light
   sections, dirtying the ivory. Tighten it and switch to soft-light so
   it acts as texture, not noise. */
#grain {
  opacity: 0.22;
  mix-blend-mode: soft-light;
}
@media (max-width: 768px) {
  /* Cheaper on phones; the grain is decorative, not load-bearing. */
  #grain { opacity: 0.14; }
}


/* ── 2. Navbar refinements ─────────────────────────────────────────────── */

/* On dark sections, sit the bar over a soft top-shade so links read
   clearly even when video brightens unexpectedly. The shade is below
   the bar's own content; never visible as a hard line. */
.nav[data-theme="dark"]::before,
.nav:not([data-theme])::before {
  content: '';
  position: absolute; inset: 0 0 -28px 0;
  background: linear-gradient(180deg,
    rgba(10, 9, 8, 0.55) 0%,
    rgba(10, 9, 8, 0.18) 60%,
    rgba(10, 9, 8, 0.00) 100%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
/* Only show the shade once the user has scrolled — keeps the absolute
   top of the page (intro frame) free of any plate. */
html[data-scroll]:not([data-scroll="top"]) .nav[data-theme="dark"]::before,
html[data-scroll]:not([data-scroll="top"]) .nav:not([data-theme])::before {
  opacity: 1;
}

/* Lighter, less heavy glass on light sections (backdrop-blur is expensive
   on mobile and currently feels too plate-like). */
.nav[data-theme="light"] {
  background: rgba(246, 242, 236, 0.62);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 1px 0 rgba(176, 141, 87, 0.10);
}
@media (max-width: 768px) {
  /* Drop blur on phones (perf), keep tint. */
  .nav[data-theme="light"] {
    background: rgba(246, 242, 236, 0.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Brand hitbox: visually unchanged, pads the click target. */
.nav-brand { padding: 8px 6px; margin-left: -6px; }

/* Burger never breaks under the actions group on narrow phones. */
@media (max-width: 380px) {
  .nav-cta { padding: 7px 9px; font-size: 8.5px; letter-spacing: 0.22em; }
  .nav-cta svg { display: none; }
  .nav-burger { width: 40px; height: 40px; }
}


/* ── 3. Hero ───────────────────────────────────────────────────────────── */

/* Smoother base-to-bottom wash so the hero exits into the about section
   with a darker plate, eliminating the cut between #0a0908 and ivory. */
.hero-atmos-gradient {
  background:
    linear-gradient(180deg,
      rgba(10, 9, 8, 0.92) 0%,
      rgba(10, 9, 8, 0.42) 26%,
      rgba(10, 9, 8, 0.42) 58%,
      rgba(10, 9, 8, 0.96) 92%,
      rgba(10, 9, 8, 1)    100%);
}

/* Per-frame CSS filter() on the video is removed — it was the
   primary cause of hero-video stuttering. Darkening is handled by
   the .hero-atmos-base / gradient layers instead. */
.hero-video {
  filter: none;
}

/* Hero chrome (Scroll, Enter archive) — push above the bottom wash so
   it never reads as floating; safe-area aware on mobile Safari. */
.hero-chrome {
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

/* Hotspot pin sizing scales with viewport so phones don't get a cluster
   of tiny dots. */
.hs-pin {
  width: clamp(36px, 4.4vw, 48px);
  height: clamp(36px, 4.4vw, 48px);
}

/* Label readability scrim — shown on hover with the label reveal. */
.hs-label-text {
  font-size: clamp(12px, 1.1vw, 15px);
  background: linear-gradient(90deg,
    rgba(10, 9, 8, 0.38),
    rgba(10, 9, 8, 0.14) 70%,
    rgba(10, 9, 8, 0));
  padding: 4px 10px 4px 0;
  border-radius: 2px;
}
.hotspot.hs-left .hs-label-text {
  background: linear-gradient(270deg,
    rgba(10, 9, 8, 0.38),
    rgba(10, 9, 8, 0.14) 70%,
    rgba(10, 9, 8, 0));
  padding: 4px 0 4px 10px;
}

/* Mobile hero — premium, not cramped.
   769–1024px: medium tablets get slightly smaller pins; labels still
   appear on hover (inherited from hero.css).
   ≤768px: hide the per-pin labels. NOTE: at ≤640px the entire hotspot
   system is rebuilt as a snap-scrolling chapter rail. */
@media (min-width: 769px) and (max-width: 1024px) {
  .hs-pin {
    width: clamp(34px, 3.8vw, 42px);
    height: clamp(34px, 3.8vw, 42px);
  }
  .hs-pin-num { font-size: 9.5px; }
  .hs-label-text { font-size: clamp(11px, 1vw, 13px); }
  /* Preview panel: tighter on tablets */
  .preview { width: 260px; }
}

@media (min-width: 641px) and (max-width: 768px) {
  .hero { min-height: 100svh; }
  .hs-label { display: none; }
  .hs-pin {
    width: 30px; height: 30px;
    background: rgba(10, 9, 8, 0.42);
    border-radius: 50%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .hs-pin-num { font-size: 9px; }
  .hs-pin-pulse { display: none; }
  .hotspots { inset: 30% 6% 28% 6%; }
}

/* Title typography — keep the editorial drama but never overflow on the
   smallest phones. */
.ht-name { font-size: clamp(2.6rem, 12vw, 9rem); }
@media (max-width: 380px) {
  .ht-name  { font-size: clamp(2.2rem, 13vw, 3rem); }
  .ht-kicker { letter-spacing: 0.32em; font-size: 10px; }
  .ht-tagline { letter-spacing: 0.32em; font-size: 11px; }
}

/* Hero CTA + scroll: cleaner gap on mobile. */
@media (max-width: 640px) {
  .hero-chrome { gap: 20px; }
  .hero-enter span { font-size: 10px; letter-spacing: 0.28em; }
}


/* ── 4. Section bridges (ink ↔ ivory continuous) ───────────────────────── */

/* Each ivory section gets a soft ink-shadow at its top so the previous
   dark section dissolves down into it instead of cutting hard. */
.about,
.atelier,
.contact {
  background-image:
    linear-gradient(180deg,
      rgba(10, 9, 8, 0.22) 0%,
      rgba(10, 9, 8, 0.00) var(--bridge-ink-h));
  background-color: var(--ivory);
  background-repeat: no-repeat;
}
/* And a soft fade to ink at the bottom so the next dark section
   receives it gracefully. */
.about::after,
.atelier::after,
.contact::after {
  /* keep existing radial atmospheres — append a bottom shade via
     a separate pseudo-element so we don't overwrite them. */
}
.about,
.atelier,
.contact { position: relative; }

.about > .about-grid,
.atelier > .atelier-grid,
.contact > .contact-grid { position: relative; z-index: 3; }

/* Ink sections get a faint ivory glow at the seam where they meet the
   following ivory section — completes the dissolve. */
.categories,
.andbold,
.foot {
  background-image:
    linear-gradient(180deg,
      rgba(237, 232, 223, 0.06) 0%,
      rgba(237, 232, 223, 0.00) var(--bridge-ink-h));
  background-color: #141210;
  background-repeat: no-repeat;
}


/* ── 5. About — editorial polish, responsive collapse ──────────────────── */

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo-col {
    min-height: clamp(320px, 56vw, 520px);
    aspect-ratio: 4 / 3;
  }
  .about-photo-col img {
    /* Mask was sized for two columns; reset for stacked layout. */
    -webkit-mask-image: linear-gradient(to bottom,
      #000 0%, #000 78%, rgba(0,0,0,0.55) 92%, transparent 100%);
            mask-image: linear-gradient(to bottom,
      #000 0%, #000 78%, rgba(0,0,0,0.55) 92%, transparent 100%);
    object-position: 50% 30%;
  }
  .about-text-col {
    padding: clamp(48px, 8vh, 80px) var(--page-gutter) clamp(64px, 10vh, 100px);
    gap: 22px;
  }
  .about-signoff { flex-direction: column; align-items: flex-start; gap: 20px; }
  .about-cta { width: 100%; max-width: 360px; justify-content: center; }
}
@media (max-width: 480px) {
  .about-heading { font-size: clamp(1.85rem, 9vw, 2.6rem); }
  .about-bio { font-size: 15.5px; line-height: 1.72; }
}


/* ── 6. Archive preview (categories) — teaser cards ────────────────────── */

/* Tighten heading rhythm on mid screens. */
.categories-heading { font-size: clamp(1.85rem, 4.4vw, 3.4rem); max-width: 22ch; }

/* Add a clear "preview of archive" subtitle band beneath the asymmetric
   cards using the existing footer; visual weight tweak only. */
.categories-foot {
  padding: clamp(48px, 8vh, 96px) var(--page-gutter) clamp(64px, 10vh, 120px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  max-width: var(--content-max);
  margin: 0 auto;
}
.cf-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 167, 108, 0.32), transparent);
  width: 100%;
}
@media (max-width: 720px) {
  .categories-foot { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .cf-rule:first-child { display: none; }
}

/* The CTA: gives the impression of two clear destinations
   (basic / cinematic) without requiring extra DOM. */
.categories-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 28px;
  border: 1px solid rgba(196, 167, 108, 0.28);
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.4s var(--ease-out), border-color 0.4s, transform 0.5s var(--ease-out);
}
.categories-cta:hover {
  background: rgba(196, 167, 108, 0.10);
  border-color: rgba(196, 167, 108, 0.55);
  transform: translateY(-2px);
}

/* Mobile category grid: stack hero + counters cleanly, no aspect surprises. */
@media (max-width: 720px) {
  .ch-grid { grid-template-columns: 1fr; gap: 12px; }
  .ch-card--hero    { aspect-ratio: 16 / 11; }
  .ch-card--counter { aspect-ratio: 4 / 3; }
}


/* ── 7. Atelier — premium shop teaser ──────────────────────────────────── */

/* Frame: cap on smaller screens so the orbs don't break out. */
@media (max-width: 900px) {
  .atelier-grid {
    grid-template-columns: 1fr;
    gap: clamp(36px, 6vh, 56px);
    padding: 0 var(--page-gutter);
  }
  .atelier-frame {
    justify-self: center;
    max-width: min(440px, 88vw);
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 480px) {
  .atelier-heading { font-size: clamp(1.85rem, 9vw, 2.6rem); }
  .atelier-actions { width: 100%; }
  .atelier-cta { width: 100%; justify-content: center; }
}


/* ── 8. Andbold — perf, reduced-motion, mobile collapse ────────────────── */

@media (max-width: 900px) {
  .andbold-grid { grid-template-columns: 1fr; min-height: auto; }
  .andbold-photo-col {
    min-height: clamp(280px, 56vw, 460px);
    aspect-ratio: 16 / 10;
  }
  .andbold-photo-vid {
    /* Reset the right-edge desktop fade for the stacked layout. */
    -webkit-mask-image: linear-gradient(to bottom,
      #000 0%, #000 78%, rgba(0,0,0,0.6) 92%, transparent 100%);
            mask-image: linear-gradient(to bottom,
      #000 0%, #000 78%, rgba(0,0,0,0.6) 92%, transparent 100%);
  }
  .andbold-text-col {
    padding: clamp(48px, 8vh, 80px) var(--page-gutter) clamp(64px, 10vh, 100px);
  }
}

/* Disable the parallax shift entirely on phones — it was juddering with
   the scroll-snap engine and adds nothing on small screens. */
@media (max-width: 768px) {
  html.has-slideshow.is-animating[data-slide-dir="down"] .andbold-photo-vid,
  html.has-slideshow.is-animating[data-slide-dir="up"]   .andbold-photo-vid {
    transform: translateY(0) !important;
  }
}

@media (max-width: 480px) {
  .andbold-heading { font-size: clamp(1.8rem, 9vw, 2.4rem); }
  .andbold-signoff { flex-direction: column; align-items: flex-start; gap: 22px; }
  .andbold-cta { width: 100%; max-width: 360px; justify-content: center; }
}


/* ── 9. Contact — premium, readable, thumb-friendly ────────────────────── */

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: clamp(36px, 6vh, 64px);
  }
  .contact-meta { grid-template-columns: 1fr 1fr; gap: 22px 28px; }
  .contact-form { width: 100%; }
  .cf-row { grid-template-columns: 1fr !important; gap: 16px !important; }
}
@media (max-width: 480px) {
  .contact-heading { font-size: clamp(1.95rem, 10vw, 3rem); }
  .contact-meta { grid-template-columns: 1fr; }
  /* Form fields: enlarge touch targets, prevent iOS zoom-on-focus. */
  .cf-field input,
  .cf-field select,
  .cf-field textarea {
    font-size: 16px !important; /* Safari zooms <16px inputs */
    padding-top: 22px;
    padding-bottom: 14px;
  }
  .cf-submit { width: 100%; justify-content: center; }
}


/* ── 10. Footer ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
  .foot-col--brand { grid-column: 1 / -1; justify-content: flex-start; }
  .foot-brand-link { align-items: flex-start; }
  .foot-brand-img {
    height: auto;
    min-height: 0;
    max-height: clamp(96px, 14vw, 140px);
  }
}
@media (max-width: 600px) {
  .foot-cols { grid-template-columns: 1fr; gap: 24px; padding-top: 36px; padding-bottom: 36px; }
  .foot-bottom {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    text-align: center;
    font-size: 11px !important;
  }
}


/* ── 11. Reveal-on-scroll universal kill on reduced motion ─────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Make sure reveal elements are always visible (no animation = no
     "stuck invisible" content). */
  .reveal,
  .reveal[data-delay],
  .ch-card,
  .hotspot { opacity: 1 !important; transform: none !important; }
  .ht-name .ht-first span,
  .ht-name .ht-last  span { transform: none !important; }
  .hero-video { transform: none !important; }
  .hs-pin-pulse { display: none !important; }
  /* Disable the andbold scrub-feel parallax */
  .andbold-photo-vid { transform: none !important; }
  /* Disable section glow drift */
  .about::after, .atelier-scan, .andbold::after,
  .categories-mesh, .foot::after, .contact::after { animation: none !important; }
  #grain { display: none !important; }
}


/* ── 12. Wide-screen (≥1600px) — graceful expansion ────────────────────── */

@media (min-width: 1600px) {
  :root { --content-max: 1440px; }
  /* Heading scale ceilings already set via clamp(); nothing to do here
     beyond letting the existing tokens breathe. */
}
@media (min-width: 1920px) {
  :root { --content-max: 1560px; --page-gutter: clamp(40px, 5vw, 96px); }
}


/* ── 13. Anti-jitter: prevent layout shift from late-loading media ─────── */

.about-photo-col img,
.atelier-frame-img,
.andbold-photo-vid,
.ch-card-media img {
  background: rgba(20, 18, 16, 0.6);   /* placeholder tone while loading */
}

/* Reserve space for hero so the video poster never causes shift. */
.hero { contain: layout paint; }


/* ── 14. Section-kicker dark/light parity ──────────────────────────────── */

/* The kicker text has historically been a touch faint on ink sections;
   nudge it up a hair without altering the rule. */
.on-dark .section-kicker,
[data-nav-theme="dark"] .section-kicker > span:not(.sk-rule) {
  color: rgba(232, 226, 214, 0.72);
}


/* ── 15. Lightbox / overlay (ensure they sit above everything) ─────────── */

#lightbox    { z-index: 9700; }
#chapter-overlay { z-index: 9650; }
.nav-burger { z-index: 9610; }


/* ── 16. Print kindness ────────────────────────────────────────────────── */
@media print {
  .nav, .nav-drawer, .nav-drawer-backdrop,
  #grain, .hero-chrome, .hotspots,
  .preview, .lb, #chapter-overlay { display: none !important; }
  .hero { height: auto; min-height: 0; }
  .hero-video, .hero-atmos { display: none; }
  body { background: #fff; color: #000; }
}


/* ════════════════════════════════════════════════════════════════════════
   ═══ MOBILE & TABLET REBUILD ≤ 900px — premium small-screen experience ═
   ════════════════════════════════════════════════════════════════════════
   The previous mobile.css (loaded before this file) anchors the chapter
   pins as a horizontal strip at the bottom of the hero. That works
   functionally but reads as an afterthought on a portfolio of this
   calibre. This block REPLACES that layout with a vertically-centered
   snap-scrolling row of editorial chapter cards, edge-fade overlays
   that signal more content, an animated swipe affordance, and a
   re-rhythmed hero stack: title up top → chapter rail in the optical
   centre → CTA + scroll hint at the foot. It is strictly additive: no
   HTML or JS changes, only CSS overrides at higher specificity / later
   cascade order than mobile.css.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ─── Hero stack rhythm ─────────────────────────────────────────────── */
  .hero {
    /* Prefer dynamic viewport so iOS URL-bar collapses don't reflow. */
    height: 100dvh !important;
    min-height: 560px;
  }

  /* Slightly heavier base wash so the pale chapter cards always read,
     no matter what frame the video is on. */
  .hero-atmos-gradient {
    background:
      linear-gradient(180deg,
        rgba(10, 9, 8, 0.94) 0%,
        rgba(10, 9, 8, 0.55) 28%,
        rgba(10, 9, 8, 0.55) 52%,
        rgba(10, 9, 8, 0.92) 96%,
        rgba(10, 9, 8, 1.00) 100%);
  }

  /* Push the intro title higher so it doesn't collide with the rail. */
  .hero-title { top: 32% !important; }
  .ht-name    { font-size: clamp(2.4rem, 13vw, 4.4rem) !important; }
  .ht-kicker  { margin-bottom: 22px; letter-spacing: 0.32em; }
  .ht-tagline { letter-spacing: 0.32em; margin-top: 18px; }


  /* ═════════════════════════════════════════════════════════════════════
     CHAPTER RAIL — snap-scrolling editorial cards (vertically centered)
     ═════════════════════════════════════════════════════════════════════ */

  /* The strip is a positioned region that holds the scrolling track AND
     decorative edge-fade overlays. We layer a wrapper effect with
     pseudo-elements on .hero (so the fades sit OUTSIDE the scroller and
     don't move with it). */

  .hotspots {
    /* Cancel the bottom-anchor from mobile.css and centre vertically. */
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;

    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    height: auto !important;

    /* Snap, hide-scrollbar, pad with viewport gutters so first/last
       cards centre on screen when snapped. */
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18vw;
    padding: 8px 18vw;
    gap: 12px;

    /* Soft glass plate behind the rail so cards always read. */
    background:
      linear-gradient(180deg,
        rgba(10, 9, 8, 0.00) 0%,
        rgba(10, 9, 8, 0.28) 22%,
        rgba(10, 9, 8, 0.28) 78%,
        rgba(10, 9, 8, 0.00) 100%);

    pointer-events: auto !important;
    z-index: 6 !important;
  }
  .hotspots::-webkit-scrollbar { display: none !important; }

  /* Edge fades — placed on the hero so they overlay the scroll track
     edges as a visual cue that there's more to swipe. */
  .hero::before,
  .hero::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 168px;
    z-index: 7;
    pointer-events: none;
    opacity: 0.85;
  }
  .hero::before {
    left: 0;
    background: linear-gradient(90deg, rgba(10, 9, 8, 0.92), transparent);
  }
  .hero::after {
    right: 0;
    background: linear-gradient(270deg, rgba(10, 9, 8, 0.92), transparent);
  }


  /* ─── Cards (was: pill) ─────────────────────────────────────────────── */
  .hotspot {
    /* Reset main.js absolute placement & bloom-stagger. */
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    scale: 1 !important;

    /* Card geometry — premium proportions, comfortable tap area. */
    flex: 0 0 64vw;
    max-width: 280px;
    min-width: 220px;
    min-height: 132px;
    padding: 18px 20px;
    scroll-snap-align: center;
    scroll-snap-stop: always;

    display: grid !important;
    grid-template-rows: auto 1fr auto;
    align-items: stretch;
    gap: 0;

    /* Editorial glass card. */
    background: linear-gradient(180deg,
      rgba(20, 18, 16, 0.78),
      rgba(10, 9, 8, 0.86));
    border: 1px solid rgba(196, 167, 108, 0.22);
    border-radius: 2px;
    box-shadow:
      0 14px 40px -22px rgba(0, 0, 0, 0.85),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px) saturate(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);

    color: var(--warm-white);
    transition:
      border-color 0.35s var(--ease-out),
      background  0.35s var(--ease-out),
      transform   0.35s var(--ease-out);
  }
  /* Bronze hairline accent on the leading edge */
  .hotspot::before {
    content: '';
    position: absolute;
    left: 0; top: 14%; bottom: 14%;
    width: 1px;
    background: linear-gradient(180deg,
      transparent, rgba(196, 167, 108, 0.55), transparent);
    opacity: 0.7;
    transition: opacity 0.4s var(--ease-out);
  }
  .hotspot:active,
  .hotspot:focus-visible {
    border-color: rgba(196, 167, 108, 0.55);
    background: linear-gradient(180deg,
      rgba(40, 32, 22, 0.78),
      rgba(20, 14, 8, 0.88));
    transform: translateY(-1px);
  }
  .hotspot:active::before,
  .hotspot:focus-visible::before { opacity: 1; }

  .hotspot.is-dim { opacity: 1 !important; filter: none !important; }


  /* ─── Card content ──────────────────────────────────────────────────── */

  /* Pin → repurposed as the kicker row (Roman numeral + tiny rule) */
  .hs-pin {
    position: static !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    border-radius: 0;
    grid-row: 1;
    margin-bottom: 14px;
  }
  .hs-pin::after {
    content: '';
    display: block;
    width: 22px;
    height: 1px;
    background: rgba(196, 167, 108, 0.55);
    transition: width 0.4s var(--ease-out), background-color 0.3s;
  }
  .hotspot:active .hs-pin::after,
  .hotspot:focus-visible .hs-pin::after { width: 36px; background: var(--bronze-pale); }

  .hs-pin-num {
    position: static !important;
    z-index: auto !important;
    opacity: 1 !important;
    transform: none !important;
    font-family: var(--font-sc) !important;
    font-size: 9px !important;
    letter-spacing: 0.42em !important;
    text-transform: uppercase !important;
    color: var(--bronze-pale) !important;
    line-height: 1 !important;
    transition: none !important;
  }
  .hs-pin-ring,
  .hs-pin-core,
  .hs-pin-pulse { display: none !important; }


  /* Label → the chapter name as the card's editorial title */
  .hs-label {
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: flex-start;
    gap: 0;
    grid-row: 2;
    pointer-events: none;
  }
  .hs-label::before { display: none !important; content: none !important; }
  .hs-label-rule { display: none !important; }
  .hs-label-num,
  .hs-label-dash { display: none !important; }
  .hs-label-text {
    display: block !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;

    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: clamp(20px, 6.4vw, 26px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.005em !important;
    color: var(--warm-white) !important;

    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);

    /* 2-line cap with ellipsis so long names never blow up the card */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  .hs-label-name {
    max-width: none !important;
    display: inline !important;
    font-style: italic !important;
  }

  /* Bottom row: a "Open chapter" hint with chevron — built from a
     pseudo on the card (no extra DOM). Reset the absolute positioning
     inherited from desktop hero.css's invisible hover bridge. */
  .hotspot::after {
    content: 'Open chapter  →';
    position: static !important;
    inset: auto !important;
    border-radius: 0 !important;
    grid-row: 3;
    margin-top: 14px;
    font-family: var(--font-sc);
    font-size: 8.5px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(232, 226, 214, 0.45);
    transition: color 0.3s, letter-spacing 0.4s var(--ease-out);
    align-self: end;
  }
  .hotspot:active::after,
  .hotspot:focus-visible::after {
    color: var(--bronze-pale);
    letter-spacing: 0.48em;
  }


  /* ═════════════════════════════════════════════════════════════════════
     SWIPE AFFORDANCE — small animated chevron just above the rail
     ═════════════════════════════════════════════════════════════════════ */

  /* Inserted on the hotspots container itself. We can't use ::before
     (used for cards), but the hero already owns ::before/::after. So
     we hang it on the .hotspots wrapper using a pseudo. */
  .hotspots::before {
    content: 'Swipe through chapters  →';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    transform: translateX(-50%);
    font-family: var(--font-sc);
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(232, 226, 214, 0.55);
    pointer-events: none;
    white-space: nowrap;
    animation: hsSwipeHint 3.6s ease-in-out infinite;
  }
  @keyframes hsSwipeHint {
    0%, 100% { opacity: 0.55; transform: translate(-50%, 0); }
    50%      { opacity: 1;    transform: translate(calc(-50% + 6px), 0); }
  }


  /* ═════════════════════════════════════════════════════════════════════
     HERO CHROME — rebuilt rhythm: CTA + scroll hint sit comfortably
     below the rail, above the safe-area inset.
     ═════════════════════════════════════════════════════════════════════ */
  .hero-chrome {
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    bottom: max(20px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 0 24px !important;
    z-index: 8;
  }
  .hero-enter {
    flex: none !important;
    min-width: 220px;
    max-width: 320px;
    width: 100%;
    justify-content: center !important;
    padding: 14px 24px !important;
    background: rgba(10, 9, 8, 0.42);
    border: 1px solid rgba(196, 167, 108, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.3s, border-color 0.3s;
  }
  .hero-enter:active {
    background: rgba(196, 167, 108, 0.18);
    border-color: var(--bronze-pale);
  }
  .hero-scroll {
    bottom: auto !important;
    opacity: 0.55;
  }
  .hero-scroll span:first-child {
    display: inline-block !important;
    font-family: var(--font-sc);
    font-size: 9px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(232, 226, 214, 0.55);
  }


  /* ═════════════════════════════════════════════════════════════════════
     QUICK-VIEW BOTTOM SHEET — premium polish
     ═════════════════════════════════════════════════════════════════════ */
  .hs-quick {
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55);
  }
  .hs-quick-thumb {
    border-radius: 2px;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
  }
  .hs-quick-name {
    letter-spacing: -0.005em;
  }


  /* ═════════════════════════════════════════════════════════════════════
     OTHER SECTIONS — premium polish on small screens
     ═════════════════════════════════════════════════════════════════════ */

  /* Section padding rhythm — .about + .andbold stay full-bleed (no
     padding); the others get consistent vertical breathing room. */
  .about,
  .andbold { padding: 0 !important; }
  .categories,
  .projects,
  .atelier,
  .contact { padding: clamp(72px, 12vh, 110px) 0 !important; }

  /* About: tighter line-height, comfortable reading width. */
  .about-bio { font-size: 16px; line-height: 1.74; }
  .about-bio p { margin-bottom: 18px; }

  /* Section kickers — never hyphenate awkwardly */
  .section-kicker > span:not(.sk-rule) {
    letter-spacing: 0.34em;
    font-size: 10px;
  }

  /* Categories cards — taller hero card on phones, no edge clipping. */
  .ch-card-num   { font-size: clamp(40px, 14vw, 64px); }
  .ch-card-title { font-size: clamp(22px, 6.5vw, 28px); }
  .ch-card-meta  { font-size: 11px; letter-spacing: 0.28em; }

  /* Atelier frame: stay portrait & not overflow. */
  .atelier-frame {
    aspect-ratio: 4 / 5;
    max-width: min(360px, 86vw);
  }

  /* Andbold: larger video aspect for impact, snug text padding. */
  .andbold-photo-col { aspect-ratio: 16 / 11; }
  .andbold-text-col  { padding: 56px 22px 72px !important; }

  /* Contact: tighter form gap. */
  .contact-form { gap: 14px; }

  /* Footer: equal columns kept for label, stack the brand mark gracefully. */
  .foot-bottom {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    text-align: center;
    font-size: 11px !important;
    padding-top: 24px;
  }
  .foot-brand-img {
    max-height: clamp(72px, 16vw, 120px);
    height: auto !important;
  }


  /* ═════════════════════════════════════════════════════════════════════
     PERFORMANCE & SAFETY ON PHONES
     ═════════════════════════════════════════════════════════════════════ */

  /* Kill the heaviest decorative animations on phones. */
  .about::after,
  .atelier-scan,
  .andbold::after,
  .contact::after,
  .categories-mesh,
  .foot::after { animation: none !important; }

  /* Reduce mix-blend usage on the hero atmos chapter overlay (mobile
     compositors hit this hard when ambient transitions). */
  .hero-atmos-chapter { mix-blend-mode: normal; opacity: 0; }

  /* Defensive: no horizontal scrolling, ever. */
  html, body, .hero, .about, .categories, .atelier, .andbold,
  .contact, .foot { overflow-x: clip !important; }
}

/* ── Mobile: unset aspect-ratio so explicit height governs width ────────
   The ≤900px blocks above set aspect-ratio on these photo columns.
   mobile.css applies an explicit height (110vw / 100vw, capped), so the
   browser calculates width = height × ratio — producing elements wider
   than the viewport. Unsetting lets the grid's 1fr track set the width. */
@media (max-width: 768px) {
  .about-photo-col   { aspect-ratio: unset; }
  .andbold-photo-col { aspect-ratio: unset; }
}


/* ── Very narrow phones (≤ 380px / iPhone SE width) ──────────────────── */
@media (max-width: 380px) {
  .hotspots { padding: 8px 12vw; scroll-padding-inline: 12vw; }
  .hotspot  { flex-basis: 72vw; min-width: 200px; padding: 16px 18px; min-height: 124px; }
  .hs-label-text { font-size: 22px !important; }
  .hero-enter { min-width: 0; padding: 13px 20px !important; }
  .ht-name { font-size: clamp(2.1rem, 14vw, 3.4rem) !important; }
}


/* ── Landscape phones (≤ 480px height) — chapter rail compresses ─────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .hero-title    { top: 22% !important; }
  .ht-name       { font-size: clamp(2rem, 8vh, 3rem) !important; }
  .hotspots      { padding-block: 4px; }
  .hotspot       { min-height: 96px; padding: 12px 16px; }
  .hs-label-text { font-size: 17px !important; -webkit-line-clamp: 1; }
  .hotspot::after { margin-top: 8px; }
  .hero-chrome   { gap: 8px !important; bottom: 12px !important; }
  .hero-enter    { padding: 10px 18px !important; min-height: 38px; }
}


/* ── Smooth scroll + softer reveals on phones (no JS class needed) ─────── */
@media (max-width: 900px) {
  html {
    scroll-behavior: smooth;
    /* Anchor links land below the fixed nav */
    scroll-padding-top: var(--nav-height, 76px);
  }
  /* Soften reveal travel on small viewports */
  .reveal {
    transform: translateY(16px);
    transition-duration: 0.6s !important;
  }
  .reveal[data-delay="1"] { transition-delay: 0.06s; }
  .reveal[data-delay="2"] { transition-delay: 0.14s; }
  .reveal[data-delay="3"] { transition-delay: 0.22s; }
  .reveal[data-delay="4"] { transition-delay: 0.30s; }
  .about-heading.reveal,
  .categories-heading.reveal,
  .atelier-heading.reveal,
  .andbold-heading.reveal,
  .contact-heading.reveal {
    transform: none;   /* opacity-only fade — never offset into lede */
  }
  .about-photo-col.reveal,
  .andbold-photo-col.reveal { transform: scale(1.02); }
}


/* ── Atelier frame: larger on phones so it feels premium, not thumbnail ── */
@media (max-width: 640px) {
  .atelier-frame {
    aspect-ratio: 4 / 5 !important;
    max-width: min(460px, 96vw) !important; /* was min(360px,86vw) — fill the screen */
    width: 100% !important;
  }
}


/* ── Andbold: more breathing room between heading and body on phones ───── */
@media (max-width: 640px) {
  .andbold-text-col { gap: clamp(28px, 4vh, 44px) !important; }
  /* push body text slightly further from the heading */
  .andbold-body { margin-top: 6px !important; }
}


/* ── Projects folder: phone redesign — image-first card, full-width CTA ── */
@media (max-width: 640px) {
  /* Side cards hidden entirely on phones — no peeking */
  .pr-card[data-state="left"],
  .pr-card[data-state="right"] {
    --op: 0 !important;
    --tx: 0px !important;
    --ty: 0px !important;
    pointer-events: none !important;
  }

  /* Fixed deck height — avoids the aspect-ratio × folder-width multiplication
     that makes the deck excessively tall on wide phones and tiny on narrow ones */
  .pr-deck {
    aspect-ratio: unset !important;
    height: clamp(390px, 105vw, 450px) !important;
  }

  /* Card: strip root padding so each region sets its own; flex ordering puts
     the image at the top without touching the HTML */
  .pr-card {
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 0 12px 12px 12px !important;
    overflow: hidden !important;
  }

  /* Image at top — 46% of card height (was 40%) for stronger visual impact */
  .pr-card__media {
    order: -10 !important;
    flex: 0 0 46% !important;
    min-height: 0 !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Tag + number strip, directly below the image */
  .pr-card__head {
    order: -9 !important;
    padding: 14px 20px 4px !important;
    border-bottom: none !important;
  }

  /* Project title — prominent, editorial */
  .pr-card__title {
    order: -8 !important;
    font-size: clamp(26px, 7.5vw, 36px) !important;
    line-height: 1.05 !important;
    padding: 4px 20px 0 !important;
    margin: 0 !important;
  }

  /* Description hidden — too cramped to be useful at phone widths */
  .pr-card__desc { display: none !important; }

  /* Footer pushed to the bottom of the card, full-width CTA */
  .pr-card__foot {
    order: -7 !important;
    margin-top: auto !important;
    padding: 12px 20px 18px !important;
    border-top: 1px solid rgba(176, 141, 87, 0.22) !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }
  .pr-card__hint { display: none !important; }
  .pr-card__cta {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 20px !important;
    font-size: 11px !important;
    letter-spacing: 0.34em !important;
    gap: 14px !important;
  }
}


/* ── Native-scroll mode: unlock section heights ───────────────────────
   html.has-slideshow is set statically in the HTML. slideshow.js v11
   now always adds .native-scroll (all viewports), so sections flow
   freely. scroll.css rules (height:100svh, overflow:hidden) are
   overridden here to let the page be one continuous scroll.
─────────────────────────────────────────────────────────────────────── */
html.has-slideshow.native-scroll .about,
html.has-slideshow.native-scroll .categories,
html.has-slideshow.native-scroll .projects,
html.has-slideshow.native-scroll .atelier,
html.has-slideshow.native-scroll .andbold,
html.has-slideshow.native-scroll .contact,
html.has-slideshow.native-scroll .foot {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  contain: none !important;
}

/* ── Native-scroll: consistent generous section padding on desktop ────
   Every section gets explicit top + bottom padding so the heading never
   touches the previous section's edge, and so the section sizes to its
   content (no forced 100svh empty bands). Horizontal padding via
   var(--page-gutter) so headings without their own inner gutter
   (e.g. .categories-header) don't kiss the viewport edge.
─────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  /* .about + .andbold are FULL-BLEED two-column grids — the photo / video
     column should kiss the previous + next section boundary. No top or
     bottom section padding (the inner text column carries its own gutter). */
  html.has-slideshow.native-scroll .about,
  html.has-slideshow.native-scroll .andbold {
    padding: 0 !important;
  }
  html.has-slideshow.native-scroll .projects {
    padding: clamp(80px, 11vh, 140px) 0 clamp(60px, 8vh, 100px) !important;
  }
  html.has-slideshow.native-scroll .categories {
    padding: clamp(80px, 11vh, 140px) var(--page-gutter) clamp(48px, 7vh, 80px) !important;
  }
  html.has-slideshow.native-scroll .atelier,
  html.has-slideshow.native-scroll .contact {
    padding: clamp(90px, 13vh, 160px) 0 clamp(80px, 11vh, 130px) !important;
  }
}

/* ── Native-scroll: mobile / narrow-viewport section padding ──────────
   Below 769px sections stack to a single column. Keep enough top padding
   that the heading clears the previous section visually, but trim the
   numbers so the page doesn't feel airy on tall phones. Horizontal
   padding handled by inner grids (.atelier-grid / .contact-grid /
   .about-text-col / .andbold-text-col); .categories-header has no inner
   gutter so we give it one here.
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Full-bleed sections — no top/bottom padding (inner text column has its
     own gutter; categories/projects/atelier/contact keep their padding). */
  html.has-slideshow.native-scroll .about,
  html.has-slideshow.native-scroll .andbold {
    padding: 0 !important;
  }
  html.has-slideshow.native-scroll .projects,
  html.has-slideshow.native-scroll .atelier,
  html.has-slideshow.native-scroll .contact {
    padding: clamp(48px, 8vh, 80px) 0 clamp(40px, 6vh, 64px) !important;
  }
  html.has-slideshow.native-scroll .categories {
    padding: clamp(48px, 8vh, 80px) var(--page-gutter) clamp(40px, 6vh, 64px) !important;
  }
}

/* ── Native-scroll: tablet (769–960px) — andbold and about/atelier/contact
   collapse to single column at their own breakpoints. Ensure the photo /
   image columns retain a usable aspect ratio rather than stretching to
   100svh. ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  html.has-slideshow.native-scroll .andbold-grid {
    min-height: auto !important;
    height: auto !important;
  }
  html.has-slideshow.native-scroll .about-grid {
    min-height: auto !important;
    height: auto !important;
  }
}

/* ── Native-scroll: fix categories card grid on desktop ──────────────
   scroll.css sets ch-grid to flex:1 1 auto so it expands in a 100svh
   flex container. With height:auto that makes the grid collapse to 0.
   Also restore card aspect-ratios (stripped for the 100svh layout).
─────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  html.has-slideshow.native-scroll .ch-grid {
    flex: 0 0 auto !important;
    grid-template-rows: auto !important;
    height: auto !important;
  }
  html.has-slideshow.native-scroll .ch-card,
  html.has-slideshow.native-scroll .ch-card--counter {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html.has-slideshow.native-scroll .ch-card--hero {
    grid-column: 1 / -1 !important;
    aspect-ratio: 21 / 8 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}