/* ============================================================================
   Wyatt Smith Media — shared system
   Palette V3 (moody): Bone #EFEEE4 · Linen #D7D8C9 · Sage #878C7B
   · Thyme #4C5648 · Foliage #283021 · Pitch #14160F + Mustard #D3A12C
   One warm-green undertone (~hue 135), grounded dark.
   ========================================================================== */

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100%;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--sage);color:var(--bg)}

/* ---- Brand constants ---- */
:root{
  /* V3 spine — one warm-green material, paper to pitch */
  --bone:#EFEEE4;
  --linen:#D7D8C9;
  --sage:#878C7B;
  --thyme:#4C5648;
  --foliage:#283021;
  --pitch:#14160F;
  --mustard:#D3A12C;
  --ochre:#7E5712;
  --accent-ink:var(--accent);   /* text-safe accent; overridden on light tones */

  /* legacy aliases (kept so older refs resolve) */
  --alabaster:var(--bone);

  /* Type families (default = editorial). Overridden by [data-type]. */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;

  /* Fluid type scale */
  --t-hero:clamp(2.6rem,6.4vw,6.2rem);
  --t-display:clamp(2.4rem,6.4vw,6rem);
  --t-breath:clamp(1.7rem,4vw,3.6rem);
  --t-h2:clamp(1.5rem,2.8vw,2.7rem);
  --t-h3:clamp(1.15rem,1.6vw,1.45rem);
  --t-body:clamp(1.05rem,0.6vw + 0.9rem,1.28rem);
  --t-small:0.78rem;
  --t-micro:0.68rem;

  /* Rhythm */
  --pad-x:clamp(1.4rem,6vw,8rem);
  --gap-section:clamp(6rem,15vh,13rem);
  --measure:38rem;

  /* Placeholder frame look (moody sage-to-pitch field) */
  --slot-grad:linear-gradient(160deg,#6f7569 0%,#454d40 44%,#1c2016 100%);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- Tone themes ----
   Default is now MOODY: the site is grounded on the dark end of the spine.
   `night` = deep ground (default).  `foliage` = a lifted dark for section
   variety.  `paper` / `fog` = light tones kept for contrast moments. ------- */
:root,
[data-tone="night"],
[data-tone="alabaster"]{   /* alabaster aliased to night so existing pages go moody */
  --bg:#191E15;          /* deep foliage→pitch ground, warm */
  --bg-2:#21281C;        /* lifted panel */
  --fg:#ECE9DE;          /* bone text */
  --fg-soft:#9CA28E;     /* sage-light */
  --line:color-mix(in oklab,var(--sage) 34%,transparent);
  --line-soft:color-mix(in oklab,var(--sage) 18%,transparent);
  --accent:var(--mustard);
  --scrim:linear-gradient(180deg,rgba(10,12,8,.22) 0%,rgba(10,12,8,0) 30%,rgba(10,12,8,0) 50%,rgba(10,12,8,.62) 100%);
}
[data-tone="foliage"]{
  --bg:#283021;
  --bg-2:#222A1C;
  --fg:#ECE9DE;
  --fg-soft:#A7AC9A;
  --line:color-mix(in oklab,var(--sage) 42%,transparent);
  --line-soft:color-mix(in oklab,var(--sage) 22%,transparent);
  --accent:var(--mustard);
  --scrim:linear-gradient(180deg,rgba(8,10,7,.20) 0%,rgba(8,10,7,0) 30%,rgba(8,10,7,0) 52%,rgba(8,10,7,.58) 100%);
}
[data-tone="pitch"]{
  --bg:#14160F;
  --bg-2:#1B1E15;
  --fg:#ECE9DE;
  --fg-soft:#969C88;
  --line:color-mix(in oklab,var(--sage) 30%,transparent);
  --line-soft:color-mix(in oklab,var(--sage) 15%,transparent);
  --accent:var(--mustard);
  --scrim:linear-gradient(180deg,rgba(6,8,5,.24) 0%,rgba(6,8,5,0) 30%,rgba(6,8,5,0) 50%,rgba(6,8,5,.66) 100%);
}
/* Light tones — for contrast sections */
[data-tone="paper"]{
  --bg:#EFEEE4;
  --bg-2:#E4E3D5;
  --fg:#23271F;
  --fg-soft:#5F6457;
  --line:color-mix(in oklab,var(--sage) 46%,transparent);
  --line-soft:color-mix(in oklab,var(--sage) 24%,transparent);
  --accent:var(--ochre);
  --accent-ink:#7C540F;   /* ochre is a fill accent; this is the AA text variant (5.75:1 on paper) */
  --scrim:linear-gradient(180deg,rgba(20,22,15,.10) 0%,rgba(20,22,15,0) 26%,rgba(20,22,15,0) 55%,rgba(20,22,15,.42) 100%);
}
[data-tone="fog"]{
  --bg:#D7D8C9;
  --bg-2:#CACCBA;
  --fg:#262B21;
  --fg-soft:#51564B;
  --line:color-mix(in oklab,var(--sage) 52%,transparent);
  --line-soft:color-mix(in oklab,var(--sage) 28%,transparent);
  --accent:var(--ochre);
  --accent-ink:#7C540F;   /* AA text variant (4.65:1 on fog) */
  --scrim:linear-gradient(180deg,rgba(20,22,15,.12) 0%,rgba(20,22,15,0) 28%,rgba(20,22,15,0) 55%,rgba(20,22,15,.46) 100%);
}

/* ---- Type pairings ---- */
[data-type="editorial"]{--serif:"Newsreader",Georgia,serif;--sans:"Hanken Grotesk",system-ui,sans-serif}
[data-type="warm"]{--serif:"Spectral",Georgia,serif;--sans:"Figtree",system-ui,sans-serif}
[data-type="classic"]{--serif:"Fraunces",Georgia,serif;--sans:"Inter",system-ui,sans-serif}

/* ---- Base ---- */
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.62;
  font-weight:380;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.018em;text-wrap:balance}
p{text-wrap:pretty}

.eyebrow{
  font-family:var(--sans);
  font-size:var(--t-small);
  font-weight:560;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-soft);
}
.serif-i{font-style:italic}

/* ============================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(1rem,2.4vh,1.7rem) var(--pad-x);
  color:var(--nav-fg,#F3EFE9);
  /* Baseline scrim + text-shadow so over-hero nav stays legible even with
     reduced motion / before scroll / no scroll-driven-animation support.
     .nav--solid (inner pages) and the navReveal keyframes both override these. */
  background:linear-gradient(180deg,rgba(8,10,7,.34) 0%,rgba(8,10,7,0) 100%);
  text-shadow:0 1px 16px rgba(8,10,7,.55);
  transition:background .5s var(--ease),color .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
  mix-blend-mode:normal;
}
.nav.scrolled{ /* fallback only; nav surface is handled by scroll-driven animation */ }

/* Inner pages (no dark hero) — nav always solid & dark-text */
.nav--solid{
  animation:none!important;
  color:var(--fg);
  background:color-mix(in oklab,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 .5px 0 var(--line-soft);
  text-shadow:none;
}
.wordmark{
  font-family:var(--sans);
  font-weight:560;
  font-size:.95rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:flex;gap:.4em;align-items:center;
  white-space:nowrap;
}
.wordmark .sep{opacity:.5;font-weight:300}
.wordmark .wm-mark{height:1.15em;width:auto;flex:none;margin-right:.05em}
.footer__brand .wordmark .wm-mark{height:1.15em}
.nav-links{display:flex;gap:clamp(1.3rem,2.6vw,2.6rem);align-items:center}
.nav-links a{
  font-family:var(--sans);
  font-size:.82rem;font-weight:480;letter-spacing:.04em;
  position:relative;padding-bottom:2px;opacity:.92;
  transition:opacity .3s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right .4s var(--ease);
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-links a[aria-current="page"]{opacity:1;color:var(--mustard)}
.nav-links a[aria-current="page"]::after{background:var(--mustard)}

/* Mobile nav — hamburger via CSS-only checkbox toggle */
.nav-toggle{display:none}
.nav-toggle-cb{position:absolute;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}
.nav-toggle-cb:focus-visible + .nav-toggle{outline:2px solid currentColor;outline-offset:2px}

@media (max-width:720px){
  .wordmark{font-size:.85rem}
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
    width:34px;height:34px;margin:-7px -7px -7px 0;padding:7px;cursor:pointer;color:inherit;z-index:2;
  }
  .nav-toggle span{display:block;width:22px;height:1.5px;background:currentColor;border-radius:2px;
    transition:transform .3s var(--ease),opacity .2s var(--ease)}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:1.15rem;
    padding:1.25rem var(--pad-x) 1.5rem;
    border-top:.5px solid var(--line-soft);
    background:color-mix(in oklab,var(--bg) 97%,transparent);
    box-shadow:0 14px 34px rgba(8,10,7,.32);
  }
  .nav-links a{font-size:1.05rem;opacity:1}
  .nav-toggle-cb:checked ~ .nav-links{display:flex}
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(2){opacity:0}
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* Keep hero meta + scroll cue from overlapping on phones
   (.hero scope raises specificity above the base .hero__cue rule below) */
@media (max-width:600px){
  .hero .hero__cue{display:none}
  .hero .hero__meta{gap:1rem;font-size:.62rem}
}

/* ============================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;height:100svh;min-height:560px;width:100%;
  overflow:hidden;color:#F3EFE9;
}
.hero__media{position:absolute;inset:0;will-change:transform}
.hero__media image-slot{width:100%;height:100%}
/* hero video layer */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#191E15;display:block}
.hero__videodrop{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.55rem;
  padding-bottom:clamp(5rem,16vh,11rem);
  background:var(--slot-grad);color:#ECE9E1;cursor:pointer;text-align:center;
  border:0;width:100%;transition:opacity .5s var(--ease),outline-color .25s var(--ease);
  outline:1.5px dashed transparent;outline-offset:-18px;
}
.hero__videodrop .vd__mark{font-size:1.15rem;opacity:.72;line-height:1}
.hero__videodrop .vd__lead{font-family:var(--sans);font-size:var(--t-small);font-weight:560;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.hero__videodrop .vd__sub{font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;opacity:.6;white-space:nowrap}
.hero__media.dragover .hero__videodrop{outline-color:var(--mustard);opacity:1}
.hero__media.has-video .hero__videodrop{opacity:0;pointer-events:none}
.hero__scrim{position:absolute;inset:0;background:var(--scrim);pointer-events:none;z-index:1}
.hero__inner{
  position:absolute;inset:0;z-index:2;
  display:flex;padding:var(--pad-x);
  padding-bottom:clamp(4rem,10vh,7rem);
  pointer-events:none; /* let clicks/drops reach the hero image-slot below */
}
.hero__inner a{pointer-events:auto}
.hero__copy{max-width:100%}
.hero__line{
  font-family:var(--serif);
  font-weight:380;
  font-size:var(--t-hero);
  line-height:1.0;
  letter-spacing:-.022em;
  text-shadow:0 2px 50px rgba(10,14,9,.45);
}
.hero__line .lite{color:var(--mustard);opacity:1;font-style:italic}
.hero__sub{
  margin-top:1.6rem;max-width:32rem;
  font-size:var(--t-body);line-height:1.55;color:rgba(243,239,233,.86);
  font-weight:380;
}
/* hero copy variants */
.hero__copy [data-copy]{display:none}
[data-hero-copy="a"] .hero__copy [data-copy="a"]{display:block}
[data-hero-copy="b"] .hero__copy [data-copy="b"]{display:block}
[data-hero-copy="c"] .hero__copy [data-copy="c"]{display:block}
/* hero layout variants */
[data-hero-layout="center"] .hero__inner{align-items:center;justify-content:center;text-align:center;padding-bottom:var(--pad-x)}
[data-hero-layout="center"] .hero__sub{margin-left:auto;margin-right:auto}
[data-hero-layout="lower"] .hero__inner{align-items:flex-end;justify-content:flex-start;text-align:left}
[data-hero-layout="lower"] .hero__line{max-width:13ch}
[data-hero-layout="split"] .hero__inner{align-items:flex-end;justify-content:space-between;text-align:left}
[data-hero-layout="split"] .hero__line{max-width:9ch}

.hero__meta{
  position:absolute;left:var(--pad-x);bottom:clamp(1.2rem,3vh,2rem);z-index:2;
  display:flex;gap:1.4rem;align-items:center;
  font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;color:rgba(243,239,233,.7);
}
[data-hero-layout="split"] .hero__meta,[data-hero-layout="lower"] .hero__meta{display:none}
.hero__cue{
  position:absolute;right:var(--pad-x);bottom:clamp(1.2rem,3vh,2rem);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,239,233,.7);
}
.hero__cue .rail{width:1px;height:46px;background:linear-gradient(rgba(243,239,233,.7),rgba(243,239,233,0));position:relative;overflow:hidden}
.hero__cue .rail::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:rgba(243,239,233,.95);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{top:-50%}60%,100%{top:120%}}

/* ============================================================================
   SECTIONS / SCENES
   ========================================================================== */
section{position:relative}
.wrap{padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* Breath — spare VO line on paper */
.breath{
  padding:var(--gap-section) var(--pad-x);
  display:flex;
  background:var(--bg);
  color:var(--fg);
}
.breath.center{justify-content:center;text-align:center}
.breath.right{justify-content:flex-end;text-align:right}
.breath p{
  position:relative;z-index:1;
  font-family:var(--serif);
  font-size:var(--t-breath);
  line-height:1.15;font-weight:360;letter-spacing:-.012em;
  max-width:20em;color:var(--fg);
}
.breath .dim{color:var(--fg-soft)}

/* Paper grain on the light contrast beats — turns the flat cream into a felt
   material so the bright bars read as paper, not a hard blast of color.
   Multiply at low opacity over light tones only; static (no motion). */
.breath[data-tone="paper"]::after,
.breath[data-tone="fog"]::after,
.onramps[data-tone]::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.05;
}

/* Standard figure */
.figure{position:relative;overflow:hidden;background:var(--bg-2)}
.figure image-slot{width:100%;height:100%}
.figcap{
  position:absolute;left:clamp(1rem,2vw,1.6rem);bottom:clamp(1rem,2vw,1.4rem);z-index:3;
  color:#F3EFE9;
  font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 18px rgba(10,14,9,.4);
}
.figcap b{font-weight:560;letter-spacing:.16em}
.figcap span{display:block;opacity:.78;margin-top:.3em;letter-spacing:.1em}

/* Full-bleed pinned scene (pin & release, pure CSS sticky) */
.pin{position:relative}
/* Un-pinned (2026-07-21): the 160vh scroll-stop dwell is gone — these are now
   normal full-bleed scenes that flow with the page. The scroll-linked zoom
   (pinScale) and time-based ken-burns drift stay; only the stop is removed. */
.pin__sticky{position:relative;height:auto;min-height:100svh;overflow:hidden;z-index:1}
.pin__sticky .figscale{position:absolute;inset:0;will-change:transform}
.pin__sticky image-slot{position:absolute;inset:0;width:100%;height:100%}
.pin__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(8,10,7,.6),rgba(8,10,7,.05) 60%);pointer-events:none}
.pin__sticky image-slot{z-index:0}
.pin__copy{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;
  padding:var(--gap-section) var(--pad-x);
  color:#F3EFE9;pointer-events:none;
}
.pin__copy .blk{max-width:24em}
.pin__copy h2{font-size:var(--t-display);line-height:1.0;text-shadow:0 1px 40px rgba(10,14,9,.4)}
.pin__copy p{margin-top:1.3rem;max-width:26em;color:rgba(243,239,233,.86);font-size:var(--t-body)}

/* Asymmetric editorial scene */
.scene{padding:var(--gap-section) var(--pad-x)}
.scene__grid{
  display:grid;gap:clamp(2rem,5vw,5rem);align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:860px){
  .scene__grid.split{grid-template-columns:1.15fr .85fr}
  .scene__grid.split.flip{grid-template-columns:.85fr 1.15fr}
  .scene__grid.split.flip .scene__media,
  .scene__grid.split.flip .media-topo{order:2}
  .scene__grid.split.flip .scene__text{order:1}
}
.scene__media{aspect-ratio:4/5;width:100%}
.scene__media.wide{aspect-ratio:3/2}
.scene__text{max-width:var(--measure)}
.scene__text .eyebrow{margin-bottom:1.2rem}
.scene__text h2{font-size:var(--t-h2);margin-bottom:1rem}
.scene__text p{color:var(--fg-soft);max-width:34rem}
.scene__text p + p{margin-top:.85em}
.scene__text .meta{
  margin-top:1.8rem;display:flex;gap:2rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:var(--t-small);letter-spacing:.04em;color:var(--fg-soft);
}
.scene__text .meta b{display:block;color:var(--fg);font-weight:520;letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-micro);margin-bottom:.3em}

/* Triptych */
.triptych{padding:var(--gap-section) var(--pad-x)}
.triptych__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2rem,4vw,3.5rem);flex-wrap:wrap}
.triptych__head h2{font-size:var(--t-h2)}
.triptych__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.4vw,1.4rem)}
.triptych__grid .figure{aspect-ratio:3/4}
.triptych__grid .figure.tall{aspect-ratio:3/4;transform:translateY(-8%)}
@media(max-width:760px){.triptych__grid{grid-template-columns:1fr 1fr}.triptych__grid .figure.tall{transform:none}}
@media(max-width:480px){.triptych__grid{grid-template-columns:1fr}}

/* ============================================================================
   ON-RAMPS
   ========================================================================== */
.onramps{padding:var(--gap-section) var(--pad-x) clamp(4rem,8vh,7rem);background:var(--bg);color:var(--fg);isolation:isolate}
.onramps__head{margin-bottom:clamp(2rem,5vw,4rem);max-width:30em;position:relative;z-index:1}
.onramps__head h2{font-size:var(--t-h2)}
.onramps__head p{color:var(--fg-soft);margin-top:1rem}
.onramp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);position:relative;z-index:1}
@media(max-width:820px){.onramp-grid{grid-template-columns:1fr}}
.onramp{
  display:block;position:relative;overflow:hidden;
  border:.5px solid var(--line-soft);
  background:var(--bg-2);
  transition:transform .6s var(--ease);
}
.onramp__media{aspect-ratio:5/4;overflow:hidden}
.onramp__media image-slot{width:100%;height:100%;transition:transform 1.1s var(--ease)}
.onramp:hover .onramp__media image-slot{transform:scale(1.04)}
.onramp__body{padding:clamp(1.2rem,2vw,1.8rem);display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.onramp__body h3{font-family:var(--serif);font-size:var(--t-h3);font-weight:420}
.onramp__body .arrow{font-family:var(--sans);font-size:.95rem;color:var(--fg-soft);transition:transform .5s var(--ease),color .5s var(--ease)}
.onramp:hover .arrow{transform:translateX(5px);color:var(--accent-ink)}
.onramp__body p{flex-basis:100%;color:var(--fg-soft);font-size:var(--t-small);margin-top:.2rem}
.onramp__lead{display:flex;flex-direction:column}

/* Light "gallery wall" variant — bright cards on a warm paper ground so the
   moody photos read as mounted prints. Only fires when the section is toned
   light; dark-tone onramps elsewhere are untouched. */
.onramps[data-tone] .onramp{
  background:#F7F6F0;
  border:.5px solid var(--line);
  box-shadow:0 1px 0 rgba(20,22,15,.04),0 20px 46px -28px rgba(20,22,15,.5);
}
.onramps[data-tone] .onramp:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(20,22,15,.05),0 32px 64px -30px rgba(20,22,15,.55);
}
/* Bright cards sit on paper, so their text must use the light-tone inks, not the
   section's bone --fg (which left the heading near-white on the near-white card). */
.onramps[data-tone] .onramp:not(.onramp--feature){
  --fg:#23271F;--fg-soft:#5F6457;--accent-ink:#7C540F;
  color:var(--fg);
}
/* Feature card — the alternating beat between the bright prints, in-palette:
   a deep thyme mat-board (the brand's own mid-green) with bone text. */
.onramps[data-tone] .onramp--feature{
  background:var(--thyme);
  border-color:color-mix(in oklab,#000 16%,var(--thyme));
}
.onramps[data-tone] .onramp--feature h3{color:#F2EFE6}
.onramps[data-tone] .onramp--feature .onramp__body p,
.onramps[data-tone] .onramp--feature .arrow{color:color-mix(in oklab,#F2EFE6 82%,transparent)}
.onramps[data-tone] .onramp--feature:hover .arrow{color:var(--mustard)}

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer{
  background:var(--foliage);color:#D9DBCF;
  padding:clamp(4rem,9vh,7rem) var(--pad-x) clamp(2rem,4vh,3rem);
  --line:rgba(243,239,233,.16);--line-soft:rgba(243,239,233,.12);--fg-soft:#9DA293;
}
.footer a:hover{color:#F3EFE9}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,4rem);padding-bottom:clamp(3rem,6vh,5rem);border-bottom:.5px solid var(--line)}
@media(max-width:820px){.footer__top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer__top{grid-template-columns:1fr}}
.footer__brand .wordmark{margin-bottom:1.2rem;color:#F3EFE9}
.footer__brand p{font-family:var(--serif);font-size:1.15rem;line-height:1.4;color:#C3C7B8;max-width:22em;font-weight:360}
.footer__cta{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.3rem;font-family:var(--sans);font-weight:500;font-size:.9rem;letter-spacing:.02em;color:#F3EFE9;border:.5px solid var(--line);padding:.6rem 1.05rem;border-radius:100px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.footer__cta span{transition:transform .3s var(--ease)}
.footer__cta:hover{background:var(--accent);border-color:var(--accent);color:#1c1606;transform:translateY(-1px)}
.footer__cta:hover span{transform:translateX(3px)}
.footer__col h4{font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:#9CA28E;margin-bottom:1.1rem;font-weight:560}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.footer__col a{font-size:.92rem;color:#B9BDAE;transition:color .3s var(--ease)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:clamp(1.4rem,3vh,2rem);flex-wrap:wrap}
.footer__bottom small{font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.08em;color:#9CA28E}

/* ============================================================================
   GENERIC PAGE HEADER (About / Prints / LUTs)
   ========================================================================== */
.pagehead{
  padding:calc(clamp(6rem,16vh,11rem)) var(--pad-x) clamp(3rem,7vh,6rem);
  border-bottom:.5px solid var(--line-soft);
}
.pagehead .eyebrow{margin-bottom:1.4rem}
.pagehead h1{font-size:var(--t-display);max-width:14em}
.pagehead .lede{margin-top:1.6rem;max-width:34rem;color:var(--fg-soft);font-size:var(--t-body)}

/* Prose */
.prose{max-width:var(--measure);font-size:var(--t-body);color:var(--fg)}
.prose p{margin-bottom:1.4em}
.prose p.lead{font-family:var(--serif);font-size:var(--t-h3);line-height:1.5;color:var(--fg)}

/* ============================================================================
   PRINTS
   ========================================================================== */
.print-grid{padding:var(--gap-section) var(--pad-x);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,5rem) clamp(2rem,4vw,4rem)}
@media(max-width:760px){.print-grid{grid-template-columns:1fr}}
.print{display:flex;flex-direction:column}
.print__media{aspect-ratio:4/5;width:100%;margin-bottom:1.2rem;background:var(--bg-2)}
.print__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:.5px solid var(--line);padding-top:.9rem}
.print__row h3{font-family:var(--serif);font-size:var(--t-h3);font-weight:420}
.print__price{font-family:var(--sans);font-size:.95rem;color:var(--fg);font-variant-numeric:tabular-nums}
.print__meta{margin-top:.4rem;color:var(--fg-soft);font-size:var(--t-small)}
/* Hybrid Shopify buy link — revealed by shopify.js once the product is live */
.print__buy{
  display:inline-flex;align-items:center;gap:.4em;margin-top:1rem;align-self:flex-start;
  font-family:var(--sans);font-size:var(--t-small);font-weight:560;letter-spacing:.04em;
  color:var(--fg);text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,var(--accent) 55%,transparent);
  padding-bottom:2px;transition:color .35s var(--ease),border-color .35s var(--ease)}
.print__buy span{transition:transform .35s var(--ease)}
.print__buy:hover{color:var(--accent-ink);border-color:var(--accent)}
.print__buy:hover span{transform:translateX(3px)}
.print__buy.is-soldout{color:var(--fg-soft);border-color:transparent;pointer-events:none}

/* ============================================================================
   LUTS
   ========================================================================== */
.lut{padding:var(--gap-section) var(--pad-x)}
.lut + .lut{padding-top:0}
.lut__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.4rem);align-items:stretch}
@media(max-width:760px){.lut__grid{grid-template-columns:1fr}}
.ba{position:relative;aspect-ratio:4/5}
.ba .tag{position:absolute;top:.8rem;left:.8rem;z-index:3;font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:#F3EFE9;background:rgba(8,10,7,.4);padding:.3em .7em;backdrop-filter:blur(6px)}
.lut__text{margin-top:clamp(1.6rem,3vw,2.4rem);display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
@media(max-width:760px){.lut__text{grid-template-columns:1fr}}
.lut__text h2{font-size:var(--t-h2)}
.lut__text .price{font-family:var(--sans);font-size:var(--t-h3);margin-top:.4rem}
.lut__text p{color:var(--fg-soft)}
.lut__text .note{font-size:var(--t-small);color:var(--fg-soft)}

/* Journal (About) */
.journal{padding:var(--gap-section) var(--pad-x);border-top:.5px solid var(--line-soft)}
.journal__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(2rem,4vw,3rem);flex-wrap:wrap;gap:1rem}
.journal__head h2{font-size:var(--t-h2)}
.journal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
@media(max-width:820px){.journal__grid{grid-template-columns:1fr}}
.entry__media{aspect-ratio:3/2;margin-bottom:1rem}
.entry .eyebrow{font-size:var(--t-micro)}
.entry h3{font-family:var(--serif);font-size:var(--t-h3);font-weight:420;margin:.5rem 0 .5rem}
.entry p{color:var(--fg-soft);font-size:var(--t-small)}
/* Field-note cards as clickable links */
.entry{display:block;color:inherit;text-decoration:none}
.entry__media{overflow:hidden}
.entry__media image-slot{transition:transform 1.1s var(--ease)}
.entry:hover .entry__media image-slot{transform:scale(1.04)}
.entry h3{transition:color .35s var(--ease)}
.entry:hover h3{color:var(--accent-ink)}

/* ── Field note article (single journal entry) ── */
.note{max-width:46rem;margin:0 auto;padding:var(--gap-section) var(--pad-x)}
.note__back{display:inline-flex;align-items:center;gap:.45em;margin-bottom:clamp(1.8rem,4vw,2.6rem);font-family:var(--sans);font-size:var(--t-small);font-weight:520;letter-spacing:.04em;color:var(--fg-soft);text-decoration:none;transition:color .35s var(--ease)}
.note__back:hover{color:var(--accent-ink)}
.note__head{margin-bottom:clamp(1.6rem,3vw,2.2rem)}
.note__head h1,.note__head h2{font-size:var(--t-h2);line-height:1.06;margin:.7rem 0 0}
.note__dek{margin-top:1rem;font-family:var(--serif);font-style:italic;font-size:var(--t-h3);line-height:1.4;color:var(--fg-soft)}
.note__hero{aspect-ratio:3/2;margin-bottom:clamp(2rem,4vw,3rem)}
.note__body{font-size:var(--t-body)}
.note__body p{margin-bottom:1.4em;color:var(--fg-soft);max-width:40rem}
.note__body p:first-child{font-family:var(--serif);font-size:var(--t-h3);line-height:1.5;color:var(--fg)}
.note__nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:.5px solid var(--line)}
.note__nav-link{font-family:var(--sans);font-size:var(--t-small);font-weight:520;letter-spacing:.03em;color:var(--fg-soft);text-decoration:none;transition:color .35s var(--ease)}
.note__nav-link:hover{color:var(--accent-ink)}
.note__nav-link--next{margin-left:auto;text-align:right}

/* Buttons / links */
.link-underline{position:relative;color:var(--fg);font-family:var(--sans);font-size:.92rem;letter-spacing:.04em;padding-bottom:3px;display:inline-block}
.link-underline::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line);transition:background .4s var(--ease)}
.link-underline:hover::after{background:var(--accent)}
.link-underline .arr{margin-left:.5em;transition:margin .4s var(--ease)}
.link-underline:hover .arr{margin-left:.75em}

/* ============================================================================
   MOTION — CSS scroll-driven (position-based, not event/transition-based).
   Base state IS the visible end-state, so screenshots, reduced-motion, and
   browsers without scroll-driven support all show content. Animation plays
   FROM hidden as the element scrolls. Gated by [data-motion].
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){

  /* Reveal on enter (full + subtle) */
  [data-motion="full"] [data-reveal],
  [data-motion="subtle"] [data-reveal]{
    animation:revealIn linear both;
    animation-timeline:view();
    animation-range:entry 4% entry 40%;
  }
  [data-motion="full"] [data-reveal][data-delay="1"],
  [data-motion="subtle"] [data-reveal][data-delay="1"]{animation-range:entry 13% entry 49%}
  [data-motion="full"] [data-reveal][data-delay="2"],
  [data-motion="subtle"] [data-reveal][data-delay="2"]{animation-range:entry 22% entry 58%}
  [data-motion="full"] [data-reveal][data-delay="3"],
  [data-motion="subtle"] [data-reveal][data-delay="3"]{animation-range:entry 31% entry 67%}
  /* Reveal like a developing print — comes up gently and into focus, not a slide */
  @keyframes revealIn{
    0%{opacity:0;transform:translateY(18px) scale(.992)}
    55%{opacity:1}
    100%{opacity:1;transform:none}
  }

  /* Hero settle/zoom on exit (full) */
  [data-motion="full"] .hero__media{
    animation:heroZoom linear both;
    animation-timeline:scroll(root);
    animation-range:0 100vh;
    transform-origin:50% 50%;
  }
  @keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.14)}}

  /* Pinned figure — lighter dwell. Image eases in scale across the pin while
     the COPY does the talking: it drifts continuously so the scroll always
     feels responsive, then clears before the image releases. */
  .pin{view-timeline:--pin block}
  [data-motion="full"] .pin .figscale,
  [data-motion="subtle"] .pin .figscale{
    animation:pinScale linear both;
    animation-timeline:--pin;
    animation-range:cover 0% cover 100%;
    transform-origin:50% 52%;
  }
  /* True dwell — arrive, hold, release. Instead of one linear push that the eye
     slides straight past, the frame settles on entry (1.12 -> 1.045), HOLDS
     across the long middle while the copy reads, then pushes back out as the
     next section lifts it. The hold is a scale plateau, not a freeze: the
     time-based cc-kenburns keeps the held shot breathing. */
  @keyframes pinScale{
    0%{transform:scale(1.12)}
    26%{transform:scale(1.045)}
    74%{transform:scale(1.045)}
    100%{transform:scale(1.11)}
  }

  /* Continuous copy drift across the pin — immediate scroll feedback */
  [data-motion="full"] .pin-drift,
  [data-motion="subtle"] .pin-drift{
    animation:pinDrift linear both;
    animation-timeline:--pin;
    animation-range:cover 6% cover 94%;
    will-change:transform,opacity;
  }
  @keyframes pinDrift{
    0%{opacity:0;transform:translateY(72px)}
    18%{opacity:1;transform:translateY(22px)}
    64%{opacity:1;transform:translateY(-20px)}
    100%{opacity:0;transform:translateY(-66px)}
  }

  /* In-flow ken-burns (full) */
  [data-motion="full"] [data-scale]{
    animation:driftScale linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
    transform-origin:50% 50%;
  }
  @keyframes driftScale{from{transform:scale(1.02)}to{transform:scale(1.1)}}

  /* Parallax — a few percent (full) */
  [data-motion="full"] [data-parallax]{
    animation:paraY linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes paraY{from{transform:translateY(34px)}to{transform:translateY(-34px)}}

  /* Nav gains its surface as you leave the hero */
  .nav{
    animation:navReveal linear both;
    animation-timeline:scroll(root);
    animation-range:0 130px;
  }
  @keyframes navReveal{
    from{background:transparent;color:#F3EFE9;box-shadow:0 0 0 rgba(0,0,0,0);
      text-shadow:0 1px 18px rgba(8,10,7,.5);
      -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
    to{background:color-mix(in oklab,var(--bg) 86%,transparent);color:var(--fg);
      box-shadow:0 .5px 0 var(--line-soft);text-shadow:none;
      -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
  }
}

[data-motion="off"] .hero__cue .rail::after{animation:none}

@media (prefers-reduced-motion:reduce){
  .hero__cue .rail::after{animation:none}
  html{scroll-behavior:auto}
}

/* Slot placeholder theming (foggy sage field, alabaster caption) */
image-slot{background:var(--slot-grad);color:#ECE9E1}
image-slot::part(frame){background:transparent!important}
image-slot::part(empty){color:#ECE9E1}
/* Full-bleed editorial frames — square corners, image fills edge to edge.
   The slot sets its rounding as an inline style, so override it through the
   exposed parts with !important (author-important beats inline). display:block
   kills the inline-block baseline gap that left a hairline under each image. */
image-slot::part(frame),
image-slot::part(image),
image-slot::part(ring){border-radius:0!important}
.figure image-slot,
.onramp__media image-slot,
.entry__media image-slot,
.print__media image-slot,
.ba image-slot{display:block;width:100%;height:100%}

/* ============================================================================
   TOPOGRAPHIC TEXTURE — survey / field-notes motif
   White-on-black contour tile, screen-blended so only the light lines show
   over the moody ground. Edges feather (radial mask) so a section blends into
   its neighbours instead of cutting off as a hard rectangle.
   ========================================================================== */
[data-topo]{
  position:relative;
  background-color:var(--bg);
  background-image:
    radial-gradient(135% 110% at 50% 50%, transparent 42%, var(--bg) 100%),
    url("topo-3.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
[data-topo="soft"]{
  background-image:
    radial-gradient(140% 115% at 50% 50%, color-mix(in oklab,var(--bg) 50%,transparent) 28%, var(--bg) 100%),
    url("topo-3.png");
}
[data-topo="strong"]{
  background-image:
    radial-gradient(150% 120% at 50% 50%, transparent 58%, var(--bg) 100%),
    url("topo-3.png");
}

/* Topo BEHIND an image — the photo floats on an offset textured card so the
   contour lines peek out behind it; body text never sits over the texture. */
.media-topo{position:relative}
.media-topo > .scene__media,
.media-topo > .entry__media{position:relative;z-index:1}

/* Topo as a FULL-BLEED section background that fades out before the text
   column (Petra-style). Direction follows the image side. */
[data-topo-bleed]{position:relative;background-color:var(--bg)}
[data-topo-bleed] > .scene__grid{position:relative;z-index:1}
.topo-bleed{position:absolute;inset:0;z-index:0;pointer-events:none;background:url("topo-3.png") center/cover no-repeat}
[data-topo-bleed="left"] .topo-bleed{
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 36%,transparent 60%);
          mask-image:linear-gradient(to right,#000 0%,#000 36%,transparent 60%);
}
[data-topo-bleed="right"] .topo-bleed{
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 36%,transparent 60%);
          mask-image:linear-gradient(to left,#000 0%,#000 36%,transparent 60%);
}
@media(max-width:860px){
  [data-topo-bleed="left"] .topo-bleed,
  [data-topo-bleed="right"] .topo-bleed{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,transparent 74%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 42%,transparent 74%);
  }
}

/* ============================================================================
   FILM GRAIN — a faint, constant texture so the DESIGN reads as made, not
   generated. Sits BEHIND all content (z-index:-1), so it textures the ground
   only — photos, images, and text paint cleanly on top, never grained.
   Felt, not noticed (~6%); static and cheap.
   ========================================================================== */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px;
  opacity:.06;
  mix-blend-mode:overlay;
}

/* ---- A11y: keyboard focus + skip link ---- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--bg);color:var(--fg);
  padding:.6rem 1rem;border:.5px solid var(--line);
}
.skip-link:focus{left:var(--pad-x)}

/* ============================================================================
   CREATIVE LAYER — premium scroll/motion/micro-interactions (concepts 1-7,10-18)
   Gated: html.cc-js enables JS-driven latent states; scroll/enter motion is
   inside @media (prefers-reduced-motion: no-preference). Transform/opacity/
   clip-path/filter only. Self-contained + revertible (delete from here down).
   ========================================================================== */

/* #11 Weather-aware grain — creative.js varies --cc-grain by active tone */
body::before{opacity:var(--cc-grain,.06);transition:opacity .7s ease}

/* #1 Latitude meridian — a survey rail + coordinate readout (index only) */
.cc-meridian{position:fixed;left:clamp(.55rem,2.2vw,1.7rem);top:17vh;bottom:17vh;z-index:60;pointer-events:none;display:none}
html.cc-js .cc-meridian:not([hidden]){display:block}
.cc-meridian__rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,color-mix(in oklab,var(--mustard) 50%,transparent) 16%,color-mix(in oklab,var(--mustard) 50%,transparent) 84%,transparent)}
.cc-meridian__coord{position:absolute;left:9px;bottom:0;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono,ui-monospace,"SF Mono",monospace);font-size:.56rem;letter-spacing:.24em;color:color-mix(in oklab,var(--mustard) 78%,#ECE9DE);white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 1px 10px rgba(8,10,7,.7)}
@media (prefers-reduced-motion: no-preference){
  .cc-meridian__tick{position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--mustard);box-shadow:0 0 10px color-mix(in oklab,var(--mustard) 55%,transparent);animation:cc-tick linear both;animation-timeline:scroll(root);animation-range:0 100%}
  @keyframes cc-tick{from{top:0}to{top:100%}}
}
@media (max-width:1000px){.cc-meridian{display:none !important}}

/* #2 Developing print — content photos resolve from a soft latent state */
@media (prefers-reduced-motion: no-preference){
  html.cc-js image-slot.cc-dev{filter:blur(3px) saturate(.82);opacity:.5;transition:filter .85s var(--ease),opacity .85s var(--ease);will-change:filter,opacity}
  html.cc-js image-slot.cc-dev.cc-in{filter:none;opacity:1;will-change:auto}
}

/* #16 Edit-grade reveal — prints resolve into the WSM grade on enter */
@media (prefers-reduced-motion: no-preference){
  html.cc-js .print.cc-grade .print__media{filter:saturate(.6) contrast(.96) brightness(1.03);transition:filter .6s var(--ease)}
  html.cc-js .print.cc-grade.cc-graded .print__media{filter:none}
}

/* #3 Held-breath hero — copy drifts up + fades; the italic word lingers */
@media (prefers-reduced-motion: no-preference){
  .hero__copy{animation:cc-hero-exit linear both;animation-timeline:scroll(root);animation-range:2vh 94vh}
  @keyframes cc-hero-exit{to{transform:translateY(-34px);opacity:0}}
  .hero__copy .lite{display:inline-block;animation:cc-lite-linger linear both;animation-timeline:scroll(root);animation-range:2vh 94vh}
  @keyframes cc-lite-linger{to{transform:translateY(11px)}}
}

/* #4 Tone-crossfade beats — light breath bars bleed up into the dark above */
.breath{position:relative}
.breath::before{content:"";position:absolute;left:0;right:0;top:-3vh;height:3vh;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--bg));z-index:0}
.breath > *{position:relative;z-index:1}
/* No feather on a band that directly follows the hero. The hero's scrim
   already lands its bottom edge, and the scrim (z-index 1) paints above the
   feather (z-index 0), so a light band's cream feather came out as a muddy
   dark bar over the film. Hard cut instead. */
.hero + .breath::before,.hero + [data-seam]::before{content:none}

/* #5 Pin that holds its breath — the headline settles ("pops into place"),
   then keeps a gentle scroll-coupled float through the middle instead of going
   dead-still, so slowing or pausing the scroll never reads as a frozen page.
   Pairs with the time-based "living photograph" drift below. */
@media (prefers-reduced-motion: no-preference){
  @keyframes pinDrift{
    0%{opacity:0;transform:translateY(36px)}
    16%{opacity:1;transform:translateY(2px)}   /* arrives — the settle is preserved */
    38%{opacity:1;transform:translateY(-5px)}  /* gentle float, never a freeze */
    60%{opacity:1;transform:translateY(2px)}
    100%{opacity:0;transform:translateY(-28px)}
  }

  /* Living photograph — a slow, continuous, TIME-based drift on the pinned
     image (its own clock, independent of scroll), so the scene keeps breathing
     when the reader stops at the dwell — the cure for the "stuck/lagging" feel.
     Runs ONLY while the pin is on screen (creative.js toggles .cc-live) and
     composes with (does not replace) the scroll-linked pinScale on the parent
     .figscale. Compositor-only; base scale gives pan headroom so no edge ever
     shows. Disabled on mobile/coarse by the un-pin block below. */
  html.cc-js .pin__sticky image-slot{transform-origin:50% 50%}
  html.cc-js .pin.cc-live .pin__sticky image-slot{
    animation:cc-kenburns 20s cubic-bezier(.45,0,.55,1) infinite alternate both;
    will-change:transform;
  }
  @keyframes cc-kenburns{
    0%  {transform:scale(1.05) translate3d(-1.8%, 1.2%, 0)}
    50% {transform:scale(1.08) translate3d( 1.6%,-1.4%, 0)}
    100%{transform:scale(1.06) translate3d( 2.0%, 1.6%, 0)}
  }
}

/* #6 Fog veil on enter — the full-bleed pinned scenes resolve out of a haze */
@media (prefers-reduced-motion: no-preference){
  html.cc-js .pin__sticky .figscale::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(135% 105% at 50% 40%,rgba(222,224,210,0) 26%,rgba(222,224,210,.14) 64%,rgba(14,16,11,.5) 100%);
    animation:cc-fog linear both;animation-timeline:view();animation-range:entry 4% cover 22%}
  @keyframes cc-fog{from{opacity:1}to{opacity:0}}
}

/* #7 Depth on the splits — contour (far) + photo (mid) drift at different rates */
@media (prefers-reduced-motion: no-preference){
  .scene__grid.split .topo-bleed{animation:cc-depth-far linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .scene__grid.split .scene__media{animation:cc-depth-mid linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes cc-depth-far{from{transform:translateY(3.5%)}to{transform:translateY(-3.5%)}}
  @keyframes cc-depth-mid{from{transform:translateY(1.4%)}to{transform:translateY(-1.4%)}}
}

/* #13 Print on the wall — hover hangs the print like a framed object */
.print{transition:transform .45s var(--ease)}
.print__media{transition:box-shadow .45s var(--ease),outline-color .45s var(--ease);outline:1px solid transparent;outline-offset:-7px}
.print__row{position:relative}
.print__row::after{content:"";position:absolute;left:0;bottom:-.55rem;height:1px;width:100%;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.print:hover{transform:translateY(-5px)}
.print:hover .print__media{box-shadow:0 30px 54px -24px rgba(8,10,7,.72),0 6px 16px rgba(8,10,7,.4);outline-color:rgba(236,233,222,.16)}
.print:hover .print__row::after{transform:scaleX(1)}

/* #14 Triptych as a contact sheet — frame numbers + light-table hover */
.triptych__grid{counter-reset:cc-frame}
.triptych__grid .figure{counter-increment:cc-frame;position:relative;transition:transform .55s var(--ease),opacity .55s var(--ease)}
.triptych__grid .figure::after{content:counter(cc-frame,decimal-leading-zero);position:absolute;top:.55rem;left:.7rem;z-index:3;font-family:var(--mono,ui-monospace,monospace);font-size:.58rem;letter-spacing:.2em;color:rgba(236,233,222,.72);text-shadow:0 1px 4px rgba(0,0,0,.55);pointer-events:none}
.triptych__grid:hover .figure:not(:hover){opacity:.6}
.triptych__grid .figure:not(.tall):hover{transform:scale(1.018)}
.triptych__grid .figure.tall:hover{transform:translateY(-8%) scale(1.018)}

/* #15 Journal as a field logbook — tabular date + ledger line on hover */
.entry .eyebrow{font-variant-numeric:tabular-nums;position:relative;display:inline-block;padding-bottom:.3rem}
.entry .eyebrow::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.entry:hover .eyebrow::after{transform:scaleX(1)}

/* #17 Wordmark as a slow shutter — one-shot line on load + hover aperture tilt */
.wordmark .sep{position:relative;display:inline-block;transition:transform .5s var(--ease)}
.wordmark:hover .sep{transform:rotate(15deg)}
@media (prefers-reduced-motion: no-preference){
  .nav .wordmark .sep::after{content:"";position:absolute;left:50%;top:-18%;width:1.5px;height:136%;background:var(--mustard);transform:translateX(-50%) scaleY(0);transform-origin:center;animation:cc-shutter 1.05s var(--ease) .3s both}
  @keyframes cc-shutter{0%{transform:translateX(-50%) scaleY(0);opacity:0}42%{transform:translateX(-50%) scaleY(1);opacity:.85}100%{transform:translateX(-50%) scaleY(0);opacity:0}}
}

/* #18 Last-frame footer — resolves like a closing title card (staggered) */
@media (prefers-reduced-motion: no-preference){
  html.cc-js .footer__col{animation:cc-rise both;animation-timeline:view();animation-range:entry 2% entry 48%}
  html.cc-js .footer__brand{animation:cc-rise both;animation-timeline:view();animation-range:entry 14% entry 62%}
  html.cc-js .footer__bottom{animation:cc-rise both;animation-timeline:view();animation-range:entry 30% entry 78%}
  @keyframes cc-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}

/* ---- Mobile / touch: un-pin the scroll-stop scenes ------------------------
   The full-bleed .pin scenes use position:sticky over a 160vh section. On
   touch devices that pin can trap/jank scrolling ("stuck, can't get past").
   On narrow OR coarse-pointer screens, turn them into normal full-height
   scenes you scroll straight through, and disable their scroll-driven
   animations. Desktop keeps the cinematic pin. (section height is an inline
   style, so height needs !important.) */
@media (max-width: 820px), (pointer: coarse){
  section.pin{height:auto !important}
  .pin__sticky{position:relative !important;top:auto !important;height:auto !important;min-height:90svh}
  .pin .figscale{animation:none !important;transform:none !important}
  .pin__sticky image-slot{animation:none !important;transform:none !important;will-change:auto !important}
  .pin-drift{animation:none !important;opacity:1 !important;transform:none !important}
  .pin__sticky .figscale::after{display:none !important}
}

/* ---- Journal "Field guide" section header (its own titled chapter beneath the field notes) ---- */
/* ── Field guide header — naturalist sibling to the field notes above ──
   The .journal section already supplies the top padding (--gap-section) and
   the chapter-dividing border-top. So the header block adds NO top padding of
   its own — that kills the cavernous double-gap from the old .pagehead. All
   rhythm here is internal and intentional. */

/* Trim the section's own top padding a touch so the guides read as a tight
   new chapter beneath the field notes, not a fresh page. Scoped to the guides
   section only — the field-notes section above is untouched. */
.journal.fg-guides{
  padding-top:clamp(4.5rem,11vh,8.5rem);
}

.fg-head{
  max-width:42rem;
  /* breathing room below the header before the cards, set by the rule margin */
  margin-bottom:clamp(2.6rem,5vw,4.25rem);
}

.fg-head__eyebrow{
  display:block;
  margin-bottom:clamp(1.1rem,2vw,1.5rem);
  color:var(--accent-ink);   /* ochre AA text — ties the naturalist label to the brand accent */
}

.fg-head__title{
  font-family:var(--serif);
  font-size:var(--t-h2);     /* sibling-scale: subordinate to the page h1's --t-display */
  line-height:1.04;
  letter-spacing:-.018em;
  max-width:16ch;
  color:var(--fg);
}

.fg-head__lede{
  margin-top:clamp(1.1rem,2.2vw,1.6rem);
  max-width:34rem;
  color:var(--fg-soft);
  font-size:var(--t-body);
}

/* Thin hairline rule — the "chapter mark" that sets this guide apart, drawn in
   the same --line-soft used by the section dividers across the system. */
.fg-head__rule{
  border:0;
  height:.5px;
  background:var(--line-soft);
  margin:clamp(2.2rem,4.5vw,3.4rem) 0 0;
  width:100%;
  max-width:none;
}

/* ============================================================================
   P1 — Native cross-document View Transitions.
   Pages cross-dissolve through the dark ground instead of white-flashing.
   Pure CSS, zero JS. Non-supporting browsers just hard-navigate (graceful).
   Whole opt-in lives inside the motion-OK query, so reduced-motion users get
   instant navigation. The nav wordmark holds still across the cut (shared
   element) while everything else dissolves — like a print moving between trays.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }
  ::view-transition-old(root){ animation: cc-vt-out .34s var(--ease) both; }
  ::view-transition-new(root){ animation: cc-vt-in .46s var(--ease) both; }
  @keyframes cc-vt-out{ to{ opacity:0 } }
  @keyframes cc-vt-in{ from{ opacity:0 } }
  .nav .wordmark{ view-transition-name: cc-wordmark; }
}

/* ============================================================================
   P1 — Headline entrance. Each line rises out of a mask on load; the last line
   (the italic close) settles a beat later. The base state IS the finished,
   fully-visible headline — the latent "hidden" state only exists under
   html.cc-js + motion-OK, so no-JS, reduced-motion, screenshots and crawlers
   all get the real text. One-shot, on the brand --ease (no overshoot).
   ========================================================================== */
.hl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hl__i{display:block}
@media (prefers-reduced-motion: no-preference){
  html.cc-js .hl__i{transform:translateY(112%);opacity:0;animation:cc-hl-rise .95s var(--ease) forwards}
  html.cc-js .hl:nth-child(1) .hl__i{animation-delay:.12s}
  html.cc-js .hl:nth-child(2) .hl__i{animation-delay:.30s}
  html.cc-js .hl:nth-child(3) .hl__i{animation-delay:.46s}
  @keyframes cc-hl-rise{to{transform:none;opacity:1}}
}

/* ============================================================================
   CINEMATIC BUILD
   ============================================================================ */

/* ----------------------------------------------------------------------------
   🅰 Kinetic typography — breath lines as voiceover.
   The first line rises in as the section enters; the second line ("the cut")
   lands a beat later, the way a voiceover pauses before the turn. Base state
   is BOTH lines fully visible — the latent hidden state only exists under
   cc-js + motion-OK, so no-JS / reduced-motion / crawlers get the real text.
   Driven by each section's own scroll position (view()), one-shot on --ease.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  html.cc-js .breath p{
    animation:cc-breath-line linear both;
    animation-timeline:view();
    animation-range:entry 6% entry 38%;
  }
  html.cc-js .breath .dim{
    display:inline-block;
    animation:cc-breath-cut linear both;
    animation-timeline:view();
    animation-range:entry 26% entry 58%;
  }
  @keyframes cc-breath-line{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes cc-breath-cut{from{opacity:0;transform:translateY(12px)}55%{opacity:1}to{opacity:1;transform:none}}
}

/* ----------------------------------------------------------------------------
   🅰 Reel-leader page titles. Every inner page opens like the homepage: the
   mono eyebrow wipes in left-to-right (a film slate), then the title rises,
   then the lede settles. One-shot on load, gated to cc-js + motion-OK so the
   base render is the finished header. Pages whose <h1> already carries the .hl
   mask-rise (About) keep it — :not(:has(.hl)) hands those off untouched.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  html.cc-js .pagehead .eyebrow{animation:cc-slate-wipe .7s var(--ease) both}
  html.cc-js .pagehead h1:not(:has(.hl)){animation:cc-slate-rise .9s var(--ease) .16s both}
  html.cc-js .pagehead .lede{animation:cc-slate-fade .85s var(--ease) .32s both}
  @keyframes cc-slate-wipe{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(3px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
  @keyframes cc-slate-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes cc-slate-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ----------------------------------------------------------------------------
   🅲 Held-frame hover (light table). Hover a print / on-ramp / work card and
   its siblings recede so the one you're studying steps forward — restraint as
   interaction, same move as the triptych contact sheet. Pointer-fine only, so
   touch never leaves a card stuck dimmed.
   --------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .print-grid .print,
  .onramp-grid .onramp,
  .work-grid .entry{transition:opacity .5s var(--ease)}
  .print-grid:hover .print:not(:hover),
  .onramp-grid:hover .onramp:not(:hover),
  .work-grid:hover .entry:not(:hover){opacity:.5}
}

/* ----------------------------------------------------------------------------
   🅳 Closing title card. The footer arrives like end credits: the brand block
   (and its CTA) rises first, the columns stagger up behind it, the fine print
   lands last — each keyed to its own slice of the footer's scroll-in. Base
   state fully visible; motion only under cc-js + motion-OK.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  html.cc-js .footer__brand,
  html.cc-js .footer__col,
  html.cc-js .footer__bottom{
    animation:cc-credits linear both;
    animation-timeline:view();
  }
  html.cc-js .footer__brand{animation-range:entry 0% entry 62%}
  html.cc-js .footer__col:nth-child(2){animation-range:entry 12% entry 74%}
  html.cc-js .footer__col:nth-child(3){animation-range:entry 20% entry 82%}
  html.cc-js .footer__col:nth-child(4){animation-range:entry 28% entry 90%}
  html.cc-js .footer__bottom{animation-range:entry 36% entry 98%}
  @keyframes cc-credits{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}

/* ----------------------------------------------------------------------------
   🅳 Curtain menu. The mobile nav was the one un-cinematic surface (a plain
   dropdown). Now it drops like an iris/curtain — the panel wipes down, the
   links rise in sequence — matching the desktop polish. The menu still SHOWS
   under reduced-motion (display:flex stays); only the reveal motion is gated.
   --------------------------------------------------------------------------- */
@media (max-width:720px){
  @media (prefers-reduced-motion: no-preference){
    .nav-toggle-cb:checked ~ .nav-links{animation:cc-curtain .5s var(--ease) both}
    .nav-toggle-cb:checked ~ .nav-links a{animation:cc-curtain-link .55s var(--ease) both}
    .nav-toggle-cb:checked ~ .nav-links a:nth-child(1){animation-delay:.06s}
    .nav-toggle-cb:checked ~ .nav-links a:nth-child(2){animation-delay:.11s}
    .nav-toggle-cb:checked ~ .nav-links a:nth-child(3){animation-delay:.16s}
    .nav-toggle-cb:checked ~ .nav-links a:nth-child(4){animation-delay:.21s}
    .nav-toggle-cb:checked ~ .nav-links a:nth-child(5){animation-delay:.26s}
    .nav-toggle-cb:checked ~ .nav-links a:nth-child(6){animation-delay:.31s}
    @keyframes cc-curtain{from{clip-path:inset(0 0 100% 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
    @keyframes cc-curtain-link{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  }
}

/* ----------------------------------------------------------------------------
   🅱 Breathing vignette. A barely-there warm lens that holds every frame down
   under one optic — foliage shadow in the corners, never black. Fixed over the
   content (below the nav at z100, below pin copy/scrim at z2), normal blend so
   it stays predictable: invisible on the dark ground, a faint settle in the
   corners of photographs, imperceptible behind centered text. If you notice it
   before the photograph, the alpha is too high. Static — safe in reduced-motion.
   --------------------------------------------------------------------------- */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(128% 118% at 50% 42%,
    transparent 60%,
    rgba(16,22,14,.09) 84%,
    rgba(12,17,11,.20) 100%);
}

/* ----------------------------------------------------------------------------
   🅱 Seams that dissolve. The light bands no longer butt against the dark
   ground as stacked rectangles — each one feathers its tone ~3vh up into the
   section above, so the page reads as one continuous reel. Same proven move as
   .breath::before: the feather is a child of the band painting its --bg up over
   the previous (already-painted, empty-padded) section — clean, no z-index lift
   and no haze over the next section's content. Pages opt a band in with the
   data-seam attribute.
   --------------------------------------------------------------------------- */
[data-seam]{position:relative}
[data-seam] > *{position:relative;z-index:1}
[data-seam]::before{
  content:"";position:absolute;left:0;right:0;top:-3vh;height:3vh;
  pointer-events:none;z-index:0;
  background:linear-gradient(to bottom,transparent,var(--bg));
}
/* The feather is not a fixture: as a band scrolls up it rises out of the
   band and fades in, settling just as the edge passes the lower quarter of
   the screen. It is never taller than its resting size. Opacity + transform
   only (compositor), scrubbed to scroll, off under reduced motion. This is
   the one seam entrance for the whole site. The older per-page focus-pull
   (a scaleY compress on /prints, /studio and /real-estate) was retired for
   it; those pages now only add their accent-rule draw, timed to land with
   this. The feather's own box is the view() subject (3vh tall), so its
   cover range is ~103vh and 24% of that lands when the band's top edge is
   ~78vh up the screen, whatever the band's height. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    html.cc-js [data-seam]::before,html.cc-js .breath::before{
      animation:cc-seam-rise linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 24%;
    }
    @keyframes cc-seam-rise{from{opacity:0;transform:translateY(70%)}to{opacity:1;transform:none}}
  }
}

/* ----------------------------------------------------------------------------
   🅲 Shared-element lightbox (assets/lightbox.js). Click a standalone photo and
   it lifts to full-frame over a dimmed, blurred room — the single best surface
   for both letting the work breathe and selling prints. The morph itself is a
   View Transition on the shared `cc-lightbox` name; this is the room it lands
   in. Above the nav (z1000); html.cc-lb-open locks the page behind it.
   --------------------------------------------------------------------------- */
.cc-lb{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  padding:clamp(1rem,4vw,3.5rem);
  background:rgba(8,10,7,.94);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  cursor:zoom-out;
}
.cc-lb[hidden]{display:none}
html.cc-lb-open{overflow:hidden}
.cc-lb__frame{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem;
  max-width:100%;max-height:100%;
}
.cc-lb__img{
  display:block;width:auto;height:auto;max-width:100%;max-height:84vh;
  object-fit:contain;background:var(--bg-2);
  box-shadow:0 40px 130px rgba(0,0,0,.6);
}
.cc-lb__cap{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(243,239,233,.66);text-align:center;
}
.cc-lb__x{
  position:fixed;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem);
  width:44px;height:44px;border-radius:50%;
  border:.5px solid rgba(243,239,233,.3);background:rgba(8,10,7,.5);
  color:#F3EFE9;font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.cc-lb__x:hover{background:rgba(243,239,233,.14);transform:scale(1.06)}
@media (prefers-reduced-motion: no-preference){
  /* The named morph eases on the brand curve; the room dims via the root
     cross-fade already defined above (cc-vt-in / cc-vt-out). */
  ::view-transition-group(cc-lightbox){animation-duration:.5s;animation-timing-function:var(--ease)}
  ::view-transition-image-pair(cc-lightbox){animation-timing-function:var(--ease)}
}

/* ============================================================================
   NAV: the Quiet Light Club link + "More" dropdown (Real Estate · LUTs · The App)
   The club link is the one thing in the bar that is not a sans label: it is
   set in the serif italic, in mustard, the same device the hero uses for its
   accent word ("feels.", "looking."). Typeface contrast plus the accent color
   pull the eye without any chrome: no box, no permanent underline. It keeps
   the site's hover hairline like every other link.
   Desktop: hover/focus-within opens the panel. ≤720px: the dropdown dissolves
   (display:contents) and its links flatten into the curtain list.
   ========================================================================== */
.nav-links a.nav-club{
  font-family:var(--serif);font-style:italic;font-weight:420;
  font-size:1.05rem;letter-spacing:.005em;line-height:1;
  color:var(--mustard);opacity:1;
  transition:color .3s var(--ease);
}
.nav-links a.nav-club:hover{color:color-mix(in oklab,var(--mustard) 78%,#F3EFE9)}
.nav-links a.nav-club[aria-current="page"]{color:var(--mustard)}
/* On a page that lives inside the dropdown (Real Estate, LUTs, The App) the
   "More" label carries the current-page mustard, so you can still see where
   you are. */
.nav-drop:has(a[aria-current="page"]) .nav-drop__label{color:var(--mustard);opacity:1}

/* In the mobile curtain the links are a plain stacked list; the club link
   keeps its italic serif there, a step larger to sit with the 1.05rem sans. */
@media (max-width:720px){
  .nav-links a.nav-club{font-size:1.3rem}
}

.nav-drop{position:relative}
.nav-drop__label{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--sans);font-size:.82rem;font-weight:480;letter-spacing:.04em;
  padding-bottom:2px;opacity:.92;transition:opacity .3s var(--ease);
}
.nav-drop:hover .nav-drop__label,.nav-drop:focus-within .nav-drop__label{opacity:1}
.nav-drop__caret{
  width:.5em;height:.5em;flex:none;margin-top:-.2em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transform-origin:66% 66%;
  transition:transform .3s var(--ease);
}
.nav-drop:hover .nav-drop__caret,.nav-drop:focus-within .nav-drop__caret{transform:rotate(225deg)}
.nav-drop__menu{
  position:absolute;top:calc(100% + .8rem);right:-.6rem;min-width:10.5rem;
  display:flex;flex-direction:column;gap:.15rem;padding:.55rem;
  background:color-mix(in oklab,var(--bg) 96%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border:.5px solid var(--line-soft);
  box-shadow:0 18px 44px rgba(8,10,7,.42);
  text-shadow:none;z-index:5;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;
}
/* hover bridge across the gap — a child of the menu, so it never blocks clicks while closed */
.nav-drop__menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:.9rem}
.nav-drop:hover .nav-drop__menu,.nav-drop:focus-within .nav-drop__menu{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
.nav-links .nav-drop__menu a{display:block;padding:.55rem .85rem;opacity:.85}
.nav-links .nav-drop__menu a::after{display:none}
.nav-links .nav-drop__menu a:hover{opacity:1;background:color-mix(in oklab,var(--fg) 8%,transparent)}
.nav-links .nav-drop__menu a[aria-current="page"]{opacity:1}

/* Mobile: hover can't open the dropdown (touch never hovers, and iOS taps
   don't focus buttons), so flatten it — hide the "More" label and show its
   links as ordinary menu items in the stacked nav. */
@media (max-width:720px){
  .nav-drop{position:static}
  .nav-drop__label{display:none}
  .nav-drop__menu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    padding:0;min-width:0;gap:1.15rem;
  }
  .nav-drop__menu::before{display:none}
  .nav-links .nav-drop__menu a{padding:0;opacity:1;font-size:1.05rem}
  .nav-links .nav-drop__menu a:hover{background:none}
}

@media (max-width:720px){
  .nav-drop{display:contents}
  .nav-drop__label{display:none}
  .nav-drop__menu{position:static;display:contents}
  .nav-drop__menu::before{content:none}
  .nav-links .nav-drop__menu a{display:inline-block;padding:0 0 2px;opacity:.92;background:none}
  .nav-links .nav-drop__menu a:hover{background:none}
  /* keep the curtain stagger: flattened items land after the 4 direct links */
  .nav-toggle-cb:checked ~ .nav-links .nav-drop__menu a{animation-delay:.31s}
}

/* ============================================================================
   ORGANIC REVEAL v2 (2026-07-21) — ported from the Quiet Light Club page.
   Two ideas:
   1. RANGE FIX — small/medium elements finish `entry N%` ranges within their
      own height, so they popped at the viewport edge. `cover` ranges scrub
      across the element's real travel up the screen, so the motion is SEEN.
      Big media keeps the default entry-based revealIn (it fills the viewport
      quickly; cover would drag it).
   2. CHARACTER — text blocks and cards develop in (rise + focus pull),
      eyebrows arrive from the margin, statement lines rise from their own
      baseline. Compositor-only, PRM-gated, degrades to visible-at-rest.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  /* eyebrows slide in from the margin */
  [data-motion="full"] .eyebrow[data-reveal],
  [data-motion="subtle"] .eyebrow[data-reveal]{
    animation-name:cc-eyebrow;animation-range:cover 0% cover 22%;
  }
  /* text blocks + cards develop in */
  [data-motion="full"] :is(.scene__text,.press__inner,.prose,.onramps__head,.triptych__head,.onramp,.entry,.print,.note__head)[data-reveal],
  [data-motion="subtle"] :is(.scene__text,.press__inner,.prose,.onramps__head,.triptych__head,.onramp,.entry,.print,.note__head)[data-reveal]{
    animation-name:cc-develop;animation-range:cover 4% cover 30%;
  }
  [data-motion="full"] :is(.scene__text,.onramp,.entry,.print)[data-reveal][data-delay="1"],
  [data-motion="subtle"] :is(.scene__text,.onramp,.entry,.print)[data-reveal][data-delay="1"]{animation-range:cover 10% cover 36%}
  [data-motion="full"] :is(.scene__text,.onramp,.entry,.print)[data-reveal][data-delay="2"],
  [data-motion="subtle"] :is(.scene__text,.onramp,.entry,.print)[data-reveal][data-delay="2"]{animation-range:cover 16% cover 42%}
  [data-motion="full"] :is(.scene__text,.onramp,.entry,.print)[data-reveal][data-delay="3"],
  [data-motion="subtle"] :is(.scene__text,.onramp,.entry,.print)[data-reveal][data-delay="3"]{animation-range:cover 22% cover 48%}

  /* the un-pinned scenes' copy: enter and stay. The old pinDrift faded the
     copy back OUT before the 160vh dwell released — on a flowing section it
     would vanish mid-screen. */
  [data-motion="full"] .pin-drift,
  [data-motion="subtle"] .pin-drift{
    animation:cc-develop linear both;
    animation-timeline:--pin;
    animation-range:cover 12% cover 42%;
    will-change:transform,opacity;
  }

  @keyframes cc-develop{
    0%{opacity:0;transform:translateY(30px);filter:blur(6px)}
    60%{opacity:1;filter:blur(0)}
    100%{opacity:1;transform:none;filter:blur(0)}
  }
  @keyframes cc-eyebrow{
    0%{opacity:0;transform:translateX(-16px)}
    100%{opacity:1;transform:none}
  }
  @keyframes cc-maskrise{
    0%{opacity:0;transform:translateY(26px);clip-path:inset(0 0 100% 0)}
    70%{opacity:1}
    100%{opacity:1;transform:none;clip-path:inset(0 0 -10% 0)}
  }
}