/* ============================================================
   Paula's Method · site.css
   Design system per materials/paulas-method/01-brand.
   Five colors. Two families. Zero radius. Restraint is the flex.
   ============================================================ */

/* ---------- fonts (self-hosted, latin subsets) ---------- */
@font-face{
  font-family:"Great Vibes";
  src:url("../fonts/greatvibes-latin.woff2") format("woff2");
  font-style:normal;font-weight:400;font-display:swap;
}
@font-face{
  font-family:"Bodoni Moda";
  src:url("../fonts/bodoni-moda-latin.woff2") format("woff2");
  font-style:normal;font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* The Glamour Editorial system — EB Garamond (bracketed editorial serif),
   Open Sans (body), Montserrat (labels/taglines). Latin-subset woff2. */
@font-face{
  font-family:"EB Garamond";
  src:url("../fonts/eb-garamond-latin.woff2") format("woff2");
  font-style:normal;font-weight:400 600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"EB Garamond";
  src:url("../fonts/eb-garamond-italic-latin.woff2") format("woff2");
  font-style:italic;font-weight:400 600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Open Sans";
  src:url("../fonts/open-sans-latin.woff2") format("woff2");
  font-style:normal;font-weight:300 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Open Sans";
  src:url("../fonts/open-sans-italic-latin.woff2") format("woff2");
  font-style:italic;font-weight:300 600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat-latin.woff2") format("woff2");
  font-style:normal;font-weight:500 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* metric-matched fallbacks to kill layout shift while woff2 loads */
@font-face{
  font-family:"Gilda-fallback";src:local("Garamond"),local("Georgia");
  size-adjust:92%;ascent-override:104%;descent-override:26%;line-gap-override:0%;
}
@font-face{
  font-family:"OpenSans-fallback";src:local("Segoe UI"),local("Helvetica Neue"),local("Arial");
  size-adjust:100%;ascent-override:101%;descent-override:28%;line-gap-override:0%;
}

/* ---------- tokens (mirror of 01-brand/tokens.css) ---------- */
:root{
  --cream:#F7F2E8; --sanct:#171310;
  --bone:#F7F2E8; --sand:#EDE4D2; --stone:#C7B9A3; --ink:#171310;
  --gold:#A8895A; --gold-deep:#7A5F36; --white:#FFFFFF;

  --font-d:"EB Garamond","Gilda-fallback",Georgia,serif;
  --font-b:"Open Sans","OpenSans-fallback",system-ui,sans-serif;
  --font-label:"Montserrat","OpenSans-fallback",system-ui,sans-serif;
  /* EB Garamond is an old-style bracketed serif — reads larger/warmer than
     Gilda, so ease the display clamps back down a touch */
  --size-hero:clamp(3.6rem,8.6vw,8rem);
  --size-h2:clamp(2.3rem,5.2vw,4.4rem);
  --size-h3:clamp(1.5rem,2.7vw,2.1rem);
  --size-lead:1.24rem; --size-body:1.04rem;
  --size-eyebrow:.78rem; --track:.22em; --measure:62ch;

  --s1:.5rem; --s2:1rem; --s3:1.7rem; --s4:2.6rem; --s5:4.2rem; --s6:6.5rem;
  --gutter:clamp(1.25rem,4vw,4rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --easeio:cubic-bezier(.65,0,.35,1);
  --dur-m:280ms; --dur-r:900ms; --dur-slow:1400ms; --rise:28px;

  --radius:0;
  --hairline:1px solid color-mix(in srgb,var(--stone) 60%,transparent);
  --headh:72px;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-m:0ms;--dur-r:0ms;--dur-slow:0ms;--rise:0px}
}
/* manual dark theme: sanctuary surfaces (--sanct/--cream) stay constant */
:root[data-theme="dark"]{
  --bone:#1A1613; --sand:#221C16; --stone:#5E5140;
  --ink:#F0E9DD; --gold:#C2A574; --gold-deep:#C9A76C; --white:#0F0D0B;
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--headh) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bone);color:var(--ink);
  font-family:var(--font-b);font-size:var(--size-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--gold);color:#171310}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.dark :focus-visible,.menu :focus-visible{outline-color:var(--gold)}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:400;line-height:1.05;text-wrap:balance}
strong{font-weight:600}
/* scrollbar, quiet */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bone)}
::-webkit-scrollbar-thumb{background:var(--stone);border:3px solid var(--bone)}
html{scrollbar-color:var(--stone) var(--bone);scrollbar-width:thin}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--sanct);color:var(--cream);padding:.8rem 1.2rem;z-index:600;text-decoration:none}
.skip:focus{left:0}

/* film grain, fixed, 2.5% */
.grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- type helpers ---------- */
.eyebrow{font-size:var(--size-eyebrow);letter-spacing:var(--track);text-transform:uppercase;font-weight:520;color:var(--gold-deep)}
.dark .eyebrow{color:var(--gold)}
.display{font-family:var(--font-d);font-weight:400;line-height:1.04}
.h1{font-size:var(--size-hero);font-weight:400;line-height:.98}
.h2{font-size:var(--size-h2);line-height:1.04}
.h3{font-size:var(--size-h3);font-weight:440}
.lead{font-size:var(--size-lead);line-height:1.55;max-width:var(--measure)}
.body-copy{max-width:var(--measure)}
.caption{font-size:.85rem;color:color-mix(in srgb,var(--ink) 52%,var(--stone))}
.dark .caption{color:color-mix(in srgb,var(--cream) 55%,transparent)}
em.g{font-style:italic;color:var(--gold)}
.num-d{font-family:var(--font-d)}

/* ---------- chapter anatomy ---------- */
section{position:relative;padding:var(--s6) var(--gutter)}
section[id]{scroll-margin-top:calc(var(--headh) + 12px)}
.hairline{position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--gold);transform-origin:left}
html.js .hairline{transform:scaleX(0);transition:transform var(--dur-r) var(--ease)}
section.inview .hairline{transform:scaleX(1)}
.chapnum{font-family:var(--font-d);font-size:1.05rem;color:var(--gold-deep);margin-bottom:.6rem;letter-spacing:.06em}
.dark .chapnum{color:var(--gold)}
.dark{background:var(--sanct);color:var(--cream)}
.sand{background:var(--sand)}
.sechead{margin-bottom:var(--s4)}
.sechead .h2{margin-top:.5rem}
.sechead .lead{margin-top:1.1rem}

/* sanctuary glow (amber, drifting) */
.glow{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.glow::before{content:"";position:absolute;width:120vmax;height:120vmax;left:-30vmax;bottom:-70vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(168,137,90,.16),transparent 62%);animation:drift 34s var(--easeio) infinite alternate}
.glow::after{content:"";position:absolute;width:80vmax;height:80vmax;right:-40vmax;top:-30vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(168,137,90,.09),transparent 60%);animation:drift 28s var(--easeio) infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(4%,-3%)}}
/* water-caustic shimmer: manifesto + Index menu only */
.caustic{position:absolute;inset:0;pointer-events:none;opacity:.05;filter:blur(1px);
  background:radial-gradient(ellipse 90px 60px at 20% 30%,rgba(247,242,232,.9),transparent 60%),
  radial-gradient(ellipse 130px 80px at 60% 60%,rgba(247,242,232,.7),transparent 60%),
  radial-gradient(ellipse 100px 70px at 85% 25%,rgba(247,242,232,.8),transparent 60%),
  radial-gradient(ellipse 120px 90px at 40% 85%,rgba(247,242,232,.6),transparent 60%);
  background-size:520px 420px;animation:caustic 26s linear infinite}
@keyframes caustic{from{background-position:0 0,0 0,0 0,0 0}to{background-position:520px 420px,-520px 420px,520px -420px,-520px -420px}}
/* fluted glass divider (ink sections, lit from within) */
.flute{position:absolute;left:0;right:0;top:0;height:88px;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(247,242,232,.05) 0 2px,transparent 2px 16px);
  -webkit-mask-image:linear-gradient(rgba(0,0,0,.9),transparent);mask-image:linear-gradient(rgba(0,0,0,.9),transparent)}
@media (prefers-reduced-motion:reduce){.glow::before,.glow::after,.caustic{animation:none}}

/* ---------- reveal system (one grammar sitewide) ----------
   Hidden-by-default states are gated on html.js (set by an inline
   head script) so content stays visible without JavaScript. */
html.js .rv{opacity:0;transform:translateY(var(--rise));transition:opacity var(--dur-r) var(--ease),transform var(--dur-r) var(--ease)}
html.js .inview .rv,html.js .rv.inview{opacity:1;transform:none}
.inview .rv:nth-child(2){transition-delay:70ms}
.inview .rv:nth-child(3){transition-delay:140ms}
.inview .rv:nth-child(4){transition-delay:210ms}
.inview .rv:nth-child(5){transition-delay:280ms}
.inview .rv:nth-child(6){transition-delay:350ms}
.inview .rv:nth-child(7){transition-delay:420ms}
.inview .rv:nth-child(8){transition-delay:490ms}
/* masked headline lines; padding-top guards italic ascenders */
.linewrap{overflow:hidden;padding-top:.2em;margin-top:-.2em}
.linewrap>span{display:block}
html.js .linewrap>span{transform:translateY(112%);transition:transform .8s var(--ease)}
html.js .inview .linewrap>span{transform:none}
.linewrap:nth-child(2)>span{transition-delay:80ms}
.linewrap:nth-child(3)>span{transition-delay:160ms}
/* image clip reveal */
html.js .clip{clip-path:inset(100% 0 0 0);transform:scale(1.06);transition:clip-path 1.1s var(--ease),transform 1.1s var(--ease)}
html.js .inview .clip,html.js .clip.inview{clip-path:inset(0 0 0 0);transform:none}
@media (prefers-reduced-motion:reduce){
  .rv,.linewrap>span,.clip{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .pull .mark{background-size:100% 100%!important}
}

/* ---------- image stand-ins (sanctuary treatment, shot-numbered) ---------- */
.shot{position:relative;background:
  radial-gradient(120% 90% at 70% 10%,rgba(168,137,90,.35),transparent 55%),
  radial-gradient(90% 80% at 20% 90%,rgba(199,185,163,.5),transparent 60%),
  linear-gradient(160deg,#2a221a 0%,#171310 70%);overflow:hidden}
.shot::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(168,137,90,.25),transparent 55%)}
.shot .caption{position:absolute;left:1rem;bottom:.9rem;color:rgba(247,242,232,.72);z-index:2;font-family:var(--font-d);font-style:italic;font-size:.98rem;letter-spacing:.01em}

/* ---------- buttons + links ---------- */
.btn{position:relative;display:inline-block;background:var(--ink);color:var(--bone);border:1px solid var(--ink);
  font:500 .95rem/1.2 var(--font-b);letter-spacing:.07em;padding:18px 38px;text-decoration:none;cursor:pointer;
  overflow:hidden;isolation:isolate;
  transition:color var(--dur-m) var(--easeio),transform 320ms var(--ease),box-shadow 320ms var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px -12px rgba(23,19,16,.45)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(247,242,232,.16),transparent);
  transform:skewX(-18deg);transition:left 700ms var(--easeio)}
.btn:hover::before{left:125%}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}.btn::before{display:none}}
.btn::after{content:"";position:absolute;inset:0;background:var(--bone);transform:scaleY(0);transform-origin:bottom;
  transition:transform var(--dur-m) var(--easeio);z-index:-1}
.btn:hover{color:var(--ink)}
.btn:hover::after{transform:scaleY(1)}
.dark .btn:hover,.btn.on-ink:hover,.hero .btn:hover{color:var(--sanct)}
.dark .btn,.btn.on-ink,.hero .btn{background:var(--cream);color:var(--sanct);border-color:var(--cream)}
.dark .btn::after,.btn.on-ink::after,.hero .btn::after{background:var(--gold)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost::after{background:var(--sand)}
.btn.small{padding:12px 24px;font-size:.88rem}
.tlink{position:relative;text-decoration:none;font-weight:500;padding-bottom:3px;white-space:nowrap}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--easeio)}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1)}
.ctarow{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}

/* ---------- header / nav ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.05rem var(--gutter);min-height:var(--headh);
  transition:background 400ms var(--easeio),box-shadow 400ms var(--easeio)}
header.site.solid{background:var(--bone);box-shadow:0 1px 0 rgba(199,185,163,.6)}
.wordmark{font:500 .82rem var(--font-b);letter-spacing:.34em;text-decoration:none;white-space:nowrap;color:var(--ink)}
@media (max-width:360px){.wordmark{font-size:.72rem;letter-spacing:.26em}}
body.dark-open header.site:not(.solid) .wordmark,
body.dark-open header.site:not(.solid) .navlinks a,
body.dark-open header.site:not(.solid) .indexbtn,
body.dark-open header.site:not(.solid) .themebtn{color:var(--cream)}
.navlinks{display:flex;gap:1.5rem;list-style:none;flex-wrap:nowrap}
.navlinks a{color:var(--ink);font-size:.84rem;text-decoration:none;position:relative;padding-bottom:3px;white-space:nowrap}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--easeio)}
.navlinks a:hover::after,.navlinks a:focus-visible::after{transform:scaleX(1)}
.navlinks a[aria-current="page"]::after{transform:scaleX(1);opacity:.6}
.navright{display:flex;align-items:center;gap:1.15rem}
.indexbtn{background:none;border:0;color:var(--ink);font:500 var(--size-eyebrow) var(--font-b);
  letter-spacing:var(--track);text-transform:uppercase;cursor:pointer;padding:.4rem 0;
  min-height:44px;display:inline-flex;align-items:center}
@media (max-width:960px){.navlinks,.nav-book{display:none}.navright{gap:.5rem}}
body.dark-open header.site:not(.solid) .nav-book{border-color:rgba(247,242,232,.45)}
.themebtn{background:none;border:0;color:var(--ink);cursor:pointer;padding:.4rem;display:grid;place-items:center;
  min-width:44px;min-height:44px}
.themebtn svg{transition:transform 400ms var(--ease)}
:root[data-theme="dark"] .themebtn svg{fill:currentColor;transform:rotate(-25deg)}

/* ---------- the Index (full-screen menu) ---------- */
.menu{position:fixed;inset:0;background:var(--sanct);color:var(--cream);z-index:550;
  display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s4);align-items:center;
  padding:calc(var(--headh) + 2vh) var(--gutter) 6vh;
  opacity:0;visibility:hidden;transition:opacity 500ms var(--easeio),visibility 0s .5s}
.menu.open{opacity:1;visibility:visible;transition:opacity 500ms var(--easeio)}
.menu ol{list-style:none;display:grid;gap:.35rem;align-content:center}
.menu ol a{font-family:var(--font-d);font-size:clamp(1.7rem,4.6vh,3.1rem);text-decoration:none;line-height:1.22;
  display:inline-flex;gap:1.2rem;align-items:baseline;
  opacity:0;transform:translateY(20px);transition:opacity 400ms var(--ease),transform 400ms var(--ease),color 200ms}
.menu.open ol a{opacity:1;transform:none}
.menu ol a small{font:400 .8rem var(--font-b);color:var(--gold);letter-spacing:.15em;min-width:2.2em}
.menu ol a:hover,.menu ol a[aria-current="page"]{color:var(--gold)}
.menu-side{display:grid;gap:1.4rem;align-content:center;
  opacity:0;transform:translateY(20px);transition:opacity 500ms var(--ease) 260ms,transform 500ms var(--ease) 260ms}
.menu.open .menu-side{opacity:1;transform:none}
.menu-side .shot{aspect-ratio:4/5;max-height:46vh}
.menu-util{display:flex;flex-wrap:wrap;gap:1.6rem;font-size:.9rem}
.menu-util a{text-decoration:none;color:color-mix(in srgb,var(--cream) 78%,transparent)}
.menu-util a:hover{color:var(--gold)}
.menuclose{position:absolute;top:.9rem;right:var(--gutter);background:none;border:0;color:var(--cream);
  font:500 var(--size-eyebrow) var(--font-b);letter-spacing:var(--track);text-transform:uppercase;cursor:pointer;padding:.4rem 0;
  min-height:44px;display:inline-flex;align-items:center}
@media (max-width:900px){
  .menu{grid-template-columns:1fr;align-items:end;gap:var(--s3);padding-bottom:6vh;overflow-y:auto}
  .menu-side{display:grid}
  .menu-side .shot,.menu-side>.caption{display:none}
  .menu ol{gap:.2rem}
  .menu ol a{font-size:clamp(1.3rem,3.9vh,2rem)}
}


/* ---------- footer ---------- */
footer.site{background:var(--sanct);color:var(--cream);padding:var(--s5) var(--gutter) var(--s3);position:relative;overflow:hidden}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1.6fr;gap:var(--s4);position:relative;z-index:2}
@media (max-width:900px){.fcols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fcols{grid-template-columns:1fr}}
footer.site .fcols a{display:block;color:color-mix(in srgb,var(--cream) 78%,transparent);text-decoration:none;font-size:.95rem;padding:.22rem 0}
footer.site .fcols a:hover{color:var(--gold)}
footer.site .fbrand p{margin-top:1.2rem;max-width:30ch;color:color-mix(in srgb,var(--cream) 65%,transparent);font-size:.95rem}
.fslogan{margin:var(--s5) 0 var(--s3);font:500 .8rem var(--font-b);letter-spacing:.3em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 58%,transparent);position:relative;z-index:2}
.fslogan em{font:italic 460 1.5em var(--font-d);text-transform:none;letter-spacing:0;color:var(--gold);padding:0 .12em}
.fslogan sup{color:var(--gold);font-size:.62em}
.fdisc{position:relative;z-index:2;margin-top:var(--s3);max-width:72ch;font-size:.74rem;line-height:1.6;
  color:color-mix(in srgb,var(--cream) 38%,transparent)}
.fdisc span{display:block}
.fine{display:flex;flex-wrap:wrap;gap:1.4rem;border-top:1px solid rgba(247,242,232,.14);padding-top:1.4rem;
  font-size:.82rem;color:color-mix(in srgb,var(--cream) 50%,transparent);position:relative;z-index:2}
.fine a{color:inherit;text-decoration:none}
.fine a:hover{color:var(--gold)}

/* mega wordmark: the signature at the very bottom, clickable home */
.megamark{display:block;position:relative;z-index:2;margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid rgba(247,242,232,.1);text-decoration:none;text-align:center;
  font-family:"Bodoni Moda",var(--font-d);font-weight:600;line-height:1.05;letter-spacing:.12em;text-transform:uppercase;
  font-size:clamp(1.5rem,6.2vw,5.2rem);color:var(--cream);text-wrap:nowrap;overflow:hidden}
.megamark .dot{color:var(--gold);transition:color 400ms var(--easeio)}
.megamark:hover .dot{color:#D6B278}
.megamark::after{content:"";display:block;height:6px}
@media (max-width:700px){.megamark{font-size:clamp(2.2rem,12vw,3.4rem);white-space:normal;text-wrap:balance;line-height:1.15}}

/* signature portrait row (E3.3) */
.sigrow{display:flex;gap:1.6rem;align-items:end;margin-top:.9rem}
.sigrow .signature{margin-top:0}
@media (max-width:700px){.sigrow{flex-direction:column;align-items:flex-start}}

/* ---------- forms (underline style) ---------- */
.uform{display:flex;gap:0;max-width:520px;border-bottom:1px solid var(--stone);transition:border-color 220ms}
.uform:focus-within{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.dark .uform:focus-within,footer.site .uform:focus-within{border-color:var(--cream);box-shadow:0 1px 0 var(--cream)}
.uform input{flex:1;background:none;border:0;font:400 1.02rem var(--font-b);padding:.85rem 0;color:inherit;min-width:0}
.uform input::placeholder{color:color-mix(in srgb,currentColor 55%,transparent)}
.uform input:focus{outline:none}
.uform button{background:none;border:0;font:500 .88rem var(--font-b);letter-spacing:.1em;cursor:pointer;color:inherit;padding:0 0 0 1rem}
.uform button:hover{color:var(--gold-deep)}
.dark .uform button:hover,footer.site .uform button:hover{color:var(--gold)}
.formnote{margin-top:1.1rem;font-size:.9rem;color:color-mix(in srgb,currentColor 70%,transparent);max-width:46ch}
/* stacked field forms (speaking inquiry) */
.fform{display:grid;gap:1.9rem;max-width:560px}
.fform label{display:block;font-size:var(--size-eyebrow);letter-spacing:var(--track);text-transform:uppercase;font-weight:520;color:var(--gold-deep);margin-bottom:.35rem}
.dark .fform label{color:var(--gold)}
.fform input,.fform textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--stone);
  font:400 1.02rem var(--font-b);padding:.6rem 0;color:inherit;resize:vertical}
.fform input:focus,.fform textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.dark .fform input:focus,.dark .fform textarea:focus{border-color:var(--cream);box-shadow:0 1px 0 var(--cream)}

/* ---------- layout kits ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s5);align-items:center}
.split .shot{aspect-ratio:4/5}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--s4)}}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:900px){.cols2{grid-template-columns:1fr;gap:var(--s3)}}
.rooms3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
@media (max-width:900px){.rooms3{grid-template-columns:1fr}}
/* four-up variant (book page: consultation / purchase / classes / speaking) */
.rooms3.four{grid-template-columns:1fr}
@media (min-width:640px){.rooms3.four{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.rooms3.four{grid-template-columns:repeat(4,1fr)}}
.roomcard{border-top:1px solid var(--stone);padding-top:1.3rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.roomcard .num{font-family:var(--font-d);font-size:clamp(2.4rem,4vw,3.6rem);color:var(--gold-deep);line-height:1}
.dark .roomcard .num{color:var(--gold)}
.roomcard h3{font-size:var(--size-h3);font-weight:440}
.roomcard p{color:color-mix(in srgb,currentColor 82%,transparent)}
.roomcard .tlink,.roomcard .btn{margin-top:auto}
.capacity{margin-top:var(--s4);color:color-mix(in srgb,currentColor 70%,transparent);font-size:.95rem}

/* editorial rows (guides shelf, journal archive, schedule, press strip) */
.rowlist{list-style:none;border-top:1px solid var(--stone)}
.rowlist>li{border-bottom:1px solid var(--stone)}
.rowitem{display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem 2.2rem;align-items:baseline;padding:1.5rem 0;text-decoration:none}
.rowitem .when{font-family:var(--font-d);font-size:1.15rem;min-width:7.5ch;color:var(--gold-deep)}
.dark .rowitem .when{color:var(--gold)}
.rowitem .what h3{font-size:var(--size-h3);font-weight:440;transition:color 200ms}
a.rowitem:hover .what h3{color:var(--gold-deep)}
.rowitem .what p{margin-top:.3rem;color:color-mix(in srgb,currentColor 72%,transparent);max-width:56ch}
.rowitem .meta{font-size:.85rem;color:color-mix(in srgb,currentColor 60%,transparent);white-space:nowrap}
.rowitem .meta.gold{color:var(--gold-deep)}
@media (max-width:700px){
  .rowitem{grid-template-columns:1fr;gap:.4rem;padding:1.4rem 0}
  .rowitem .meta{white-space:normal}
}

/* comparison (industry sells / method reads) */
.compare{list-style:none;border-top:1px solid var(--stone);max-width:1100px}
.compare li{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3rem;padding:1.6rem 0;border-bottom:1px solid var(--stone)}
.compare .sells{color:color-mix(in srgb,var(--ink) 55%,transparent)}
.compare .reads{font-family:var(--font-d);font-size:1.2rem;line-height:1.4}
@media (max-width:700px){.compare li{grid-template-columns:1fr;gap:.4rem}}

/* corridor (method page): sticky number left, rooms right */
.corridor{display:grid;grid-template-columns:minmax(180px,.9fr) 2fr;gap:var(--s4);align-items:start}
.corridor-num{position:sticky;top:calc(var(--headh) + 8vh);font-family:var(--font-d);
  font-size:clamp(6rem,16vw,13rem);line-height:1;color:var(--gold);opacity:.9}
.corridor-rooms{display:grid;gap:var(--s5)}
.corridor-room{border-top:1px solid rgba(247,242,232,.16);padding-top:1.5rem}
.corridor-room h3{font-size:var(--size-h3);font-weight:440;display:flex;gap:1rem;align-items:baseline}
.corridor-room h3 .n{font-size:.95rem;color:var(--gold);font-family:var(--font-b);letter-spacing:.1em}
.corridor-room p{margin-top:.7rem;max-width:52ch;color:color-mix(in srgb,var(--cream) 82%,transparent)}
.corridor-room .q{margin-top:1rem;font:italic 440 1.1rem var(--font-d);color:var(--gold)}
@media (max-width:900px){
  .corridor{grid-template-columns:1fr}
  .corridor-num{display:none}
}

/* timeline (about) */
.timeline{list-style:none;max-width:900px;display:grid;gap:var(--s4)}
.timeline li{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:2rem;align-items:start;border-top:1px solid var(--stone);padding-top:1.4rem}
.timeline .year{font-family:var(--font-d);font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1;color:var(--gold-deep)}
.timeline h3{font-size:1.25rem;font-weight:440;margin-bottom:.35rem}
.timeline p{color:color-mix(in srgb,var(--ink) 78%,transparent);max-width:52ch}
@media (max-width:640px){.timeline li{grid-template-columns:1fr;gap:.6rem}}

/* numbered line list (about philosophy) */
.linelist{list-style:none;display:grid;gap:1.15rem;max-width:820px}
.linelist li{display:flex;gap:1.4rem;align-items:baseline;border-bottom:1px solid rgba(247,242,232,.13);padding-bottom:1.1rem}
.linelist .n{font:400 .85rem var(--font-b);letter-spacing:.12em;color:var(--gold);min-width:2.2em}
.linelist .t{font-family:var(--font-d);font-size:clamp(1.3rem,2.4vw,1.8rem)}

/* quotes */
blockquote{font:italic 420 var(--size-h3)/1.35 var(--font-d);text-wrap:pretty;max-width:26em}
blockquote footer{font:400 .9rem var(--font-b);color:var(--gold);margin-top:1rem;font-style:normal}
.quotes{display:grid;gap:var(--s5);max-width:900px}
.pull{font:italic 440 clamp(1.25rem,2.1vw,1.7rem)/1.4 var(--font-d);max-width:26em;text-wrap:pretty}
.signature{margin-top:1.8rem;font-family:"Great Vibes",cursive;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.1;color:var(--gold-deep);
  transform:rotate(-3deg);transform-origin:left center;display:inline-block;padding:.1em .3em .25em 0}
.dark .signature{color:var(--gold)}
html.js .signature{clip-path:inset(-25% 103% -30% -3%)}
html.js .inview .signature{clip-path:inset(-25% -3% -30% -3%);transition:clip-path 2s var(--easeio) .5s}
.pull .mark{background-image:linear-gradient(transparent 58%,rgba(168,137,90,.35) 58%);
  background-repeat:no-repeat;background-size:100% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
html.js .pull .mark{background-size:0% 100%;transition:background-size 1200ms var(--easeio) 400ms}
html.js .inview .pull .mark{background-size:100% 100%}

/* accordion (FAQ): grid-rows trick, plus-sign rotate */
.acc{border-top:1px solid var(--stone)}
.acc-item{border-bottom:1px solid var(--stone)}
.acc-btn{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:2rem;text-align:left;
  background:none;border:0;cursor:pointer;padding:1.5rem 0}
.acc-btn h3{font-size:clamp(1.2rem,2.2vw,1.55rem);font-weight:440;transition:color 200ms}
.acc-btn:hover h3{color:var(--gold-deep)}
.acc-btn .plus{position:relative;width:16px;height:16px;flex:0 0 auto;align-self:center;transition:transform 360ms var(--ease)}
.acc-btn .plus::before,.acc-btn .plus::after{content:"";position:absolute;background:var(--gold-deep);left:0;top:7px;width:16px;height:1.5px}
.acc-btn .plus::after{transform:rotate(90deg)}
.acc-item.open .acc-btn .plus{transform:rotate(45deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 360ms var(--ease)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
.acc-panel p{max-width:var(--measure);padding-bottom:1.6rem;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.acc-panel p+p{padding-top:0;margin-top:-0.6rem}
.acc-panel .disc{font-size:.85rem;color:color-mix(in srgb,var(--ink) 55%,transparent)}

/* ---------- homepage: hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--headh) + 2rem) var(--gutter) var(--s5);background:var(--sanct);color:var(--cream)}
.hero .shot-hero{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--easeio)}
body.lit .hero .shot-hero{opacity:1}
@media (prefers-reduced-motion:reduce){.hero .shot-hero{opacity:1;transition:none}}
.hero-inner{position:relative;z-index:2;max-width:1200px}
.hero h1{font-size:var(--size-hero);font-weight:400;letter-spacing:.01em;line-height:.98}
.slogan{margin:1.4rem 0 .6rem;font:500 .95rem var(--font-b);letter-spacing:.3em;text-transform:uppercase}
.slogan em{font:italic 460 1.5em var(--font-d);text-transform:none;letter-spacing:0;color:var(--gold);vertical-align:-.08em;padding:0 .15em}
.slogan sup{color:var(--gold);font-size:.6em}
.hero .sub{font-size:1.15rem;color:color-mix(in srgb,var(--cream) 80%,transparent);margin-bottom:2.4rem;margin-left:0;text-align:inherit;width:100%}
.scrollcue{position:absolute;right:var(--gutter);bottom:var(--s5);width:1px;height:64px;
  background:linear-gradient(var(--gold),transparent);animation:cue 2.4s var(--easeio) 1}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.scrollcue{animation:none}}

@media (min-width:1024px){
  .hero{justify-content:center}
  /* E1.2 / 1A: centered block; button box lifted to physically mask the
     "PAHLA'S KETHOD" render artifact at the arch center (~50% viewport) */
  .hero-inner{margin-left:auto;margin-right:auto;max-width:760px;text-align:center;transform:translateY(-16vh);display:flex;flex-direction:column;align-items:center;width:100%}
  .hero h1{font-size:clamp(3.4rem,7.4vw,7rem)}
  .hero .slogan{font-size:1.08rem}
  .hero .sub{font-size:1.34rem}
}
.hero .ctarow{flex-direction:column;align-items:center;gap:1.15rem;margin-top:.5rem}
@media (min-width:1024px){.hero .slogan,.hero .sub{justify-content:center;text-align:center}
  .hero .linewrap>span{display:inline-block}}
.hero .ctarow .btn{padding:20px 48px;font-size:1.04rem}
.hero .ctarow .tlink{font-size:1.08rem}
/* Short desktop viewports: ease the upward lift so the h1 never slides under
   the fixed header (the strong lift that seats the CTA over the arch monogram
   only fits taller screens). */
@media (min-width:1024px) and (max-height:900px){.hero-inner{transform:translateY(-12vh)}}
@media (min-width:1024px) and (max-height:740px){.hero-inner{transform:translateY(-8vh)}}
/* interior page opener */
.pagehero{padding-top:calc(var(--headh) + var(--s5))}
.pagehero.dark{min-height:62svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.pagehero .h1{margin-top:.6rem;max-width:14ch}
.pagehero .lead{margin-top:1.4rem}

/* ---------- homepage: manifesto ---------- */
.manifesto{min-height:52vh;display:grid;place-content:center}
.manifesto .set{display:grid;gap:1.6rem}
.manifesto p{font-family:var(--font-d);font-size:clamp(1.15rem,2.5vw,2.1rem);line-height:1.3;max-width:36ch;text-wrap:balance}

/* ---------- homepage: the arc (scroll-pinned) ---------- */
.arc{padding:0}
.arc-head{padding:var(--s6) var(--gutter) var(--s4)}
.arc-belt{height:380vh;position:relative}
.arc-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.arc-track{display:flex;gap:4vw;padding:0 var(--gutter);will-change:transform}
.room{flex:0 0 auto;width:min(64vw,680px);border-top:1px solid var(--stone);padding-top:1.4rem}
.room .num{font-family:var(--font-d);font-size:clamp(3rem,7vw,5.5rem);color:var(--gold-deep);line-height:1}
.room h3{font-size:var(--size-h3);margin:.7rem 0 .5rem;font-weight:440}
.room p{max-width:44ch;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.room .shot{aspect-ratio:3/2;margin-top:1.6rem}
@media (max-width:1023px){
  .arc-belt{height:auto}
  .arc-sticky{position:static;height:auto;overflow:visible}
  .arc-track{flex-direction:column;gap:var(--s5);transform:none!important;padding-bottom:var(--s5)}
  .room{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .arc-belt{height:auto}
  .arc-sticky{position:static;height:auto;overflow:visible}
  .arc-track{flex-direction:column;gap:var(--s5);transform:none!important;padding-bottom:var(--s5)}
  .room{width:100%}
}

/* ---------- field band (parallax image) ---------- */
.field{padding:0;height:72vh;overflow:hidden;position:relative}
.field .shot{position:absolute;inset:-12% 0;will-change:transform}
.field .fieldlink{position:absolute;left:var(--gutter);bottom:1.6rem;z-index:3;color:var(--bone);text-decoration:none;font-size:.95rem}
.field .fieldlink .tick{color:var(--gold)}

/* ---------- odometer tick ---------- */
.tick-num{display:inline-flex;overflow:hidden;height:1em;line-height:1;vertical-align:baseline}
.tick-num .reel{display:inline-block;white-space:nowrap}
.tick-num .reel>span{display:block;height:1em}
@media (prefers-reduced-motion:reduce){.tick-num .reel{transition:none!important;transform:none!important}}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:2.2rem;transform:translate(-50%,calc(100% + 2.6rem));background:var(--sanct);color:var(--cream);
  border:1px solid var(--gold);padding:.9rem 1.6rem;font-size:.9rem;z-index:850;transition:transform 400ms var(--ease);max-width:min(92vw,480px);visibility:hidden}
#toast.show{transform:translate(-50%,0);visibility:visible}
#toast:not(.show){transition:transform 400ms var(--ease),visibility 0s 400ms}

/* ---------- mobile sticky book bar ---------- */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:450;padding:.8rem var(--gutter) calc(.8rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bone) 92%,transparent);backdrop-filter:blur(8px);
  box-shadow:0 -1px 0 rgba(199,185,163,.6);transform:translateY(110%);transition:transform 380ms var(--ease);
  visibility:hidden}
.bookbar.show{transform:translateY(0);visibility:visible}
.bookbar .btn{display:block;text-align:center;width:100%;padding:15px 20px}
@media (min-width:961px){.bookbar{display:none}}

/* ---------- article template ---------- */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--gold);width:0;z-index:560}
article.journal{max-width:68ch;margin:0 auto;padding:calc(var(--headh) + var(--s5)) var(--gutter) var(--s5)}
article.journal .standfirst{font-size:var(--size-lead);line-height:1.55;margin-top:1.4rem;color:color-mix(in srgb,var(--ink) 80%,transparent)}
article.journal .byline{margin-top:1.6rem;font-size:.85rem;letter-spacing:.08em;color:color-mix(in srgb,var(--ink) 55%,transparent);text-transform:uppercase}
article.journal h2{font-size:clamp(1.5rem,2.8vw,1.9rem);margin:var(--s4) 0 1rem}
article.journal p{margin:1.1rem 0}
article.journal .pullband{background:var(--sand);margin:var(--s4) calc(-1 * var(--gutter));padding:var(--s4) var(--gutter)}
article.journal ul,article.journal ol{margin:1.1rem 0 1.1rem 1.2rem}
article.journal li{margin:.45rem 0}
.artfoot{border-top:1px solid var(--stone);margin-top:var(--s4);padding-top:1.4rem;font-size:.85rem;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.backlink{display:inline-block;margin-bottom:var(--s3);font-size:var(--size-eyebrow);letter-spacing:var(--track);
  text-transform:uppercase;font-weight:520;color:var(--gold-deep);text-decoration:none}
.backlink:hover{color:var(--ink)}

/* ---------- 404 ---------- */
.notfound{min-height:100svh;display:grid;place-content:center;text-align:left;padding:var(--s5) var(--gutter)}
.notfound .doors{display:flex;gap:2rem;flex-wrap:wrap;margin-top:var(--s3)}

/* editorial serif prose (Method opening) */
/* T: narrative prose is Jost (sans) at a comfortable size; only the closing
   accent line stays Cormorant italic as a philosophy flourish. */
.prose-d p{font-family:var(--font-b);font-size:clamp(1.06rem,1.4vw,1.22rem);line-height:1.75;
  letter-spacing:.002em;max-width:60ch;color:color-mix(in srgb,var(--ink) 92%,transparent)}
.prose-d p+p{margin-top:1.3rem}
.prose-d p:last-child{font-family:var(--font-d);font-style:italic;font-size:clamp(1.3rem,2.1vw,1.7rem);
  font-weight:500;color:var(--gold-deep)}

/* orb CTA: the expensive little arrow (Her story) */
.cta-orb{display:inline-flex;align-items:center;gap:1.1rem;text-decoration:none;cursor:pointer}
.cta-orb .orb{width:56px;height:56px;border-radius:50%;border:1px solid var(--stone);display:grid;place-items:center;
  transition:background 450ms var(--easeio),border-color 450ms var(--easeio),transform 450ms var(--ease),box-shadow 450ms}
.cta-orb .orb svg{transition:transform 450ms var(--ease);stroke:currentColor}
.cta-orb .lbl{font:520 .82rem var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
  transition:letter-spacing 450ms var(--easeio)}
.cta-orb:hover .orb{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--bone);
  transform:scale(1.06);box-shadow:0 10px 32px -14px rgba(122,95,54,.6)}
.cta-orb:hover .orb svg{transform:rotate(45deg)}
.cta-orb:hover .lbl{letter-spacing:.26em}
.cta-orb:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* reading room extras: whole chapter is clickable; a placeholder voice under each pair */
.rstory{margin-top:2rem;max-width:56ch;font-size:.98rem;color:color-mix(in srgb,var(--ink) 68%,transparent);
  border-left:0;min-height:3.2em}
.rstory .who{display:block;margin-top:.35rem;font:520 .7rem var(--font-b);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep)}
section.readerhost{cursor:pointer}

/* dense pages (advisory): calmer scale, tighter rhythm */
body.dense{--size-hero:clamp(2.6rem,5.6vw,4.6rem);--size-h2:clamp(1.7rem,3.4vw,2.7rem);
  --size-h3:clamp(1.2rem,2vw,1.55rem);--size-lead:1.12rem;--s6:6.5rem;--s5:4.2rem;--s4:2.6rem}
body.dense .pagehero.dark{min-height:46svh}
body.dense .roomcard .num{font-size:clamp(1.8rem,3vw,2.4rem)}
body.dense .rooms3{gap:2rem;margin-top:2rem}

/* seven compact rooms (advisory) */
.rooms7{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem 2.4rem;margin-top:var(--s4)}
.rooms7 .r{border-top:1px solid var(--stone);padding-top:1rem}
.rooms7 h3{font-size:1.2rem;font-weight:440;display:flex;gap:.7rem;align-items:baseline}
.rooms7 h3 .n{font:400 .78rem var(--font-b);letter-spacing:.12em;color:var(--gold-deep)}
.rooms7 p{margin-top:.4rem;font-size:.95rem;color:color-mix(in srgb,var(--ink) 75%,transparent)}

/* the duel: click to reveal what the method reads */
.duel{list-style:none;border-top:1px solid var(--stone);max-width:1000px}
.duel li{border-bottom:1px solid var(--stone)}
.duel button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1.5rem 0;position:relative}
.duel .q{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  font:400 1.02rem var(--font-b);color:color-mix(in srgb,var(--ink) 68%,transparent);transition:color 300ms}
.duel button:hover .q{color:var(--ink)}
.duel .q .cue{font:520 var(--size-eyebrow) var(--font-b);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--gold-deep);white-space:nowrap;transition:opacity 300ms}
.duel li.open .q .cue{opacity:0}
.duel .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 600ms var(--ease)}
.duel .a>span{overflow:hidden;display:block}
.duel .a .t{display:block;font:italic 440 clamp(1.3rem,2.6vw,2rem)/1.3 var(--font-d);padding:.5rem 0 1.2rem;
  opacity:0;transform:translateY(10px);transition:opacity 500ms var(--ease) 150ms,transform 500ms var(--ease) 150ms}
.duel li.open .a{grid-template-rows:1fr}
.duel li.open .a .t{opacity:1;transform:none}
.duel .a .t em{color:var(--gold-deep);font-style:normal}
.duel li.open button::after{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--gold);
  transform-origin:left;animation:duelline 700ms var(--ease)}
@keyframes duelline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.duel .a,.duel .a .t{transition:none}}
@media (max-width:700px){
  .duel .q{flex-direction:column;align-items:flex-start;gap:.45rem}
  .duel .q .cue{white-space:normal}
}

/* word-stagger reveal: lines assemble out of water */
.qword{display:inline-block;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),filter .5s cubic-bezier(.22,1,.36,1)}
html.js [data-words]:not(.inview) .qword{opacity:0;transform:translateY(12px);filter:blur(8px)}
@media (prefers-reduced-motion:reduce){html.js [data-words]:not(.inview) .qword{opacity:1;transform:none;filter:none}}

/* the voice cycler: one quote at a time, click for the next */
.qcycle{position:relative;max-width:880px;cursor:pointer;-webkit-user-select:none;user-select:none;padding-top:.6rem}
.qcycle .qidx{position:absolute;top:-2.6rem;right:0;font:400 .8rem var(--font-b);letter-spacing:.14em;
  color:color-mix(in srgb,var(--cream) 55%,transparent)}
.qcycle .qidx b{font:400 1.5rem var(--font-d);font-weight:400;color:var(--cream);margin-right:.25rem}
.qcycle blockquote{min-height:8.5rem}
.qcycle .qbar{height:1px;background:rgba(247,242,232,.14);margin-top:2rem;position:relative;overflow:hidden}
.qcycle .qbar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease)}
.qcycle .qhint{margin-top:1rem;font:520 .68rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 42%,transparent)}
.qcycle:focus-visible{outline:2px solid var(--gold);outline-offset:6px}

/* timeline: pure typography, no rails */
.timeline li{position:relative;border-top:0;padding-top:.2rem}

/* step cards: hairlines draw in sequence */
html.js .rooms3 .roomcard,html.js .rooms7 .r{border-top-color:transparent}
.rooms3 .roomcard,.rooms7 .r{position:relative}
.rooms3 .roomcard::before,.rooms7 .r::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:100%;
  background:var(--stone);transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease)}
section.inview .rooms3 .roomcard::before,section.inview .rooms7 .r::before{transform:scaleX(1)}
section.inview .rooms3 .roomcard:nth-child(2)::before{transition-delay:200ms}
section.inview .rooms3 .roomcard:nth-child(3)::before{transition-delay:400ms}
section.inview .rooms7 .r:nth-child(2)::before{transition-delay:120ms}
section.inview .rooms7 .r:nth-child(3)::before{transition-delay:240ms}
section.inview .rooms7 .r:nth-child(4)::before{transition-delay:360ms}
section.inview .rooms7 .r:nth-child(5)::before{transition-delay:480ms}
section.inview .rooms7 .r:nth-child(6)::before{transition-delay:600ms}
section.inview .rooms7 .r:nth-child(7)::before{transition-delay:720ms}

/* body map stage: the person video with live hotspots */
.bm-stage{position:relative;aspect-ratio:16/9;overflow:hidden;max-width:1100px;margin:0 auto;background:var(--sanct)}
.bm-stage video,.bm-stage img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bm-hot{position:absolute;width:52px;height:52px;transform:translate(-50%,-50%);border-radius:50%;
  background:transparent;border:0;cursor:pointer;padding:0}
.bm-hot::after{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid transparent;
  transition:border-color 250ms,box-shadow 250ms}
.bm-hot:hover::after,.bm-hot.active::after{border-color:rgba(247,242,232,.8);box-shadow:0 0 20px rgba(214,178,120,.5)}
/* E5.2: gentle ambient breathing so the lit points feel alive, never strobe */
.bm-hot::before{content:"";position:absolute;inset:9px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(214,178,120,.35);animation:bmbreathe 3.4s var(--easeio) infinite}
.bm-hot:nth-of-type(2)::before{animation-delay:.5s}
.bm-hot:nth-of-type(3)::before{animation-delay:1s}
.bm-hot:nth-of-type(4)::before{animation-delay:1.5s}
.bm-hot:nth-of-type(5)::before{animation-delay:2s}
.bm-hot:nth-of-type(6)::before{animation-delay:2.6s}
.bm-hot:nth-of-type(7)::before{animation-delay:3s}
@keyframes bmbreathe{0%{box-shadow:0 0 0 0 rgba(214,178,120,.28)}60%{box-shadow:0 0 14px 6px rgba(214,178,120,0)}100%{box-shadow:0 0 0 0 rgba(214,178,120,0)}}
@media (prefers-reduced-motion:reduce){.bm-hot::before{animation:none}}
.bm-hot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bm-lower{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s4);margin-top:var(--s4);max-width:1100px;margin-left:auto;margin-right:auto}
@media (max-width:900px){.bm-lower{grid-template-columns:1fr}}

/* the reading room: what they sell, crossed out; what the method reads, lit */
.reader{max-width:960px}
.rlabel{font-size:var(--size-eyebrow);letter-spacing:var(--track);text-transform:uppercase;font-weight:520;
  color:color-mix(in srgb,var(--ink) 55%,transparent)}
.rlabel.gold{color:var(--gold-deep);margin-top:2.6rem}
.rsell,.rread{margin-top:.7rem;min-height:1.3em}
.rsell .rword{position:relative;display:inline-block;font:400 clamp(2rem,4.6vw,3.6rem)/1.15 var(--font-d);
  color:color-mix(in srgb,var(--ink) 52%,transparent);
  transition:opacity .4s var(--ease),transform .4s var(--ease),filter .4s var(--ease)}
.rsell .rword.out{opacity:0;transform:translateY(-14px);filter:blur(6px)}
.rsell .rword::after{content:"";position:absolute;left:-1%;right:-1%;top:56%;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .45s}
.rsell .rword.struck::after{transform:scaleX(1)}
.rread{font:italic 440 clamp(2.1rem,4.8vw,3.8rem)/1.2 var(--font-d);color:var(--gold-deep)}
.rticks{display:flex;gap:.65rem;margin-top:2.2rem}
.rticks button{width:32px;height:32px;padding:0;background:none;border:0;cursor:pointer;position:relative}
.rticks button::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:var(--stone);
  transition:background 300ms,transform 400ms var(--ease);transform-origin:left}
.rticks button:hover::after{background:var(--gold-deep)}
.rticks button[aria-selected="true"]::after{background:var(--gold-deep);transform:scaleX(1.55)}
.rticks button[aria-selected="true"]{width:44px}
.rticks button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.rsell .rword,.rsell .rword::after{transition:none}}

/* body map */
.bodymap{display:grid;grid-template-columns:minmax(300px,.9fr) 1.1fr;gap:var(--s4);align-items:start}
.bodymap svg{width:100%;max-width:380px;height:auto;display:block;margin:0 auto}
.bm-zone{cursor:pointer}
.bm-zone circle.node{fill:var(--gold);opacity:.55;transition:opacity 250ms}
.bm-zone circle.halo{fill:none;stroke:var(--gold);stroke-width:1;opacity:0;transition:opacity 250ms}
.bm-zone:hover circle.node,.bm-zone.active circle.node{opacity:1}
.bm-zone:hover circle.halo,.bm-zone.active circle.halo{opacity:.6}
.bm-zone.active circle.halo{animation:bmpulse 2.4s var(--easeio) infinite}
@keyframes bmpulse{0%,100%{stroke-width:1;opacity:.6}50%{stroke-width:2;opacity:.25}}
.bm-zone:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bm-figure{stroke:color-mix(in srgb,var(--ink) 55%,var(--stone));stroke-width:1.6;fill:none;stroke-linecap:round}
.bm-panel{border-top:1px solid var(--stone);padding-top:1.4rem;min-height:280px}
.bm-panel h3{font-size:var(--size-h3);font-weight:440}
.bm-panel .bm-body{margin-top:.9rem;max-width:52ch;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.bm-panel .bm-class{margin-top:1rem;font:italic 440 1.05rem var(--font-d);color:var(--gold-deep)}
/* E5.1: region filters as minimal typographic tabs, not square boxes */
.bm-chips{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:var(--s3)}
.bm-chips button{background:none;border:0;padding:.3rem 0 .5rem;cursor:pointer;position:relative;
  font:520 .69rem var(--font-b);letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 55%,transparent);transition:color 250ms var(--easeio),opacity 250ms}
.bm-chips button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-deep);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease)}
.bm-chips button:hover{color:var(--gold-deep)}
.bm-chips button[aria-pressed="false"]:hover{opacity:.55}
.bm-chips button[aria-pressed="true"]{color:var(--gold-deep)}
.bm-chips button[aria-pressed="true"]::after{transform:scaleX(1)}
.dark .bm-chips button{color:color-mix(in srgb,var(--cream) 60%,transparent)}
.dark .bm-chips button:hover,.dark .bm-chips button[aria-pressed="true"]{color:var(--gold)}
.dark .bm-chips button::after{background:var(--gold)}
@media (max-width:900px){.bodymap{grid-template-columns:1fr}.bodymap svg{max-width:280px}}

/* ---------- page-specific components ---------- */
/* Index menu: Book as unnumbered first item (mobile nav spec) */
.menu ol a.book{color:var(--gold)}
.menu ol a.book small{visibility:hidden}
/* corridor number: mini reel on room change */
.corridor-num .cnwrap{display:block;height:1em;overflow:hidden}
.corridor-num .cnreel{display:block;transition:transform 400ms var(--ease)}
.corridor-num .cnreel>span{display:block;height:1em}
/* recognitions (advisory 02): editorial lines, no bullets */
.recogs{list-style:none;max-width:900px;border-top:1px solid var(--stone)}
.recogs li{border-bottom:1px solid var(--stone);padding:1.6rem 0;
  font-family:var(--font-d);font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.4;text-wrap:pretty}
/* journal featured card */
.featured{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s4);align-items:end;text-decoration:none}
.featured .shot{aspect-ratio:3/2}
.featured h2{font-size:var(--size-h2);transition:color 200ms;max-width:14ch}
.featured:hover h2{color:var(--gold-deep)}
.featured .standfirst{margin-top:1rem;max-width:44ch;color:color-mix(in srgb,var(--ink) 75%,transparent)}
@media (max-width:900px){.featured{grid-template-columns:1fr}}
/* event rooms (classes 03, ink) */
.events{display:grid;gap:var(--s5)}
.event{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center;border-top:1px solid rgba(247,242,232,.16);padding-top:var(--s3)}
.event .when{font-family:var(--font-d);font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.05;color:var(--gold);max-width:12ch}
.event h3{font-size:var(--size-h3);font-weight:440;margin-top:.7rem}
.event p{margin-top:.6rem;color:color-mix(in srgb,var(--cream) 75%,transparent);max-width:44ch}
.event .shot{aspect-ratio:3/2}
.event .tlink{margin-top:1.2rem;display:inline-block}
@media (max-width:800px){.event{grid-template-columns:1fr}}
/* letter page hero */
.letterhero{min-height:88svh;display:flex;flex-direction:column;justify-content:center}
.letterhero .samples{margin-top:var(--s4);display:grid;gap:.6rem;max-width:520px}
.letterhero .samples p{border-top:1px solid rgba(247,242,232,.16);padding-top:.6rem;font-family:var(--font-d);font-size:1.15rem;color:color-mix(in srgb,var(--cream) 80%,transparent)}
.letterhero .samples .lbl{font:520 var(--size-eyebrow) var(--font-b);letter-spacing:var(--track);text-transform:uppercase;color:var(--gold);border:0;padding:0}

/* ---------- the Threshold (S0, home only) ---------- */
#threshold{position:fixed;inset:0;z-index:720;display:none;-webkit-user-select:none;user-select:none;cursor:default}
#threshold img{-webkit-user-drag:none;pointer-events:none}
.th-flood{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(58% 120% at 50% 50%,rgba(214,178,120,.32),rgba(214,178,120,.06) 55%,transparent 75%)}
#threshold.entering .th-flood{animation:flood 5200ms var(--easeio) forwards}
@keyframes flood{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
html.js body.pre-enter #threshold,html.js #threshold.leaving{display:block}
.th-panel{position:absolute;top:0;bottom:0;width:50.4%;
  background:
    repeating-linear-gradient(90deg,rgba(23,19,16,.06) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#7A5F36 0%,#A8895A 34%,#D6B278 47%,#A8895A 62%,#7A5F36 100%);
  filter:brightness(.5) saturate(.88);
  transition:transform 5000ms cubic-bezier(.32,.01,.08,1)}
@media (max-width:960px){.th-panel{transition-duration:2600ms}}
.th-panel.l{left:0}
.th-panel.r{right:0}
.th-panel::after{content:"";position:absolute;top:0;bottom:0;width:110px;opacity:0;
  background:repeating-linear-gradient(90deg,rgba(247,242,232,.03) 0 2px,transparent 2px 14px);
  transition:opacity 700ms var(--easeio)}
.th-panel.l::after{right:0;-webkit-mask-image:linear-gradient(270deg,black,transparent);mask-image:linear-gradient(270deg,black,transparent)}
.th-panel.r::after{left:0;-webkit-mask-image:linear-gradient(90deg,black,transparent);mask-image:linear-gradient(90deg,black,transparent)}
#threshold .th-fx{--fxbase:1;position:absolute;inset:0;opacity:var(--fxbase);transition:opacity 900ms var(--easeio)}
#threshold .glow.th-fx{--fxbase:.55}
#threshold .caustic.th-fx{--fxbase:.03;filter:blur(2px);animation-duration:40s;transition:opacity 500ms var(--easeio)}
#threshold.blooming .caustic.th-fx{--fxbase:.05}
.th-seam{position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(rgba(168,137,90,0),var(--gold) 30%,var(--gold) 70%,rgba(168,137,90,0));
  opacity:.25;transform:scaleY(.2);transition:opacity 420ms var(--easeio),transform 600ms var(--ease)}
#threshold.blooming .th-seam{opacity:.9;transform:scaleY(1)}
#threshold.entering .th-seam{opacity:0;transition-delay:200ms}
#threshold.entering .th-panel.l{transform:translateX(-102%)}
#threshold.entering .th-panel.r{transform:translateX(102%)}
#threshold.entering .th-panel::after{opacity:1}
#threshold.entering .th-fx{opacity:0}
.th-inner{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:2.6rem;
  text-align:center;padding:0 var(--gutter);transition:opacity 1400ms var(--easeio),transform 1600ms var(--ease)}
#threshold.entering .th-inner{opacity:0;transform:translateY(-6vh)}
.th-mark{width:min(230px,44vw);height:auto;
  clip-path:inset(0 0 100% 0);opacity:0;transform:scale(.985)}
body.pre-enter .th-mark{animation:thmark 1700ms var(--ease) 250ms forwards}
@keyframes thmark{
  0%{clip-path:inset(0 0 100% 0);opacity:0;transform:scale(.985)}
  55%{opacity:1}
  100%{clip-path:inset(0 0 0 0);opacity:1;transform:scale(1)}
}
.th-hint{font:520 var(--size-eyebrow) var(--font-b);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--gold);animation:breathe 4s var(--easeio) infinite alternate}
@keyframes breathe{from{opacity:.45}to{opacity:1}}
.th-enter{display:none}
@media (max-width:960px),(pointer:coarse){
  .th-hint{display:none}
  .th-enter{display:inline-block;padding:15px 44px}
}
@media (prefers-reduced-motion:reduce){#threshold{display:none!important}}
#threshold.instant .th-panel,#threshold.instant .th-inner,#threshold.instant .th-fx,#threshold.instant .th-seam{transition-duration:1ms!important}
body.pre-enter{overflow:hidden}

@property --spa{syntax:"<number>";inherits:true;initial-value:0}
.shot.hasimg{--px:50%;--py:50%;--spa:0}
.shot.hasimg::after{transition:--spa 500ms var(--easeio)}
.shot.hasimg.lit{--spa:.14}
/* corner-accent frames: quiet architectural hover (feature-spotlight kit) */
.shot img.ph{transition:transform 1s var(--ease),filter 600ms var(--easeio)}
.frameup:hover img.ph,a:hover>.frameup img.ph,.featured:hover .frameup img.ph{transform:scale(1.03)}
.shot.frameup::before{content:"";position:absolute;inset:12px;z-index:3;pointer-events:none;opacity:0;
  transition:opacity 550ms var(--ease),transform 550ms var(--ease);transform:scale(1.02);
  background:
    linear-gradient(rgba(247,242,232,.85),rgba(247,242,232,.85)) left top/1px 22px,
    linear-gradient(rgba(247,242,232,.85),rgba(247,242,232,.85)) left top/22px 1px,
    linear-gradient(rgba(247,242,232,.85),rgba(247,242,232,.85)) right bottom/1px 22px,
    linear-gradient(rgba(247,242,232,.85),rgba(247,242,232,.85)) right bottom/22px 1px;
  background-repeat:no-repeat}
.shot.frameup:hover::before,a:hover>.shot.frameup::before,.featured:hover .shot.frameup::before{opacity:1;transform:scale(1)}
@media (pointer:coarse){.shot.frameup::before{display:none}}

/* footer spotlight: a faint searching glow follows the cursor */
footer.site{--sx:50%;--sy:40%}
footer.site::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(340px at var(--sx) var(--sy),rgba(247,242,232,.05),transparent 68%);
  opacity:0;transition:opacity 600ms var(--easeio)}
footer.site.spot-on::after{opacity:1}
@media (pointer:coarse),(prefers-reduced-motion:reduce){footer.site::after{display:none}}

/* ---------- page glide (G10a) ---------- */
.glide{position:fixed;inset:0;background:var(--sanct);opacity:0;pointer-events:none;
  transition:opacity 200ms var(--easeio);z-index:900}
.glide.on{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.glide{display:none}}

/* ---------- real photography ---------- */
.shot img.ph,.shot video.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:sepia(.13) saturate(1.07) brightness(.98)}
.shot.hasimg .caption{left:0;right:0;bottom:0;padding:2.4rem 1rem .9rem;
  background:linear-gradient(transparent,rgba(23,19,16,.62));color:rgba(247,242,232,.92)}
.shot.hasimg::after{background:radial-gradient(340px at var(--px) var(--py),rgba(247,242,232,var(--spa)),transparent 64%),linear-gradient(rgba(247,242,232,.04),rgba(247,242,232,.04))}
/* hero: ambient studio video, typography-forward */
.hero-video{position:absolute;inset:0;overflow:hidden}
.hero-video video,.hero-video img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s var(--easeio)}
body.lit .hero-video video,body.lit .hero-video img.poster{opacity:.55}
.hero-video::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,19,16,.58),rgba(23,19,16,.2) 28%,rgba(23,19,16,.26) 66%,rgba(23,19,16,.62) 100%)}
.hero h1 .accent{color:var(--gold);font-style:italic;padding-right:.06em}
@media (prefers-reduced-motion:reduce){.hero-video video{display:none}.hero-video img.poster{opacity:.55}}
/* hero: ken-burns drift + legibility scrim */
.hero .shot-hero img.ph{animation:kenburns 36s var(--easeio) infinite alternate;transform-origin:60% 40%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.hero .shot-hero img.ph{animation:none}}
.hero .shot-hero::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(23,19,16,.62),rgba(23,19,16,0) 22%),
  linear-gradient(15deg,rgba(23,19,16,.85) 22%,rgba(23,19,16,.35) 58%,rgba(23,19,16,.12) 100%)}

/* ================= V2 ================= */
/* header dropdowns (K): every page one click away */
.navlinks li{position:relative}
.drop{position:absolute;top:100%;left:-1.1rem;min-width:240px;padding:.55rem 0;margin-top:.55rem;
  background:var(--bone);border:1px solid color-mix(in srgb,var(--stone) 60%,transparent);
  box-shadow:0 18px 44px -22px rgba(23,19,16,.4);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity 240ms var(--easeio),transform 240ms var(--ease),visibility 0s 240ms;z-index:60}
.navlinks li:hover>.drop,.navlinks li:focus-within>.drop,.bookwrap:hover>.drop,.bookwrap:focus-within>.drop{
  opacity:1;visibility:visible;transform:none;transition:opacity 240ms var(--easeio),transform 240ms var(--ease)}
.drop a{display:block;padding:.48rem 1.3rem;font-size:.88rem;text-decoration:none;color:var(--ink)!important;
  transition:background 200ms,color 200ms}
.drop a:hover{background:color-mix(in srgb,var(--sand) 70%,transparent);color:var(--gold-deep)!important}
.drop .dsep{height:1px;margin:.45rem 1.3rem;background:color-mix(in srgb,var(--stone) 50%,transparent)}
/* B7: articles read differently from pages inside the Journal dropdown */
.drop .darts{background:var(--sand);padding:.45rem 0;margin:.45rem 0;
  border-top:1px solid color-mix(in srgb,var(--stone) 40%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--stone) 40%,transparent)}
.drop .darts a:hover{background:color-mix(in srgb,var(--bone) 70%,transparent)}
.bookwrap{position:relative;display:inline-block}
.bookwrap .drop{left:auto;right:0}
@media (max-width:960px){.drop{display:none}.bookwrap{display:none}}

/* partner marquee (F) */
.partners{position:relative;padding:1rem 0;border-top:1px solid rgba(247,242,232,.12);overflow:hidden}
.ptrack{display:flex;gap:3.2rem;width:max-content;animation:pscroll 42s linear infinite;will-change:transform}
.ptrack span{font:520 .72rem var(--font-b);letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 45%,transparent);white-space:nowrap}
@keyframes pscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ptrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* flyer reel (B): the archive scrolls like a shelf */
.reel{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem .2rem 1rem;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.reel::-webkit-scrollbar{display:none}
/* J2.4: custom horizontal progress track replaces the native scrollbar */
.reelprog{height:1px;width:min(34%,240px);margin:1.1rem auto 0;position:relative;
  background:color-mix(in srgb,var(--stone) 45%,transparent);overflow:visible}
.reelprog i{position:absolute;left:0;top:-1px;height:3px;width:30%;background:var(--cream);
  will-change:transform;transition:transform 120ms linear}
.dark .reelprog i{background:var(--cream)}
.reelprog i{background:var(--gold-deep)}
.dark .reelprog i{background:var(--gold)}
.reel .shot{flex:0 0 auto;width:min(280px,70vw);aspect-ratio:3/4;scroll-snap-align:start}

/* story rings + viewer (Q) */
.rings{display:flex;gap:1.8rem;overflow-x:auto;padding:.4rem .2rem;scrollbar-width:none}
.rings::-webkit-scrollbar{display:none}
.ringbtn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.55rem;background:none;border:0;cursor:pointer;padding:0}
.ringbtn .rg{position:relative;width:82px;height:82px}
.ringbtn svg{position:absolute;inset:0}
.ringbtn svg path{stroke:var(--gold);transition:stroke 300ms}
.ringbtn.viewed svg path{stroke:color-mix(in srgb,var(--stone) 70%,transparent)}
.ringbtn .rimg{position:absolute;inset:7px;border-radius:50%;overflow:hidden;background:var(--sand)}
.ringbtn .rimg img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease)}
.ringbtn:hover .rimg img{transform:scale(1.08)}
.ringbtn .rlbl{font:520 .72rem var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.ringbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.svmodal{position:fixed;inset:0;z-index:950;background:rgba(12,10,8,.94);display:none;place-items:center}
.svmodal.open{display:grid}
.svframe{position:relative;height:min(86vh,860px);aspect-ratio:9/16;max-width:94vw;background:#000;overflow:hidden}
.svframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.svbar{position:absolute;top:0;left:0;right:0;display:flex;gap:4px;padding:10px 10px 16px;z-index:5;
  background:linear-gradient(rgba(0,0,0,.55),transparent)}
.svbar i{flex:1;height:2px;background:rgba(247,242,232,.25);position:relative;overflow:hidden}
.svbar i::after{content:"";position:absolute;inset:0;background:var(--cream);transform:scaleX(var(--p,0));transform-origin:left}
.svhead{position:absolute;top:20px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;z-index:6}
.svhead .svt{font:520 .74rem var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--cream)}
.svclose{background:none;border:0;color:var(--cream);cursor:pointer;font:500 .8rem var(--font-b);
  letter-spacing:.14em;text-transform:uppercase;padding:.5rem}
.svnav{position:absolute;inset:0;display:flex;z-index:4}
.svnav button{flex:1;background:none;border:0;cursor:pointer}
.svarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(247,242,232,.4);background:rgba(23,19,16,.4);color:var(--cream);cursor:pointer;
  display:grid;place-items:center;font-size:1.1rem}
.svarrow.prev{left:-56px}.svarrow.next{right:-56px}
@media (max-width:700px){.svarrow.prev{left:8px}.svarrow.next{right:8px}.svframe{height:92svh}}
.svcap{position:absolute;bottom:0;left:0;right:0;padding:2rem 1rem .9rem;z-index:5;text-align:center;
  background:linear-gradient(transparent,rgba(0,0,0,.65));color:rgba(247,242,232,.9);
  font:italic 400 .95rem var(--font-d)}

/* home rooms stage (N): quote left, rooms right */
.roomstage{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s4);align-items:start}
.roomstage .frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sanct)}
.roomstage .frame img,.roomstage .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:sepia(.13) saturate(1.07) brightness(.98)}
.roomstage .rmeta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:.9rem 0 .4rem}
.roomstage .rnum{font-family:var(--font-d);font-size:2rem;color:var(--gold-deep);margin-right:.4em}
.roomstage .rname{font-family:var(--font-d);font-size:var(--size-h3);font-weight:440}
.roomstage .rline{color:color-mix(in srgb,var(--ink) 72%,transparent);max-width:46ch;min-height:3.2em}
.roomcycle{display:inline-flex;align-items:center;gap:.9rem;margin-top:1rem}
.roomcycle .count{font:400 .82rem var(--font-b);letter-spacing:.12em;color:color-mix(in srgb,var(--ink) 55%,transparent)}
@media (max-width:1000px){.roomstage{grid-template-columns:1fr}}

/* body map overlay panel (H) */
.bm-stage .bm-panel-over{position:absolute;left:2.4%;top:7%;width:min(29.7%,324px);z-index:6;
  background:rgba(23,19,16,.55);backdrop-filter:blur(12px);border:1px solid rgba(247,242,232,.16);
  padding:1.3rem 1.4rem;color:var(--cream)}
.bm-panel-over .eyebrow{color:var(--gold)}
.bm-panel-over h3,.bm-panel-over .bm-title{font-family:var(--font-d);font-size:1.17rem;font-weight:440;margin-top:.4rem;line-height:1.1}
/* E5.1: card safety — never occlude hotspots, guard overflow at any scale */
.bm-stage .bm-panel-over{max-height:82%;overflow:auto;scrollbar-width:none}
.bm-stage .bm-panel-over::-webkit-scrollbar{display:none}
.bm-panel-over .bm-body{margin-top:.6rem;font-size:.84rem;line-height:1.6;color:rgba(247,242,232,.85)}
.bm-panel-over .bm-class{margin-top:.7rem;font:italic 440 .87rem var(--font-d);color:var(--gold)}
@media (max-width:800px){.bm-stage .bm-panel-over{position:static;width:100%;background:var(--sanct);margin-top:0}}

/* method pillars (A) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) 2.2rem;align-items:stretch}
.pillars .pil{border-top:1px solid var(--stone);padding-top:1.1rem;display:flex;flex-direction:column}
.pillars .pil h3{font-size:var(--size-h3);font-weight:440}
.pillars .pil .shot{aspect-ratio:1/1;margin:.9rem 0 0}
.pillars .pil .shot+p{margin-top:auto;padding-top:.9rem}
.pillars .pil p{font-size:.98rem;color:color-mix(in srgb,var(--ink) 80%,transparent)}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}

/* about story chapters: asymmetric editorial */
.storygrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5);align-items:start}
.storygrid .prose-d p{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.72;max-width:56ch}
.storygrid .shot{aspect-ratio:4/5}
.storygrid .offset{margin-top:var(--s5)}
@media (max-width:900px){.storygrid{grid-template-columns:1fr}.storygrid .offset{margin-top:0}}

/* journal condensed (P) */
/* item 3: clean even two-column grid, consistent 4rem gap, tops aligned. The
   .shot keeps its absolute-fill (object-cover) pattern; the container defines
   the size (4:5, capped at 600px) so the image fills its half without distortion. */
.jgrid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.jgrid .featured{display:block}
.jgrid .featured .shot{aspect-ratio:4/5;max-height:600px;min-height:0;width:100%}
@media (max-width:900px){.jgrid{grid-template-columns:1fr;gap:var(--s4)}.jgrid .featured .shot{max-height:none}}

/* Journal feature: the ad image sits beside the archive as an equal-height
   column so the spread reads flush — no gap under the shorter side. The image
   fills its column (object-cover, ~5% side trim that keeps the centered
   wordmark and Paula), then drops to a full uncropped 3:4 portrait on mobile. */
.jgrid-feature{max-width:1160px;margin-left:auto;margin-right:auto;align-items:stretch}
.jgrid-feature .featured{display:block}
.jgrid-feature .featured .shot.jfeature{aspect-ratio:auto;max-height:none;min-height:100%;height:100%;width:100%}
@media (max-width:900px){
  .jgrid-feature{align-items:start}
  .jgrid-feature .featured .shot.jfeature{aspect-ratio:3/4;min-height:0;height:auto}
}

/* easter egg card (E) */
#eggcard{position:fixed;inset:0;z-index:960;display:none;place-items:center;background:rgba(12,10,8,.8)}
#eggcard.open{display:grid}
#eggcard .card{background:var(--bone);color:#171310;max-width:min(430px,92vw);padding:1.6rem;border:1px solid var(--gold);
  text-align:center}
#eggcard .devframe{width:210px;margin:0 auto;padding:10px 10px 30px;background:#fff;
  border:1px solid var(--stone);box-shadow:0 14px 34px -20px rgba(23,19,16,.55)}
#eggcard .devframe img{width:100%;display:block;
  filter:sepia(.9) blur(7px) brightness(1.4) contrast(.7);transition:filter 2.6s var(--easeio) .25s}
#eggcard.open .devframe img{filter:sepia(.12) blur(0) brightness(1) contrast(1)}
#eggcard .devcap{font-family:"Great Vibes",cursive;font-size:1.6rem;color:var(--gold-deep);
  margin-top:.8rem;opacity:0;transition:opacity 1s var(--easeio) 2.2s}
#eggcard.open .devcap{opacity:1}
@media (prefers-reduced-motion:reduce){
  #eggcard .devframe img{filter:none;transition:none}
  #eggcard .devcap{opacity:1;transition:none}}
#eggcard h3{font-family:var(--font-d);font-size:1.4rem}
#eggcard p{margin-top:.6rem;font-size:.95rem;color:rgba(23,19,16,.8)}

/* entrance: scroll-conducted (R) */
#threshold{--thp:0}
#threshold.scrub .th-panel{transition:none}
#threshold.scrub .th-panel.l{transform:translateX(calc(var(--thp)*-103%))}
#threshold.scrub .th-panel.r{transform:translateX(calc(var(--thp)*103%))}
#threshold.scrub .th-inner{transition:none;opacity:calc(1 - var(--thp)*1.5);
  transform:translateY(calc(var(--thp)*-7vh)) scale(calc(1 + var(--thp)*.55))}
#threshold.scrub .th-fx{transition:none;opacity:calc(var(--fxbase) * (1 - var(--thp)*1.2))}
#threshold.scrub .th-seam{opacity:calc(.25 * (1 - min(var(--thp)*5, 1)));transform:scaleY(1);transition:none}
#threshold.scrub~main .hero .hero-video video,#threshold.scrub~main .hero .hero-video img.poster{
  transform:scale(calc(1.14 - var(--thp)*.14));transition:none}
.th-hint2{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);
  font:520 var(--size-eyebrow) var(--font-b);letter-spacing:var(--track);text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 55%,transparent);animation:breathe 4s var(--easeio) infinite alternate}

/* ---------- mobile pass: tighter, calmer, designed ---------- */
@media (max-width:700px){
  :root{--s6:5.5rem;--s5:3.6rem;--s4:2.4rem;--size-hero:clamp(2.5rem,11vw,3.4rem);
    --size-h2:clamp(1.8rem,7.4vw,2.4rem);--size-lead:1.1rem}
  body{font-size:1rem}
  .scrollcue{display:none}
  .hero{padding-bottom:7rem}
  .hero .sub{margin-bottom:1.8rem}
  .ctarow{gap:1.2rem 1.6rem}
  .pagehero{padding-top:calc(var(--headh) + 3rem)}
  .fslogan{margin:var(--s4) 0 var(--s3);letter-spacing:.22em}
  .rowitem{padding:1.2rem 0}
  .split{gap:var(--s3)}
  .quotes{gap:var(--s4)}
  blockquote{font-size:1.25rem}
  .capacity{margin-top:var(--s3)}
  .menu-util{gap:1.1rem}
  .th-mark{width:min(190px,52vw)}
  footer.site{padding-bottom:calc(var(--s3) + 74px)}
}

/* ---------- print ---------- */
@media print{
  header.site,.menu,.grain,#toast,.bookbar,.scrollcue,.veil,#veil,.glow,.caustic,.flute,.progress,.menuclose{display:none!important}
  body{background:#fff;color:#000}
  .dark,.sand,footer.site{background:#fff!important;color:#000!important}
  .dark *,footer.site *{color:#000!important}
  .rv,.linewrap>span,.clip{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .hairline{transform:scaleX(1)!important;background:#000}
  .acc-panel{grid-template-rows:1fr!important}
  .arc-belt{height:auto!important}
  .arc-sticky{position:static!important;height:auto!important;overflow:visible!important}
  .arc-track{flex-direction:column!important;transform:none!important}
  .shot{background:#f2f2f2!important;min-height:2rem}
  section{padding:1.2rem 0;page-break-inside:avoid}
  a{text-decoration:none}
}

/* ---------- lifestyle assessment ---------- */
.hp-field{position:absolute;left:-5000px;width:1px;height:1px;opacity:0}
#assessform section{padding-top:var(--s5);padding-bottom:var(--s5)}
#assessform .fform{max-width:680px}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:1.9rem}
.fgrid2 .fspan{grid-column:1/-1}
@media (max-width:700px){.fgrid2{grid-template-columns:1fr}}
#assessform select{width:100%;background:none;border:0;border-bottom:1px solid var(--stone);
  font:400 1.02rem var(--font-b);padding:.6rem 0;color:inherit}
#assessform select:focus{outline:none;border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
#assessform.sending .btn{opacity:.55;pointer-events:none}

/* E2: method page calm headline */
.h1-calm{font-size:clamp(2.6rem,6vw,5.4rem)}
/* E2: The Difference, dead-centered reader; the text is the control */
.reader-head{margin-bottom:var(--s5)}
.reader-center{max-width:none;text-align:center;display:flex;flex-direction:column;align-items:center;margin:0 auto;
  cursor:pointer;transition:opacity 200ms var(--easeio)}
.reader-center:hover{opacity:.8}
.reader-center .rread{transition:color 200ms var(--easeio)}
.reader-center:hover .rread{color:var(--gold)}
@media (max-width:700px){.reader-head{position:static;margin-bottom:var(--s4)}section.readerhost{min-height:88svh}}
/* E2/E1: whole-column links, hairline warms to gold on hover */
a.rcard-link{text-decoration:none;color:inherit}
a.rcard-link h3,a.rcard-link p{transition:color 200ms var(--easeio)}
a.rcard-link:hover p{color:var(--ink)}
a.rcard-link::before{transition:transform 900ms var(--ease),background 250ms var(--easeio)}
a.rcard-link:hover::before{background:var(--gold-deep)}
@media (max-width:900px){a.rcard-link{padding-bottom:1.3rem}}

/* ---------- the seven rooms, fanned (home, E1.4) ---------- */
.fan-layout{position:relative;width:100%;max-width:80rem;margin:var(--s4) auto 0;min-height:30rem}
@media (max-width:1024px){.fan-layout{min-height:26rem}}
@media (max-width:640px){.fan-layout{min-height:20rem}}
.fan-card{position:absolute;left:50%;top:50%;width:16rem;height:24rem;padding:0;border:0;background:var(--sanct);
  cursor:pointer;opacity:0;overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.55)}
@media (max-width:1024px){.fan-card{width:13rem;height:19.5rem}}
@media (max-width:640px){.fan-card{width:9.5rem;height:14.25rem}}
.fan-card img,.fan-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fan-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.fanhead{font-size:clamp(2.4rem,6.5vw,5.6rem);line-height:1.06;text-align:center;margin:0 auto;max-width:24ch}
/* keep the (nowrap) gold "Nothing exists alone." line to one line without
   overflowing the narrowest phones — shrink the fanhead a touch under 420px */
@media (max-width:420px){.fanhead{font-size:clamp(1.85rem,8.6vw,2.4rem)}}
.fanhead em{font-style:italic;color:var(--gold)}
/* the threshold slit: the entrance motif, in miniature (E1.5 approved) */
.cta-slit{display:inline-flex;align-items:center;gap:1.1rem;background:none;border:0;cursor:pointer;padding:.2rem 0}
.cta-slit .slitdoor{position:relative;width:64px;height:56px;overflow:hidden;background:var(--sanct);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--stone) 45%,transparent)}
.cta-slit .sl{position:absolute;top:0;bottom:0;width:50%;
  background:linear-gradient(180deg,var(--gold-deep),var(--gold) 52%,var(--gold-deep));
  transition:transform 600ms var(--ease)}
.cta-slit .sl.l{left:0;box-shadow:inset -1px 0 0 rgba(247,242,232,.35)}
.cta-slit .sl.r{right:0;box-shadow:inset 1px 0 0 rgba(247,242,232,.35)}
.cta-slit .slflood{position:absolute;inset:0;opacity:0;
  background:radial-gradient(60% 120% at 50% 50%,rgba(214,178,120,.85),transparent 70%);
  transition:opacity 300ms var(--easeio)}
.cta-slit .sllbl{position:absolute;inset:0;display:grid;place-items:center;
  font:520 .52rem var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--cream);opacity:0;
  transition:opacity 400ms var(--easeio) 150ms}
.cta-slit:hover .sl.l,.cta-slit:focus-visible .sl.l{transform:translateX(-38%)}
.cta-slit:hover .sl.r,.cta-slit:focus-visible .sl.r{transform:translateX(38%)}
.cta-slit:hover .sllbl{opacity:1}
.cta-slit.fired .slflood{opacity:1;transition-duration:120ms}
.cta-slit .lbl{font:520 .82rem var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  transition:letter-spacing 450ms var(--easeio)}
.cta-slit:hover .lbl{letter-spacing:.26em}
.cta-slit:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.fan-meta{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:var(--s3);text-align:center}
.fan-meta .rline{max-width:44ch;min-height:2.6em}
@media (prefers-reduced-motion:reduce){.cta-slit .sl,.cta-slit .slflood,.cta-slit .sllbl{transition:none}}

/* Room 08: the architect's chamber (deliberate aesthetic break, F1) */
.jessee{position:fixed;inset:0;z-index:980;background:#000;display:grid;place-items:center;padding:1.5rem;
  opacity:0;transition:opacity 450ms ease}
.jessee.on{opacity:1}
.jessee .jbox{max-width:28rem;width:100%;border:1px solid rgba(0,255,102,.3);background:#050705;padding:2rem;
  font-family:ui-monospace,Consolas,"Courier New",monospace;color:#9ba39b;
  box-shadow:0 0 50px rgba(0,255,102,.15)}
.jessee h2{font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.2em;color:#00ff66;text-align:center;
  border-bottom:1px solid rgba(0,255,102,.2);padding-bottom:1rem;margin-bottom:1.4rem;line-height:1.5}
.jessee p{font-size:.82rem;margin-top:.55rem}
.jessee p b{color:#fff;font-weight:600}
.jessee .jpulse{animation:jpulse 1.6s ease infinite}
@keyframes jpulse{50%{opacity:.35}}
.jessee button{display:block;width:100%;margin-top:1.8rem;padding:.85rem;background:none;cursor:pointer;
  border:1px solid #00ff66;color:#00ff66;font:700 .72rem ui-monospace,Consolas,monospace;
  letter-spacing:.2em;text-transform:uppercase;transition:background 300ms,color 300ms}
.jessee button:hover{background:#00ff66;color:#000}
@media (prefers-reduced-motion:reduce){.jessee{transition:none}.jessee .jpulse{animation:none}}


/* ---------- room modal: inline editorial lightbox (E1b) ---------- */
.roommodal{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:var(--gutter);
  background:rgba(23,19,16,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transition:opacity 380ms var(--easeio),visibility 0s 380ms}
.roommodal.open{opacity:1;visibility:visible;transition:opacity 380ms var(--easeio)}
.rm-panel{display:grid;grid-template-columns:1.05fr .95fr;max-width:min(1060px,94vw);max-height:min(640px,88svh);
  width:100%;background:var(--bone);color:var(--ink);position:relative;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6);
  transform:scale(.96) translateY(10px);transition:transform 420ms var(--ease)}
.roommodal.open .rm-panel{transform:none}
.rm-media{position:relative;background:var(--sanct)}
.rm-media img,.rm-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rm-copy{padding:clamp(1.6rem,4vw,3rem) clamp(1.6rem,4vw,3rem);display:flex;flex-direction:column;
  justify-content:center;gap:1rem;overflow:auto}
.rm-copy h3{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:440;line-height:1.15}
.rm-copy p.rm-desc{font-size:1rem;line-height:1.7;color:color-mix(in srgb,var(--ink) 80%,transparent);max-width:46ch}
.rm-close{position:absolute;top:.5rem;right:.5rem;z-index:2;width:44px;height:44px;background:none;border:0;
  cursor:pointer;font:300 1.6rem/1 var(--font-b);color:var(--ink);transition:color 200ms}
.rm-close:hover{color:var(--gold-deep)}
.rm-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:820px){
  .rm-panel{grid-template-columns:1fr;overflow:auto}
  .rm-media{min-height:38svh}
  .rm-copy{justify-content:flex-start}
  .rm-close{color:var(--cream);text-shadow:0 1px 6px rgba(23,19,16,.6)}
}
@media (prefers-reduced-motion:reduce){.roommodal,.rm-panel{transition:none}}

/* ---------- specular gold shine: matte-gold word, a bright champagne beam
   sweeps across ONCE (3000ms) as the phrase crosses the viewport centerline,
   then rests back to matte gold. Gold only (no silver). Also fires on hover
   for the contact quadrants (.shine-hover). Gilda italic accent face. ---------- */
.shine-gold,.shine-silver{
  font-family:"EB Garamond","Gilda-fallback",Georgia,serif;
  font-style:italic;font-weight:500;font-size:1.1em;letter-spacing:.004em;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-repeat:no-repeat;background-size:250% 100%,auto;
  background-position:100% center,center;
  background-image:
    linear-gradient(90deg,#0000 calc(50% - 2.6ch),#F4E2B4,#0000 calc(50% + 2.6ch)),
    linear-gradient(#B0824A,#B0824A)}
.dark .shine-gold,.dark .shine-silver{background-image:
  linear-gradient(90deg,#0000 calc(50% - 2.6ch),#FBEFC8,#0000 calc(50% + 2.6ch)),
  linear-gradient(#D9B978,#D9B978)}
html.js .shine-gold.shine-go,html.js .shine-silver.shine-go,
.shine-hover:hover .shine-gold,.shine-hover:hover .shine-silver{
  animation:shinesweep 3000ms var(--easeio) forwards}
@keyframes shinesweep{from{background-position:100% center,center}to{background-position:-40% center,center}}
@media (prefers-reduced-motion:reduce){
  .shine-gold,.shine-silver{animation:none;background-image:none;-webkit-text-fill-color:#B0824A;color:#B0824A}
  .dark .shine-gold,.dark .shine-silver{-webkit-text-fill-color:#D9B978;color:#D9B978}
}

/* ---------- E1.1: carousel meta as editorial print ---------- */
.fan-meta .rmeta{display:flex;align-items:baseline;gap:.6rem;justify-content:center;
  font:520 .72rem var(--font-b);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.dark .fan-meta .rmeta{color:var(--gold)}
.fan-meta .rmeta .rnum{opacity:.7}
.fan-meta .rmeta .rsep{opacity:.45;font-weight:400}
.fan-meta .rline{font:italic 440 clamp(1.05rem,1.7vw,1.35rem)/1.5 var(--font-d);
  color:color-mix(in srgb,var(--cream) 82%,transparent);opacity:.85;letter-spacing:.005em;
  text-transform:none}
.fan-meta{gap:.7rem}
/* refined Next room: text + thin sliding arrow, no block */
.cta-next{display:inline-flex;align-items:center;gap:.7rem;background:none;border:0;cursor:pointer;
  padding:.4rem .1rem;margin-top:.4rem;
  font:520 .68rem var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  transition:color 300ms var(--easeio)}
.cta-next .arw{display:inline-block;width:30px;height:1px;position:relative;background:var(--gold);
  transition:transform 350ms var(--ease),background 300ms}
.cta-next .arw::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;
  border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg);
  transition:border-color 300ms}
.cta-next:hover{color:#E7C889}
.cta-next:hover .arw{transform:translateX(6px);background:#E7C889}
.cta-next:hover .arw::after{border-color:#E7C889}
.cta-next:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ---------- E7: contact hub ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:color-mix(in srgb,var(--stone) 45%,transparent);
  border:1px solid color-mix(in srgb,var(--stone) 45%,transparent);max-width:900px}
@media (max-width:640px){.contact-grid{grid-template-columns:1fr}}
.contact-card{display:flex;flex-direction:column;gap:.5rem;background:var(--sand);padding:var(--s4) var(--s3);
  text-decoration:none;color:inherit;transition:background 300ms var(--easeio)}
.contact-card:hover{background:var(--bone)}
.contact-card .cc-label{font:520 .69rem var(--font-b);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.dark .contact-card .cc-label{color:var(--gold)}
.contact-card .cc-value{font:440 clamp(1.2rem,2vw,1.6rem)/1.15 var(--font-d);margin-top:.2rem}
.contact-card .cc-note{font-size:.9rem;color:color-mix(in srgb,var(--ink) 65%,transparent);margin-top:auto;padding-top:.6rem}
.dark .contact-card .cc-note{color:color-mix(in srgb,var(--cream) 60%,transparent)}

/* 1C: fanhead stacks to three lines */
.fanhead .fl{display:block}

/* 2C: enlarged editorial paragraphs to absorb structural gaps */
.prose-d p.prose-xl{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.72;letter-spacing:.004em}

/* ============ The Glamour Editorial type tuning (Gilda / Open Sans / Montserrat) ============ */
/* Gilda Display: razor-thin didone, ships 400 only — keep weight normal and give
   the delicate strokes a touch of leading so multi-line heads never crowd. */
h1,h2,h3,h4,.h1,.h2,.h3,.display,.fanhead,.pull,.rread,.duel .a .t{font-weight:400;letter-spacing:.004em;line-height:1.16}
.h1{line-height:1.08}
.fanhead{font-weight:400}
/* Open Sans body: relaxed, justified magazine columns (hyphens tame the rivers) */
.body-copy,.prose-d p,.lead,.rstory,.standfirst,.rowitem .what p{
  text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
/* On phones the single column is too narrow for justification: kill the rivers
   and forced hyphenation, read ragged-right instead. */
@media (max-width:760px){
  .body-copy,.prose-d p,.lead,.rstory,.standfirst,.rowitem .what p{
    text-align:left;hyphens:none;-webkit-hyphens:none}
}
.body-copy,.lead{line-height:1.72}
.prose-d p{line-height:1.75}
/* Montserrat bold for every tracked-caps label / tagline / section marker */
.eyebrow,.chapnum,.wordmark,.rlabel,.cc-label,.rmeta,.cta-next .lbl,
.slogan,.fslogan,.qhint,.backlink,.bm-chips button,.indexbtn,.menuclose,.navlinks>li>a,
.menu-util a,.fine a,.byline,.artfoot,.count,.rlbl{font-family:var(--font-label)}
.eyebrow,.rlabel,.cc-label,.rmeta,.cta-next .lbl,.slogan,.bm-chips button{font-weight:600}
.eyebrow{letter-spacing:.24em}
body{letter-spacing:0}
/* justification off on very short measures / centered blocks where it looks odd */
.pagehero .lead[style*="text-align"],.sechead .lead,.contact-card .cc-note{text-align:left;text-justify:auto}
/* shine words render in Gilda Display italic (accent face) */
.shine-gold,.shine-silver{font-family:"EB Garamond","Gilda-fallback",Georgia,serif}

/* signature gets the gold sheen sweep but keeps its Great Vibes script face */
.signature.shine-sig{
  background-image:
    linear-gradient(90deg,#0000 calc(50% - 3ch),#F4E2B4,#0000 calc(50% + 3ch)),
    linear-gradient(var(--gold-deep),var(--gold-deep));
  background-size:250% 100%,auto;background-repeat:no-repeat;background-position:100% center,center;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.dark .signature.shine-sig{background-image:
  linear-gradient(90deg,#0000 calc(50% - 3ch),#FBEFC8,#0000 calc(50% + 3ch)),
  linear-gradient(var(--gold),var(--gold))}
html.js .signature.shine-sig.shine-go{animation:shinesweep 3400ms linear infinite}
@media (prefers-reduced-motion:reduce){.signature.shine-sig{-webkit-text-fill-color:var(--gold-deep);color:var(--gold-deep);background:none;animation:none}}

/* ---------- E7: asymmetric contact split (portrait + hairline quadrants) ---------- */
.contact-split{display:grid;grid-template-columns:1fr 1fr;min-height:82vh;gap:0;padding:0;align-items:start}
@media (max-width:900px){.contact-split{grid-template-columns:1fr}}
.contact-portrait{position:relative;background:var(--sanct);min-height:min(82vh,640px);align-self:stretch;overflow:hidden}
.contact-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.12) saturate(1.05) brightness(.92)}
.contact-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(23,19,16,.6),transparent 48%)}
.contact-portrait .cp-cap{position:absolute;left:var(--gutter);bottom:var(--gutter);z-index:2;color:var(--cream)}
.cp-cap .eyebrow{color:var(--gold)}
.cp-cap .cp-line{font:400 clamp(2rem,3.4vw,3.2rem)/1.05 var(--font-d);margin-top:.4rem}
.contact-quad{display:grid;grid-template-columns:1fr 1fr;align-content:start;grid-auto-rows:auto}
@media (max-width:560px){.contact-quad{grid-template-columns:1fr}}
/* .cq is a plain block so the disclosure panel flows and clips naturally
   (a flex child gets shrunk to 0 regardless of max-height). The head carries
   the min-height for closed-state presence. */
.cq{position:relative;display:block;
  border-right:1px solid color-mix(in srgb,var(--stone) 30%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--stone) 30%,transparent);
  transition:background 500ms var(--easeio)}
.contact-quad .cq:nth-child(2n){border-right:0}
.cq:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.dark .cq:hover{background:color-mix(in srgb,var(--cream) 5%,transparent)}
.cq-head{background:none;border:0;text-align:left;cursor:pointer;width:100%;min-height:19vh;
  display:flex;flex-direction:column;gap:.5rem;padding:clamp(1.4rem,2.4vw,2.2rem)}
.cq-label{font-family:var(--font-label);font-weight:600;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.dark .cq-label{color:var(--gold)}
.cq-value{font:400 clamp(1.3rem,1.9vw,1.7rem)/1.2 var(--font-d)}
.cq-note{font-size:.9rem;color:color-mix(in srgb,var(--ink) 62%,transparent);margin-top:auto}
.dark .cq-note{color:color-mix(in srgb,var(--cream) 60%,transparent)}
.cq-panel{max-height:0;overflow:hidden;transition:max-height 500ms var(--ease)}
.cq.open .cq-panel{max-height:560px}
.cq-panel>*{min-height:0}
.cq-form,.cq-social{padding:0 clamp(1.4rem,2.4vw,2.2rem) clamp(1.4rem,2.4vw,2.2rem);display:flex;flex-direction:column;gap:1rem}
.cq-social p{font-size:.92rem;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.dark .cq-social p{color:color-mix(in srgb,var(--cream) 68%,transparent)}
.uln input,.uln textarea{width:100%;background:transparent;border:0;border-radius:0;padding:.5rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--stone) 55%,transparent);
  font:400 .95rem var(--font-b);letter-spacing:.01em;color:inherit;resize:vertical}
.uln input:focus,.uln textarea:focus{outline:none;border-color:#c5a880}
.uln input::placeholder,.uln textarea::placeholder{color:color-mix(in srgb,var(--ink) 40%,transparent)}
.dark .uln input::placeholder,.dark .uln textarea::placeholder{color:color-mix(in srgb,var(--cream) 42%,transparent)}
.cq-send{align-self:flex-start;background:none;border:0;border-bottom:1px solid var(--gold-deep);cursor:pointer;
  padding:.35rem 0;margin-top:.2rem;font-family:var(--font-label);font-weight:600;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);transition:color 250ms,border-color 250ms}
.cq-send:hover{color:#c5a880;border-color:#c5a880}
.cq-send:disabled{opacity:.5;pointer-events:none}
.cq-ok,.cq-err{font-size:.85rem;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.dark .cq-ok,.dark .cq-err{color:color-mix(in srgb,var(--cream) 70%,transparent)}

/* ============ Glamour Editorial v2.0 — new deltas ============ */
/* 1B: opacity/emphasis hierarchy — dim narrative so headlines/labels/shine lead
   the eye. Headlines, Montserrat labels, nav, and shine phrases stay full. */
.body-copy,.lead,.prose-d p,.rowitem .what p,.standfirst,.rstory,article.journal p,.jgrid .rowitem .what p{
  color:color-mix(in srgb,var(--ink) 70%,transparent)}
.dark .body-copy,.dark .lead,.dark .prose-d p,.dark .rowitem .what p,.dark .standfirst,.dark article.journal p{
  color:color-mix(in srgb,var(--cream) 72%,transparent)}
.prose-d p:last-child{color:var(--gold-deep)}
.dark .prose-d p:last-child{color:var(--gold)}
/* metadata / timestamps a step quieter still */
.caption,.byline,.artfoot,.when,.cq-note,.rmeta .rline{color:color-mix(in srgb,var(--ink) 68%,transparent)}
.dark .caption,.dark .byline,.dark .artfoot,.dark .when,.dark .cq-note{color:color-mix(in srgb,var(--cream) 60%,transparent)}

/* Dropdown doors: a solid surface that always CONTRASTS the page. Using --ink
   for the panel and --bone for the links means it auto-flips — a dark card on
   the cream page, a light card on the dark page — so it can never vanish into
   the background (the old translucent cream door did on the cream contact top). */
.drop{background:#171310;border:1px solid rgba(247,242,232,.16);
  box-shadow:0 24px 56px -20px rgba(0,0,0,.6);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.drop a{color:#F7F2E8!important}
.drop a:hover{background:rgba(247,242,232,.1);color:var(--gold)!important}
.drop .dsep{background:rgba(247,242,232,.2)}
.drop .darts{background:rgba(247,242,232,.06);border-top-color:rgba(247,242,232,.14);border-bottom-color:rgba(247,242,232,.14)}
.drop .darts a:hover{background:rgba(247,242,232,.12)}
/* dark theme: flip to a light card with dark ink links so it still contrasts */
:root[data-theme="dark"] .drop{background:#F7F2E8;border-color:rgba(23,19,16,.14);box-shadow:0 24px 56px -20px rgba(0,0,0,.5)}
:root[data-theme="dark"] .drop a{color:#171310!important}
:root[data-theme="dark"] .drop a:hover{background:rgba(23,19,16,.06);color:var(--gold-deep)!important}
:root[data-theme="dark"] .drop .dsep{background:rgba(23,19,16,.2)}
:root[data-theme="dark"] .drop .darts{background:rgba(23,19,16,.05);border-top-color:rgba(23,19,16,.12);border-bottom-color:rgba(23,19,16,.12)}

/* Method: tighten the space between the framework graphic and the hero chapter */
.framework{padding-top:calc(var(--headh) + var(--s3));padding-bottom:var(--s3)}
.framework-graphic{margin-top:var(--s4)}
.framework + .pagehero{padding-top:var(--s3)}
.grain{opacity:.035}

/* 3B: architectural arch rhyme.
   Scroll-tracker thumbs take a soft arched cap; the body-map stage gets a faint
   wireframe arch echoing the hero arches. */
.reelprog i{border-radius:3px 3px 0 0}
.bm-stage::before{content:"";position:absolute;left:50%;top:6%;width:min(62%,620px);aspect-ratio:2/1;
  transform:translateX(-50%);border:1px solid rgba(214,178,120,.14);border-bottom:0;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;pointer-events:none;z-index:1}
@media (prefers-reduced-motion:reduce){.bm-stage::before{opacity:.6}}

/* item 1/2: hero tagline "Train Beyond Trends" gets the gold shimmer, keeping
   its Montserrat caps face (font-preserving variant of the sweep) */
.slogan.shine-tag{
  background-image:linear-gradient(90deg,var(--gold) 0,var(--gold) 42%,#FBEFC8 50%,var(--gold) 58%,var(--gold) 100%);
  background-size:250% 100%;background-position:100% center;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.slogan.shine-tag em,.slogan.shine-tag sup{color:transparent;-webkit-text-fill-color:transparent}
html.js .slogan.shine-tag.shine-go{animation:shinesweep 3400ms linear infinite}
@media (prefers-reduced-motion:reduce){.slogan.shine-tag{animation:none;background:none;-webkit-text-fill-color:var(--gold);color:var(--gold)}.slogan.shine-tag em,.slogan.shine-tag sup{-webkit-text-fill-color:var(--gold)}}

/* item 5: slide the journal featured photo right within its column to close the
   awkward middle gap (keep it anchored left-column, centered in its domain) */
@media (max-width:900px){.jgrid .featured .shot{max-height:none}}

/* The Method framework graphic — a cream gallery plate, ample white space.
   The 1-2-3 art is cream/black; in dark mode it inverts to blend the plate. */
.framework{background:#F8F0E4;text-align:center;padding-top:var(--s6);padding-bottom:var(--s6);color:#171310}
.framework .eyebrow{color:var(--gold-deep)}
.framework .lead{color:color-mix(in srgb,#171310 66%,transparent)}
.framework-graphic{max-width:min(560px,86vw);margin:var(--s5) auto 0}
.framework-graphic img{width:100%;display:block}
:root[data-theme="dark"] .framework{background:#0c0f14;color:var(--cream)}
:root[data-theme="dark"] .framework .eyebrow{color:var(--gold)}
:root[data-theme="dark"] .framework .lead{color:color-mix(in srgb,var(--cream) 66%,transparent)}
:root[data-theme="dark"] .framework-graphic img{filter:invert(1)}

/* ---- round 14 targeted fixes ---- */
/* About: storygrid narrative last paragraph is normal body (not the gold-italic
   accent) so the modalities/reinvention columns read uniform apart from shine */
.storygrid .prose-d p:last-child{font-family:var(--font-b);font-style:normal;font-weight:400;
  font-size:clamp(1.06rem,1.4vw,1.22rem);letter-spacing:.002em;
  color:color-mix(in srgb,var(--ink) 70%,transparent)}
:root[data-theme="dark"] .storygrid .prose-d p:last-child{color:color-mix(in srgb,var(--cream) 72%,transparent)}
.dark .storygrid .prose-d p:last-child{color:rgba(247,242,232,.88)}
/* Method: centre the "industry sells / method reads" headline */
.readerhost .reader-head{text-align:center}
/* Contact: drag the split down clear of the header + its dropdown; never clip text */
.contact-split{padding-top:calc(var(--headh) + 1.6rem)}
.cq-value,.cq-note,.cq-label{overflow-wrap:anywhere;word-break:normal}
.cq-head{overflow:visible}

/* ============================================================
   MASTER-REVISION OVERHAUL — shared components for the new pages
   (Hourglass Method, Performance Reset, Work With Paula) and the
   page rewrites. Built on the existing token system.
   ============================================================ */

/* Red-marker photo placeholder: aspect-locked frame that holds the real
   photo's slot so approved photography drops in later with no reflow. The
   brief calls these "red photo markers" — the dot is an intentional build cue. */
.photo-marker{position:relative;aspect-ratio:var(--ar,4/5);width:100%;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;
  padding:clamp(1.1rem,2.4vw,1.9rem);
  background:color-mix(in srgb,var(--sand) 62%,var(--bone));
  border:1px solid color-mix(in srgb,var(--stone) 55%,transparent);overflow:hidden}
.photo-marker::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,transparent 0 21px,
    color-mix(in srgb,var(--stone) 13%,transparent) 21px 22px)}
.pm-dot{position:absolute;top:1rem;left:1rem;width:.62rem;height:.62rem;border-radius:50%;
  background:#C0392B;box-shadow:0 0 0 4px color-mix(in srgb,#C0392B 20%,transparent)}
.pm-label{position:relative;font:600 var(--size-eyebrow) var(--font-label);
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.pm-note{position:relative;font-family:var(--font-d);font-style:italic;
  font-size:.98rem;line-height:1.42;max-width:34ch;
  color:color-mix(in srgb,var(--ink) 76%,transparent)}

/* Gapless hairline card grid — the site's quadrant grammar, reused for
   "what we rebuild", program options, and package cards. */
.qgrid{display:grid;grid-template-columns:1fr;gap:1px;margin-top:var(--s4);
  background:color-mix(in srgb,var(--stone) 46%,transparent);
  border:1px solid color-mix(in srgb,var(--stone) 46%,transparent)}
@media (min-width:640px){.qgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.qgrid.cols-3{grid-template-columns:repeat(3,1fr)}}
.qcard{background:var(--bone);padding:clamp(1.5rem,2.8vw,2.3rem);
  display:flex;flex-direction:column;gap:.55rem;min-height:100%}
.qcard .qk{font:600 var(--size-eyebrow) var(--font-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep)}
.qcard h3{font-family:var(--font-d);font-weight:400;font-size:var(--size-h3);line-height:1.08}
.qcard p{font-size:.99rem;line-height:1.62;color:color-mix(in srgb,var(--ink) 85%,transparent)}
.qcard .qmeta{margin-top:auto;padding-top:.9rem;font-size:.82rem;letter-spacing:.02em;
  color:color-mix(in srgb,var(--ink) 60%,transparent)}
.qcard .qmeta b{font-weight:600;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.qcard .tlink{margin-top:.4rem}

/* Gold-tick checklist — for "the results", "what you leave with". */
.checklist{list-style:none;display:grid;gap:.72rem;margin-top:var(--s3)}
.checklist li{position:relative;padding-left:1.7rem;font-size:1.03rem;line-height:1.5}
.checklist li::before{content:"";position:absolute;left:.1rem;top:.52em;width:.5rem;height:.5rem;
  border-right:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);
  transform:rotate(45deg) translateY(-1px)}
:root[data-theme="dark"] .checklist li::before{border-color:var(--gold)}
.checklist.two{grid-template-columns:1fr}
@media (min-width:620px){.checklist.two{grid-template-columns:1fr 1fr;column-gap:2.4rem}}

/* Numbered step row — "how the method begins", the four-week format. */
.steprow{display:grid;grid-template-columns:1fr;gap:1px;margin-top:var(--s4);
  background:color-mix(in srgb,var(--stone) 46%,transparent);
  border:1px solid color-mix(in srgb,var(--stone) 46%,transparent)}
@media (min-width:560px){.steprow{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.steprow{grid-template-columns:repeat(4,1fr)}}
.stepcell{background:var(--bone);padding:clamp(1.5rem,2.8vw,2.3rem);display:flex;flex-direction:column;gap:.5rem}
.stepcell .snum{font-family:var(--font-d);font-size:2.2rem;line-height:1;color:var(--gold-deep)}
.stepcell h3{font-family:var(--font-d);font-weight:400;font-size:1.32rem;margin-top:.2rem}
.stepcell p{font-size:.97rem;line-height:1.6;color:color-mix(in srgb,var(--ink) 84%,transparent)}

/* Big centered statement break (the copy decks lean on these). */
.statement{text-align:center;max-width:24ch;margin-left:auto;margin-right:auto}
.statement.wide{max-width:34ch}

/* Two-action context bar replaces the persistent single "Book" bookbar.
   Editorial / classes / advisory pages each supply their own two verbs. */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:none;
  grid-template-columns:1fr 1fr;gap:1px;
  background:color-mix(in srgb,var(--stone) 50%,transparent);
  border-top:1px solid color-mix(in srgb,var(--stone) 50%,transparent);
  padding-bottom:env(safe-area-inset-bottom)}
.actionbar a{background:var(--bone);color:var(--ink);text-align:center;
  font:600 .74rem var(--font-label);letter-spacing:.13em;text-transform:uppercase;
  padding:1rem .6rem;text-decoration:none;transition:background .2s,color .2s}
.actionbar a.primary{background:var(--ink);color:var(--bone)}
.actionbar a:active{background:var(--sand)}
.actionbar a.primary:active{background:var(--gold-deep)}
@media (max-width:960px){.actionbar{display:grid}
  body:has(.actionbar) footer.site{padding-bottom:calc(var(--s3) + 60px)}}

/* Home: threshold sub-line, hero supporting line, and the proof strip */
.th-line{margin-top:1.05rem;font:600 .7rem var(--font-label);letter-spacing:.22em;
  text-transform:uppercase;color:color-mix(in srgb,var(--cream) 68%,transparent)}
.hero-lead{margin-top:.9rem;max-width:52ch;font-size:1rem;line-height:1.6;
  color:color-mix(in srgb,var(--cream) 82%,transparent)}
.prooflist{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.55rem 0;margin:var(--s3) auto 0;max-width:74ch;text-align:center}
.prooflist li{font:600 .73rem var(--font-label);letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 74%,transparent);display:inline-flex;align-items:center}
.prooflist li:not(:last-child)::after{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--gold-deep);margin:0 1.4rem;opacity:.8}
/* Home closing statement: one unbroken line on desktop, wraps on phones;
   fluid scale keeps it on one line down to ~920px without overflowing. */
.sechead .stmt-oneline{max-width:none;font-size:clamp(1rem,2.05vw,1.35rem);white-space:normal;text-align:center}
@media (min-width:920px){.sechead .stmt-oneline{white-space:nowrap}}
/* gold-shimmer trademark mark (applied to every ™ in body text by site.js) */
.tm{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  background-repeat:no-repeat;background-size:250% 100%,auto;background-position:100% center,center;
  background-image:linear-gradient(90deg,#0000 40%,#F4E2B4 50%,#0000 60%),linear-gradient(#B0824A,#B0824A)}
:root[data-theme="dark"] .tm{background-image:linear-gradient(90deg,#0000 40%,#FBEFC8 50%,#0000 60%),linear-gradient(#D9B978,#D9B978)}
html.js .tm.shine-go{animation:shinesweep 3000ms var(--easeio) forwards}
@media (prefers-reduced-motion:reduce){.tm{background:none;-webkit-text-fill-color:#B0824A;color:#B0824A}
  :root[data-theme="dark"] .tm{-webkit-text-fill-color:#D9B978;color:#D9B978}}
/* Hero CTA doubles as an opaque mask over the arch-monogram artifact: keep it a
   solid, generously-sized shield (background is var(--cream), fully opaque). */
.hero .ctarow .btn{min-width:19rem}