/* ─────────────────────────────────────────────
   ASH K HOLM — design system
   Palette: THE INSTITUTE brand deck V2.0 (2026-09-08 rebrand; supersedes
   the merch-sheet tokens of 2026-09-04). Five named colors from the deck:
     Bone White #F5F1EB (ground) · Plaster #EBE6DA (the light band —
     since 2026-09-12 kept on ONE page only, about.html, as Ash's
     comparison sample) · Plaster Deep #C8BFAE (THE band tone site-wide
     since 2026-09-12 — Amin: "run toward that") · Fawn #9C7C65 (accent,
     5%, DECORATIVE ONLY — never text) · Dark Chocolate #2B1F18 (THE ink;
     carries all type and all interactive chrome).
   Environmental darks deeper than chocolate are retained by design
   (footer/menu/room grounds — the deck's reversal rule "White Bone on
   Chocolate" is honored via bone-family ink on them). Every text token
   below is re-measured grain-costed (.claude-measure.mjs grain) on its
   worst ground after this swap — figures in SEPT-GO-LIVE.md §18.
   Type: Bodoni Moda (display, 20px floor per deck) · Manrope (body)
   ───────────────────────────────────────────── */
:root{
  --cream:#F5F1EB;    /* BONE WHITE — the deck's primary ground ("vellum, not paper") */
  --cream2:#EBE6DA;   /* PLASTER — bands, and text-on-dark ("a warm gallery wall") */
  --card:#F9F6F0;     /* card faces (bone-derived) */
  --taupe:#C8BFAE;    /* PLASTER DEEP — dividers, plates, chips, dark-ground labels */
  --umber:#9C7C65;    /* FAWN — the 5% accent; decorative only, never text */
  --espresso:#2B1F18; /* DARK CHOCOLATE — THE ink; ALL interactive: buttons, links, focus */
  --espresso2:#1E1710;/* hover state (chocolate deepened — web necessity, not a deck color) */
  --ink:#2B1F18;      /* chocolate is the ink ("carries all type so nothing else has to shout") */
  --dark:#1C1611;     /* environmental dark: footer, menu, intro (deeper than chocolate, kept) */
  --line:#D5CDBD;     /* hairlines, plaster-deep-derived (non-text) */
  --tx:#2B1F18;       /* body ink = chocolate (deck rule; ≈ the old #26201A luminance) */
  --tx2:#5C4C3F;      /* secondary — chocolate/fawn family, luminance held vs the measured #574F41 */
  --tx3:#5E5041;      /* small notes/caps — same treatment as --tx2 */
  --bronze:#6B5645;   /* letterspaced label ink — fawn darkened to hold the measured 4.97:1 class */
  --serif:'Bodoni Moda','Didot','Bodoni MT','Times New Roman',serif;
  --sans:'Manrope','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(1.4rem,6vw,7rem);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);color:var(--tx);
  font-family:var(--sans);font-weight:300;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden;}
:focus-visible{outline:2px solid var(--espresso);outline-offset:3px;}
::selection{background:var(--taupe);color:var(--ink);}
a{color:inherit;text-decoration:none;}
button{font-family:var(--sans);}

/* film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* cursor glow — warm taupe light, no gold */
.glow{
  position:fixed;top:0;left:0;width:480px;height:480px;border-radius:50%;
  pointer-events:none;z-index:3;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(156,124,101,.13),rgba(156,124,101,0) 62%);
  mix-blend-mode:multiply;
}
@media(pointer:coarse){ .glow{display:none;} }

/* ---------- type ---------- */
.kick{font-size:.68rem;font-weight:400;letter-spacing:.4em;text-transform:uppercase;color:var(--bronze);}
.disp{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em;}
.ital{font-style:italic;}
.soft{color:var(--tx2);}
.faint{color:var(--tx3);}
.lede{font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:1.7;font-weight:300;}
h2.disp{font-size:clamp(1.9rem,4.6vw,3.4rem);max-width:22ch;}
.accent{color:var(--espresso);}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.16,.8,.27,1),transform 1s cubic-bezier(.16,.8,.27,1);}
.rv.in{opacity:1;transform:none;}
.d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;}
/* LEGAL PAGES RENDER WITHOUT JS (2026-09-13, Ash's "privacy policy is
   totally blank" note): .rv starts at opacity 0 and only site.js reveals
   it, so with scripts off or failed the privacy policy and accessibility
   statement rendered EMPTY-BODIED — a legal surface may never depend on
   hydration. The legal pages simply do not animate; no color moves. */
.page-legal .rv{opacity:1;transform:none;transition:none;}

/* ---------- announce bar ---------- */
.announce{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  background:var(--ink);color:var(--cream2);padding:.6rem 1rem;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;
}
.announce i{width:7px;height:7px;border-radius:50%;background:var(--umber);animation:blink 1.4s ease infinite;flex:none;}
.announce b{font-weight:400;color:var(--taupe);}
.announce .an-s{display:none;}
@media(max-width:640px){
  .announce .an-l{display:none;}
  .announce .an-s{display:inline;}
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem var(--pad);
  background:rgba(245,241,235,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* wordmark row: Manrope caps (the deck sets its own lockup signature in Manrope;
   Bodoni Moda holds a 20px floor, and the nav row sits under it) */
.logo{font-family:var(--sans);font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;white-space:nowrap;color:var(--ink);display:inline-flex;align-items:center;}
.logo em{color:inherit;font-style:normal;}
/* the AK.H monogram in the brand slot (deck V2.0 p8: the signature mark, used where
   the full lockup would be illegible or redundant — p4 gives the primary horizontal
   lockup a 180px screen minimum, which cannot fit this row). 34px stays under the
   row's existing height drivers (burger 40px mobile, pill ~41px desktop), so the
   hero fold's 71px constant (.hero min-height below) stands untouched. Chocolate
   #2B1F18 on the cream bar per the deck's ground rules; no effects (p14). The .logo
   text styles above stay as the alt-text fallback if the SVG ever fails to load. */
.logo-mark{display:block;height:34px;width:auto;}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem);}
.nav-links a{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tx2);transition:color .3s;position:relative;padding:.3rem 0;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.on{color:var(--ink);}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--espresso);}
.btn-book{
  display:inline-block;background:var(--espresso);color:var(--cream);border:none;border-radius:40px;cursor:pointer;
  padding:.7rem 1.5rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;transition:background .3s;white-space:nowrap;
}
.btn-book:hover{background:var(--espresso2);}
/* keep the pill's cream text when it sits inside .nav-links (link color would otherwise win) */
.nav-links a.btn-book{color:var(--cream);padding:.7rem 1.5rem;}
.nav-links a.btn-book:hover{color:var(--cream);}
.burger{display:none;background:none;border:none;cursor:pointer;width:40px;height:40px;position:relative;z-index:1001;}
.burger span{display:block;width:22px;height:1.5px;background:var(--tx);margin:5px auto;transition:.35s;}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
body.menu-open .burger span:nth-child(2){opacity:0;}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
@media(max-width:860px){
  .nav-links{display:none;}
  .burger{display:block;}
}
body.menu-open .burger span{background:var(--cream2);}
.menu{
  position:fixed;inset:0;z-index:1000;background:var(--dark);color:var(--cream2);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);gap:.4rem;
  opacity:0;pointer-events:none;transition:opacity .45s ease,visibility .45s ease;
}
body.menu-open .menu{opacity:1;pointer-events:auto;visibility:visible;}
/* keyboard ghost stops: opacity:0 + pointer-events:none alone still leave the
   closed menu's five links in the Tab order — invisible stops on desktop,
   where .burger is display:none and the menu can never be opened at all.
   visibility rides the same transition list as opacity so the CLOSE fade is
   unaffected (per spec, a transitioned flip to "hidden" defers to the end of
   the transition; a flip to "visible" applies at the start). */
body:not(.menu-open) .menu{visibility:hidden;}
.menu a{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,8vw,3.2rem);line-height:1.25;transition:color .3s;}
.menu a:hover{color:var(--taupe);}
.menu .m-small{font-family:var(--sans);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);margin-top:2rem;}
.menu .m-doors{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.8rem;}
.menu .m-doors a{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid rgba(200,191,174,.45);border-radius:40px;padding:.6rem 1.2rem;color:var(--cream2);}

/* ---------- sections ---------- */
.sec{padding:clamp(4.2rem,9vw,8.5rem) var(--pad);position:relative;}
.sec--tight{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem);}
.sec--bone{background:var(--cream2);}
/* ABOUT ONLY — the light-Plaster comparison sample (about.html is the ONE
   light-Plaster page since the 2026-09-12 inversion; Ash is choosing between
   this #EBE6DA and the site's Plaster Deep #C8BFAE). The final-gate reviewer
   ruled the sample "PRESENT, WEAK": flat #EBE6DA on the #F5F1EB page ground
   read near-identical. Strengthened 2026-09-13 on Amin's approval WITHOUT
   touching the tone itself — the band stays exactly #EBE6DA (that IS the
   sample): taupe hairlines cut both edges crisp, and bone margins above and
   below float the plate on the very ground it is judged against, so the
   ladder reads bone → Plaster → bone → Plaster Deep → coffee on one page.
   Existing tokens only (--taupe, non-text hairlines); no other page carries
   the .page-about body class, so every other band renders untouched. */
.page-about .sec--bone{
  margin:clamp(2rem,4.5vw,3.6rem) 0;
  border-top:1px solid var(--taupe);
  border-bottom:1px solid var(--taupe);
}
/* the accent band — warm taupe canvas, dark ink (the former dark band, folded
   to one definition; text floors at #E8E2D3, the measured worst light ground) */
.sec--dark{
  background:
    radial-gradient(120% 120% at 82% 0%, rgba(156,124,101,.12), transparent 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(200,191,174,.20), transparent 55%),
    linear-gradient(180deg,#EDE8DB,#E8E2D3);
  color:var(--tx);
}
.sec--dark .kick{color:var(--bronze);}
.sec--dark .soft{color:var(--tx2);}
.sec--dark .faint{color:var(--tx3);}
.sec--dark .lede{color:var(--tx2);}
.sec--dark .disp,.sec--dark h1,.sec--dark h2{color:var(--tx);}
/* the DEEP band — Plaster Deep #C8BFAE as a full section ground (2026-09-12,
   Amin: "kind of repetative Try with the plaster deep and or plaster"; same
   day he called the inversion — "she wanted to see those two colors leaning
   toward the deep plaster so run toward that" — so this is now the DOMINANT
   band tone on every banded page, with about.html the one light-Plaster
   comparison sample). It is the palette's strongest light tone. Secondary inks
   are DARKENED here on purpose: --tx2 #5C4C3F measures ~4.5:1 flat on this
   ground and the grain multiply would sink it, so the deep band carries its
   own ink floor (#4A3D31 body / #4E3C29 labels — both re-measured grained,
   figures in SEPT-GO-LIVE.md §19). Chocolate display ink rides unchanged. */
.sec--deep{
  background:
    radial-gradient(120% 120% at 82% 0%, rgba(156,124,101,.14), transparent 55%),
    radial-gradient(120% 120% at 4% 100%, rgba(245,241,235,.30), transparent 50%),
    linear-gradient(180deg,#CBC2B1,#C8BFAE);
  color:var(--tx);
}
.sec--deep .kick{color:#4E3C29;}
.sec--deep .soft,.sec--deep .lede,.sec--deep p{color:#4A3D31;}
.sec--deep .faint,.sec--deep .formnote{color:#4A3D31;}
.sec--deep .disp,.sec--deep h1,.sec--deep h2{color:var(--tx);}
.sec--deep .card p{color:var(--tx2);} /* card faces stay bone; their own ink stands */
.sec--deep .card .no{color:var(--bronze);}
.sec--deep .more{color:var(--espresso);border-color:var(--espresso);}
/* 2026-09-12 INVERSION (Amin: "run toward that" — Plaster Deep is now the
   DOMINANT band tone site-wide; about.html alone keeps the light-Plaster
   band as Ash's comparison sample). Every small-ink class that can now sit
   DIRECTLY on the deep ground takes the same measured floor as the band's
   body ink (#4A3D31 — §19 figures; grounds never lighten to pass). Ink on
   card/cream faces inside the band keeps its own tokens. */
.sec--deep .accbody,
.sec--deep .arc-n span,
.sec--deep .paysub,
.sec--deep .seatbar span,
.sec--deep label.fl span,
.sec--deep .giftrow span,
.sec--deep .presswall span{color:#4A3D31;}
.sec--deep .cur-flag{color:#4E3C29;border-color:rgba(74,61,49,.5);}
.sec--deep .livebadge{border-color:rgba(43,31,24,.55);}
.wrap{max-width:1200px;margin:0 auto;}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.4rem);}
.sechead h2{margin-top:1rem;}
.more{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--espresso);border-bottom:1px solid var(--espresso);padding-bottom:.35rem;transition:opacity .3s;white-space:nowrap;}
.more:hover{opacity:.6;}

/* ---------- clip placeholders (video slots) ---------- */
.clip{position:relative;overflow:hidden;border-radius:10px;background:var(--cream2);}
.clip::before{content:"";position:absolute;inset:0;background:inherit;}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
.clip.has-video video{display:block;}
.clip .cliptag{
  position:absolute;left:.9rem;bottom:.9rem;z-index:2;
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(23,19,16,.74);color:var(--cream2);backdrop-filter:blur(6px);
  border-radius:30px;padding:.4rem .9rem;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
}
.clip .cliptag i{width:6px;height:6px;border-radius:50%;background:var(--taupe);animation:blink 1.4s ease infinite;}
.clip.has-video .cliptag{display:none;}
/* placeholder gradients — the palette's own ramps, replaced by real footage */
.g-sweep{background:linear-gradient(115deg,#ECE6D8 0%,#C8BFAE 30%,#6E5947 62%,#241A12 100%);background-size:220% 220%;animation:drift 8s ease-in-out infinite;}
.g-fall{background:radial-gradient(130% 130% at 70% 12%,#C8BFAE 0%,#7A6350 55%,#291E15 100%);background-size:180% 180%;animation:drift 10s ease-in-out infinite;}
.g-gloss{background:linear-gradient(150deg,#F5F1EB 0%,#B39F8B 45%,#6E5947 100%);background-size:200% 200%;animation:drift 9s ease-in-out infinite;}
.g-blend{background:radial-gradient(120% 120% at 30% 25%,#EBE6DA 0%,#A99480 55%,#544233 100%);background-size:200% 200%;animation:drift 11s ease-in-out infinite;}
.g-noir{background:radial-gradient(130% 130% at 68% 8%,#44362B 0%,#171310 70%);}
.g-bone{background:linear-gradient(135deg,#F5F1EB,#D5CDBD);}
@keyframes drift{0%,100%{background-position:0% 40%;}50%{background-position:100% 60%;}}
@media (prefers-reduced-motion: reduce){ .g-sweep,.g-fall,.g-gloss,.g-blend{animation:none;} }

/* ---------- home hero ---------- */
.hero{
  /* the sticky nav sits in-flow above the hero at ~71px; a bare 100svh hero
     pushes that much of the hero (intro + both CTAs) below the fold at
     every desktop geometry (measured +17 to +35px at 1280-2560w). */
  min-height:calc(100svh - 71px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(5rem,10vh,8rem) var(--pad) clamp(2.2rem,5vh,3.6rem);
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% 6%, rgba(156,124,101,.12), transparent 55%),
    radial-gradient(120% 120% at 10% 95%, rgba(200,191,174,.22), transparent 52%),
    linear-gradient(165deg,#F5F1EA,#EAE5D9);
}
.hero .sweep{
  position:absolute;top:-25%;bottom:-25%;left:0;right:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(200,191,174,.5) 45%,rgba(156,124,101,.36) 52%,rgba(200,191,174,.35) 58%,transparent 72%);
  filter:blur(30px);mix-blend-mode:multiply;
  transform:translateX(-130%) rotate(-6deg);animation:sweep 4.6s cubic-bezier(.65,.05,.35,.95) infinite;
}
@keyframes sweep{0%{transform:translateX(-130%) rotate(-6deg);}60%{transform:translateX(130%) rotate(-6deg);}100%{transform:translateX(130%) rotate(-6deg);}}
.hero-quote{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,2vw,1.5rem);color:var(--tx2);min-height:1.9em;position:relative;max-width:30ch;}
.hero-quote span{position:absolute;left:0;top:0;opacity:0;transition:opacity 1.2s ease;}
.hero-quote span.on{opacity:1;}
/* the name — a quiet editorial nameplate ABOVE the blurb, sized with it, so the
   film owns the hero (Amin, 2026-09-12: "a little too large - make it smaller
   and above the blurb on the video (similar size)"). Was the 3.6-11.5rem
   poster title; both home surfaces share this. */
.hero h1{
  font-family:var(--serif);font-weight:400;line-height:1.25;
  letter-spacing:.34em;text-transform:uppercase;
  font-size:clamp(1.05rem,1.4vw,1.3rem);margin:0 0 .9rem;
  color:var(--ink);
}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;}
.hero-row p{max-width:38ch;color:var(--tx2);font-size:1rem;}
.hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap;}
.hero-clipnote{
  position:absolute;top:calc(1rem + clamp(3.4rem,6vh,4.5rem));right:var(--pad);
  display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:40px;background:rgba(248,245,238,.7);
  padding:.5rem 1rem;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);backdrop-filter:blur(6px);
}
.hero-clipnote i{width:7px;height:7px;border-radius:50%;background:var(--umber);animation:blink 1.4s infinite;}
@media(max-width:640px){ .hero-clipnote{display:none;} }

/* ---------- buttons ----------
   Two kinds only (the quiet-luxury rule): espresso solid, espresso ghost.
   Dark surfaces invert them (see .foot). The old gold .btn--patina is retired. */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;border-radius:44px;cursor:pointer;border:none;
  background:var(--espresso);color:var(--cream);padding:1rem 2rem;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  transition:background .3s,transform .35s cubic-bezier(.16,.8,.27,1),box-shadow .35s;
}
.btn:hover{background:var(--espresso2);transform:translateY(-1px);box-shadow:0 16px 30px -20px rgba(43,31,24,.6);}
.btn:active{transform:translateY(0);}
/* a data-price span inside the flex button must not become its own flex item
   (the gap would split "Join · $30/mo" into three spaced fragments);
   display:contents dissolves the span's box so the label reads as one run,
   while the node stays in the DOM for config.js price hydration */
.btn [data-price]{display:contents;}
.btn--ghost{background:transparent;border:1px solid var(--espresso);color:var(--espresso);}
.btn--ghost:hover{background:var(--espresso);color:var(--cream);}

/* ---------- marquee ---------- */
/* ribbons ride the deep tone since the 2026-09-12 inversion (Plaster Deep
   dominant); big .m ink is chocolate (7.69 grained on this ground, §19),
   micro .m takes the deep band's own small-ink floor below */
.marq{overflow:hidden;border-top:1px solid rgba(74,61,49,.28);border-bottom:1px solid rgba(74,61,49,.28);padding:1.5rem 0;background:linear-gradient(180deg,#CBC2B1,#C8BFAE);}
.marq-track{display:flex;gap:3rem;width:max-content;align-items:baseline;animation:mar 44s linear infinite;}
.marq:hover .marq-track{animation-play-state:paused;}
.marq .m{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.3rem,2.6vw,2rem);white-space:nowrap;color:var(--tx);}
.marq .sep{color:var(--umber);font-size:.85rem;}
@keyframes mar{to{transform:translateX(-50%);}}
/* marquee runs by default; the Motion button (html.motion-off) is the pause control */

/* ---------- cover rail (the fat slider) ---------- */
.covers{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.2rem 0;background:var(--cream2);}
.covers-track{display:flex;gap:1.4rem;width:max-content;animation:mar 64s linear infinite;}
.covers:hover .covers-track{animation-play-state:paused;}
.cover{
  width:clamp(190px,24vw,260px);aspect-ratio:3/4;border-radius:10px;overflow:hidden;position:relative;flex:none;
  box-shadow:0 34px 60px -40px rgba(35,28,20,.55);
  transform:rotate(-1.1deg);transition:transform .5s cubic-bezier(.16,.8,.27,1);
}
.covers-track .cover:nth-child(even){transform:rotate(1.1deg);}
.cover:hover{transform:rotate(0deg) scale(1.03);}
.cover .bgimg{position:absolute;inset:0;border-radius:0;background-size:cover;background-position:center top;background-repeat:no-repeat;}
.cover::after{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.4);border-radius:6px;pointer-events:none;}
.cover .mast{
  position:absolute;top:1.1rem;left:.6rem;right:.6rem;z-index:2;text-align:center;
  font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(.85rem,1.8vw,1.08rem);line-height:1.25;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.4);
}
/* caption — hidden until hover, rises over a dark scrim so it reads on any cover.
   Scrim deepened 2026-09-13 (launch-eve F4): the old single-stop fade to .82
   left the caption zone (which sits ABOVE the gradient's bottom) too thin over
   bright photographs — 9 of the reel tiles failed composited AA, worst 3.08.
   The mid stop plants real ink behind both caption lines while the top edge
   keeps the same soft fade-in. Measured with the glyph-mask composited census
   after: every tile's <b> and span clear 4.5. */
.cover .scrim{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;pointer-events:none;
  background:linear-gradient(transparent,rgba(23,19,16,.68) 46%,rgba(23,19,16,.94));
  opacity:0;transition:opacity .45s ease;
}
.cover .cap{
  position:absolute;bottom:.95rem;left:.6rem;right:.6rem;z-index:2;text-align:center;
  font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);line-height:1.7;
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s cubic-bezier(.16,.8,.27,1);
}
/* .cap b lifted taupe → cream 2026-09-13 (F4): at 9.92px this is small text on
   photographs (4.5 bar); taupe #C8BFAE measured as low as 3.08 composited. */
.cover .cap b{font-weight:500;color:var(--cream);display:block;font-size:.62rem;letter-spacing:.3em;}
.cover:hover .scrim,.cover:focus-visible .scrim{opacity:1;}
.cover:hover .cap,.cover:focus-visible .cap{opacity:1;transform:none;}
@media(pointer:coarse){ .cover .scrim,.cover .cap{opacity:1;transform:none;} }
@media (prefers-reduced-motion: reduce){ .cover .scrim,.cover .cap{opacity:1;transform:none;transition:none;} }
/* cover rail runs by default; the Motion button (html.motion-off) pauses it in place —
   the old reduce-motion rule wrapped ~30 covers into a giant vertical pile */

/* ---------- THE SHOWCASE — the homepage centerpiece (2026-09-12) ----------
   The sliding showcase of her work, restored as the homepage's one big moment
   (Amin: the showcase IS the homepage). Reuses the .cover tile language at
   gallery scale; the drift is JS (site-local on index.html), not a CSS
   animation, so the prev/next buttons and the Motion pause share one motor:
   reduced-motion visitors get a still rail whose buttons still page it. */
.showcase{position:relative;overflow:hidden;padding:2.6rem 0;}
.showcase-track{display:flex;gap:clamp(1.1rem,2vw,1.8rem);width:max-content;will-change:transform;}
.showcase .cover{
  width:clamp(230px,26vw,330px);
  box-shadow:0 44px 80px -48px rgba(35,28,20,.6);
}
/* captions ride the tiles always-on here: the rail slides, hover is unreliable */
.showcase .cover .scrim,.showcase .cover .cap{opacity:1;transform:none;}
.showcase-nav{
  display:flex;gap:.6rem;justify-content:center;margin-top:1.9rem;
}
.scbtn{
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid var(--espresso);background:transparent;color:var(--espresso);
  font-size:1rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  transition:background .3s,color .3s,transform .35s cubic-bezier(.16,.8,.27,1);
}
.scbtn:hover{background:var(--espresso);color:var(--cream);transform:translateY(-1px);}
.scbtn:active{transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .scbtn{transition:none;} .scbtn:hover{transform:none;} }

/* ---------- proof stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.stat{background:var(--cream);padding:1.7rem 1.4rem;}
.stat b{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.6rem);display:block;line-height:1;color:var(--tx);}
.stat span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);display:block;margin-top:.6rem;}
@media(max-width:700px){ .stats{grid-template-columns:repeat(2,1fr);} }

/* ---------- work grid ---------- */
.filter{display:flex;gap:.6rem;flex-wrap:wrap;}
.fchip{border:1px solid var(--line);background:transparent;color:var(--tx2);border-radius:40px;padding:.55rem 1.2rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.3s;}
.fchip.on,.fchip:hover{background:var(--espresso);border-color:var(--espresso);color:var(--cream);}
.workgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
@media(max-width:960px){.workgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.workgrid{grid-template-columns:1fr;}}
.look{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/5;display:block;}
.look .clip,.look .ph{position:absolute;inset:0;border-radius:0;}
/* credit bar: the old transparent→.68 plate measured 1.85–3.5:1 for light captions over
   the light covers (Sorbet, CR, V). The plate now reaches .84 by the first text row —
   measured worst caption 6.2:1 grained across all 35 tiles (bar 4.5). */
.look .meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2.4rem 1.1rem .95rem;
  background:linear-gradient(rgba(23,19,16,0),rgba(23,19,16,.48) 26%,rgba(23,19,16,.86) 42%,rgba(23,19,16,.94));color:var(--cream);
  display:flex;justify-content:space-between;align-items:flex-end;gap:.6rem;
}
.look .meta b{font-family:var(--sans);font-weight:500;font-size:.94rem;display:block;line-height:1.3;}
/* full opacity + a softer literal tone: the old opacity:.75 diluted the rendered ink
   below what any solid-color measurement sees */
.look .meta span{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:#E0DACC;}
/* ▶ badge — only for tiles whose destination or slot genuinely plays video
   (beacon's YouTube door). Static image tiles carry no badge. */
.look .play{
  position:absolute;top:.9rem;right:.9rem;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(248,245,238,.85);color:var(--espresso);display:flex;align-items:center;justify-content:center;
  font-size:.7rem;opacity:0;transform:scale(.8);transition:.35s;
}
.look:hover .play,.look:focus-visible .play{opacity:1;transform:none;}
.look .zoom{position:absolute;inset:0;transition:transform .8s cubic-bezier(.16,.8,.27,1);}
/* zoom = "this tile acts". Scoped to tiles that really do: whole-tile links
   (home featured grid, beacon doors) and tiles carrying shoppable product dots
   (work). The inert archive tiles no longer advertise a click they don't have. */
a.look:hover .zoom,a.look:focus-visible .zoom{transform:scale(1.045);}
/* kept as its own rule: a :has()-blind engine drops only this line, not the one above */
.look:has(.pdot):hover .zoom,.look:has(.pdot:focus-visible) .zoom{transform:scale(1.045);}
/* product dots — real anchors (keyboard-focusable), each opening her shelf.
   Bronze ink on the label: dots are interactive, and interactive is the palette's dark end. */
.pdot{position:absolute;z-index:3;width:15px;height:15px;border-radius:50%;background:rgba(248,245,238,.95);box-shadow:0 0 0 4px rgba(248,245,238,.25);animation:dotpulse 2.2s ease infinite;display:block;}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 4px rgba(248,245,238,.25);}50%{box-shadow:0 0 0 9px rgba(248,245,238,.08);}}
.pdot b{
  position:absolute;top:-5px;left:23px;white-space:nowrap;background:var(--cream);color:var(--bronze);
  font-weight:400;font-size:.56rem;letter-spacing:.08em;padding:.35rem .7rem;border-radius:20px;
  opacity:0;transform:translateX(-4px);transition:.35s;box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.pdot.flip b{left:auto;right:23px;transform:translateX(4px);}
.look:hover .pdot b,.pdot:focus-visible b{opacity:1;transform:none;}
/* touch has no hover: dot labels stay visible so the promise is tappable */
@media(pointer:coarse){ .pdot b{opacity:1;transform:none;} }
@media (prefers-reduced-motion: reduce){ .pdot{animation:none;} }

/* ---------- cards / rooms ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
@media(max-width:960px){.cards3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cards3{grid-template-columns:1fr;}}
/* four-up variant (booking "ways in") — was a hardcoded inline
   grid-template that held four columns at every width and overflowed
   phones by ~306 to 357px (measured at all eight phone geometries,
   2026-09-06). Declared AFTER the .cards3 media ladder so the base
   four-up wins over .cards3's own breakpoints, then collapses 4 → 2 → 1. */
.cards3--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1100px){.cards3--4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cards3--4{grid-template-columns:1fr;}}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.7rem;display:flex;flex-direction:column;gap:.7rem;}
.card .no{font-family:var(--sans);font-weight:500;font-size:.72rem;color:var(--bronze);letter-spacing:.18em;}
.card h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.25;}
.card p{font-size:.86rem;color:var(--tx2);flex:1;}
.card .mini{align-self:flex-start;border:1px solid var(--line);border-radius:30px;padding:.35rem .85rem;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);}

/* product cards */
.prodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
@media(max-width:960px){.prodgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.prodgrid{grid-template-columns:1fr;}}
.prod{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s;}
.prod:hover{transform:translateY(-4px);box-shadow:0 30px 50px -35px rgba(35,28,20,.4);}
.prod .pimg{aspect-ratio:1/1;}
.prod .pbody{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;}
.prod b{font-family:var(--sans);font-weight:500;font-size:.98rem;line-height:1.3;}
.prod .pcat{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);}
.prod .prow{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;}
.prod .price{font-size:.85rem;color:var(--tx2);}
/* bronze ink: the whole .prod card is a link — interactive lives at the palette's dark end */
.prod .shop{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);border-bottom:1px solid var(--bronze);padding-bottom:.2rem;}
.prod.pick{border-color:var(--espresso);box-shadow:0 0 0 1px var(--espresso);}
.prod .picktag{display:none;background:var(--taupe);color:var(--ink);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:.4rem;}
.prod.pick .picktag{display:block;}

/* ---------- masterclass ---------- */
.livebadge{display:inline-flex;align-items:center;gap:.55rem;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--espresso);border:1px solid rgba(43,31,24,.4);border-radius:30px;padding:.45rem 1rem;}
.livebadge i{width:7px;height:7px;border-radius:50%;background:var(--umber);animation:blink 1.4s ease infinite;}
.seatbar .bar{height:5px;border-radius:4px;background:rgba(156,124,101,.22);overflow:hidden;}
.seatbar .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--taupe),var(--espresso));}
.seatbar span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);display:block;margin-top:.55rem;}
.classhero{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;}
@media(max-width:900px){.classhero{grid-template-columns:1fr;}}
.classhero .clip{aspect-ratio:16/10;}
.payline{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.6rem;}
.paysub{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);line-height:1.9;}

/* accordion */
.acc{border-top:1px solid var(--line);}
.acc details{border-bottom:1px solid var(--line);}
.acc summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.2rem .2rem;font-family:var(--sans);font-weight:500;font-size:.98rem;
}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:"+";font-family:var(--sans);color:var(--espresso);font-size:1.2rem;transition:transform .3s;}
.acc details[open] summary::after{transform:rotate(45deg);}
.acc .accbody{padding:0 .2rem 1.3rem;font-size:.9rem;color:var(--tx2);max-width:60ch;}

/* ---------- forms ---------- */
.form{display:grid;gap:1rem;max-width:560px;}
.form .frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:560px){.form .frow{grid-template-columns:1fr;}}
label.fl{display:block;}
label.fl span{display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tx3);margin-bottom:.45rem;}
.fi{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:.85rem 1rem;font-family:var(--sans);font-weight:300;font-size:.95rem;color:var(--tx);
}
.fi:focus{outline:2px solid var(--espresso);outline-offset:1px;border-color:var(--espresso);}
textarea.fi{min-height:120px;resize:vertical;}
.formnote{font-size:.68rem;color:var(--tx3);letter-spacing:.06em;}

/* email capture row */
.caprow{display:flex;gap:.6rem;max-width:460px;}
.caprow .fi{flex:1;}
@media(max-width:480px){.caprow{flex-direction:column;}}
/* Netlify Forms honeypot — visually gone, still in the DOM for bots */
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}

/* ---------- quiz ---------- */
.quiz{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:clamp(1.6rem,4vw,2.6rem);}
.quiz .qrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.4rem 0 1.6rem;}
@media(max-width:760px){.quiz .qrow{grid-template-columns:1fr;}}

/* ---------- press / arc ---------- */
.presswall{display:flex;align-items:baseline;gap:clamp(1.6rem,4.5vw,3.4rem);flex-wrap:wrap;}
.presswall span{opacity:.82;}
.pm-vogue{font-family:var(--serif);letter-spacing:.3em;font-size:1.2rem;}
.pm-flaunt{font-family:var(--serif);font-style:italic;font-size:1.25rem;}
.pm-nylon{font-weight:500;letter-spacing:.5em;font-size:.95rem;}
.pm-www{letter-spacing:.26em;font-size:.8rem;}
.arc{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem;}
@media(max-width:760px){.arc{grid-template-columns:repeat(2,1fr);}}
.arc-n{border-top:1px solid var(--line);padding-top:1rem;position:relative;}
.arc-n::before{content:"";position:absolute;top:-5.5px;left:0;width:10px;height:10px;border-radius:50%;background:var(--espresso);}
.arc-n.hollow::before{background:var(--cream);border:1px solid var(--espresso);}
.arc-n b{font-family:var(--sans);font-weight:500;font-size:.9rem;display:block;}
.arc-n span{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);margin-top:.35rem;display:block;line-height:1.7;}

/* press list */
.plist{border-top:1px solid var(--line);}
.plist a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.15rem .2rem;border-bottom:1px solid var(--line);transition:background .3s;}
.plist a:hover{background:var(--cream2);}
.plist b{font-family:var(--sans);font-weight:500;font-size:.95rem;}
.plist span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tx3);white-space:nowrap;}

/* ---------- beacon ---------- */
.plathead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:0 0 1.2rem;}
.plathead h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;}
.platrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:3rem;}
@media(max-width:860px){.platrow{grid-template-columns:1fr;} .platrow .ph9x16{aspect-ratio:16/9;}}
.ph9x16{aspect-ratio:9/13;border-radius:10px;}
.ph16x9{aspect-ratio:16/9;border-radius:10px;}

/* ---------- footer — the dark surface stays (Ash's note), now espresso-to-black ---------- */
.foot{background:linear-gradient(180deg,#221B14,var(--dark));color:var(--cream2);padding:clamp(3.5rem,7vw,6rem) var(--pad) 2rem;}
.foot .doors{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-bottom:2.6rem;border-bottom:1px solid rgba(200,191,174,.22);}
.foot .doors .lbl{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:#A99D87;}
.foot .doors a{border:1px solid rgba(200,191,174,.45);color:var(--cream2);border-radius:40px;padding:.65rem 1.4rem;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;transition:.3s;}
.foot .doors a:hover{background:var(--taupe);color:var(--ink);border-color:var(--taupe);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:2.4rem;padding:2.8rem 0;}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.foot-grid{grid-template-columns:1fr;}}
.foot h5{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--taupe);margin-bottom:1rem;font-weight:400;}
/* the PRIMARY horizontal lockup in the footer sign-off slot (deck V2.0 p4:
   the default mark, min 180px on screen — 200px here; BONE variant per the
   reversal guardrail on the chocolate-dark footer ground; clear space >= the
   pillar capital height is honored by the footer grid's own padding). It
   replaced the .flogo text sign-off on all 11 standard-footer pages,
   2026-09-10 — the lockup img alt carries the name, so the seal below it is
   decorative (alt="") and screen readers hear the name once per footer. */
.foot .foot-lockup{display:block;width:200px;max-width:100%;height:auto;}
.foot ul{list-style:none;display:grid;gap:.55rem;}
.foot ul a{font-size:.85rem;color:#B9AE9C;transition:color .3s;}
.foot ul a:hover{color:var(--cream2);}
.foot .cap{font-size:.8rem;color:#B9AE9C;max-width:30ch;}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.8rem;border-top:1px solid rgba(200,191,174,.18);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#A99D87;}
/* buttons invert on the dark ground: cream fill, ink text */
.foot .btn{background:var(--cream2);color:var(--ink);}
.foot .btn:hover{background:var(--taupe);}
.foot :focus-visible{outline-color:var(--taupe);}
/* the Institute seal — the deck's credibility device; 120px is its stated minimum */
.foot .seal{display:block;width:120px;height:auto;margin-top:1.6rem;opacity:.9;}

/* ---------- demo toggle chip ---------- */
.demochip{
  position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:950;
  display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:40px;
  background:var(--card);box-shadow:0 14px 40px -14px rgba(0,0,0,.3);cursor:pointer;
  padding:.6rem 1.1rem;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);
}
.demochip b{font-weight:400;color:var(--espresso);}
.demochip:hover{border-color:var(--espresso);}

/* ---------- hidden-state hero (masterclass off) ---------- */
.hiddenstate{min-height:72vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1.4rem;}
.hiddenstate h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,6vw,4.2rem);max-width:18ch;line-height:1.05;}

/* page hero (inner pages) */
.phero{padding:clamp(4.5rem,9vw,7.5rem) var(--pad) clamp(2.6rem,5vw,4rem);}
.phero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,5.4rem);line-height:1;letter-spacing:-.01em;margin-top:1.1rem;max-width:16ch;}
.phero .lede{margin-top:1.4rem;max-width:52ch;}

/* utility */
.mt1{margin-top:1rem;}.mt2{margin-top:2rem;}.mt3{margin-top:3rem;}
.center{text-align:center;}
.hide{display:none !important;}

/* ═════════ flash layer ═════════ */

/* scroll progress hairline */
#prog{position:fixed;top:0;left:0;height:2px;width:0%;z-index:9993;background:linear-gradient(90deg,var(--taupe),var(--espresso));}

/* cursor dot (inverts over anything) */
#cdot{
  position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:#fff;
  mix-blend-mode:difference;pointer-events:none;z-index:9991;transform:translate(-50%,-50%);
  transition:width .25s ease,height .25s ease;
}
#cdot.big{width:36px;height:36px;}

/* page-transition curtain */
#pt{position:fixed;inset:0;z-index:9985;background:var(--dark);transform:scaleY(0);transform-origin:bottom;pointer-events:none;}
#pt.in{animation:ptIn .4s cubic-bezier(.7,0,.3,1) forwards;}
#pt.out{transform:scaleY(1);transform-origin:top;animation:ptOut .55s cubic-bezier(.7,0,.3,1) forwards;}
@keyframes ptIn{to{transform:scaleY(1);}}
@keyframes ptOut{to{transform:scaleY(0);}}

/* intro (the loading mark) — near-black room, cream ink, taupe draw */
#intro{
  position:fixed;inset:0;z-index:10000;background:var(--dark);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3rem;
  transition:transform .9s cubic-bezier(.7,0,.2,1);
}
#intro.done{transform:translateY(-101%);}
#intro svg{width:min(72vw,440px);overflow:visible;}
#intro .draw{fill:none;stroke:var(--taupe);stroke-width:.9;stroke-dasharray:2800;stroke-dashoffset:2800;}
#intro.go .draw{animation:idraw 1.7s ease forwards .1s;}
#intro .fillin{fill:var(--cream2);opacity:0;}
#intro.go .fillin{animation:ifill 1s ease forwards 1.1s;}
#intro .ik{font-size:.6rem;letter-spacing:.44em;text-transform:uppercase;color:var(--taupe);opacity:0;}
#intro.go .ik{animation:ifill 1s ease forwards 1.4s;}
@keyframes idraw{to{stroke-dashoffset:0;}}
@keyframes ifill{to{opacity:.95;}}

/* satin sheen on display italics — a quiet espresso-to-umber shimmer.
   The retired gold shine is gone; the lightest stop #6B5D49 measures 4.60:1
   grained on the worst light band (bar 3.0, display sizes only). */
.shine{
  background-image:linear-gradient(110deg,#4A3C2E 0%,#5C4C3C 38%,#6B5A46 50%,#5C4C3C 62%,#4A3C2E 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:sheen 5.5s ease-in-out infinite;
}
.foot .shine{
  background-image:linear-gradient(110deg,#C8BFAE 0%,#D9D1C1 38%,#EFE7D6 50%,#D9D1C1 62%,#C8BFAE 100%);
}
/* on the deep band the sheen's stock stops would graze the 3.0 display bar;
   darker stops keep the effect and clear it with room */
.sec--deep .shine{
  background-image:linear-gradient(110deg,#3E3226 0%,#4A3C2E 38%,#54432F 50%,#4A3C2E 62%,#3E3226 100%);
}
@keyframes sheen{0%,100%{background-position:0% 0;}50%{background-position:100% 0;}}

/* ghost section numerals — near-black stroke at whisper opacity */
.sechead[data-num]{position:relative;}
.sechead[data-num]::before{
  content:attr(data-num);
  position:absolute;left:-.1em;top:-.58em;
  font-family:var(--serif);font-weight:400;line-height:1;
  font-size:clamp(4.5rem,10vw,8rem);
  color:transparent;-webkit-text-stroke:1px rgba(43,31,24,.18);
  pointer-events:none;
}

/* hero letters — when split, the color must live on each letter
   (transformed children break background-clip:text on the parent) */
.hero h1.split{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--ink);-webkit-text-fill-color:var(--ink);}
.hero h1.split .ltr{
  color:var(--ink);-webkit-text-fill-color:var(--ink);
}
.hero h1 .ltr{display:inline-block;transform:translateY(.55em);opacity:0;transition:transform .9s cubic-bezier(.16,.8,.27,1),opacity .6s ease;}
.hero h1.play .ltr{transform:translateY(0);opacity:1;}

/* draggable bare-to-beat slider */
.ba{
  position:relative;border-radius:14px;overflow:hidden;height:clamp(210px,34vw,340px);
  --x:50%;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  box-shadow:0 40px 70px -50px rgba(35,28,20,.5);
}
.ba .before{position:absolute;inset:0;background:linear-gradient(135deg,#C8BFAE,#A28D79);}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x));background:radial-gradient(120% 120% at 40% 30%,#F3EBDA,#BCA98F);}
/* tags ride an ink chip (same language as .cliptag): bare white-on-gradient measured
   1.3–2.4:1 on the light placeholder panels, and the chip also grounds them at AA on
   whatever photo pair Ash sends later (text-shadow never counts toward contrast) */
.ba .tag{position:absolute;bottom:.8rem;z-index:2;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream2);background:rgba(23,19,16,.78);border-radius:30px;padding:.4rem .9rem;backdrop-filter:blur(6px);pointer-events:none;}
.ba .tagL{left:1rem;} .ba .tagR{right:1rem;}
.ba .seam{position:absolute;left:var(--x);top:0;bottom:0;width:2px;background:rgba(255,255,255,.88);transform:translateX(-50%);pointer-events:none;}
.ba .seam::after{
  content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;color:var(--espresso);box-shadow:0 6px 14px rgba(0,0,0,.25);
}
.ba:not(.used) .seam::after{animation:bahint 2s ease-in-out infinite;}
@keyframes bahint{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-64%,-50%) scale(1.1);}}

/* micro word marquee — ink floored for the deep ribbon ground (2026-09-12) */
.marq--micro{padding:.95rem 0;}
.marq--micro .m{font-family:var(--sans);font-style:normal;font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:#4A3D31;}
.marq--micro .sep{font-size:.6rem;}
.marq--micro .marq-track{animation-duration:30s;gap:2.2rem;}

@media (prefers-reduced-motion: reduce){
  .rv{transition:none;opacity:1;transform:none;}
  .btn{transition:none;}
  .btn:hover{transform:none;box-shadow:none;}
  .hero .sweep,.announce i,.livebadge i,.clip .cliptag i,.hero-clipnote i{animation:none;}
  /* rails freeze in place (paused, not none — none would reflow the strip) */
  .marq-track,.covers-track{animation-play-state:paused;}
  html{scroll-behavior:auto;}
  #intro,#pt,#cdot{display:none !important;}
  .shine{animation:none;}
  .hero h1 .ltr{transform:none;opacity:1;transition:none;}
  .ba:not(.used) .seam::after{animation:none;}
}
@media print{
  .nav,.foot,.demochip,.glow,.announce,body::after{display:none !important;}
  .rv{opacity:1 !important;transform:none !important;}
}

/* ═════════ hero clip — full-bleed portrait behind the name ═════════
   Ash's footage, warm-toned into the palette so the hero stays light,
   with a bottom scrim that keeps the wordmark readable. */
.hero .heromedia{position:absolute;inset:0;z-index:0;overflow:hidden;background:#EAE5D9;}
.hero .heromedia video{
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:sepia(.12) saturate(1.08) contrast(1.05) brightness(1.03);
}
.hero .heroscrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* top veil — the film window stays airy; her face lives here and carries no text */
    linear-gradient(180deg,
      rgba(245,241,235,.78) 0%,
      rgba(245,241,235,.34) 10%,
      rgba(245,241,235,.12) 26%,
      rgba(245,241,235,0) 40%),
    /* title panel — anchored in PIXELS from the bottom edge so a squat laptop gets the
       same ground as a tall desktop. Alphas preserved from the measured build; the
       plate tone moved from #E9E5D2 to the palette's #EAE5D8 (near-identical
       luminance) and the worst-frame floor was RE-MEASURED for this palette —
       method .claude-measure.mjs hero, figures in SEPT-GO-LIVE.md's palette
       revision block. */
    linear-gradient(0deg,
      rgba(235,230,218,.995) 0px,
      rgba(235,230,218,.985) 90px,
      rgba(235,230,218,.94) 200px,
      rgba(235,230,218,.89) 320px,
      rgba(235,230,218,.85) 450px,
      rgba(235,230,218,.58) 500px,
      rgba(235,230,218,.22) 545px,
      rgba(235,230,218,0) 600px),
    radial-gradient(120% 90% at 82% 4%, rgba(156,124,101,.12), transparent 55%),
    radial-gradient(120% 120% at 6% 98%, rgba(200,191,174,.24), transparent 52%);
}
/* the light-sweep stays a film effect: confined above the title panel so its multiply
   pass never dips the measured text contrast (it reads as light crossing the footage) */
.hero .sweep{z-index:2;bottom:56%;}
.hero .hero-quote,.hero h1,.hero-row{position:relative;z-index:3;}
/* over the film the quote must hold the WCAG large-text bar at every desktop width:
   2vw drops under 24px below 1200px viewports, so floor it at 1.5rem (24px = large) */
.hero .hero-quote{font-size:1.5rem;}
.hero h1{text-shadow:0 2px 40px rgba(245,241,235,.5);}
.hero-quote,.hero-row p{text-shadow:0 1px 16px rgba(245,241,235,.65);}
@media(max-width:640px){ .hero .heromedia video{object-position:50% 26%;} }
/* reduced motion — the hero film stays visible as a still frame (site.js pauses it);
   hiding it entirely left the hero looking broken on reduce-motion devices */

/* ═════════ prose (legal / statement pages) ═════════ */
.prose{max-width:760px;}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.6vw,1.75rem);margin:2.3rem 0 .8rem;color:var(--tx);}
.prose h2:first-child{margin-top:0;}
.prose h3{font-family:var(--sans);font-weight:500;font-size:1rem;margin:1.7rem 0 .5rem;color:var(--tx);}
.prose p{color:var(--tx2);margin:.7rem 0;font-size:.98rem;line-height:1.75;}
.prose ul{margin:.6rem 0 1.1rem 1.2rem;display:grid;gap:.45rem;}
.prose li{color:var(--tx2);font-size:.95rem;line-height:1.6;}
.prose a{color:var(--espresso);border-bottom:1px solid rgba(62,51,42,.4);}
.prose a:hover{border-bottom-color:var(--espresso);}
.prose strong{font-weight:500;color:var(--tx);}
.prose em{font-style:italic;}

/* ═════════ motion pause control (WCAG 2.2.2) ═════════ */
.motionbtn{
  position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:950;
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:40px;
  background:var(--card);box-shadow:0 14px 40px -14px rgba(0,0,0,.25);cursor:pointer;
  padding:.55rem 1rem;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);
}
.motionbtn:hover{border-color:var(--espresso);color:var(--espresso);}
/* phones: the hero copy + CTA are left-aligned low on the screen, so move the
   floating Motion control to the right so it never sits on top of a button */
@media(max-width:640px){ .motionbtn{left:auto;right:1rem;} }
/* the fixed Motion chip owns the bottom-LEFT corner on desktop (chip box
   measured 96.14px wide, ending at x=112.14px; bottom-right is taken by
   .hero-ctas on the home heroes, so the chip cannot move there). At every
   width from 641px up, --pad stays under that column (6vw is 77 to 96px at
   1280 to 1600, 96 to 112px up to ~1867, then the 7rem cap holds 112px),
   so the paragraph's lower lines ran under or tangent to the chip:
   measured 25 to 35px intrusion at 1280/1366/1440, and a 0.14px tangent
   at 1920 (the cap lands exactly on the chip edge). Fix: inset the
   hero-row's LEFT edge to 128px (chip column + ~16px margin) at ALL
   widths 641px and up; no upper bound, so 1601 to 1866px (previously
   unprotected) and the 1920 tangent now clear by 16px. The content's
   VERTICAL position is untouched on purpose: the hero text sits where the
   scrim geometry protects it (lifting it instead measurably dropped the
   quote to 1.0:1 against the raw film region).
   Phones (640px and down, chip bottom-RIGHT): the same collision,
   mirrored. The paragraph's lines reached under the chip on narrow phones
   (glyph-measured 2026-09-04: 76.5x12.1px at 375x812 and 65.6x5.4px at
   360x800 on the full home, worse on prelaunch at 360; 390 to 430px
   widths cleared on line wrap alone, and 375x667 cleared by a 25px lucky
   wrap gap, which is what the old "phones are excluded" note over-read
   from its single 390x844 spot check). Same fix mirrored: inset the
   hero-row's RIGHT edge to 128px so no line box can enter the chip's
   x-column at any viewport height or scroll position. Re-measured
   glyph-level (Range line boxes vs the real chip box) at 360x800,
   375x667, 375x812, 390x844, 393x873, 412x915, 414x896, 430x932, both
   home pages: zero chip-glyph intersections; the nearest line box in the
   chip's vertical band stops 16.3px short at the tightest geometry
   (360x800), and no scroll-reachable hero line can close that gap. */
@media(min-width:641px){ .hero-row,.hero h1{padding-left:max(0px,calc(128px - var(--pad)));} }
@media(max-width:640px){ .hero-row{padding-right:max(0px,calc(128px - var(--pad)));} }
/* CHIP COLUMN RESERVATION, THE OTHER CHIP PAGES (2026-09-06). The chip
   mounts on six pages (site.js gate: index, prelaunch, store, beacon,
   institute, press — booking/work/masterclass carry none); the hero-row
   rules above protected only the two home pages. Glyph-measured at the
   eight §16 phone geometries on the rest: store's affiliate disclosures ran
   under the phone chip's x-column at EVERY geometry (line boxes 63 to 88px
   into the column — a reader parks a disclosure to read it, so x-clearance
   is the only scroll-proof fix, §16's own reasoning); beacon's first
   sechead heading sat on the chip at rest at 375x812 (11.9x18.4px glyph
   intersection); press's intro lede sat on it at 412x915 (77.5x1.4px) and
   at 360x800. Same mechanic as .hero-row: reserve the chip column
   (128px = chip box 112.14px + ~16px margin) on the measured colliding
   blocks — small notes and single text blocks, so the earlier wrap is
   invisible. Institute measured clean at all eight geometries (its at-rest
   band holds no text) and deliberately gets no rule. Re-measured after the
   fix: zero chip-glyph intersections at all eight geometries, and every
   reserved line box clears the column by ~15.9px by construction (reserve
   128px vs chip column 112.14px; measured in-band minimums ran 16.3 to
   196px — mobsweep record, SEPT-GO-LIVE.md §17). */
@media(max-width:640px){
  .page-store .phero .formnote,
  .page-store .sec .formnote,
  .page-beacon .sechead,
  .page-beacon .phero .lede,
  .page-press .phero .lede,
  .page-press .classhero .lede{padding-right:max(0px,calc(128px - var(--pad)));}
}
html.motion-off .marq-track,
html.motion-off .covers-track,
html.motion-off .hero .sweep,
html.motion-off .ihero .pulse,
html.motion-off .shine,
html.motion-off .g-sweep,html.motion-off .g-fall,html.motion-off .g-gloss,html.motion-off .g-blend,
html.motion-off .announce i,html.motion-off .livebadge i,html.motion-off .cliptag i{
  animation-play-state:paused !important;
}
/* the Motion button stays visible for reduced-motion visitors too — it's their control */

/* ═════════ skip-to-content (a11y) ═════════ */
.skip{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--ink);color:var(--cream2);padding:.75rem 1.3rem;border-radius:0 0 10px 0;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;}
.skip:focus{left:0;}
.legal-links a{transition:color .3s;}
.legal-links a:hover{color:var(--cream2);}