/* ═══════════════════════════════════════════════════════════════
   AMBER BLAKE — Conscious Connections
   Palettes · Type presets · Immersive scroll
   ═══════════════════════════════════════════════════════════════ */

/* ── PALETTES ──────────────────────────────────────────────── */
:root[data-palette="heritage"]{
  --bg:#F4E9E2; --bg-deep:#EAD6CC; --surface:#FCF6F1;
  --ink:#3A2C28; --ink-soft:#6E5A52; --ink-faint:#9A877E;
  --gold:#B68B4C; --gold-soft:#C8A878; --accent:#C2867F;
  --line:rgba(58,44,40,.16); --line-soft:rgba(58,44,40,.09);
  --veil:rgba(244,233,226,.0);
  --field:rgba(58,44,40,.04);
}
:root[data-palette="midnight"]{
  --bg:#15110E; --bg-deep:#0B0908; --surface:#1E1813;
  --ink:#EDE3D4; --ink-soft:#B6A48C; --ink-faint:#7C6C58;
  --gold:#CBA463; --gold-soft:#E0C691; --accent:#C28F87;
  --line:rgba(237,227,212,.15); --line-soft:rgba(237,227,212,.08);
  --veil:rgba(11,9,8,.0);
  --field:rgba(237,227,212,.05);
}
:root[data-palette="coastal"]{
  --bg:#E9E3D8; --bg-deep:#D6D0C2; --surface:#F3EFE7;
  --ink:#2C322E; --ink-soft:#586059; --ink-faint:#8A9088;
  --gold:#A98F63; --gold-soft:#C0AB85; --accent:#7C8B90;
  --line:rgba(44,50,46,.16); --line-soft:rgba(44,50,46,.08);
  --veil:rgba(233,227,216,.0);
  --field:rgba(44,50,46,.04);
}
/* HORIZON — "The Private Horizon": deep sea & dusk, warm light breaking through.
   The design-system signature world (DESIGN.md North Star made literal). */
:root[data-palette="horizon"]{
  --bg:#0F1A22; --bg-deep:#081117; --surface:#16242E;
  --ink:#E7EDEE; --ink-soft:#9FB4BD; --ink-faint:#6A828D;
  --gold:#D9A066; --gold-soft:#EBC79A; --accent:#5FA8B0;
  --line:rgba(231,237,238,.15); --line-soft:rgba(231,237,238,.08);
  --veil:rgba(8,17,23,.0);
  --field:rgba(231,237,238,.05);
}

/* ── HANDOFF PALETTES (prototype-5) ───────────────────────────
   Four named systems from the developer handoff, added alongside
   the original four worlds. The accent (--gold) carries each
   palette's signature metallic; the em-gradient runs
   gold → gold-soft → accent. */
/* WARM — earthy, grounded, light; champagne + honey gold over a sky/denim blue. */
:root[data-palette="warm"]{
  --bg:#F2ECE3; --bg-deep:#E3D8CC; --surface:#FBF7F1;
  --ink:#2C3A48; --ink-soft:#4A6FA5; --ink-faint:#8A99AB;
  --gold:#C9A961; --gold-soft:#D4AF75; --accent:#7BA8D1;
  --line:rgba(44,58,72,.16); --line-soft:rgba(44,58,72,.09);
  --veil:rgba(242,236,227,.0);
  --field:rgba(44,58,72,.04);
}
/* COOL — sophisticated, ethereal, light; silver/pewter metallic with a sapphire jewel. */
:root[data-palette="cool"]{
  --bg:#EDF0F4; --bg-deep:#DCE2EA; --surface:#F7F9FC;
  --ink:#1E2A44; --ink-soft:#41506B; --ink-faint:#8A93A4;
  --gold:#9CA0A0; --gold-soft:#B8B8B8; --accent:#1E40AF;
  --line:rgba(30,42,68,.15); --line-soft:rgba(30,42,68,.08);
  --veil:rgba(237,240,244,.0);
  --field:rgba(30,42,68,.04);
}
/* LUXURY — warm, opulent, rich; espresso-chocolate ground, champagne gold. */
:root[data-palette="luxury"]{
  --bg:#241710; --bg-deep:#180E08; --surface:#2F1F16;
  --ink:#F0E4D6; --ink-soft:#C9B19B; --ink-faint:#8C7460;
  --gold:#D4AF75; --gold-soft:#E2CBA1; --accent:#B07B53;
  --line:rgba(240,228,214,.15); --line-soft:rgba(240,228,214,.08);
  --veil:rgba(24,14,8,.0);
  --field:rgba(240,228,214,.05);
}
/* ROSE-GOLD — romantic, warm, refined; rose-copper + champagne over a soft rosy cream. */
:root[data-palette="rosegold"]{
  --bg:#F6E9E2; --bg-deep:#EBD4C9; --surface:#FCF4EF;
  --ink:#46291F; --ink-soft:#7A5040; --ink-faint:#AB897A;
  --gold:#C17A4E; --gold-soft:#D4AF75; --accent:#A84E2A;
  --line:rgba(70,41,31,.16); --line-soft:rgba(70,41,31,.09);
  --veil:rgba(246,233,226,.0);
  --field:rgba(70,41,31,.04);
}
/* POOL — bright light-blue swimming-pool water; vivid cyan caustics over pale aqua.
   Pair with the "Light through water" hero for the full pool effect. */
:root[data-palette="pool"]{
  --bg:#E6F4F7; --bg-deep:#CDE9EE; --surface:#F4FBFC;
  --ink:#0F3A44; --ink-soft:#2E6B78; --ink-faint:#74A6B0;
  --gold:#13A8C6; --gold-soft:#56CADC; --accent:#0E7FA8;
  --line:rgba(15,58,68,.16); --line-soft:rgba(15,58,68,.08);
  --veil:rgba(230,244,247,.0);
  --field:rgba(15,58,68,.04);
}
/* TROPICAL — white sands + turquoise lagoon; warm sand ground, teal-turquoise accents. */
:root[data-palette="tropical"]{
  --bg:#F6EFE0; --bg-deep:#EBDFC8; --surface:#FCF8EF;
  --ink:#173F3C; --ink-soft:#3E726C; --ink-faint:#8AA59F;
  --gold:#13B0A0; --gold-soft:#56D2C4; --accent:#0E8FA0;
  --line:rgba(23,63,60,.16); --line-soft:rgba(23,63,60,.08);
  --veil:rgba(246,239,224,.0);
  --field:rgba(23,63,60,.04);
}

/* ── TYPE PRESETS ─────────────────────────────────────────── */
:root[data-type="couture"]{
  --f-display:"Cormorant Garamond", Georgia, serif;
  --f-body:"Jost", system-ui, sans-serif;
  --f-label:"Jost", system-ui, sans-serif;
  --display-weight:500; --display-tight:-0.015em; --display-leading:0.98;
}
:root[data-type="editorial"]{
  --f-display:"Bodoni Moda", Georgia, serif;
  --f-body:"Hanken Grotesk", system-ui, sans-serif;
  --f-label:"Hanken Grotesk", system-ui, sans-serif;
  --display-weight:500; --display-tight:-0.01em; --display-leading:1.0;
}
:root[data-type="literary"]{
  --f-display:"EB Garamond", Georgia, serif;
  --f-body:"EB Garamond", Georgia, serif;
  --f-label:"Jost", system-ui, sans-serif;
  --display-weight:500; --display-tight:0; --display-leading:1.04;
}
/* ── EDITORIAL / PREMIUM TYPE PRESETS (prototype-5) ───────────
   Ten more pairings: a refined serif display + a clean body each. */
:root[data-type="maison"]{          /* high-contrast didone, gallery-clean body */
  --f-display:"Playfair Display", Georgia, serif;
  --f-body:"Inter", system-ui, sans-serif;
  --f-label:"Inter", system-ui, sans-serif;
  --display-weight:500; --display-tight:-0.01em; --display-leading:1.0;
}
:root[data-type="atelier"]{         /* bold fashion serif, geometric sans */
  --f-display:"DM Serif Display", Georgia, serif;
  --f-body:"Outfit", system-ui, sans-serif;
  --f-label:"Outfit", system-ui, sans-serif;
  --display-weight:400; --display-tight:0; --display-leading:1.02;
}
:root[data-type="broadsheet"]{      /* modern old-style, editorial */
  --f-display:"Fraunces", Georgia, serif;
  --f-body:"Archivo", system-ui, sans-serif;
  --f-label:"Archivo", system-ui, sans-serif;
  --display-weight:500; --display-tight:-0.01em; --display-leading:1.0;
}
:root[data-type="monument"]{        /* inscribed roman elegance */
  --f-display:"Marcellus", Georgia, serif;
  --f-body:"Jost", system-ui, sans-serif;
  --f-label:"Jost", system-ui, sans-serif;
  --display-weight:400; --display-tight:.01em; --display-leading:1.06;
}
:root[data-type="runway"]{          /* fashion didone */
  --f-display:"Prata", Georgia, serif;
  --f-body:"Hanken Grotesk", system-ui, sans-serif;
  --f-label:"Hanken Grotesk", system-ui, sans-serif;
  --display-weight:400; --display-tight:0; --display-leading:1.08;
}
:root[data-type="journal"]{         /* refined editorial serif */
  --f-display:"Spectral", Georgia, serif;
  --f-body:"Inter", system-ui, sans-serif;
  --f-label:"Inter", system-ui, sans-serif;
  --display-weight:500; --display-tight:-0.005em; --display-leading:1.05;
}
:root[data-type="riviera"]{         /* art-nouveau elegance, single-weight sans */
  --f-display:"Italiana", Georgia, serif;
  --f-body:"Outfit", system-ui, sans-serif;
  --f-label:"Outfit", system-ui, sans-serif;
  --display-weight:400; --display-tight:.01em; --display-leading:1.08;
}
:root[data-type="manor"]{           /* classic Caslon, book-luxe */
  --f-display:"Libre Caslon Display", Georgia, serif;
  --f-body:"Jost", system-ui, sans-serif;
  --f-label:"Jost", system-ui, sans-serif;
  --display-weight:400; --display-tight:0; --display-leading:1.04;
}
:root[data-type="gazette"]{         /* news-editorial serif */
  --f-display:"Newsreader", Georgia, serif;
  --f-body:"Hanken Grotesk", system-ui, sans-serif;
  --f-label:"Hanken Grotesk", system-ui, sans-serif;
  --display-weight:500; --display-tight:-0.005em; --display-leading:1.03;
}
:root[data-type="memoir"]{          /* warm serif throughout */
  --f-display:"Lora", Georgia, serif;
  --f-body:"Jost", system-ui, sans-serif;
  --f-label:"Jost", system-ui, sans-serif;
  --display-weight:500; --display-tight:-0.005em; --display-leading:1.04;
}

/* ── RESET / BASE ─────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:300;
  line-height:1.6; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .9s ease, color .9s ease;
}
::selection{background:var(--gold); color:var(--bg);}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
em{font-style:italic}

.wrap{width:min(1240px, 88vw); margin-inline:auto}

/* kickers / labels */
.kicker{
  font-family:var(--f-label); font-weight:500;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; gap:.7em;
}
.kicker span{color:var(--gold); letter-spacing:0}
.kicker--center{justify-content:center; color:var(--gold)}
.kicker--center span{color:var(--ink-faint)}

/* ── WEBGL STAGE ──────────────────────────────────────────── */
.stage{position:fixed; inset:0; z-index:0; pointer-events:none}
.stage canvas{width:100%; height:100%; display:block}
.stage-grain{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScuNScvPjwvc3ZnPg==");
}
.stage-veil{position:absolute; inset:0; background:var(--veil); transition:background .6s ease}

main{position:relative; z-index:1}

/* ── PAGE-LOAD + TRANSITION (prototype-5) ─────────────────────
   Snappy 300ms fade on first paint (responsive first impression);
   an elegant 700ms fade-out when navigating between pages, driven
   by site.js adding .is-leaving before it changes location. The
   fixed nav/stage live outside <main> so they never fade. */
@keyframes fadeInSnappy{from{opacity:0}to{opacity:1}}
main{animation:fadeInSnappy .3s ease-in-out both}
main.is-leaving{opacity:0; transition:opacity .7s ease-in-out; animation:none}
@media (prefers-reduced-motion: reduce){
  main{animation:none}
  main.is-leaving{transition:none; opacity:1}
}

/* ── NAV ──────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.2rem,4vw,3.2rem);
  transition:padding .5s ease, background .5s ease, backdrop-filter .5s ease;
  mix-blend-mode:normal;
}
.nav.scrolled{
  padding-block:1rem;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:.5px solid var(--line-soft);
}
.nav-brand{display:flex; align-items:center; line-height:1}
.mark{font-family:var(--f-display); font-weight:var(--display-weight)}
.mark--word{
  font-size:1.5rem; letter-spacing:.04em; font-style:italic;
  display:inline-flex; align-items:baseline; gap:.06em;
}
.mark-amp{color:var(--gold); font-style:normal; transform:translateY(-.1em)}
.mark--mono{display:none; font-size:1.7rem; letter-spacing:-.04em; position:relative}
.mark--mono .mono-a{color:var(--ink)}
.mark--mono .mono-b{color:var(--gold); margin-left:-.18em}

:root[data-name="monogram"] .mark--word{display:none}
:root[data-name="monogram"] .mark--mono{display:inline-flex; align-items:baseline}
/* logo wordmark variant (prototype-5) — gradient monogram driven by the palette */
.mark--logo{display:none; align-items:center}
.mark--logo svg{height:26px; width:auto; display:block}
:root[data-name="logo"] .mark--word{display:none}
:root[data-name="logo"] .mark--logo{display:inline-flex}
.foot-brand .mark--logo svg{height:40px}

.nav-links{display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.4rem)}
.nav-links a{
  font-family:var(--f-label); font-size:.74rem; font-weight:400; white-space:nowrap;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  display:inline-flex; align-items:baseline; gap:.45em; position:relative;
  transition:color .35s ease;
}
.nav-links a span{font-size:.6rem; color:var(--gold); letter-spacing:0}
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:-.45em; height:1px; width:0;
  background:var(--gold); transition:width .4s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:not(.nav-cta):hover{color:var(--ink)}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{
  color:var(--ink); border:.5px solid var(--line);
  padding:.6em 1.2em; border-radius:999px; transition:all .4s ease;
}
.nav-cta:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
@media (max-width:900px){
  .nav-links a:not(.nav-cta):not(:last-child){display:none}
}

/* ── SPLIT TYPE HELPERS ──────────────────────────────────── */
.line-mask{display:block; overflow:hidden}
.line-inner{display:block; will-change:transform}
[data-reveal]{will-change:transform,opacity}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{
  min-height:100svh; position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding:8rem clamp(1.2rem,4vw,3.2rem) 3rem;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(105deg, color-mix(in srgb,var(--bg) 62%, transparent) 0%,
      color-mix(in srgb,var(--bg) 30%, transparent) 34%, transparent 62%),
    linear-gradient(to top, color-mix(in srgb,var(--bg) 55%, transparent), transparent 32%);
}
.hero-inner{max-width:min(1100px,92vw)}
.hero-eyebrow{
  font-family:var(--f-label); font-weight:400;
  font-size:.82rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.6rem; padding-left:.2em;
}
.hero-title{
  font-family:var(--f-display); font-weight:var(--display-weight);
  /* prototype-5 — refined, elegant over bold (handoff spec). Still a hero,
     but lighter: ~2.5rem floor, ~5rem ceiling rather than the 11rem of p4. */
  font-size:clamp(2.5rem,6vw,5rem); line-height:1.08;
  letter-spacing:.01em; color:var(--ink);
}
.hero-title em{
  font-style:italic; color:transparent;
  background:linear-gradient(100deg,var(--gold),var(--gold-soft) 45%,var(--accent));
  -webkit-background-clip:text; background-clip:text;
}
.hero-sub{
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(1rem,1.7vw,1.4rem); letter-spacing:.06em;
  color:var(--ink-soft); margin-top:2rem; max-width:42ch;
}
.hero-foot{
  position:absolute; left:clamp(1.2rem,4vw,3.2rem); right:clamp(1.2rem,4vw,3.2rem);
  bottom:2.4rem; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
}
.hero-scroll{
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--f-label); font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-soft);
}
.hero-scroll i{
  width:42px; height:1px; background:var(--line); position:relative; overflow:hidden;
}
.hero-scroll i::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:translateX(-100%); animation:scrollline 2.6s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes scrollline{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}
.hero-coords{
  font-family:var(--f-label); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint); text-align:right;
}

/* ── STATS BAR ─────────────────────────────────────────────── */
.stats{
  position:relative; background:var(--bg);
  padding:0;
}
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{
  display:flex; flex-direction:column; gap:1.1rem;
  padding:clamp(2rem,4vw,3rem) clamp(1.1rem,2.4vw,2.2rem);
  border-right:.5px solid var(--line-soft);
}
.stat:last-child{border-right:0}
.stat-num{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.5rem,5vw,4rem); line-height:1;
  letter-spacing:-.03em; color:var(--gold);
}
.stat-num--inf{font-weight:400; letter-spacing:0}
.stat-label{
  font-family:var(--f-label); font-weight:500;
  font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}
@media (max-width:760px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:.5px solid var(--line-soft)}
}

/* ── MANIFESTO ────────────────────────────────────────────── */
.manifesto{
  position:relative; background:var(--bg);
  padding:clamp(7rem,16vh,13rem) 0;
  border-top:.5px solid var(--line-soft);
}
.manifesto-lead{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2.2rem,5.4vw,5.2rem); line-height:1.06;
  letter-spacing:var(--display-tight); margin:2rem 0;
  max-width:18ch;
}
.manifesto-lead em{color:var(--gold)}
.verbs{
  display:flex; flex-wrap:wrap; gap:.2em 1.1em;
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.1rem,2.4vw,2rem); color:var(--ink-faint);
  margin:1rem 0 2.6rem; max-width:30ch;
}
.verbs span{transition:color .4s ease}
.manifesto-body{
  font-size:clamp(1rem,1.5vw,1.3rem); font-weight:300;
  color:var(--ink-soft); max-width:46ch; line-height:1.7;
}

/* ── PILLARS ──────────────────────────────────────────────── */
.pillars{background:var(--bg); padding-bottom:clamp(4rem,10vh,8rem)}
.pillar{
  width:min(1240px,88vw); margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,6rem);
  align-items:center; padding:clamp(3rem,9vh,7rem) 0;
}
.pillar--rev .pillar-media{order:2}
.pillar-media{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--gold) 14%, var(--surface)),
      color-mix(in srgb,var(--accent) 12%, var(--bg-deep)));
  box-shadow:inset 0 0 0 .5px var(--line);
}
.pillar-media::after{
  content:""; position:absolute; inset:14px; z-index:2; pointer-events:none;
  border:.5px solid color-mix(in srgb,var(--bg) 55%, transparent);
}
.pillar-media .slot{width:100%; height:100%; display:block; position:relative; z-index:1}
.pillar-media .pillar-no{
  position:absolute; top:1rem; left:1.1rem; z-index:3;
  font-family:var(--f-display); font-style:italic; font-size:1.4rem;
  color:var(--bg); mix-blend-mode:difference; opacity:.9;
}
.pillar-copy{max-width:34ch}
.pillar-title{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2.4rem,5vw,4.4rem); line-height:1.02;
  letter-spacing:var(--display-tight); margin:1.4rem 0 1.4rem;
}
.pillar-title em{color:var(--gold)}
.pillar-copy p{color:var(--ink-soft); font-weight:300; font-size:1.05rem; line-height:1.7}
.link{
  display:inline-flex; align-items:center; gap:.6em; margin-top:1.8rem; white-space:nowrap;
  font-family:var(--f-label); font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink);
  padding-bottom:.4em; border-bottom:.5px solid var(--line);
  transition:gap .35s ease, border-color .35s ease;
}
.link i{color:var(--gold); transition:transform .35s ease}
.link:hover{gap:1em; border-color:var(--gold)}
.link:hover i{transform:translateX(.3em)}
@media (max-width:820px){
  .pillar{grid-template-columns:1fr; gap:2rem}
  .pillar--rev .pillar-media{order:0}
  .pillar-media{aspect-ratio:16/11}
}

/* ── APPROACH ─────────────────────────────────────────────── */
.approach{
  position:relative; background:var(--surface);
  padding:clamp(6rem,14vh,11rem) 0;
  border-top:.5px solid var(--line-soft); border-bottom:.5px solid var(--line-soft);
}
.approach-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start}
.approach-head{position:sticky; top:18vh}
.approach-title{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2rem,4.4vw,4rem); line-height:1.05;
  letter-spacing:var(--display-tight); margin:1.6rem 0 1.4rem;
}
.approach-title em{color:var(--gold)}
.approach-lede{color:var(--ink-soft); font-weight:300; font-size:1.08rem; max-width:38ch; line-height:1.7}
.approach-list{list-style:none; display:flex; flex-direction:column}
.approach-list li{
  display:flex; gap:1.4rem; padding:1.5rem 0;
  border-top:.5px solid var(--line-soft);
}
.approach-list li:last-child{border-bottom:.5px solid var(--line-soft)}
.approach-list li span{
  font-family:var(--f-display); font-style:italic; font-size:1.1rem;
  color:var(--gold); min-width:1.6em; padding-top:.1em;
}
.approach-list h4{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:1.5rem; letter-spacing:.005em; margin-bottom:.2em;
}
.approach-list p{color:var(--ink-soft); font-weight:300; font-size:1rem}
@media (max-width:820px){
  .approach-grid{grid-template-columns:1fr; gap:2.5rem}
  .approach-head{position:static}
}

/* ── RESULT ───────────────────────────────────────────────── */
.result{
  position:relative; padding:clamp(8rem,22vh,18rem) 0; text-align:center;
  background:transparent;
}
.result::before, .creed::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 50%,
    color-mix(in srgb,var(--bg) 52%, transparent) 0%,
    color-mix(in srgb,var(--bg) 22%, transparent) 45%, transparent 78%);
}
.result .wrap{max-width:min(1100px,90vw)}
.result-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem,5vw,4.8rem); line-height:1.12;
  letter-spacing:var(--display-tight); margin:1.8rem auto;
}
.result-title em{font-style:italic; color:var(--gold)}
.result-cta{
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(1.6rem,3.6vw,3rem); color:var(--accent); margin-top:1rem;
}

/* ── CREED ────────────────────────────────────────────────── */
.creed{
  position:relative; padding:clamp(7rem,16vh,13rem) 0; text-align:center;
  background:transparent;
}
.creed .wrap{max-width:min(960px,90vw)}
.creed-verses{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.2rem,2.8vw,2rem); line-height:1.6; color:var(--ink-soft);
}
.creed-verses span{display:block}
.creed-verses em{color:var(--gold); font-style:italic}
.creed-line{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2.2rem,6vw,5.4rem); line-height:1.04;
  letter-spacing:var(--display-tight); margin:2rem 0 1rem;
}
.creed-foot{
  font-family:var(--f-label); font-size:.8rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* ── CONNECT ──────────────────────────────────────────────── */
.connect{
  position:relative; background:var(--bg);
  padding:clamp(6rem,14vh,11rem) 0; border-top:.5px solid var(--line-soft);
}
.connect-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,7vw,7rem); align-items:start}
.connect-title{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2.2rem,4.8vw,4.4rem); line-height:1.04;
  letter-spacing:var(--display-tight); margin:1.6rem 0 1.4rem;
}
.connect-title em{color:var(--gold)}
.connect-note{color:var(--ink-soft); font-weight:300; font-size:1.08rem; max-width:38ch; line-height:1.7}
.connect-meta{list-style:none; margin-top:2.4rem; display:flex; flex-direction:column; gap:1rem}
.connect-meta li{
  font-family:var(--f-label); font-size:.92rem; color:var(--ink);
  display:flex; flex-direction:column; gap:.2em;
  padding-top:1rem; border-top:.5px solid var(--line-soft);
}
.connect-meta span{font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}

.connect-form{display:flex; flex-direction:column; gap:1.4rem}
.field{position:relative}
.field input, .field textarea, .field select{
  width:100%; background:var(--field); border:none;
  border-bottom:.5px solid var(--line);
  padding:1.4rem .2rem .7rem; font-family:var(--f-body); font-weight:300;
  font-size:1.05rem; color:var(--ink); outline:none; border-radius:2px 2px 0 0;
  transition:border-color .4s ease, background .4s ease;
}
.field textarea{resize:none; line-height:1.6}
.field select{appearance:none; cursor:pointer}
.field label{
  position:absolute; left:.2rem; top:1.3rem; pointer-events:none;
  font-family:var(--f-label); font-size:1rem; color:var(--ink-faint);
  transition:all .35s cubic-bezier(.2,.7,.3,1);
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 7%, var(--field))}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
  top:.1rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.submit{
  margin-top:.6rem; align-self:flex-start; cursor:pointer;
  display:inline-flex; align-items:center; gap:.8em;
  background:var(--ink); color:var(--bg); border:none;
  font-family:var(--f-label); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  padding:1.1em 2em; border-radius:999px; transition:all .4s ease;
}
.submit i{transition:transform .4s ease}
.submit:hover{background:var(--gold); color:var(--bg)}
.submit:hover i{transform:translateX(.4em)}
.form-done{font-family:var(--f-display); font-style:italic; font-size:1.2rem; color:var(--gold); min-height:1.2em}
@media (max-width:820px){ .connect-grid{grid-template-columns:1fr; gap:2.5rem} }

/* ── FOOTER ───────────────────────────────────────────────── */
.foot{background:var(--bg-deep); padding:clamp(3rem,7vh,5rem) 0 2.4rem; position:relative}
.foot-grid{display:grid; grid-template-columns:1fr auto; gap:2rem 3rem; align-items:start}
.foot-brand{display:flex; flex-direction:column; gap:.4rem}
.foot-brand .mark--word{font-size:1.7rem}
.foot-brand p{font-family:var(--f-display); font-style:italic; color:var(--ink-soft); font-size:1.05rem}
.foot-links{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; justify-content:flex-end}
.foot-links a{
  font-family:var(--f-label); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); transition:color .3s ease;
}
.foot-links a:hover{color:var(--gold)}
.foot-fine{
  grid-column:1/-1; margin-top:2rem; padding-top:1.6rem;
  border-top:.5px solid var(--line-soft);
  font-family:var(--f-label); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* ═══════════════════════════════════════════════════════════════
   PROTOTYPE-4 — multi-page surfaces (shared across all pages)
   Each page is one world + one hero concept; no long-scroll.
   ═══════════════════════════════════════════════════════════════ */

/* ── ADAPTIVE MEDIA ───────────────────────────────────────────
   A palette-driven duotone veil so a single base photograph reads
   as belonging to whatever color world the page is set to — the
   new "horizon" world has no bespoke photography, so it borrows
   the coastal plates and is re-toned here toward sea & dusk. */
.media-adapt{position:relative; isolation:isolate}
.media-adapt::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--bg-deep) 46%, transparent) 0%,
      transparent 46%,
      color-mix(in srgb, var(--gold) 20%, transparent) 100%);
  mix-blend-mode:soft-light; opacity:.92;
  transition:background .9s ease;
}
/* a second, very soft wash unifies the whole frame to the ground hue */
.media-adapt::after{ background:color-mix(in srgb, var(--bg) 12%, transparent) !important; }

/* ── NAV (multi-page active state) ────────────────────────── */
.nav-links a[aria-current="page"]{color:var(--gold)}
.nav-links a[aria-current="page"]::after{width:100% !important; background:var(--gold)}

/* ── PAGE HERO (sub-pages) ────────────────────────────────── */
.hero--page .hero-title{font-size:clamp(2.4rem,5.5vw,4.5rem)}
.hero-index{
  font-family:var(--f-display); font-style:italic; font-weight:var(--display-weight);
  font-size:clamp(2.4rem,5vw,3.6rem); color:var(--gold); line-height:1;
  display:block; margin-bottom:.4rem;
}
.hero-lead{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,2.6vw,2rem); color:var(--ink-soft);
  margin-top:1.8rem; max-width:30ch; line-height:1.4;
}

/* ── DOORS (homepage index — editorial, not a card grid) ───── */
.doors{position:relative; background:var(--bg); padding:clamp(3rem,8vh,6rem) 0 clamp(5rem,12vh,9rem)}
.doors-head{margin-bottom:1rem}
.doors-list{list-style:none}
/* Full-bleed container: the hover background + divider rules span the whole
   viewport width (content is re-constrained to the wrap below). The
   margin-left:calc(50% - 50vw) trick pulls the 100vw box's left edge to the
   viewport edge; body{overflow-x:hidden} guards against any scrollbar overflow. */
.door{position:relative; display:block; overflow:hidden; border-top:.5px solid var(--line-soft);
  width:100vw; margin-left:calc(50% - 50vw)}
.door:last-child{border-bottom:.5px solid var(--line-soft)}
.door-bg{
  position:absolute; inset:0; z-index:0; opacity:0; transform:scale(1.08);
  background-size:cover; background-position:center;
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform 1.4s cubic-bezier(.2,.7,.3,1);
}
.door::after{
  content:""; position:absolute; inset:0; z-index:1; opacity:0;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--bg) 78%, transparent),
    color-mix(in srgb,var(--bg) 40%, transparent) 60%, transparent);
  transition:opacity .8s ease;
}
.door-row{
  position:relative; z-index:2; display:grid;
  width:min(1240px,88vw); margin-inline:auto;   /* content stays in the wrap */
  grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(1.2rem,4vw,3.5rem); padding:clamp(1.6rem,4vh,2.8rem) 0;
  transition:padding-left .6s cubic-bezier(.2,.7,.3,1);
}
.door-no{
  font-family:var(--f-display); font-style:italic; font-size:1.2rem;
  color:var(--gold); min-width:2.2em;
}
.door-name{display:flex; flex-direction:column; gap:.4rem}
.door-title{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2rem,5vw,3.8rem); line-height:1; letter-spacing:var(--display-tight);
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.door-title em{color:var(--gold); font-style:italic}
.door-line{
  font-family:var(--f-label); font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint);
  max-width:40ch; transition:color .5s ease;
}
.door-go{
  font-family:var(--f-display); font-style:italic; font-size:1.6rem; color:var(--ink-faint);
  transition:transform .6s cubic-bezier(.2,.7,.3,1), color .5s ease;
}
.door:hover .door-bg{opacity:.6; transform:scale(1)}
.door:hover::after{opacity:1}
.door:hover .door-row{padding-left:clamp(1rem,2.5vw,2rem)}
.door:hover .door-title{transform:translateX(.1em)}
.door:hover .door-go{transform:translateX(.4em); color:var(--gold)}
.door:hover .door-line{color:var(--ink-soft)}
@media (max-width:720px){
  .door-row{grid-template-columns:auto 1fr; gap:1.2rem}
  .door-go{display:none}
  /* No resting background on mobile — reveal only while the user is touching. */
  .door-bg{opacity:0}
  .door:active .door-bg{opacity:.55; transform:scale(1)}
  .door:active::after{opacity:1}
}

/* ── MARQUEE (auto-scrolling places) ── */
.marquee{
  position:relative; overflow:hidden; background:var(--bg);
  border-block:.5px solid var(--line-soft);
}
.marquee-track{
  display:flex; width:max-content; will-change:transform;
  animation:marquee 42s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  flex:none; display:inline-flex; align-items:center;
  padding-block:1.4rem;
  font-family:var(--f-label); font-weight:500;
  font-size:.65rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
}
.marquee-item i{margin-inline:2.6rem; font-style:normal; color:var(--gold); opacity:.4}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none; width:100%; flex-wrap:wrap; justify-content:center}
}

/* ── LEDGER (a private menu of offerings — sub-page section) ── */
.ledger{position:relative; background:var(--surface); padding:clamp(6rem,14vh,11rem) 0;
  border-top:.5px solid var(--line-soft); border-bottom:.5px solid var(--line-soft)}
.ledger-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(2.5rem,6vw,6rem); align-items:start}
.ledger-head{position:sticky; top:18vh}
.ledger-title{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.05;
  letter-spacing:var(--display-tight); margin:1.4rem 0 1.2rem;
}
.ledger-title em{color:var(--gold)}
.ledger-lede{color:var(--ink-soft); font-weight:300; font-size:1.06rem; max-width:36ch; line-height:1.7}
.ledger-list{list-style:none; display:flex; flex-direction:column}
.ledger-list li{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:baseline;
  padding:1.5rem 0; border-top:.5px solid var(--line-soft);
}
.ledger-list li:last-child{border-bottom:.5px solid var(--line-soft)}
.ledger-list li span{
  font-family:var(--f-display); font-style:italic; font-size:1.05rem;
  color:var(--gold); min-width:1.6em; padding-top:.1em;
}
.ledger-list h4{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(1.4rem,2.4vw,1.9rem); letter-spacing:.005em; margin-bottom:.25em;
}
.ledger-list p{color:var(--ink-soft); font-weight:300; font-size:1rem; line-height:1.6; max-width:46ch}
@media (max-width:820px){
  .ledger-grid{grid-template-columns:1fr; gap:2.5rem}
  .ledger-head{position:static}
}

/* ── CTA (compact close on sub-pages) ─────────────────────── */
.cta{position:relative; padding:clamp(7rem,18vh,14rem) 0; text-align:center; background:transparent}
.cta::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 50%,
    color-mix(in srgb,var(--bg) 52%, transparent) 0%,
    color-mix(in srgb,var(--bg) 22%, transparent) 45%, transparent 78%);
}
.cta .wrap{max-width:min(900px,90vw)}
.cta-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem,5vw,4.2rem); line-height:1.1;
  letter-spacing:var(--display-tight); margin:1.4rem auto 2.2rem;
}
.cta-title em{font-style:italic; color:var(--gold)}
.cta .submit{margin:0 auto}

/* ═══════════════════════════════════════════════════════════════
   GALLERY (prototype-5) — carousel + fullscreen lightbox
   Forty location plates. The carousel is a scroll-snap rail (works
   as a single row on mobile and a multi-up rail on desktop); the
   lightbox is built + driven by js/gallery.js.
   ═══════════════════════════════════════════════════════════════ */
.gallery{position:relative; background:var(--bg); padding:clamp(6rem,14vh,11rem) 0;
  border-top:.5px solid var(--line-soft)}
.gallery .wrap{margin-bottom:clamp(2rem,5vh,3.5rem)}
.gallery-title{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.05;
  letter-spacing:var(--display-tight); margin:1.4rem 0 1rem;
}
.gallery-title em{color:var(--gold)}
.gallery-lede{color:var(--ink-soft); font-weight:300; font-size:1.06rem; max-width:42ch; line-height:1.7}

.gallery-rail{position:relative}
.gal-track{
  display:flex; gap:clamp(.8rem,1.6vw,1.4rem);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:.5rem clamp(1.2rem,6vw,8vw); scrollbar-width:none;
}
.gal-track::-webkit-scrollbar{display:none}
.gal-fig{
  flex:0 0 auto; scroll-snap-align:center; margin:0; cursor:pointer;
  width:clamp(240px,34vw,440px);
}
.gal-fig figure, .gal-fig{position:relative}
.gal-shot{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px;
  background:var(--bg-deep); box-shadow:inset 0 0 0 .5px var(--line);
}
.gal-shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform 1.2s cubic-bezier(.2,.7,.3,1), opacity .6s ease, filter .3s ease;
  opacity:0;
  /* gallery grade — saturation eased back by default; panel sliders tune it */
  filter:saturate(var(--gal-sat,0.85)) brightness(var(--gal-bri,1)) contrast(var(--gal-con,1));
}
.gal-shot img.is-in{opacity:1}
.gal-fig:hover .gal-shot img{transform:scale(1.06)}
.gal-shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, color-mix(in srgb,var(--bg-deep) 60%, transparent), transparent 46%);
  opacity:0; transition:opacity .5s ease;
}
.gal-fig:hover .gal-shot::after{opacity:1}
.gal-cap{
  display:flex; align-items:baseline; gap:.6em; margin-top:.9rem;
  font-family:var(--f-label); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.gal-cap b{color:var(--gold); font-weight:500; font-variant-numeric:tabular-nums}

.gal-nav{
  position:absolute; top:calc(50% - 1.6rem); z-index:3; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; border:.5px solid var(--line);
  background:color-mix(in srgb,var(--bg) 78%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--ink); font-size:1.3rem; line-height:1;
  transition:background .35s ease, color .35s ease, opacity .35s ease, transform .35s ease;
}
.gal-nav:hover{background:var(--ink); color:var(--bg)}
.gal-prev{left:clamp(.4rem,2vw,1.4rem)}
.gal-next{right:clamp(.4rem,2vw,1.4rem)}
.gal-nav[disabled]{opacity:.25; pointer-events:none}
@media (max-width:720px){ .gal-nav{display:none} }

/* persistent side tab → opens the gallery lightbox */
.gallery-tab{
  position:fixed; left:0; top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; z-index:39; cursor:pointer;
  font-family:var(--f-label); font-size:.66rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--bg);
  background:var(--ink); border:none; padding:1.4em .7em; border-radius:0 6px 6px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transition:background .4s ease, padding .35s ease;
}
.gallery-tab:hover{background:var(--gold); padding-left:1.1em}
.gallery-tab .gt-dot{display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold); margin-bottom:1em}
.gallery-tab:hover .gt-dot{background:var(--bg)}
@media (max-width:720px){ .gallery-tab{display:none} }

/* ── LIGHTBOX ─────────────────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:2147483630; display:none;
  align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--bg-deep) 88%, #000);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .4s ease;
}
.lightbox.is-open{display:flex; opacity:1}
.lb-stage{position:relative; width:min(92vw,1400px); height:min(86vh,1000px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem}
.lb-img{
  max-width:100%; max-height:78vh; object-fit:contain; border-radius:2px;
  box-shadow:0 30px 90px rgba(0,0,0,.5); opacity:0; transition:opacity .45s ease, filter .3s ease;
  filter:saturate(var(--gal-sat,0.85)) brightness(var(--gal-bri,1)) contrast(var(--gal-con,1));
}
.lb-img.is-in{opacity:1}
.lb-cap{
  font-family:var(--f-label); font-size:.8rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); text-align:center;
}
.lb-cap b{color:var(--gold); font-weight:500; margin-right:.7em; font-variant-numeric:tabular-nums}
.lb-btn{
  position:absolute; z-index:2; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:var(--ink);
  border:.5px solid var(--line); background:color-mix(in srgb,var(--bg) 70%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:1.5rem; line-height:1; transition:background .35s ease, color .35s ease;
}
.lb-btn:hover{background:var(--ink); color:var(--bg)}
.lb-prev{left:-1rem; top:calc(50% - 4rem)}
.lb-next{right:-1rem; top:calc(50% - 4rem)}
.lb-close{top:-3.2rem; right:-.4rem; width:46px; height:46px; font-size:1.2rem}
@media (max-width:720px){
  .lb-prev{left:.2rem} .lb-next{right:.2rem} .lb-close{top:-3rem; right:.2rem}
  .lb-stage{width:96vw}
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important}
  html{scroll-behavior:auto}
  .door-bg{opacity:.32 !important; transform:none !important}
  .gal-track{scroll-behavior:auto}
  .gal-shot img, .lb-img{opacity:1 !important; transition:none}
}
/* On mobile, keep "no resting background until touch" even for reduced-motion
   users (this overrides the static .32 hint above; placed last so it wins). */
@media (max-width:720px) and (prefers-reduced-motion: reduce){
  .door-bg{opacity:0 !important}
  .door:active .door-bg{opacity:.55 !important}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE MENU (prototype-5) — six concepts ported from the Amber Blake
   "Mobile Menus — Six Directions" design. Every rule inherits the active
   palette's --bg/--ink/--gold… so all six adapt to all ten color worlds.
   Active only ≤720px; the variant is chosen by [data-menu] + the panel.
   ═══════════════════════════════════════════════════════════════ */
.mm-root{ position:fixed; inset:0; z-index:1200; pointer-events:none;
  --ease:cubic-bezier(.22,.61,.36,1); font-family:var(--f-label); font-weight:300; color:var(--ink); }
.mm-root.menu-open{ pointer-events:auto }
/* trigger sits fixed top-right, above the overlays, aligned to the nav */
.mm-trigger{ position:fixed; top:1.35rem; right:clamp(1.1rem,4vw,1.6rem); z-index:1300 }
/* desktop: no mobile menu at all */
@media (min-width:721px){ .mm-root, .mm-trigger{ display:none !important } }
/* mobile: the native link row gives way to the menu trigger */
@media (max-width:720px){ .nav-links{ display:none } .nav{ pointer-events:none } .nav-brand{ pointer-events:auto } }


.mm-root * { box-sizing: border-box; margin: 0px; padding: 0px; }

.mm-grain { position: absolute; inset: 0px; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay; z-index: 1; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScuNScvPjwvc3ZnPg=="); }

.mm-top { position: absolute; top: 50px; left: 20px; right: 16px; z-index: 60; display: flex; align-items: center; justify-content: space-between; }

.mm-brand { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 19px; letter-spacing: 0.03em; line-height: 1; color: var(--ink); display: inline-flex; align-items: baseline; gap: 0.08em; transition: color .5s var(--ease); }

.mm-brand b { color: var(--gold); font-style: normal; font-weight: 500; transform: translateY(-0.06em); }

.mm-trigger { width: 44px; height: 44px; flex: 0 0 auto; position: relative; background: none; border: none; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; }

.mm-dots { display: flex; align-items: center; gap: 5px; transition: opacity .4s var(--ease), transform .5s var(--ease); }

.mm-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentcolor; display: block; }

.mm-dots i:last-child { background: var(--gold); }

.mm-x { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s var(--ease); }

.mm-x::before, .mm-x::after { content: ""; position: absolute; width: 19px; height: 1.4px; background: currentcolor; border-radius: 2px; transition: transform .5s var(--ease); }

.mm-x::before { transform: rotate(45deg) scaleX(0); }

.mm-x::after { transform: rotate(-45deg) scaleX(0); }

.mm-trigger.is-open .mm-dots { opacity: 0; transform: scale(0.4); }

.mm-trigger.is-open .mm-x { opacity: 1; }

.mm-trigger.is-open .mm-x::before { transform: rotate(45deg) scaleX(1); }

.mm-trigger.is-open .mm-x::after { transform: rotate(-45deg) scaleX(1); }

.mm-trigger.on-dark { color: rgb(237, 227, 212); }

.mm-root.menu-open .mm-hero { filter: blur(2px); }

.c1-veil { position: absolute; inset: 0px; z-index: 20; background: color-mix(in srgb,var(--bg) 78%, transparent); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .55s var(--ease); }

.mm-root.menu-open .c1-veil { opacity: 1; pointer-events: auto; }

.c1-field { position: absolute; inset: 0px; z-index: 22; pointer-events: none; }

.mm-root.menu-open .c1-field { pointer-events: auto; }

.c1-arc { position: absolute; top: 0px; right: 0px; width: 1px; height: 1px; overflow: visible; }

.c1-node { position: absolute; right: 0px; top: 0px; display: flex; align-items: center; gap: 12px; white-space: nowrap; transform-origin: right center; transform: translate(24px, -20px) scale(0.86); opacity: 0; transition-property: ; transition-duration: ; transition-timing-function: ; transition-behavior: ; transition-delay: 0ms; cursor: pointer; }

.mm-root.menu-open .c1-node { opacity: 1; transform: translate(0px, 0px) scale(1); }

.c1-thread { height: 1px; background: var(--line); position: relative; flex: 0 0 auto; width: 0px; transition: width .6s var(--ease); }

.c1-thread::after { content: ""; position: absolute; right: 0px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--gold); }

.mm-root.menu-open .c1-node .c1-thread { width: var(--thread,34px); }

.c1-label { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }

.c1-num { font-size: 8.5px; letter-spacing: 0.24em; color: var(--gold); }

.c1-name { font-family: var(--f-display); font-size: 23px; line-height: 1; color: var(--ink); letter-spacing: -0.01em; }

.c1-node:active .c1-name, .c1-node.sel .c1-name { color: var(--gold); }

.c1-dotwrap { position: absolute; right: -3px; top: 50%; width: 0px; height: 0px; }

.c2-sheet { position: absolute; inset: 0px; z-index: 20; background: var(--bg); display: flex; flex-direction: column; padding: 118px 22px 26px; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }

.mm-root.menu-open .c2-sheet { opacity: 1; pointer-events: auto; }

.c2-kick { font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 22px; }

.c2-list { list-style: none; flex: 1 1 0%; }

.c2-item { border-top: .5px solid var(--line-soft); padding: 15px 0px; display: flex; align-items: baseline; gap: 14px; cursor: pointer; }

.c2-item:last-child { border-bottom: .5px solid var(--line-soft); }

.c2-mask { overflow: hidden; display: block; }

.c2-in { display: block; transform: translateY(112%); transition: transform .8s var(--ease); }

.mm-root.menu-open .c2-item .c2-in { transform: translateY(0px); }

.c2-num { font-family: var(--f-display); font-style: italic; font-size: 13px; color: var(--gold); flex: 0 0 auto; }

.c2-name { font-family: var(--f-display); font-weight: 500; font-size: 38px; line-height: 0.98; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; }

.c2-name em { font-style: italic; color: var(--gold); }

.c2-sub { font-family: var(--f-display); font-style: italic; font-size: 13px; color: var(--ink-faint); margin-top: 3px; }

.c2-item:active .c2-name { color: var(--gold); }

.c2-foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease) .35s, transform .6s var(--ease) .35s; }

.mm-root.menu-open .c2-foot { opacity: 1; transform: translateY(0px); }

.c2-connect { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; border-bottom: .5px solid var(--line); padding-bottom: 5px; }

.c2-connect i { color: var(--gold); font-style: normal; }

.c2-mail { font-family: var(--f-display); font-style: italic; font-size: 13px; color: var(--ink-soft); }

.c3-curtain { position: absolute; left: 0px; right: 0px; top: 0px; z-index: 30; height: 100%; background: var(--bg-deep); transform: translateY(-100%); box-shadow: rgba(58, 44, 40, 0.22) 0px 24px 50px; will-change: transform; display: flex; flex-direction: column; padding: 96px 22px 30px; }

.c3-curtain.snap { transition: transform .6s var(--ease); }

.c3-grip { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); }

.c3-grip span { display: block; width: 42px; height: 3px; border-radius: 3px; background: var(--line); }

.c3-kick { font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; }

.c3-list { list-style: none; flex: 1 1 0%; display: flex; flex-direction: column; justify-content: center; gap: 2px; }

.c3-row { display: flex; align-items: baseline; gap: 12px; padding: 13px 0px; border-bottom: .5px solid var(--line-soft); cursor: pointer; }

.c3-num { font-family: var(--f-display); font-style: italic; font-size: 12px; color: var(--gold); }

.c3-name { font-family: var(--f-display); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }

.c3-row:active .c3-name { color: var(--gold); }

.c3-tab { position: absolute; top: 96px; right: 0px; z-index: 25; display: flex; align-items: center; gap: 7px; padding: 9px 12px 9px 14px; background: var(--bg-deep); border-radius: 999px 0px 0px 999px; box-shadow: rgba(58, 44, 40, 0.14) 0px 6px 18px; font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); opacity: 0; transform: translateX(40px); transition: opacity .5s var(--ease) .4s, transform .5s var(--ease) .4s; pointer-events: none; }

.mm-root.c3-rest .c3-tab { opacity: 1; transform: translateX(0px); }

.c3-tab b { display: block; width: 14px; height: 1px; background: var(--gold); position: relative; }

.c3-tab b::after { content: ""; position: absolute; right: 0px; top: -2px; width: 5px; height: 5px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg); }

.c3-hint { position: absolute; left: 0px; right: 0px; top: 60px; z-index: 24; text-align: center; font-size: 8.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint); opacity: 0; transition: opacity .5s var(--ease); }

.mm-root.c3-rest .c3-hint { opacity: 1; animation: c3pulse 2.6s var(--ease) infinite; }
 
  0%, 100% { opacity: 0.4; }

  50% { opacity: 1; }

.c4-flood { position: absolute; inset: 0px; z-index: 24; clip-path: circle(0px at calc(100% - 38px) 72px); transition: clip-path .85s var(--ease); pointer-events: none; overflow: hidden; background: rgb(23, 16, 9); }

.mm-root.menu-open .c4-flood { clip-path: circle(150% at calc(100% - 38px) 72px); pointer-events: auto; }

.c4-liquid { position: absolute; inset: -30%; z-index: 1; }

.c4-liquid span { position: absolute; border-radius: 50%; filter: blur(26px); mix-blend-mode: screen; }

.c4-b1 { width: 70%; height: 60%; left: -6%; top: 8%; background: radial-gradient(circle, rgb(201, 160, 90), transparent 68%); animation: 14s ease-in-out 0s infinite normal none running c4drift1; }

.c4-b2 { width: 62%; height: 62%; right: -8%; top: 40%; background: radial-gradient(circle, rgb(142, 106, 46), transparent 70%); animation: 18s ease-in-out 0s infinite normal none running c4drift2; }

.c4-b3 { width: 50%; height: 48%; left: 18%; bottom: -6%; background: radial-gradient(circle, rgb(224, 198, 145), transparent 72%); animation: 22s ease-in-out 0s infinite reverse none running c4drift1; }
 
  0%, 100% { transform: translate(0px, 0px); }

  50% { transform: translate(8%, -6%); }
 
  0%, 100% { transform: translate(0px, 0px); }

  50% { transform: translate(-7%, 5%); }

.c4-inner { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; padding: 116px 24px 28px; color: rgb(237, 227, 212); }

.c4-kick { font-size: 9px; letter-spacing: 0.36em; text-transform: uppercase; color: rgb(224, 198, 145); margin-bottom: 24px; opacity: 0; transition: opacity .5s var(--ease) .45s; }

.mm-root.menu-open .c4-kick { opacity: 1; }

.c4-list { list-style: none; flex: 1 1 0%; display: flex; flex-direction: column; gap: 3px; }

.c4-row { display: flex; align-items: baseline; gap: 13px; padding: 13px 0px; border-top: 0.5px solid rgba(224, 198, 145, 0.16); cursor: pointer; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }

.c4-row:last-child { border-bottom: 0.5px solid rgba(224, 198, 145, 0.16); }

.mm-root.menu-open .c4-row { opacity: 1; transform: translateY(0px); }

.c4-num { font-family: var(--f-display); font-style: italic; font-size: 12px; color: rgb(224, 198, 145); }

.c4-name { font-family: var(--f-display); font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; color: transparent; background: linear-gradient(100deg, rgb(224, 198, 145), rgb(203, 164, 99) 50%, rgb(194, 143, 135)) text; }

.c4-foot { margin-top: 16px; font-family: var(--f-display); font-style: italic; font-size: 13px; color: rgb(182, 164, 140); opacity: 0; transition: opacity .6s var(--ease) .5s; }

.mm-root.menu-open .c4-foot { opacity: 1; }

.mm-root.c4.menu-open .mm-brand { color: rgb(237, 227, 212); }

.mm-root.c4.menu-open .mm-cap { background: linear-gradient(to top, rgba(23, 16, 9, 0.88), transparent); color: rgb(156, 138, 114); }

.mm-root.c4.menu-open .mm-cap b { color: rgb(224, 198, 145); }

.c5-stage { position: absolute; inset: 0px; z-index: 20; pointer-events: none; perspective: 1100px; perspective-origin: 50% 0%; display: flex; flex-direction: column; padding: 92px 0px 0px; }

.c5-veil { position: absolute; inset: 0px; background: color-mix(in srgb,var(--bg) 70%, transparent); opacity: 0; transition: opacity .5s var(--ease); }

.mm-root.menu-open .c5-stage { pointer-events: auto; }

.mm-root.menu-open .c5-veil { opacity: 1; }

.c5-panel { position: relative; flex: 1 1 0%; transform-origin: center top; transform: rotateX(-92deg); opacity: 0; transition: transform .7s var(--ease), opacity .4s var(--ease); background: linear-gradient(180deg, var(--surface), var(--bg-deep)); border-top: .5px solid var(--line-soft); box-shadow: rgba(58, 44, 40, 0.5) 0px 14px 24px -16px inset; display: flex; align-items: center; gap: 16px; padding: 0px 26px; cursor: pointer; }

.mm-root.menu-open .c5-panel { transform: rotateX(0deg); opacity: 1; }

.c5-panel::after { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background: linear-gradient(90deg,transparent,var(--gold),transparent); opacity: 0.4; }

.c5-num { font-family: var(--f-display); font-style: italic; font-size: 14px; color: var(--gold); width: 26px; flex: 0 0 auto; }

.c5-name { font-family: var(--f-display); font-weight: 500; font-size: 32px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }

.c5-sub { font-family: var(--f-display); font-style: italic; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

.c5-panel:active { background: linear-gradient(180deg, color-mix(in srgb,var(--gold) 10%, var(--surface)), var(--bg-deep)); }

.c6-veil { position: absolute; inset: 0px; z-index: 20; background: color-mix(in srgb,var(--bg) 80%, transparent); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }

.mm-root.menu-open .c6-veil { opacity: 1; pointer-events: auto; }

.c6-stage { position: absolute; inset: 0px; z-index: 22; pointer-events: none; display: flex; align-items: center; justify-content: center; perspective: 760px; opacity: 0; transition: opacity .45s var(--ease); }

.mm-root.menu-open .c6-stage { pointer-events: auto; opacity: 1; }

.c6-drum { position: relative; width: 100%; height: 300px; transform-style: preserve-3d; touch-action: none; cursor: grab; }

.c6-drum:active { cursor: grabbing; }

.c6-item { position: absolute; left: 0px; right: 0px; top: 50%; height: 64px; margin-top: -32px; display: flex; align-items: center; justify-content: center; gap: 14px; backface-visibility: hidden; transition: opacity 0.25s linear; }

.c6-inum { font-family: var(--f-display); font-style: italic; font-size: 13px; color: var(--gold); }

.c6-iname { font-family: var(--f-display); font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }

.c6-rail { position: absolute; left: 24px; right: 24px; top: 50%; height: 64px; margin-top: -32px; z-index: 23; pointer-events: none; border-top: .5px solid var(--line); border-bottom: .5px solid var(--line); }

.c6-rail::before, .c6-rail::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border: 1px solid var(--gold); }

.c6-rail::before { left: -2px; border-right: none; border-bottom: none; }

.c6-rail::after { right: -2px; border-left: none; border-top: none; }

.c6-enter { position: absolute; left: 0px; right: 0px; bottom: 64px; z-index: 24; text-align: center; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; justify-content: center; gap: 9px; opacity: 0; transition: opacity .5s var(--ease) .3s; }

.mm-root.menu-open .c6-enter { opacity: 1; }

.c6-enter i { font-style: normal; }

.c6-hint { position: absolute; left: 0px; right: 0px; top: 96px; z-index: 24; text-align: center; font-size: 8px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint); opacity: 0; transition: opacity .5s var(--ease) .3s; }

.mm-root.menu-open .c6-hint { opacity: 1; }

  .mm-root * { transition-duration: 0.001ms !important; animation: auto ease 0s 1 normal none running none !important; }
@keyframes c3pulse { 
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@keyframes c4drift1 { 
  0%, 100% { transform: translate(0px, 0px); }
  50% { transform: translate(8%, -6%); }
}
@keyframes c4drift2 { 
  0%, 100% { transform: translate(0px, 0px); }
  50% { transform: translate(-7%, 5%); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-root * { transition-duration: 0.001ms !important; animation: auto ease 0s 1 normal none running none !important; }
}
/* ── MOBILE MENU — trigger position override ──────────────────
   Must come last: the ported .mm-trigger{position:relative} would otherwise
   win by source order and drop the trigger to the page bottom. Pin it fixed
   top-right (above the overlays) on mobile only. */
.mm-trigger{ position:fixed; top:1.35rem; right:clamp(1.1rem,4vw,1.6rem); z-index:1300; width:44px; height:44px; }
@media (min-width:721px){ .mm-trigger{ display:none !important } }