@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
DESIGN DNA — RoamWithAdi
Direction:    The Expedition Cut (INVENTED — the 24-direction library's only
              photographic-travel entry, Golden Hour Doc, is spent on Kiran
              Furniture). A documentary in the edit: dark graded REELS
              alternating with warm ivory TITLE CARDS, chapters numbered
              throughout, film grain over everything, metadata set in mono
              like a slate.
Palette:      basalt #16191E · ink-deep #0E1013 · ivory #F4F0E7 ·
              pine #3E4A3B / #8FA383 · signal gold #F2B02A
Type:         Bricolage Grotesque (display) / Schibsted Grotesk (body) /
              DM Mono (slate metadata only) / Caveat (wordmark + 2-3 words)
Hero pattern: The Opening Shot (INVENTED)
Signature:    The Chapter Slate — section heading, divider and 01-06 rail,
              all one device. There is never a second decorative system.
Corners:      ASYMMETRIC — 24px top-left + bottom-right, 0 top-right +
              bottom-left, on all media/cards/panels/inputs/buttons.
              Perfect circles ONLY on icon controls (play, arrows, to-top).
First-timers: (1) THE LIQUID SEAM — a dark/ivory ground boundary whose SVG
              control points are recomputed per frame from scroll velocity,
              so the seam flexes and settles as it passes.
              (2) PINNED VERTICAL->HORIZONTAL SCROLL — the Destinations reel
              pins and converts vertical scroll into horizontal card travel,
              releasing after the last card.
Banned here:  Cormorant Garamond + DM Sans and antique-metallic gold (Noor
              Noir) · Golden Hour Doc + full-bleed centred hero (Kiran) ·
              every spent display face · the 0px / 16px / flat-pill / arched
              / 32px / 8px-media-only corner languages · The Milestone, The
              Bean Ticker, The Supply Line, The Elevation Datum, figure-plate
              registration corners.
═══════════════════════════════════════════════════════════════════════════

FILE SCOPE — style.css (agent A11)
  Tokens · ground channel · reset · base typography · layout · the Chapter
  Slate · the Liquid Seam (STATIC/resting) · masthead · every section's
  structure and colour AT THE MOBILE-FIRST BASE SIZE (360px first).

  There is NOT ONE `@media (min-width:…)` in this file — every breakpoint
  lives in responsive.css (A13).
  There is NOT ONE keyframe, transition or animation in this file — all
  motion lives in effects.css (A12).
═══════════════════════════════════════════════════════════════════════════ */


/* ══ 1. TOKENS — the frozen contract, spec §2 ═══════════════════════════ */

:root{
  /* ── grounds ───────────────────────────────────────────── */
  --basalt:        #16191E;  /* THE dark ground (reels)            */
  --basalt-up:     #1F242A;  /* raised surface on dark             */
  --ink-deep:      #0E1013;  /* footer, overlay floor              */
  --ivory:         #F4F0E7;  /* THE light ground (title cards)     */
  --ivory-up:      #EAE4D7;  /* raised surface on ivory            */

  /* ── type ──────────────────────────────────────────────── */
  --ink:           #1A1C18;  /* type on ivory        15.8:1        */
  --ink-muted:     #6E6A5E;  /* muted on ivory        4.75:1       */
  --on-dark:       #F4F0E7;  /* type on basalt       16.1:1        */
  --on-dark-muted: #A8A79E;  /* muted on basalt       7.6:1        */

  /* ── colour ────────────────────────────────────────────── */
  --summit:        #F2B02A;  /* signal gold. 9.6:1 on basalt.
                                1.7:1 on ivory — GRAPHIC ONLY there */
  --summit-type:   #8A5E06;  /* the ONLY gold that may carry type
                                on ivory. 5.0:1. Never on basalt.   */
  --pine:          #3E4A3B;  /* green for type on ivory  8.2:1     */
  --pine-lite:     #8FA383;  /* green for type on basalt 6.7:1     */

  /* ── hairlines ─────────────────────────────────────────── */
  --line-dark:     rgba(244,240,231,.16);  /* on basalt */
  --line-ivory:    rgba(26,28,24,.14);     /* on ivory  */

  /* ── the two-ground inherited channel ──────────────────── */
  /* Declared on .ground-dark / .ground-ivory. EVERY component
     reads these, never --basalt/--ivory directly, so the same
     card markup is correct on either ground with no override. */
  --ground:        var(--basalt);
  --ground-up:     var(--basalt-up);
  --ground-fg:     var(--on-dark);
  --ground-muted:  var(--on-dark-muted);
  --ground-line:   var(--line-dark);
  --ground-accent: var(--summit);      /* gold that may carry TYPE here */
  --ground-green:  var(--pine-lite);

  /* ── type system ───────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --font-body:    'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;
  --font-script:  'Caveat', cursive;

  --text-xs:   clamp(.6875rem, .8vw,  .75rem);
  --text-sm:   clamp(.8125rem, 1.1vw, .9375rem);
  --text-base: clamp(1rem,     1.3vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 2vw,   1.375rem);
  --text-xl:   clamp(1.5rem,   3vw,   2.125rem);
  --text-2xl:  clamp(2rem,     4.5vw, 3.25rem);
  --text-3xl:  clamp(2.5rem,   6vw,   4.5rem);
  /* Measured at a true 360px viewport: the widest hero line renders 281px
     inside a 320px content box, so the 3rem floor fits with room to spare
     and the phone keeps a full-strength headline. (Do not trust a headless
     screenshot to judge this — Chrome enforces a minimum window width, so a
     360px capture shows a wider layout cropped, and the headline only LOOKS
     like it overflows. Measure scrollWidth in a real 360px frame instead.) */
  --text-hero: clamp(3rem,     9.5vw, 8.5rem);

  /* ── space · shape · motion ────────────────────────────── */
  --space-xs:.5rem; --space-sm:1rem; --space-md:2rem;
  --space-lg:4rem;  --space-xl:7rem;

  /* THE CORNER LANGUAGE — asymmetric, one diagonal only. */
  --corner:      24px 0 24px 0;   /* media, cards, panels          */
  --corner-sm:   14px 0 14px 0;   /* inputs, buttons, chips        */
  --corner-lg:   40px 0 40px 0;   /* the big hero/newsletter media */
  --radius-full: 9999px;          /* ICON CONTROLS ONLY            */

  /* ONE shadow token. Cast downward and soft, like a lit frame. */
  --shadow: 0 26px 60px rgba(9,11,14,.38);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur:       .6s;
  --dur-fast:  .28s;

  --container: 1280px;
  --gutter:    1.25rem;  /* 2rem @768 · 3rem @1024 · 4.5rem @1440 */
  --rail:      3.25rem;  /* width of the chapter rail, desktop only */
}

/* ══ 2. THE GROUND CHANNEL ══════════════════════════════════════════════
   A component NEVER reads --basalt or --ivory. It reads --ground*,
   so the same card markup is correct on either ground with no override.
   This is also what makes the contrast rule structural: on ivory,
   --ground-accent is the only gold that may carry TYPE.                  */

.ground-ivory{
  --ground: var(--ivory);      --ground-up: var(--ivory-up);
  --ground-fg: var(--ink);     --ground-muted: var(--ink-muted);
  --ground-line: var(--line-ivory);
  --ground-accent: var(--summit-type);   /* gold that may carry TYPE */
  --ground-green: var(--pine);
}
.ground-dark{ /* re-asserts the :root defaults, for nested use */
  --ground: var(--basalt);     --ground-up: var(--basalt-up);
  --ground-fg: var(--on-dark); --ground-muted: var(--on-dark-muted);
  --ground-line: var(--line-dark);
  --ground-accent: var(--summit);
  --ground-green: var(--pine-lite);
}

/* Any element carrying a ground class paints itself with it. */
.ground-dark,
.ground-ivory{ background-color: var(--ground); color: var(--ground-fg); }


/* ══ 3. RESET ═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after{ box-sizing: border-box; }

html{
  /* Lenis owns scrolling. Native smooth scroll would fight it, and with JS
     off an instant jump is the honest behaviour. Never turn this on. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* fixed masthead clearance for #anchor jumps */
  scroll-padding-top: 5.5rem;
}

body{
  margin: 0;
  min-height: 100vh;
  background-color: var(--basalt);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
p,figure,blockquote,dl,dd,ul,ol{ margin: 0; }

ul,ol{ padding: 0; }
ul[class],ol[class]{ list-style: none; }

img,svg,video,canvas,picture{ display: block; max-width: 100%; }
img{ height: auto; }

a{ color: inherit; text-decoration: none; }

input,button,textarea,select{ font: inherit; color: inherit; margin: 0; }
button{ background: none; border: 0; padding: 0; cursor: pointer; }
textarea{ resize: vertical; }

table{ border-collapse: collapse; }

h1,h2,h3,h4,h5,h6,p,li,figcaption{ overflow-wrap: break-word; }

main{ display: block; }

/* Focus — the DNA's own ring, never the UA default. --ground-accent means
   the ring is 9.6:1 gold on basalt and 5.0:1 deep gold on ivory. */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--ground-accent);
  outline-offset: 3px;
}

::selection{ background-color: var(--summit); color: var(--ink); }

::placeholder{ color: var(--ground-muted); opacity: 1; }


/* ══ 4. BASE TYPOGRAPHY ═════════════════════════════════════════════════
   Oversized editorial display type gets tuned NEGATIVE tracking — untuned
   tracking on large display type is on this repo's ban list.              */

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}

h1{ font-size: var(--text-3xl); letter-spacing: -.042em; line-height: .96; }
h2{ font-size: var(--text-2xl); letter-spacing: -.036em; line-height: 1;   }
h3{ font-size: var(--text-xl);  letter-spacing: -.026em; line-height: 1.06;}
h4{ font-size: var(--text-lg);  letter-spacing: -.018em; line-height: 1.15;}
h5,h6{ font-size: var(--text-base); letter-spacing: -.01em; }

strong,b{ font-weight: 700; }

/* DM Mono — the slate voice. Metadata only, never prose. */
.mono{
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Caveat — the wordmark and two or three words, nowhere else. */
.script{
  font-family: var(--font-script);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: 0;
  line-height: 1;
  color: var(--ground-accent);
}

/* Tracked, uppercase, mono. The negative margin-right cancels the trailing
   letter-space so a CENTRED eyebrow is optically centred, not shifted left. */
.eyebrow{
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ground-accent);
  margin-right: -.2em;
}


/* ══ 5. LAYOUT + UTILITIES ══════════════════════════════════════════════ */

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* DEFINED. A past build emitted .sr-only and never defined it, so every
   screen-reader label rendered visibly. This must never be deleted. */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link{
  position: fixed;
  top: .75rem;
  left: -200vw;
  z-index: 200;
  padding: .75rem 1.15rem;
  background-color: var(--summit);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--corner-sm);
}
.skip-link:focus,
.skip-link:focus-visible{ left: .75rem; }

/* Honeypot. Off-screen, NEVER display:none — a hidden-by-display field is
   skipped by some autofill engines and the trap stops working. */
.hp{
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Content sitting over a section's background media. */
.hero-inner,
.dest-head,
.dest-pin,
.dest-foot,
.blog-lead,
.blog-cards,
.news-inner,
.page-head-inner,
.dest > .container,
.blog > .container,
.news > .container{ position: relative; z-index: 2; }


/* ══ 6. MEDIA — .frame and THE ONE GRADE RULE ═══════════════════════════ */

.frame{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--corner);
  background-color: var(--ground-up);
}
.frame > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* THE ONE TREATMENT, sitewide. No duotone, no sepia, nothing else. */
  filter: saturate(.92) contrast(1.06);
}
.frame--lg{ border-radius: var(--corner-lg); }
.frame--sm{ border-radius: var(--corner-sm); }


/* ══ 7. BUTTONS ═════════════════════════════════════════════════════════ */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.5rem;
  /* The padding alone lands at ~43.4px — a rounding error below the 44px
     touch floor. Stated outright so it cannot drift when the padding or the
     type scale is next tuned. */
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--corner-sm);
  background-color: transparent;
  color: var(--ground-fg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}
.btn svg{ width: 1rem; height: 1rem; flex: none; }

.btn--primary{
  background-color: var(--summit);
  border-color: var(--summit);
  color: var(--ink);
}

.btn--ghost{
  background-color: transparent;
  border-color: var(--ground-line);
  color: var(--ground-fg);
}

/* The ONLY perfect circles on this site. */
.btn-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--ground-line);
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--ground-fg);
  cursor: pointer;
}
.btn-icon svg{
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-icon--gold{
  background-color: var(--summit);
  border-color: var(--summit);
  color: var(--ink);
}


/* ══ 8. THE CHAPTER SLATE — THE SIGNATURE ═══════════════════════════════
   Emitted only by slate(). Section heading, divider and chapter marker in
   one device. There is never a second decorative system on this site.     */

.slate{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .85rem;
  row-gap: .55rem;
  margin-bottom: var(--space-md);
}

.slate-no{
  grid-column: 1;
  display: inline-block;
  color: var(--ground-accent);
  letter-spacing: .22em;
  margin-right: -.22em;
}

/* The clapper stripe — a GRAPHIC, so full-strength gold is correct on
   either ground. */
.slate-tick{
  grid-column: 2;
  justify-self: start;
  display: block;
  width: 3.25rem;
  height: .625rem;
  background-image: repeating-linear-gradient(
    118deg,
    var(--summit) 0 5px,
    transparent 5px 11px
  );
}

.slate-title{
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: var(--text-2xl);
  line-height: .98;
  letter-spacing: -.038em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ground-fg);
  max-width: 22ch;
  margin-top: .15rem;
}

.slate-rule{
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 2px;
  margin-top: .55rem;
  background-image: linear-gradient(
    90deg,
    var(--summit) 0 3.5rem,
    var(--ground-line) 3.5rem
  );
}

.slate-meta{
  grid-column: 1 / -1;
  display: inline-block;
  color: var(--ground-muted);
  letter-spacing: .18em;
  margin-right: -.18em;
}

/* Centred variant — optical centring, not text-indent. */
.slate--center{
  grid-template-columns: auto auto;
  justify-content: center;
  justify-items: center;
  text-align: center;
}
.slate--center .slate-title{ max-width: 24ch; }
.slate--center .slate-rule{
  width: 8rem;
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--summit) 35% 65%,
    transparent
  );
}


/* ══ 9. THE LIQUID SEAM — FIRST-TIMER #1 (static/resting state) ══════════
   The `d` in the markup is the RESTING curve and it is complete on its
   own: with JS off, with the CDN blocked, or under reduced motion the
   seam simply sits at the section's bottom edge, full-bleed, and the page
   reads correctly. animations.js only rewrites `d` from scroll velocity.

   Placement is defensive on purpose: pinned to the bottom edge when the
   seam is the last child of a section (the intended use), and in normal
   flow when it is dropped between sections instead.                       */

.seam{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;      /* kill the sub-pixel hairline at the join */
  z-index: 3;
  height: 120px;
  line-height: 0;
  pointer-events: none;
}
main > .seam,
body > .seam,
.seam--flow{
  position: relative;
  bottom: auto;
  display: block;
  width: 100%;
  margin-bottom: -1px;
}

.seam-svg{
  display: block;
  width: 100%;
  height: 100%;
}

/* The path is filled with the ground being scrolled INTO, so the seam
   reads as the next section rising over the last one. */
.seam-path{ fill: var(--ivory); }
.seam--to-ivory .seam-path{ fill: var(--ivory); }
.seam--to-dark  .seam-path{ fill: var(--basalt); }


/* ══ 10. MASTHEAD ═══════════════════════════════════════════════════════ */

.masthead{
  /* always a dark surface: transparent over the hero, dark glass when stuck */
  --ground: var(--ink-deep);
  --ground-up: var(--basalt-up);
  --ground-fg: var(--on-dark);
  --ground-muted: var(--on-dark-muted);
  --ground-line: var(--line-dark);
  --ground-accent: var(--summit);
  --ground-green: var(--pine-lite);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background-color: transparent;
  color: var(--on-dark);
  border-bottom: 1px solid transparent;
}

/* Solid fallback FIRST, so a browser without backdrop-filter still gets an
   opaque, readable bar rather than type floating on a photograph. */
.masthead.is-stuck{
  background-color: var(--ink-deep);
  border-bottom-color: var(--line-dark);
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))){
  .masthead.is-stuck{
    /* the ONE alpha value in this file: --ink-deep at 78%. There is no
       translucent token in the contract and the solid var(--ink-deep)
       above is the fallback, so nothing depends on this line. */
    background-color: rgba(14,16,19,.78);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
  }
}

.mast-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-sm);
  row-gap: var(--space-xs);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: .8rem;
  min-height: 4.5rem;
}

.wordmark{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--on-dark);
}
.wordmark-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--summit);
}
.wordmark-mark svg{ width: 1.5rem; height: 1.5rem; }
.wordmark-mark:empty{
  width: .625rem;
  height: .625rem;
  background-color: var(--summit);
  border-radius: var(--corner-sm);
}

/* ── NO-JS NAV DIRECTION ────────────────────────────────────────────────
   .nav-panel is OPEN AND IN FLOW by default. .nav-toggle is display:none
   by default. ONLY html.is-js collapses the panel and reveals the toggle.
   Written in this direction on purpose: a site here once shipped a menu
   with no way to open it by writing it the other way round.               */

.nav{ width: 100%; }
.mast-inner > .nav,
.mast-inner > .nav-panel{ flex: 1 0 100%; }

.nav-panel{
  display: block;
  width: 100%;
}

.nav-list{
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-item{ display: block; }

.nav-link{
  display: inline-block;
  padding: .55rem 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  border-bottom: 2px solid transparent;
}
.nav-link.is-current{
  color: var(--on-dark);
  border-bottom-color: var(--summit);
}

/* OFF below 768. The masthead bar holds the wordmark, this button and the
   menu toggle on one line; at 360px that is ~140 + ~180 + 44px against a
   320px content box, and the button ran off the right edge taking the toggle
   with it — the menu became unreachable on a phone, which is the exact
   failure mode this repo has shipped before and now checks for.
   Nothing is lost: CONTACT is a full-width row inside the menu itself, and
   "Work with me" also closes the footer's Collaborate column on every page.
   responsive.css brings the button back at 768 where the bar has room. */
.nav-cta{
  display: none;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-sm);
  padding: .85rem 1.35rem;
  border: 1px solid var(--summit);
  border-radius: var(--corner-sm);
  background-color: var(--summit);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}

.nav-toggle{
  display: none;             /* revealed ONLY under html.is-js */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--line-dark);
  border-radius: var(--corner-sm);
  background-color: transparent;
  color: var(--on-dark);
}
.nav-toggle-bar{
  display: block;
  width: 1.15rem;
  height: 2px;
  background-color: currentColor;
}

/* The ONLY thing that collapses the menu: JavaScript being present. */
html.is-js .nav-toggle{ display: inline-flex; }

html.is-js .mast-inner > .nav,
html.is-js .mast-inner > .nav-panel{ flex: 0 0 auto; width: auto; }

html.is-js .nav-panel{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 55;              /* under the masthead, so the toggle stays live */
  width: min(86vw, 21rem);
  padding: 6rem var(--gutter) var(--space-lg);
  background-color: var(--ink-deep);
  border-left: 1px solid var(--line-dark);
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(100%);
}
html.is-js .nav-panel.is-open{
  visibility: visible;
  transform: translateX(0);
}
html.is-js .nav-list{ gap: .35rem; }
html.is-js .nav-link{ font-size: var(--text-lg); letter-spacing: .1em; }


/* ══ 11. THE CHAPTER RAIL ═══════════════════════════════════════════════
   Not displayed at the base size — responsive.css switches it on at
   1024px+ (display:flex). It carries its own dark chip so it stays legible
   as it passes over both grounds.                                         */

.chapter-rail{
  display: none;
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  width: var(--rail);
  padding: var(--space-sm) 0;
  transform: translateY(-50%);
  background-color: var(--ink-deep);
  border: 1px solid var(--line-dark);
  border-right: 0;
  border-radius: var(--corner);
  color: var(--on-dark-muted);
}
.chapter-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  color: var(--on-dark-muted);
}
.chapter-no{
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .625rem;
  letter-spacing: .1em;
  line-height: 1;
}
.chapter-dot{
  display: block;
  width: 6px;
  height: 6px;
  background-color: currentColor;
  border-radius: var(--corner-sm);
}
.chapter-link.is-active{ color: var(--summit); }
.chapter-link.is-active .chapter-dot{ background-color: var(--summit); }


/* ══ 12. SECTION SHELLS ═════════════════════════════════════════════════
   Every section paints from the ground channel and clears room at the
   bottom for the 120px liquid seam.                                       */

.hero,
.story,
.dest,
.videos,
.blog,
.news,
.page-head{
  position: relative;
  background-color: var(--ground);
  color: var(--ground-fg);
}

.story,
.dest,
.videos,
.blog,
.news{
  padding-top: var(--space-xl);
  padding-bottom: calc(var(--space-xl) + 4rem);   /* seam clearance */
  overflow: hidden;
}


/* ══ 13. HERO — "The Opening Shot" ══════════════════════════════════════ */

.hero{
  /* scroll-driven properties written by animations.js. 0 / 0 is the
     CORRECT STATIC STATE — the hero is complete with no JS. */
  --dolly: 0;
  --rise: 0;

  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(4.5rem + var(--space-lg));
  padding-bottom: calc(var(--space-lg) + 4rem);   /* seam clearance */
  overflow: hidden;
  isolation: isolate;
}

.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-photo,
.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(.92) contrast(1.06);
}

/* Token-only veil. Three gradients: a top scrim under the masthead, the
   basalt floor the copy sits on, and a left wash so the type never fights
   the photograph. No stray colours — every stop is a palette token. */
.hero-veil{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(180deg, var(--ink-deep) -30%, transparent 52%),
    linear-gradient(0deg,   var(--basalt) 6%,     transparent 64%),
    linear-gradient(90deg,  var(--ink-deep) -20%, transparent 70%);
}

.hero-inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero-eyebrow{
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--summit);
  margin-right: -.22em;
}

.hero-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: var(--text-hero);
  line-height: .86;
  letter-spacing: -.048em;      /* oversized display type is TUNED */
  text-transform: uppercase;
  color: var(--on-dark);
  margin: 0;
}
.hero-line{ display: block; }
.hero-accent{ color: var(--summit); }   /* 9.6:1 on basalt */

.hero-sub{
  max-width: 34ch;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--on-dark-muted);
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

/* ── Hero furniture: the social rail and the scroll cue ──────────────────
   BOTH ARE PINNED, NOT IN FLOW, AND BOTH ARE OFF BELOW 1024.

   .hero is `display:flex; align-items:flex-end` with no wrap, so anything
   left in flow becomes a third flex item on the same line as .container —
   and .container carries the entire headline. At 360px the rail (~132px) and
   the cue (~230px) ate most of the line and crushed the headline into what
   was left; `.hero{overflow:hidden}` meant it clipped silently rather than
   scrolling sideways, which is the worst way for a layout bug to fail.

   Taking them out of flow fixes that at every width AND is what the design
   actually wants: the rail down the left edge, the cue in the bottom-right
   corner, the headline owning the middle. responsive.css switches them on at
   1024 (where there is room), exactly as it does for .hero-compass.

   Hiding the rail on small screens costs nothing: SOCIALS renders again in
   the footer on every page, so no link becomes unreachable — this is
   duplicate navigation, not the only route to it. */
.hero-social{
  display: none;
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.hero-scroll{
  display: none;
  position: absolute;
  right: var(--gutter);
  /* clears the 120px seam, matching .hero's own bottom padding */
  bottom: calc(var(--space-lg) + 4rem);
  z-index: 3;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.hero-scroll::after{
  content: "";
  display: block;
  width: 2.75rem;
  height: 1px;
  background-color: var(--summit);
}

/* The compass — a grace note. Not displayed at the base size;
   responsive.css switches it on at 1024px+ (display:block). */
.hero-compass{
  /* Written by main.js as UNITLESS NUMBERS OF DEGREES — effects.css does the
     `calc(… * 1deg)`. Declaring these with a unit here would poison that
     multiplication (0deg * 1deg is an invalid length, and the whole transform
     would be dropped), so they are bare numbers. 0/0 is the static truth. */
  --tilt-x: 0;
  --tilt-y: 0;
  display: none;
  position: absolute;
  right: var(--gutter);
  top: 24%;
  z-index: 2;
  width: 9.5rem;
  aspect-ratio: 1 / 1;
}
.hero-compass-svg{
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cmp-ring{
  fill: none;
  stroke: var(--line-dark);
  stroke-width: 1;
}
.cmp-ring--in{ stroke: var(--line-dark); }
.cmp-tick{
  stroke: var(--on-dark-muted);
  stroke-width: 1;
  opacity: .55;
}
.cmp-tick--long{ stroke: var(--summit); opacity: 1; }
.cmp-needle-n{ fill: var(--summit); }
.cmp-needle-s{ fill: var(--pine-lite); }
.cmp-hub{ fill: var(--ink-deep); stroke: var(--summit); stroke-width: 1.5; }
.cmp-n{
  fill: var(--on-dark-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
}


/* ══ 14. SOCIAL ICONS (hero rail + footer, one definition) ══════════════ */

/* 2.75rem, not 2.35rem: at a 16px root the smaller value is a 37.6px target,
   under the 44px floor this studio holds everywhere. These are the footer's
   only social links on a phone, which is precisely where the floor matters. */
.social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--ground-line);
  border-radius: var(--corner-sm);
  color: var(--ground-fg);
}
.ico{
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico .ico-fill,
.ico .ico-dot{ fill: currentColor; stroke: none; }


/* ══ 15. STORY (CH. 02) ═════════════════════════════════════════════════ */

.story-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.story-collage{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  align-items: start;
}

.collage-main{
  position: relative;
  grid-column: 1 / -1;
  border-radius: var(--corner);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.collage-main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.06);
}

/* The polaroid — a mounted print, so it gets the raised ground as a mount. */
.collage-polaroid{
  position: relative;
  grid-column: 1;
  padding: .5rem;
  background-color: var(--ground-up);
  border: 1px solid var(--ground-line);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
}

.collage-postcard{
  position: relative;
  grid-column: 2;
  border-radius: var(--corner);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Gold TYPE — so it reads --ground-accent, never --summit. */
.collage-stamp{
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 3;
  padding: .4rem .6rem;
  background-color: var(--ground);
  border: 1px solid var(--summit);
  border-radius: var(--corner-sm);
  color: var(--ground-accent);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
}

.collage-play{
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  border-radius: var(--radius-full);   /* icon control — a circle is correct */
  background-color: var(--summit);
  color: var(--ink);
}
.collage-play svg{ width: 1.1rem; height: 1.1rem; }

.story-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.story-text{
  max-width: 48ch;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ground-muted);
}


/* ══ 16. DESTINATIONS (CH. 03) — FIRST-TIMER #2 ═════════════════════════
   THE DEFAULT IS THE NATIVE ROW. .dest-rail is an overflow-x:auto,
   scroll-snap flex row and .dest-track carries NO transform. Pinning is a
   JS enhancement that responsive.css/animations.js layer on at 1024px+;
   it is never a requirement for the section to work.                      */

.dest-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: .3;
}
.dest-bg-img,
.dest-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.06);
}

.dest-head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-bottom: var(--space-md);
}

.dest-pin{ position: relative; }     /* no pinning at the base size */
.dest-track{ position: relative; }   /* no transform at the base size */

.dest-rail{
  display: flex;
  gap: var(--space-sm);
  margin: 0;
  padding: 0 var(--gutter) var(--space-sm);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--summit) transparent;
}
.dest-rail::-webkit-scrollbar{ height: 4px; }
.dest-rail::-webkit-scrollbar-track{ background-color: transparent; }
.dest-rail::-webkit-scrollbar-thumb{ background-color: var(--summit); }

.dest-card{
  position: relative;
  flex: 0 0 78%;
  max-width: 21rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  scroll-snap-align: start;
  color: var(--ground-fg);
}

.dest-card-media{
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--corner);
  overflow: hidden;
  background-color: var(--ground-up);
}
.dest-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.06);
}

.dest-card-body{
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 0 3rem .85rem 0;
  border-bottom: 1px solid var(--ground-line);
}

.dest-name{
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: var(--text-lg);
  line-height: 1.05;
  letter-spacing: -.024em;
  text-transform: uppercase;
  color: var(--ground-fg);
}
.dest-say{
  font-size: var(--text-sm);
  color: var(--ground-muted);
}

.dest-arrow{
  position: absolute;
  right: 0;
  bottom: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--summit);
}
.dest-arrow svg{
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dest-controls{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-top: var(--space-sm);
}
.dest-prev,
.dest-next{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--ground-line);
  border-radius: var(--radius-full);   /* icon control */
  background-color: transparent;
  color: var(--ground-fg);
}
.dest-prev svg,
.dest-next svg{
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dest-foot{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-top: var(--space-md);
}


/* ══ 17. VIDEOS (CH. 04) ════════════════════════════════════════════════ */

.video-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.video-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  color: var(--ground-fg);
}

.video-media{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--corner);
  overflow: hidden;
  background-color: var(--ground-up);
}
.video-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.06);
}

.video-play{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  border-radius: var(--radius-full);   /* icon control */
  background-color: var(--summit);
  color: var(--ink);
}
.video-play svg{ width: 1.1rem; height: 1.1rem; }

.video-dur{
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 2;
  padding: .3rem .55rem;
  background-color: var(--ink-deep);
  color: var(--on-dark);
  border-radius: var(--corner-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .1em;
  line-height: 1;
}

.video-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: var(--text-xl);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ground-fg);
}
.video-say{
  font-size: var(--text-sm);
  color: var(--ground-muted);
}


/* ══ 18. BLOG (CH. 05) ══════════════════════════════════════════════════
   .blog-bg is styled to work whether the markup makes it the image element
   itself or a wrapper around one.                                          */

.blog-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  opacity: .24;
  filter: saturate(.92) contrast(1.06);
}
.blog-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-lead{
  max-width: 52ch;
  margin-bottom: var(--space-lg);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ground-muted);
}

.blog-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* .post-card--left / --below / --right name the ENTRANCE direction only;
   effects.css owns their motion. They are visually identical at rest. */
.post-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  color: var(--ground-fg);
}

.post-media{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--corner);
  overflow: hidden;
  background-color: var(--ground-up);
}
.post-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.06);
}

.post-cat{
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ground-accent);
  margin-right: -.18em;
}
.post-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: var(--text-xl);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ground-fg);
}
.post-date{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ground-muted);
}


/* ══ 19. NEWSLETTER (CH. 06) ════════════════════════════════════════════ */

.news-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: .42;
}
.news-bg-img,
.news-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.06);
}

.news-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--ground-line);
  border-radius: var(--corner-lg);        /* the big newsletter panel */
  background-image: linear-gradient(180deg, var(--ink-deep) 12%, transparent);
  background-color: transparent;
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  .news-inner{
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.news-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}

.news-form{
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.news-field{
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.news-input{
  width: 100%;
  padding: .95rem 1.05rem;
  background-color: var(--ground-up);
  color: var(--ground-fg);
  border: 1px solid var(--ground-line);
  border-radius: var(--corner-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.3;
}
.news-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.5rem;
  border: 1px solid var(--summit);
  border-radius: var(--corner-sm);
  background-color: var(--summit);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}
.news-note{
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ground-muted);
}


/* ══ 20. FOOTER ═════════════════════════════════════════════════════════ */

.site-foot{
  --ground: var(--ink-deep);
  --ground-up: var(--basalt-up);
  --ground-fg: var(--on-dark);
  --ground-muted: var(--on-dark-muted);
  --ground-line: var(--line-dark);
  --ground-accent: var(--summit);
  --ground-green: var(--pine-lite);

  position: relative;
  background-color: var(--ink-deep);
  color: var(--on-dark);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-md);
}

.foot-top{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.foot-brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
}
.foot-say{
  max-width: 34ch;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--on-dark-muted);
}
.foot-social{
  display: flex;
  align-items: center;
  gap: .6rem;
}

.foot-cols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.foot-col{
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.foot-col-head{
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ground-accent);
  margin-right: -.18em;
}
.foot-links{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-links a{
  font-size: var(--text-sm);
  color: var(--on-dark-muted);
}

.foot-base{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-dark);
}
.foot-legal{
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  color: var(--on-dark-muted);
}

.to-top{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-full);   /* icon control */
  background-color: transparent;
  color: var(--on-dark);
}
.to-top svg{
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ══ 21. INNER-PAGE HEADER BAND ═════════════════════════════════════════
   Always a dark reel, so the fixed transparent masthead is legible over
   the top of every inner page.                                            */

.page-head{
  --ground: var(--ink-deep);
  --ground-up: var(--basalt-up);
  --ground-fg: var(--on-dark);
  --ground-muted: var(--on-dark-muted);
  --ground-line: var(--line-dark);
  --ground-accent: var(--summit);
  --ground-green: var(--pine-lite);

  background-color: var(--ink-deep);
  color: var(--on-dark);
  padding-top: calc(4.5rem + var(--space-lg));
  padding-bottom: calc(var(--space-lg) + 4rem);   /* seam clearance */
  overflow: hidden;
}

.page-head-inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.crumb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.crumb a{ color: var(--on-dark-muted); }
.crumb [aria-current]{ color: var(--summit); }


/* ══ 22. GEAR ═══════════════════════════════════════════════════════════ */

.gear-list{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gear-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: .3rem;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--ground-line);
}

.gear-role{
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ground-accent);
  margin-right: -.18em;
}
.gear-item{
  font-family: var(--font-display);
  font-weight: 700;
  font-optical-sizing: auto;
  font-size: var(--text-lg);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ground-fg);
}
.gear-note{
  max-width: 58ch;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ground-muted);
}


/* ══ 23. ABOUT ══════════════════════════════════════════════════════════ */

.bio-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.bio-media{
  position: relative;
  border-radius: var(--corner);
  overflow: hidden;
  background-color: var(--ground-up);
  box-shadow: var(--shadow);
}
.bio-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.06);
}

.bio-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.bio-copy p{
  max-width: 56ch;
  color: var(--ground-muted);
  line-height: 1.65;
}

.stat-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-sm);
  width: 100%;
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ground-line);
}
.stat{
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.stat-no{
  font-family: var(--font-display);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--ground-fg);
}

/* Three of the four stats are numerals; the fourth is "Mumbai, India". At
   --text-2xl a place name reads as a headline that has lost its section
   rather than as a figure, and it wraps awkwardly beside the numbers it is
   supposed to line up with. It keeps the display face and the row's rhythm,
   one step down and with its tracking relaxed back toward normal — negative
   tracking is tuned for numerals, not for words. */
.stat--place .stat-no{
  font-size: var(--text-lg);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.stat-label{
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ground-muted);
  margin-right: -.16em;
}


/* ══ 24. CONTACT + FORMS ════════════════════════════════════════════════ */

.contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.contact-form{
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.field{
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.field-label{
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ground-muted);
  margin-right: -.16em;
}
.field-input,
.field-textarea{
  width: 100%;
  padding: .95rem 1.05rem;
  background-color: var(--ground-up);
  color: var(--ground-fg);
  border: 1px solid var(--ground-line);
  border-radius: var(--corner-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
}
select.field-input{ cursor: pointer; }
.field-textarea{ min-height: 9.5rem; }

.contact-aside{
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.contact-line{
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--ground-line);
  font-size: var(--text-sm);
  color: var(--ground-muted);
}
.contact-line a{ color: var(--ground-fg); }

/* Server feedback. Rendered only when there IS a flash — never shipped
   with a hardcoded `hidden`, and never invisible without JS. */
/* One even key-line, no thickened left edge. A 3px accent tab down one side
   would be a SECOND decorative system on a site whose DNA allows exactly one
   (the Chapter Slate), and it fights the asymmetric corner language by
   asserting a straight vertical the corners are deliberately breaking.
   It also recoloured badly: .is-ok / .is-err set `border-color`, which hits
   all four sides, so every real submit turned that 3px edge into a saturated
   green or gold tab. State is carried the way the rest of this portfolio
   carries it — by the key-line colour and by the words in the message. */
.form-msg{
  display: block;
  padding: .85rem 1.05rem;
  background-color: var(--ground-up);
  border: 1px solid var(--ground-line);
  border-radius: var(--corner-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ground-fg);
}
.form-msg.is-ok{
  color: var(--ground-green);
  border-color: var(--ground-green);
}
.form-msg.is-err{
  color: var(--ground-accent);
  border-color: var(--summit);
}