:root{--night:#2F2342;--ink:#3A2D4A;--twi:#4C3A5C;--wist:#7E6A94;--blush:#C9A9A6;--shell:#F5EFE9;--hair:#E4DACE;
--fork:var(--blush)}
/* NOTE: --ink is declared ONCE, here, and must stay that way. It previously
   carried a second declaration (--ink:var(--shell)) on this same line, which
   made body text render Shell-on-Shell and therefore invisible. The reversed
   value belongs only on .bar, where the wordmark needs it. See line ~118. */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--shell);color:var(--ink);font-family:'Instrument Sans',-apple-system,
BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:400;font-size:16.5px;line-height:1.7;
-webkit-font-smoothing:antialiased}
.bar{background:var(--night);padding:15px 0}
.bar .in{max-width:720px;margin:0 auto;padding:0 28px;display:flex;justify-content:space-between;align-items:center}
.mk{width:172px;height:28px}
.mkl{display:block;line-height:0;text-decoration:none}
.mkl:hover{opacity:.85}
.mono{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.bar .mono{color:var(--blush)}
.topnav{display:flex;gap:22px;align-items:center}
.topnav a{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--blush);text-decoration:none;white-space:nowrap}
.topnav a:hover{color:var(--shell)}
@media(max-width:560px){.topnav{gap:14px}.topnav a{font-size:9.5px;letter-spacing:.08em}
.bar .in{gap:12px}.mk{width:132px}}
main{max-width:720px;margin:0 auto;padding:46px 28px 80px}
.eyebrow{color:var(--wist);margin-bottom:14px}
h1{font-family:Fraunces,serif;font-weight:300;font-size:clamp(34px,7vw,52px);line-height:1.05;letter-spacing:-.01em;color:var(--night)}
.sub{font-family:Fraunces,serif;font-weight:300;font-style:italic;font-size:21px;color:var(--wist);margin-top:6px}
.rule{height:1px;background:var(--hair);margin:34px 0}
.rhythm{display:flex;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:0 0 34px}
.rhythm div{flex:1;padding:14px 6px;text-align:center;border-right:1px solid var(--hair)}
.rhythm div:last-child{border-right:none}
.rhythm .d{display:block;color:var(--wist);margin-bottom:4px}
.rhythm .l{font-size:15px;color:var(--twi)}
a.card{display:flex;gap:18px;align-items:center;text-decoration:none;color:inherit;background:#fff;
border:1px solid var(--hair);border-radius:6px;padding:20px 22px;margin-bottom:13px;
transition:border-color .18s,transform .18s}
a.card:hover{border-color:var(--wist);transform:translateY(-1px)}
.dot{width:44px;height:44px;border-radius:50%;background:var(--twi);flex:0 0 44px;
display:flex;align-items:center;justify-content:center;transition:background .18s}
a.card:hover .dot{background:var(--night)}
.dot svg{display:block}
.card h3{font-family:Fraunces,serif;font-weight:400;font-size:18px;margin-bottom:2px;color:var(--night)}
.card.audio{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--hair);
border-radius:6px;padding:20px 22px;margin-bottom:13px}
.card.audio audio{width:100%;margin-top:10px;height:34px}
.card.audio.off{opacity:.45}
.card.audio.off audio{display:none}
.card p{font-size:14.5px;color:var(--wist)}
blockquote{border-left:2px solid var(--blush);padding-left:20px;margin:34px 0;
font-size:19px;font-style:italic;color:var(--twi);line-height:1.6}
.acts{list-style:none;margin:26px 0}
.acts li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--hair);font-size:16px;color:var(--twi)}
.acts li:before{content:"";position:absolute;left:4px;top:19px;width:5px;height:5px;border-radius:50%;background:var(--blush)}
.tok{background:var(--night);border-radius:6px;padding:22px 24px;margin-top:38px}
.tok .mono{color:var(--blush);display:block;margin-bottom:10px}
.tok code{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--shell)}
.phrase{text-align:center;font-family:Fraunces,serif;font-size:23px;font-weight:300;
color:var(--night);margin:44px 0 10px}
nav.pg{display:flex;justify-content:space-between;margin-top:52px;border-top:1px solid var(--hair);padding-top:20px}
nav.pg a{color:var(--wist);text-decoration:none}
nav.pg a:hover{color:var(--night)}
nav.pg span{color:rgba(126,106,148,.45)}
footer{background:var(--night);color:var(--wist);padding:26px 0;margin-top:0}
footer .in{max-width:720px;margin:0 auto;padding:0 28px}
.hero{background:var(--night);color:var(--shell);padding:70px 0 76px}
.hero .in{max-width:720px;margin:0 auto;padding:0 28px}
.hero h1{color:var(--shell)}
.hero .sub{color:var(--blush)}
.hero p{color:var(--blush);margin-top:22px;max-width:34em}
.btn{display:inline-block;margin-top:30px;background:var(--blush);color:var(--night);
text-decoration:none;padding:13px 26px;border-radius:4px;font-family:Fraunces,serif;font-size:17px}
.btn:hover{background:var(--shell)}
.grid{display:grid;gap:11px;margin-top:8px}
.hero-img{display:block;width:210px;height:210px;margin:0 auto 26px;border-radius:50%}
.def{border-bottom:1px dotted var(--wist);cursor:help;position:relative}
.def.open{border-bottom-style:solid}
.defbox{display:none;background:#fff;border:1px solid var(--hair);border-left:2px solid var(--blush);
border-radius:4px;padding:14px 18px;margin:14px 0;font-size:15px;line-height:1.6;color:var(--twi)}
.defbox.show{display:block}
.defbox b{font-family:Fraunces,serif;font-weight:400;color:var(--night);display:block;margin-bottom:4px}
.stewards{border-left:2px solid var(--blush);padding-left:20px;margin:26px 0;color:var(--twi)}
.choose{font-family:Fraunces,serif;font-size:21px;color:var(--night);margin:6px 0 18px}
.hero.short{padding:44px 0 46px}
.small{font-size:14.5px;color:var(--wist);margin-top:20px;line-height:1.6}
.small a{color:var(--twi)}
.recv{list-style:none;margin:0 0 26px;padding:0}
.recv li{color:var(--blush);padding:7px 0;border-bottom:1px solid var(--violet-rule,#453456);font-size:16px}
.recv li:last-child{border-bottom:none}
.strike{color:var(--wist);text-decoration:line-through;font-size:19px;margin-bottom:2px}
.price{font-family:Fraunces,serif;font-weight:300;font-size:58px;color:var(--shell);line-height:1}
.q{font-family:Fraunces,serif;font-size:19px;color:var(--night);margin:28px 0 8px}
.a{color:var(--twi);font-size:16px;line-height:1.7}
#firsttime.hide{display:none}
@media(max-width:640px){.hero-img{width:160px;height:160px}}
.thumb{width:62px;height:62px;border-radius:50%;flex:0 0 62px;object-fit:cover}
button.done{background:var(--blush);color:var(--night);border:none;font-family:'IBM Plex Mono',monospace;
font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:11px 20px;border-radius:4px;
cursor:pointer;margin-top:16px}
button.done:hover{background:var(--shell)}
button.done[disabled]{background:transparent;color:var(--blush);border:1px solid rgba(201,169,166,.5);cursor:default}
.resume{background:var(--blush);color:var(--night);text-decoration:none;display:inline-block;
padding:13px 26px;border-radius:4px;font-family:Fraunces,serif;font-size:17px;margin-top:26px}
.resume:hover{background:var(--shell)}
.tick{color:var(--blush);margin-left:8px}
a.card.seen h3:after{content:" ✓";color:var(--wist);font-size:15px}
.grid.two{grid-template-columns:1fr 1fr;gap:13px;margin-bottom:6px}
@media(max-width:640px){.grid.two{grid-template-columns:1fr}}
a.card.path{display:block;padding:24px 24px 22px}
a.card.path h3{font-size:21px;margin-bottom:8px;color:var(--night)}
a.card.path p{font-size:15px;line-height:1.6;color:var(--twi)}
.go{display:block;margin-top:16px;color:var(--wist)}
a.card.path:hover .go{color:var(--night)}

/* ══════════════════════════════════════════════════════════════
   v2 — public pages: width, third ground, bands, splits
   Appended deliberately; later declarations win.
   ══════════════════════════════════════════════════════════════ */

/* FIX: --ink was declared twice at root, so body text resolved to Shell
   on a Shell ground. Root now carries the true value; the wordmark's
   reversed value is scoped to the dark bar where it belongs. */
:root{
  --night:#2F2342; --ink:#3A2D4A; --twi:#4C3A5C; --wist:#7E6A94;
  --blush:#C9A9A6; --shell:#F5EFE9; --hair:#E4DACE; --tint:#EDE4F0;
  --rule-dk:rgba(201,169,166,.22);
  --wrap:1180px; --col:880px;
}
.bar{--ink:var(--shell);--fork:var(--blush)}

.bar .in,footer .in{max-width:var(--wrap)}
main{max-width:var(--col);padding:64px 28px 90px}
.hero .in{max-width:var(--col)}

/* ── grounds ───────────────────────────────────────────────── */
section{padding:78px 0}
section > .in{max-width:var(--col);margin:0 auto;padding:0 28px}
section > .in.wide{max-width:var(--wrap)}
.g-shell{background:var(--shell);color:var(--ink)}
.g-tint{background:var(--tint);color:var(--ink)}
.g-night{background:var(--night);color:var(--shell)}
.g-night h2,.g-night h3,.g-night .lead{color:var(--shell)}
.g-night p{color:var(--blush)}
.g-night .eyebrow{color:var(--blush);opacity:.8}

h2{font-family:Fraunces,serif;font-weight:300;font-size:clamp(28px,4.4vw,44px);
line-height:1.12;letter-spacing:-.012em;color:var(--night);max-width:19em}
h3.name{font-family:Fraunces,serif;font-weight:300;font-size:clamp(26px,3.4vw,36px);
color:var(--night);line-height:1.15}
.lead{font-size:19px;line-height:1.65;color:var(--twi);max-width:38em}
section p{color:var(--twi);max-width:38em}
section p + p{margin-top:16px}
h2 + p,h2 + .lead{margin-top:22px}

/* ── full-bleed hero band ──────────────────────────────────── */
.band{position:relative;background:var(--night);overflow:hidden}
.band img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
display:block;opacity:.96}
.band .in{position:relative;max-width:var(--wrap);margin:0 auto;
padding:132px 28px 128px;text-align:center}
.band h1{font-family:Fraunces,serif;font-weight:300;color:var(--shell);
font-size:clamp(38px,6.2vw,72px);line-height:1.04;letter-spacing:-.018em;
max-width:15em;margin:0 auto}
.band .sub2{color:var(--blush);font-size:19px;line-height:1.6;
max-width:32em;margin:26px auto 0}
.band .mono{color:var(--blush)}
.btnrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.btn.ghost{background:transparent;color:var(--blush);
box-shadow:inset 0 0 0 1px rgba(201,169,166,.45)}
.btn.ghost:hover{background:transparent;color:var(--shell);
box-shadow:inset 0 0 0 1px var(--shell)}
@media(max-width:640px){.band .in{padding:88px 24px 84px}}

/* ── oversized pull quote ──────────────────────────────────── */
.pull{font-family:Fraunces,serif;font-weight:300;font-style:normal;
font-size:clamp(22px,2.7vw,31px);line-height:1.3;letter-spacing:-.008em;
color:var(--twi);border:none;padding:0;margin:52px 0 0;max-width:17em}
.g-night .pull{color:var(--shell)}
.g-tint .pull{color:var(--night)}
.pull cite{display:block;font-family:'IBM Plex Mono',monospace;font-style:normal;
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--wist);margin-top:26px}
.g-night .pull cite{color:var(--blush)}

/* ── asymmetric split ──────────────────────────────────────── */
.split{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.split.flip{grid-template-columns:7fr 5fr}
.split .fig{margin:0}
.split .fig img{width:100%;height:auto;display:block;border-radius:4px}
.split .fig figcaption{font-family:'IBM Plex Mono',monospace;font-size:10px;
letter-spacing:.13em;text-transform:uppercase;color:var(--wist);margin-top:12px}
@media(max-width:820px){.split,.split.flip{grid-template-columns:1fr;gap:34px}}

/* portrait placeholder, until real photographs land */
.slot{background:var(--tint);border:1px dashed rgba(126,106,148,.45);
border-radius:4px;aspect-ratio:4/5;display:flex;align-items:center;
justify-content:center;text-align:center;padding:26px}
.slot span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;
text-transform:uppercase;color:var(--wist);line-height:1.9}
.slot.wide{aspect-ratio:16/9}
.g-night .slot{background:rgba(245,239,233,.05);border-color:rgba(201,169,166,.4)}
.g-night .slot span{color:var(--blush)}

/* ── founding community logo row ───────────────────────────── */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:36px}
.logos div{aspect-ratio:3/2;border:1px solid var(--rule-dk);border-radius:3px;
display:flex;align-items:center;justify-content:center;
font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.12em;
text-transform:uppercase;color:rgba(201,169,166,.5);text-align:center;padding:8px}
@media(max-width:820px){.logos{grid-template-columns:repeat(3,1fr)}}

/* ── testimonials ──────────────────────────────────────────── */
.vidband{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;
background:var(--night);display:flex;align-items:center;justify-content:center;
flex-direction:column;gap:16px;text-align:center;padding:30px}
.vidband img.bg{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;opacity:.55}
.vidband .play{position:relative;width:66px;height:66px;border-radius:50%;
background:var(--blush);display:flex;align-items:center;justify-content:center}
.vidband .play:after{content:"";border-left:16px solid var(--night);
border-top:10px solid transparent;border-bottom:10px solid transparent;
margin-left:4px}
.vidband p{position:relative;color:var(--shell);font-family:Fraunces,serif;
font-size:20px;max-width:24em;margin:0}
.vidband .mono{position:relative;color:var(--blush);opacity:.85}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.tcard{background:#fff;border:1px solid var(--hair);border-radius:5px;padding:26px;
display:flex;flex-direction:column;min-height:250px}
.g-tint .tcard{border-color:rgba(126,106,148,.22)}
.tcard blockquote{border:none;padding:0;margin:0 0 24px;font-style:normal;
font-family:Fraunces,serif;font-weight:300;font-size:17px;line-height:1.5;
color:var(--night)}
/* name block is the last child and takes the slack, so every card signs off
   on the same baseline no matter how long the quote is */
.tcard .who{display:flex;gap:12px;align-items:center;margin-top:auto;
padding-top:18px;border-top:1px solid var(--hair)}
.g-tint .tcard .who{border-top-color:rgba(126,106,148,.18)}
.tcard .av{width:40px;height:40px;border-radius:50%;flex:0 0 40px;
background:var(--tint);border:1px dashed rgba(126,106,148,.5)}
.tcard .who b{display:block;font-weight:500;font-size:14.5px;color:var(--ink)}
.tcard .who span{font-size:13px;color:var(--wist)}
@media(max-width:820px){.tgrid{grid-template-columns:1fr}}

/* ── misc ──────────────────────────────────────────────────── */
.kicker{font-family:Fraunces,serif;font-weight:300;font-size:clamp(24px,3.2vw,34px);
line-height:1.25;color:var(--night);max-width:17em}
.g-night .kicker{color:var(--shell)}
.meta{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--wist)}
.linkout{display:inline-block;margin-top:26px;color:var(--twi);
border-bottom:1px solid var(--blush);text-decoration:none;padding-bottom:2px}
.linkout:hover{color:var(--night)}
.g-night .linkout{color:var(--blush)}
.g-night .linkout:hover{color:var(--shell)}
.rule.dk{background:var(--rule-dk)}
.flag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--wist);margin-top:20px;display:block}
.g-night .flag{color:rgba(201,169,166,.7)}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
border-top:1px solid var(--rule-dk);border-bottom:1px solid var(--rule-dk)}
.stat div{padding:22px 18px;border-right:1px solid var(--rule-dk)}
.stat div:last-child{border-right:none}
.stat b{display:block;font-family:Fraunces,serif;font-weight:300;font-size:34px;
color:var(--shell);line-height:1}
.stat span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;
letter-spacing:.13em;text-transform:uppercase;color:var(--blush);margin-top:8px}
@media(max-width:640px){.stat{grid-template-columns:1fr}
.stat div{border-right:none;border-bottom:1px solid var(--rule-dk)}
.stat div:last-child{border-bottom:none}}

/* ── credentials strip + modality streams (Kathrine) ───────── */
.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:34px 0 30px;
border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.creds div{padding:18px 16px 18px 0;border-right:1px solid var(--hair)}
.creds div:last-child{border-right:none;padding-right:0}
.creds div:not(:first-child){padding-left:16px}
.creds b{display:block;font-family:Fraunces,serif;font-weight:300;font-size:27px;
color:var(--night);line-height:1}
.creds span{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
letter-spacing:.12em;text-transform:uppercase;color:var(--wist);margin-top:7px;line-height:1.6}
@media(max-width:640px){.creds{grid-template-columns:1fr}
.creds div{border-right:none;border-bottom:1px solid var(--hair);padding:14px 0}
.creds div:not(:first-child){padding-left:0}
.creds div:last-child{border-bottom:none}}
.streams{margin:26px 0 0;list-style:none;padding:0}
.streams li{padding:14px 0;border-bottom:1px solid var(--hair);font-size:15.5px;
color:var(--twi);line-height:1.6}
.streams li:last-child{border-bottom:none}
.streams b{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
letter-spacing:.13em;text-transform:uppercase;color:var(--wist);
font-weight:400;margin-bottom:5px}
.draft{display:inline-block;align-self:flex-start;margin:0 0 16px;
font-family:'IBM Plex Mono',monospace;
font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--wist);
border:1px solid rgba(126,106,148,.35);border-radius:2px;padding:4px 8px}

/* ── testimonial A/B rotation ───────────────────────────────── */
.tset{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;
opacity:1;transition:opacity .55s ease}
.tset.out{opacity:0}
.tset[hidden]{display:none}
@media(max-width:820px){.tset{grid-template-columns:1fr}}
.tdots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.tdots button{width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;
border:none;background:rgba(126,106,148,.32);transition:background .3s}
.tdots button[aria-current="true"]{background:var(--night)}
@media(prefers-reduced-motion:reduce){.tset{transition:none}}

/* ── field section, rebuilt: one centred column, no nested overrides ── */
.field-in{position:relative;max-width:880px;margin:0 auto;padding:96px 28px;text-align:center}
.field-in h2,.field-in p,.field-in .eyebrow{margin-left:auto;margin-right:auto}
.field-in h2{max-width:16em}
.field-in p{max-width:34em}
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.logos a{aspect-ratio:5/2;border:1px solid var(--rule-dk);border-radius:3px;display:flex;
align-items:center;justify-content:center;text-align:center;padding:10px 12px;
font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.11em;line-height:1.5;
text-transform:uppercase;color:rgba(201,169,166,.72);text-decoration:none;
transition:border-color .25s,color .25s}
.logos a:hover{border-color:var(--blush);color:var(--shell)}
.logos a[href="#"]{cursor:default}
@media(max-width:640px){.logos{grid-template-columns:repeat(2,1fr)}}

/* ── inline prose links — never browser blue ───────────────── */
/* SCOPED TO PROSE ONLY. Do NOT loosen this to a bare a:not([class]) —
   the nav links carry no class of their own (the class is on .topnav),
   so a bare rule wins on source order and turns the nav dark violet on
   the violet bar. That regression has happened once. */
section p a:not([class]),section li a:not([class]),
main p a:not([class]),main li a:not([class]),
blockquote a:not([class]),figcaption a:not([class]),
.field-in p a:not([class]){
color:var(--twi);text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:3px;
text-decoration-color:rgba(126,106,148,.5);
transition:color .2s,text-decoration-color .2s}
section p a:not([class]):hover,main p a:not([class]):hover,
blockquote a:not([class]):hover{color:var(--night);text-decoration-color:var(--wist)}
.g-night p a:not([class]),.field-in p a:not([class]){color:var(--blush);
text-decoration-color:rgba(201,169,166,.5)}
.g-night p a:not([class]):hover,.field-in p a:not([class]):hover{color:var(--shell);
text-decoration-color:var(--shell)}

/* nav legibility, stated explicitly so it cannot be overridden by
   a later low-specificity rule again */
.bar .topnav a{color:var(--blush)}
.bar .topnav a:hover{color:var(--shell)}

/* ── hero: drifting constellation over the band ────────────── */
.band canvas.lattice{position:absolute;inset:0;width:100%;height:100%;
display:block;pointer-events:none;z-index:0}
.band > .in,.band > .field-in{z-index:1}

/* ── the six-week arc, on the dark teaser band ─────────────── */
.arc{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:30px}
.arc a{text-decoration:none;display:block;text-align:center;
transition:transform .25s ease,opacity .25s ease;opacity:.92}
.arc a:hover{transform:translateY(-3px);opacity:1}

.arc b{display:block;margin-top:14px;font-family:'IBM Plex Mono',monospace;
font-size:10px;letter-spacing:.16em;font-weight:400;color:rgba(201,169,166,.6)}
.arc .lbl{display:block;margin-top:5px;font-family:Fraunces,serif;font-weight:300;
font-size:14.5px;line-height:1.25;color:var(--shell)}
@media(max-width:820px){.arc{grid-template-columns:repeat(3,1fr);gap:22px}}
@media(max-width:480px){.arc{grid-template-columns:repeat(2,1fr)}}

/* ── standfirst: the line that gives a fragment headline its context ── */
.dek{font-family:Fraunces,serif;font-weight:300;font-size:clamp(19px,2.2vw,24px);
line-height:1.35;color:var(--wist);margin-top:16px;max-width:26em}
.g-night .dek,.field-in .dek{color:var(--blush)}
h2 + .dek{margin-top:18px}
.dek + p,.dek + .lead{margin-top:26px}

/* Week icons come from three different artwork treatments: w1/w2/w5 are a dark
   disc inset on cream, w3/w4 are full-bleed, w6 is an oversized sphere. The
   circular crop caught a cream sliver on w1/w2/w5 and read as an inconsistent
   white ring. Fixed at source by re-cropping those three. */
.arc .orb{display:block;overflow:hidden;border-radius:50%;line-height:0}
.arc .orb img{border-radius:0;box-shadow:none;transform-origin:center;
width:100%;height:auto;display:block}
/* No per-icon zoom needed any more — w1, w2 and w5 were re-cropped at source
   on 2026-08-16 and the cream fringe is gone. Originals: img/_originals/ */

/* ── the five-years bridge: centred, and set apart as the hinge ─── */
#bridge .in{text-align:center}
#bridge .kicker{max-width:20em;margin:0 auto}
#bridge p{max-width:34em;margin-left:auto;margin-right:auto}
#bridge .in{border-top:1px solid rgba(126,106,148,.28);
border-bottom:1px solid rgba(126,106,148,.28);padding-top:56px;padding-bottom:56px}

/* ── Kathrine: streams and closing quote lifted out of the right column ── */
.kmore{margin-top:66px;padding-top:44px;border-top:1px solid var(--hair)}
.kintro{max-width:40em;font-size:15.5px;color:var(--twi)}
.streams.four{display:grid;grid-template-columns:repeat(4,1fr);gap:0 34px;margin-top:32px}
.streams.four li{border-bottom:none;border-top:1px solid var(--hair);padding:18px 0 0}
@media(max-width:900px){.streams.four{grid-template-columns:repeat(2,1fr);gap:0 28px}}
@media(max-width:560px){.streams.four{grid-template-columns:1fr}}
.kclose{margin-top:58px;padding-top:46px;border-top:1px solid var(--hair);text-align:center}
.kclose .eyebrow{margin-bottom:18px}
.kclose .pull{margin:0 auto;max-width:19em}
.kclose p:last-child{margin:28px auto 0;max-width:34em;color:var(--twi)}
/* section p carries max-width:38em with no auto margins, so text-align:center
   was centring inside a left-anchored box. Centre the boxes too. */
.kclose > p,.kclose > .eyebrow{margin-left:auto;margin-right:auto}

/* ── "more about" door out of a highlight section ─────────── */
.more{display:inline-block;margin-top:30px;font-family:'IBM Plex Mono',monospace;
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--twi);
text-decoration:none;border-bottom:1px solid var(--wist);padding-bottom:5px;
transition:color .2s,border-color .2s}
.more:hover{color:var(--night);border-color:var(--night)}
.g-night .more{color:var(--blush);border-color:rgba(201,169,166,.5)}
.g-night .more:hover{color:var(--shell);border-color:var(--shell)}

/* ── two people side by side, under a shared portrait ─────── */
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:64px;
padding-top:46px;border-top:1px solid var(--hair)}
.g-tint .two-up{border-top-color:rgba(126,106,148,.24)}
.two-up .person p{max-width:34em;font-size:15.5px}
.two-up .person p + p{margin-top:14px}
.two-up .person b{color:var(--night);font-weight:500}
@media(max-width:820px){.two-up{grid-template-columns:1fr;gap:44px}}
h2.name{font-family:Fraunces,serif;font-weight:300;
font-size:clamp(26px,3.4vw,36px);color:var(--night);line-height:1.15;max-width:none}

/* ── argument laid out as beats, not a wall of prose ──────── */
.beats{margin-top:34px;display:grid;gap:0}
.beat{padding:26px 0;border-top:1px solid var(--hair);display:grid;
grid-template-columns:190px 1fr;gap:34px;align-items:start}
.beat:last-child{border-bottom:1px solid var(--hair)}
.beat .lab{color:var(--wist);padding-top:4px}
.beat p:not(.lab){max-width:34em;margin:0}
@media(max-width:760px){.beat{grid-template-columns:1fr;gap:12px}}

/* ── dictionary entry ─────────────────────────────────────── */
.defn{margin-top:34px;border-top:1px solid var(--hair);
border-bottom:1px solid var(--hair);padding:30px 0 32px}
.defn .head{font-family:Fraunces,serif;font-weight:300;font-size:clamp(28px,3.6vw,40px);
color:var(--night);line-height:1;margin:0 0 26px;max-width:none}
.defn .pos{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--wist);margin-left:16px;vertical-align:middle}
.defn ol{margin:0;padding:0;list-style:none;counter-reset:sense}
.defn li{counter-increment:sense;display:grid;grid-template-columns:34px 1fr;
gap:10px;padding:14px 0}
.defn li + li{border-top:1px solid var(--hair)}
.defn li::before{content:counter(sense) ".";font-family:'IBM Plex Mono',monospace;
font-size:12px;color:var(--wist);padding-top:5px}
.defn .sense{font-size:17px;line-height:1.65;color:var(--twi);max-width:36em;display:block}
/* headshot slot inside a person block */
.slot.headshot{aspect-ratio:1/1;max-width:150px;border-radius:50%;margin-bottom:20px}
.slot.headshot span{font-size:9px;letter-spacing:.12em;line-height:2}
.two-up .person > img.headshot{width:150px;height:150px;border-radius:50%;
object-fit:cover;display:block;margin-bottom:20px}

/* ── streams, 2x2 with numerals ───────────────────────────── */
.streams-h{font-family:Fraunces,serif;font-weight:300;font-size:clamp(24px,3vw,32px);
color:var(--night);line-height:1.15;margin:0 0 14px}
.streams.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 46px;margin-top:36px}
.streams.grid2 li{border-bottom:none;border-top:1px solid var(--hair);
padding:24px 0 26px;position:relative}
.streams.grid2 .no{font-family:'IBM Plex Mono',monospace;font-size:10px;
letter-spacing:.16em;color:var(--wist);display:block;margin-bottom:10px}
.streams.grid2 b{display:block;font-family:Fraunces,serif;font-weight:300;
font-size:20px;letter-spacing:0;text-transform:none;color:var(--night);margin-bottom:9px}
.streams.grid2 .s{display:block;font-size:14.5px;line-height:1.7;color:var(--twi)}
@media(max-width:760px){.streams.grid2{grid-template-columns:1fr;gap:0}}

/* ── communities, as an editorial index ───────────────────── */
.comms{margin-top:36px;border-top:1px solid var(--hair)}
.crow{display:grid;grid-template-columns:44px 1fr 200px;gap:22px;align-items:baseline;
padding:22px 0;border-bottom:1px solid var(--hair);text-decoration:none;
transition:background .2s,padding-left .2s}
.crow:hover{background:rgba(126,106,148,.05);padding-left:10px}
.crow .no{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
color:var(--wist)}
.crow b{display:block;font-family:Fraunces,serif;font-weight:300;font-size:23px;
color:var(--night);line-height:1.2;margin-bottom:7px}
.crow:hover b{text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:4px;text-decoration-color:var(--wist)}
.crow .what{display:block;font-size:15px;line-height:1.6;color:var(--twi);max-width:40em}
.crow .tag{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--wist);text-align:right;line-height:1.7}
@media(max-width:860px){.crow{grid-template-columns:34px 1fr;gap:14px}
.crow .tag{grid-column:2;text-align:left;margin-top:8px}}

/* ── a saying: a quote that owns its space, with a face on it ── */
.saying{margin:60px 0 0;padding:52px 0 46px;text-align:center;
border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.saying blockquote{border:none;padding:0;margin:0 auto;font-style:normal;
font-family:Fraunces,serif;font-weight:300;
font-size:clamp(24px,3.2vw,36px);line-height:1.26;letter-spacing:-.01em;
color:var(--night);max-width:17em}
.g-night .saying blockquote,.field-in .saying blockquote{color:var(--shell)}
.saying figcaption{display:flex;align-items:center;justify-content:center;gap:14px;
margin-top:34px}
.saying .av{width:52px;height:52px;flex:0 0 52px;border-radius:50%;object-fit:cover;
display:flex;align-items:center;justify-content:center;aspect-ratio:auto;padding:0;margin:0}
.saying .slot.av span{font-size:9px;letter-spacing:.1em}
.saying .who{text-align:left;line-height:1.4}
.saying .who b{display:block;font-weight:500;font-size:15px;color:var(--ink)}
.saying .who span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;
letter-spacing:.13em;text-transform:uppercase;color:var(--wist)}
.andmore{font-family:Fraunces,serif;font-weight:300;font-size:21px;color:var(--wist);
text-align:center;margin:26px 0 0;letter-spacing:.02em}

/* the beats block already closes with a rule — don't double it */
.beats + .saying{margin-top:0;border-top:none;padding-top:54px}

/* a saying with a picture beside it */
.saying.withpic{display:grid;grid-template-columns:5fr 7fr;gap:44px;align-items:center;
text-align:left;padding:46px 0}
.saying.withpic .slot.pic{aspect-ratio:4/3;margin:0;border-radius:4px}
.saying.withpic img{width:100%;height:auto;display:block;border-radius:4px}
.saying.withpic blockquote{margin:0;max-width:20em;font-size:clamp(21px,2.5vw,28px)}
.saying.withpic figcaption{display:block;margin-top:24px}
.saying.withpic .who{text-align:left}
@media(max-width:820px){.saying.withpic{grid-template-columns:1fr;gap:28px}}
/* never stack two hairlines: a saying inherits the divider from whatever
   precedes it, and swallows a following .rule */
.defn + .saying,.beats + .saying{margin-top:0;border-top:none;padding-top:54px}
.saying + .rule{display:none}
/* portrait aligns to the name, not to the eyebrow above it */
/* portrait top sits on the cap-height of the D in "Dr.", not the h2 box top */
#kathrine .split .fig{margin-top:45px}
@media(max-width:820px){#kathrine .split .fig{margin-top:0}}
.two-up .person img.headshot{width:150px;height:150px;border-radius:50%;object-fit:cover;
display:block;margin-bottom:20px}
.saying img.av{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 52px}

/* ── gold: a warm secondary ground, drawn from the headshots ── */
:root{--gold:#F5E8D6; --gold-ink:#9C6E33; --gold-rule:rgba(156,110,51,.24)}
.g-gold{background:var(--gold);color:var(--ink)}
.g-gold .eyebrow{color:var(--gold-ink)}
.g-gold h2,.g-gold h3,.g-gold .streams-h{color:var(--night)}
.g-gold .lead,.g-gold p{color:var(--twi)}
.g-gold .dek{color:var(--gold-ink)}
.g-gold .rule{background:var(--gold-rule)}
.g-gold .btn{background:var(--night);color:var(--shell)}
.g-gold .btn:hover{background:var(--twi)}
.g-gold .more{color:var(--gold-ink);border-color:var(--gold-rule)}
.g-gold .more:hover{color:var(--night);border-color:var(--night)}
.g-gold .slot{background:rgba(156,110,51,.07);border-color:var(--gold-rule)}
.g-gold .slot span{color:var(--gold-ink)}

/* kmore: no rule when the block above already closed itself */
.kmore.norule{border-top:none;padding-top:0;margin-top:58px}

/* land / residency figure */
.landfig{margin:34px 0 30px}
.landfig .slot.wide{aspect-ratio:16/9;margin:0}
.landfig img{width:100%;height:auto;display:block;border-radius:4px}
.landfig figcaption{font-family:'IBM Plex Mono',monospace;font-size:10px;
letter-spacing:.13em;text-transform:uppercase;color:var(--wist);margin-top:12px}

/* land as a light ground rather than another element in the section */
#toward{position:relative;overflow:hidden}
#toward .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:.16;z-index:0;filter:saturate(.55)}
/* scrim so a long column of text stays crisp over the land */
#toward::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(180deg,rgba(245,239,233,.62) 0%,rgba(245,239,233,.86) 22%,
rgba(245,239,233,.90) 78%,rgba(245,239,233,.66) 100%)}
#toward > .in{position:relative;z-index:1}

/* the picture-quote avatar, same as the signed quote */
.saying.withpic figcaption{display:flex;align-items:center;gap:14px;margin-top:26px}
.saying.withpic img.pic{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
border-radius:4px;display:block}
.saying.withpic img.av{width:52px;height:52px;flex:0 0 52px;aspect-ratio:auto;border-radius:50%}

/* hall-quote avatar aligns to the left edge of the quote, not centred */
.saying.withpic figcaption{justify-content:flex-start}

/* ── gold, with a little shine ─────────────────────────────── */
.g-gold{background:
  radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%),
  radial-gradient(100% 80% at 92% 108%, rgba(184,132,58,.30) 0%, rgba(184,132,58,0) 60%),
  linear-gradient(158deg, #FBF1E1 0%, #F3E3CB 46%, #EAD5B4 100%);
  position:relative;overflow:hidden}
.g-gold::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(102deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 62%)}
.g-gold > .in{position:relative;z-index:1}
.g-gold .streams-h{color:#4A3417}

/* ── the arc: a delicate strip, not six big discs ──────────── */
.arc{gap:22px;margin-top:26px}
.arc .orb{max-width:92px;margin:0 auto}
.arc b{margin-top:12px;font-size:9.5px}
.arc .lbl{font-size:13.5px;margin-top:4px}
@media(max-width:820px){.arc{grid-template-columns:repeat(6,1fr);gap:14px}
.arc .orb{max-width:70px}.arc .lbl{font-size:11.5px}}
@media(max-width:560px){.arc{grid-template-columns:repeat(3,1fr);gap:20px}
.arc .orb{max-width:80px}}
/* arc: smaller again — a strip, not a row of medallions */
.arc{gap:16px;margin-top:22px;max-width:660px;margin-left:auto;margin-right:auto}
.arc .orb{max-width:66px}
.arc b{margin-top:11px;font-size:9px;letter-spacing:.14em}
.arc .lbl{font-size:12px;line-height:1.3;margin-top:3px}
@media(max-width:820px){.arc{grid-template-columns:repeat(6,1fr);gap:10px;max-width:none}
.arc .orb{max-width:54px}.arc .lbl{font-size:10.5px}}
@media(max-width:560px){.arc{grid-template-columns:repeat(3,1fr);gap:18px}
.arc .orb{max-width:66px}.arc .lbl{font-size:12px}}
/* testimonial avatars — real files now, not dashed placeholders */
.tcard img.av{width:40px;height:40px;flex:0 0 40px;border-radius:50%;
object-fit:cover;display:block;border:none;background:none}

/* ── portrait aligns to the eyebrow above the name ─────────── */
#kathrine .split .fig{margin-top:0}

/* ── §3 cohesion: the dictionary headword was rivalling the h2 ── */
.defn{margin-top:30px;padding:26px 0 28px}
.defn .head{font-size:clamp(23px,2.7vw,29px);margin:0 0 20px}
.defn .pos{font-size:10px;margin-left:13px}
.defn li{grid-template-columns:28px 1fr;gap:8px;padding:13px 0}
.defn .sense{font-size:16.5px;line-height:1.7;max-width:38em}
.defn li::before{font-size:11px;padding-top:6px}
#what .saying.withpic{padding:40px 0 38px}
#what .saying.withpic blockquote{font-size:clamp(20px,2.2vw,25px)}
#what > .in > p:last-child{margin-top:34px}

/* ── closing band: bookends the hero, and does not merge into the footer ── */
.band.closer{padding:0}
.band.closer > .in{max-width:var(--col);padding:96px 28px 100px;text-align:center}
.band.closer h2{color:var(--shell);max-width:none;margin:0 auto}
.band.closer .eyebrow{color:var(--blush)}
.band.closer .sub2{margin:22px auto 0}
.band.closer .arc{margin-left:auto;margin-right:auto}
.band.closer .btn{margin-top:38px}

/* the footer is the base of the page — deeper, with a hairline above it */
footer{background:#241A33;border-top:1px solid rgba(201,169,166,.18);padding:30px 0}

/* ── community tags readable over the land ground ─────────── */
#toward .bgimg{opacity:.10}
#toward .crow{background:rgba(245,239,233,.34);border-bottom-color:rgba(126,106,148,.28)}
#toward .crow:hover{background:rgba(245,239,233,.62)}
#toward .crow .tag{color:#6B5580;font-size:10px}
#toward .crow .what{color:#41304F}
#toward .comms{border-top-color:rgba(126,106,148,.28)}
/* centre the boxes, not just the text (section p carries max-width:38em) */
.band.closer > .in > p,.band.closer > .in > .eyebrow{margin-left:auto;margin-right:auto}
/* The arc icons and the course-card icons are the SAME files. They looked
   different because the course cards are white — a dark-rimmed icon on white
   reads crisp, the same icon on the violet band loses its rim into the ground.
   Fix: set each orb on a light disc, so the arc matches the course treatment. */
.arc .orb{background:var(--shell);padding:5px;box-shadow:0 0 0 1px rgba(201,169,166,.28)}
.arc .orb img{border-radius:50%}
.arc a:hover .orb{box-shadow:0 0 0 1px var(--blush)}

/* ── the dictionary entry, lifted out of the page as a real entry ── */
.defn{background:#FFFDFB;border:1px solid var(--hair);border-top:1px solid var(--hair);
border-radius:6px;padding:34px 34px 30px;margin-top:34px}
.defn .head{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px;
font-size:clamp(26px,3vw,34px);margin:0 0 22px;padding-bottom:20px;
border-bottom:1px solid var(--hair)}
.defn .pron{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.02em;
text-transform:none;color:var(--wist)}
.defn .pos{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--blush);margin-left:0}
.defn li{padding:15px 0}
.defn li:first-child{padding-top:0}
.defn li:last-child{padding-bottom:0}
@media(max-width:640px){.defn{padding:26px 22px 24px}}

/* ── quote attributions need a separator ──────────────────── */
blockquote cite{display:block;margin-top:12px;font-style:normal;
font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--wist)}
blockquote cite::before{content:"\2014\00a0"}
.g-night blockquote cite,.field-in blockquote cite{color:var(--blush)}

/* paragraphs inside main need the same rhythm as sections */
main p + p{margin-top:16px}

/* ── boost audio appears on click, so the three cards match ── */
.card.audio audio{display:none;margin-top:12px}
.card.audio.open audio{display:block}
.card.audio:not(.off){cursor:pointer}
.card.audio:not(.off):hover .dot{background:var(--night)}
.card.audio .ct .hint{display:block;font-size:14.5px;color:var(--wist)}
.card.audio.open .ct .hint{display:none}

/* ── the bar must not merge into a dark hero below it ─────── */
.bar{box-shadow:inset 0 -1px 0 rgba(245,232,214,.13)}

/* ── sign-off: an instruction and a motto, not a quote ────── */
.signoff{margin-top:52px;padding-top:40px;border-top:1px solid var(--hair);text-align:center}
.signoff .line{font-family:Fraunces,serif;font-weight:300;
font-size:clamp(21px,2.6vw,27px);line-height:1.35;color:var(--night);
max-width:26em;margin:0 auto}
.signoff .motto{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.26em;
text-transform:uppercase;color:var(--wist);margin:30px auto 0}
.signoff .motto::before,.signoff .motto::after{content:"";display:inline-block;
width:26px;height:1px;background:var(--hair);vertical-align:middle;margin:0 14px}
/* a usage note under a dictionary entry */
.defn .usage{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--hair);
font-size:14.5px;line-height:1.7;color:var(--wist);max-width:40em;font-style:italic}

/* ── foundations: pricing ─────────────────────────────────── */
.pricing{display:grid;grid-template-columns:7fr 5fr;gap:0;margin-top:36px;
border:1px solid var(--gold-rule);border-radius:8px;overflow:hidden;background:#FFFDFB}
.tier{padding:34px 32px 32px}
.tier.founding{background:linear-gradient(160deg,#FBF1E1 0%,#F1E0C6 100%);
border-right:1px solid var(--gold-rule)}
.tier .lab{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.17em;
text-transform:uppercase;color:var(--gold-ink);margin:0 0 14px}
.tier .amt{font-family:Fraunces,serif;font-weight:300;font-size:52px;line-height:1;
color:var(--night)}
.tier .was{font-family:Fraunces,serif;font-weight:300;font-size:20px;color:var(--wist);
text-decoration:line-through;margin-left:12px;vertical-align:middle}
.tier .cond{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;
text-transform:uppercase;color:var(--gold-ink);margin-top:14px}
.tier.standard{padding-top:34px}
.tier.standard .lab{color:var(--wist)}
.tier.standard .amt{font-size:40px;color:var(--twi)}
.tier.standard .cond{color:var(--wist)}
.tier .btn{margin-top:26px;background:var(--night);color:var(--shell)}
.tier .btn:hover{background:var(--twi)}
.tier.standard .btn{background:transparent;color:var(--night);
box-shadow:inset 0 0 0 1px rgba(58,45,74,.4);font-size:15px;padding:11px 20px}
.tier.standard .btn:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--night)}
@media(max-width:760px){.pricing{grid-template-columns:1fr}
.tier.founding{border-right:none;border-bottom:1px solid var(--gold-rule)}}

/* what you receive, as a checked list on the gold ground */
.getlist{list-style:none;margin:30px 0 0;padding:0;display:grid;
grid-template-columns:1fr 1fr;gap:0 34px}
.getlist li{position:relative;padding:14px 0 14px 28px;border-top:1px solid var(--gold-rule);
font-size:15.5px;color:var(--twi);line-height:1.6}
.getlist li::before{content:"";position:absolute;left:2px;top:22px;width:9px;height:9px;
border-radius:50%;background:var(--gold-ink);opacity:.5}
@media(max-width:760px){.getlist{grid-template-columns:1fr}}

/* the six weeks, as cards with the light-set icons */
.weeks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.wcard{display:flex;gap:18px;align-items:flex-start;background:#fff;
border:1px solid var(--hair);border-radius:6px;padding:22px 24px;text-decoration:none;
transition:border-color .18s,transform .18s}
.wcard:hover{border-color:var(--wist);transform:translateY(-1px)}
.wcard img{width:56px;height:56px;flex:0 0 56px;border-radius:50%;object-fit:cover;
background:var(--shell);box-shadow:0 0 0 1px rgba(201,169,166,.3)}
.wcard .no{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;
color:var(--wist);display:block;margin-bottom:5px}
.wcard h3{font-family:Fraunces,serif;font-weight:300;font-size:19px;color:var(--night);
margin:0 0 5px;line-height:1.2}
.wcard p{font-size:14.5px;color:var(--twi);line-height:1.55;margin:0}
@media(max-width:700px){.weeks{grid-template-columns:1fr}}

/* ── a closing statement that spans the section, not the text column ── */
.wideclose{margin-top:44px;padding-top:36px;border-top:1px solid var(--hair)}
.wideclose p{max-width:none;font-family:Fraunces,serif;font-weight:300;
font-size:clamp(19px,2.1vw,24px);line-height:1.45;color:var(--night)}
.wideclose p + p{margin-top:18px;color:var(--twi)}
.wideclose em{font-style:italic;color:var(--twi)}
/* the saying already closed with a rule — .wideclose must not draw a second */
.saying + .wideclose{border-top:none;margin-top:34px;padding-top:0}
/* the definition box, inside a dictionary entry */
.defn .defbox{margin:20px 0 0;background:var(--tint);border:none;
border-left:2px solid var(--blush);border-radius:4px}
.defn .def{border-bottom:1px dotted var(--wist);cursor:pointer}
/* the rhythm strip draws its own top border — never precede it with a rule */
.rule + .rhythm{border-top:none}

/* ── the founding field: filters + expandable communities ─── */
.filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:34px 0 22px}
.flab{color:var(--wist);margin-right:6px}
.chip{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--twi);background:transparent;cursor:pointer;
border:1px solid var(--hair);border-radius:99px;padding:7px 13px;transition:all .18s}
.chip:hover{border-color:var(--wist)}
.chip.on{background:var(--night);border-color:var(--night);color:var(--shell)}

.clist{border-top:1px solid var(--hair)}
.ccard{border-bottom:1px solid var(--hair)}
.ccard[hidden]{display:none}
.chead{display:grid;grid-template-columns:1fr auto 22px;gap:18px;align-items:baseline;
width:100%;text-align:left;background:transparent;border:none;cursor:pointer;
padding:20px 2px;font:inherit;transition:padding-left .18s}
.chead:hover{padding-left:8px}
.cname{font-family:Fraunces,serif;font-weight:300;font-size:22px;color:var(--night);line-height:1.2}
.cstat{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--wist);text-align:right}
.cx{position:relative;width:11px;height:11px;justify-self:end;align-self:center}
.cx::before,.cx::after{content:"";position:absolute;background:var(--wist);
transition:transform .22s,opacity .22s}
.cx::before{top:5px;left:0;width:11px;height:1px}
.cx::after{top:0;left:5px;width:1px;height:11px}
.ccard.open .cx::after{transform:rotate(90deg);opacity:0}
.ccard.open .cname{color:var(--twi)}
.cbody{display:none;padding:0 2px 28px}
.ccard.open .cbody{display:block}
.cbody p{color:var(--twi);font-size:15.5px;line-height:1.7;max-width:40em}
.cbody p + p{margin-top:12px}
.clab{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--wist);margin-top:20px!important}
.ctags{margin-top:18px!important;display:flex;gap:6px;flex-wrap:wrap}
.ctags span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.12em;
text-transform:uppercase;color:var(--wist);border:1px solid var(--hair);
border-radius:99px;padding:5px 10px}
.cbody .more{margin-top:20px}
@media(max-width:600px){.chead{grid-template-columns:1fr 22px}
.cstat{grid-column:1;text-align:left;margin-top:6px}}

/* ═══════════════════════════════════════════════════════════════
   V3 · PORTAL HERO (.phero)
   The homepage bands are exterior — night sky, drifting constellation,
   centred type. Inside the portal that treatment reads as marketing.
   .phero is the interior counterpart: a shorter band, LEFT-aligned,
   over a ground of gold ripples rising from the lower right. It shares
   the deep violet base so the two properties still read as one brand,
   but you always know which side of the door you are on.
   Ground: img/portal-band.webp — the left third is held deliberately
   dark and quiet, which is where the type sits. Do not re-centre .phero
   type onto the ripples; contrast dies there.
   ═════════════════════════════════════════════════════════════ */
.phero{position:relative;background:var(--night);overflow:hidden;
box-shadow:inset 0 -1px 0 rgba(245,232,214,.16)}
.phero img.bg{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center top;display:block}
/* MUST be 'top'. With 'bottom' a short band crops from the top and shows the
   middle of the ground at the header join, where the lift is full strength —
   which reintroduces the seam the ground was built to avoid. */
.phero > .in{position:relative;z-index:1;max-width:var(--col);margin:0 auto;
padding:74px 28px 78px;text-align:left}
.phero .mono{color:var(--gold);display:flex;align-items:center;gap:12px}
.phero .mono::before{content:"";width:26px;height:1px;flex:0 0 26px;
background:var(--gold);opacity:.55}
.phero h1{font-family:Fraunces,serif;font-weight:300;color:var(--shell);
font-size:clamp(34px,4.6vw,54px);line-height:1.06;letter-spacing:-.016em;
max-width:19em;margin:16px 0 0}
.phero .sub2,.phero .sub{color:var(--blush);font-size:18px;line-height:1.65;
max-width:36em;margin:20px 0 0}
.phero p:not(.mono):not(.sub2):not(.sub){color:var(--blush);font-size:16.5px;
line-height:1.7;max-width:36em;margin-top:18px}
.phero .btnrow{justify-content:flex-start}
.phero #resume,.phero .resume{margin-top:26px}
/* the ripples run behind the lower right — keep the ground from
   swallowing a short hero by pinning a minimum height */
.phero.tall > .in{padding:94px 28px 98px}
@media(max-width:640px){.phero > .in{padding:58px 24px 62px}
.phero h1{font-size:clamp(30px,8vw,40px)}}

/* ── "What's hot" — the dated update inside a community card ──
   This is the reason the page is worth returning to, so it is set
   apart from the body copy rather than reading as another paragraph. */
.hot{margin-top:20px;padding:18px 20px 20px;border-radius:8px;
background:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-rule)}
.hot p{color:var(--gold-ink)!important;max-width:44em}
.hot p b{color:#7A5424;font-weight:500}
.hlab{font-family:'IBM Plex Mono',monospace;font-size:9px!important;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)!important;
margin:0 0 10px!important;display:flex;align-items:center;gap:9px}
.hlab::after{content:"";height:1px;flex:1 1 auto;background:var(--gold-rule)}
.hlinks{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 22px}
.hlinks a{font-family:'IBM Plex Mono',monospace;font-size:9.5px;
letter-spacing:.11em;text-transform:uppercase;color:var(--gold-ink);
text-decoration:none;border-bottom:1px solid var(--gold-rule);
padding-bottom:2px;transition:border-color .18s,color .18s}
.hlinks a:hover{color:#7A5424;border-bottom-color:#9C6E33}

/* refreshed stamp — quiet, but it has to be visible or the whole
   "this page updates" promise is unverifiable */
.upd{font-family:'IBM Plex Mono',monospace;font-size:9.5px!important;
letter-spacing:.13em;text-transform:uppercase;color:var(--wist)!important;
margin-top:20px!important;text-align:right}

/* .clab was losing its size war: .cbody p (0,1,1) outranks .clab (0,1,0),
   so the mono label rendered at body size. Scope it so it wins on
   specificity rather than on source order. */
.cbody .clab{font-size:9.5px;line-height:1.6}


/* ═══════════════════════════════════════════════════════════════
   V4 · THE MID-WEEK BOOST PLAYER
   The card KEEPS its cream ground, its title and its description. The tint
   player drops down underneath them. An earlier version replaced the whole
   card with the tint panel — the title vanished and the row shrank, which
   read as something breaking rather than something opening.
   The card's own icon stays the play control, so there is never a second
   circle competing with it.
   Waveform: thin round-capped strokes from REAL peak data in links.js.
   ═════════════════════════════════════════════════════════════ */
.scard.audio:not(.off){cursor:pointer}
.scard.audio.open{cursor:default;align-items:flex-start}
.scard.audio.open .ct{flex:1 1 auto;min-width:0}
.scard.audio.open .dot{cursor:pointer}
.scard.audio.open .dot:focus-visible{outline:2px solid var(--wist);outline-offset:3px}
.scard.audio.open .hint{display:none}
.pl-play svg{width:12px;height:14px;fill:var(--shell);display:block;
margin-left:2px;flex:0 0 auto}
.scard.audio.playing .pl-play svg{margin-left:0;width:13px}
.scard.audio audio,.card.audio audio{display:none!important}

/* the drop-down panel */
.pl{display:flex;align-items:center;gap:20px;margin-top:14px;
background:var(--tint);border-radius:9px;padding:13px 18px;
box-shadow:inset 0 0 0 1px rgba(126,106,148,.18);
opacity:0;transform:translateY(-7px);
transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.3,1)}
.pl.shown{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.pl{transition:none}}
.pl-mid{flex:0 1 auto;min-width:0}
.pl-meta{font-family:'IBM Plex Mono',monospace;font-size:9px!important;
letter-spacing:.15em;text-transform:uppercase;color:var(--wist)!important;
margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-title{display:none}          /* the card's own title is right above it */
.pl-wave{display:block;flex:1 1 200px;min-width:110px;height:28px;cursor:pointer;
touch-action:none}
.pl-wave:focus-visible{outline:2px solid var(--wist);outline-offset:4px;border-radius:2px}
.pl-t{flex:0 0 auto;font-family:'IBM Plex Mono',monospace;font-size:9.5px!important;
letter-spacing:.08em;color:var(--wist)!important;display:flex;align-items:baseline;
gap:7px;line-height:1;margin:0;white-space:nowrap}
.pl-t .tot{opacity:.55}
.pl-t .tot::before{content:"/ "}
@media(max-width:700px){.pl{flex-wrap:wrap;gap:12px}
.pl-mid{flex:1 1 100%}.pl-wave{flex:1 1 auto;height:24px}}

/* ═══════════════════════════════════════════════════════════════
   V5 · PORTAL HERO — the waveform treatment (chosen 18 Aug 2026)
   Supersedes the ripple ground. Three ambient layers, ALL in CSS, so
   nothing is repeated in the markup of six pages:
     ::before  scrim (topmost) + the waveform + the tuning fork
     ::after   film-grain veil, soft-light
   The waveform is masked to fade out leftward so it reads as emitted BY
   the fork rather than ruled across the band. That is the whole idea —
   do not make it symmetrical or full strength on the left, it turns into
   a strike-through under the headline.
   The fork geometry is reproduced from the brandbook, never redrawn.

   INLINE SVG IN CSS: every '#' in these data URIs is written %23. An
   unescaped '#' starts a URL fragment, so the SVG truncates at its first
   hex colour and the layer renders as nothing at all — no error, no
   warning, just a missing background. That cost a build cycle once.

   Ground is img/portal-band-quiet.webp — rebuilt 18 Aug 2026 to hold the
   violet hue. The previous version had red at or above blue across 30% of its
   pixels, which read as dusty mauve under a cool violet header. RULE: blue
   stays above red by ~18 everywhere. Gold is an ACCENT — eyebrow, rail,
   hairlines — never a ground colour.
   The unchosen ring and struck grounds are in img/_originals/.
   ═════════════════════════════════════════════════════════════ */
.phero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
  linear-gradient(100deg,rgba(47,35,66,.94) 0%,rgba(47,35,66,.87) 32%,
    rgba(47,35,66,.44) 60%,rgba(47,35,66,0) 86%),
  url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%2040'%20preserveAspectRatio='none'><defs><linearGradient%20id='a'%20x1='1'%20y1='0'%20x2='0'%20y2='0'><stop%20offset='0'%20stop-color='%23F5E8D6'%20stop-opacity='.60'/><stop%20offset='.38'%20stop-color='%23C9A9A6'%20stop-opacity='.32'/><stop%20offset='1'%20stop-color='%23C9A9A6'%20stop-opacity='0'/></linearGradient><linearGradient%20id='b'%20x1='1'%20y1='0'%20x2='0'%20y2='0'><stop%20offset='0'%20stop-color='%23F5E8D6'%20stop-opacity='.28'/><stop%20offset='.5'%20stop-color='%23C9A9A6'%20stop-opacity='0'/></linearGradient></defs><path%20d='M0,20%20Q41.6,2%2083.3,20%20T166.6,20%20T250,20%20T333.3,20%20T416.6,20%20T500,20%20T583.3,20%20T666.6,20%20T750,20%20T833.3,20%20T916.6,20%20T1000,20'%20fill='none'%20stroke='url(%23a)'%20stroke-width='1.3'/><path%20d='M0,20%20Q41.6,2%2083.3,20%20T166.6,20%20T250,20%20T333.3,20%20T416.6,20%20T500,20%20T583.3,20%20T666.6,20%20T750,20%20T833.3,20%20T916.6,20%20T1000,20'%20fill='none'%20stroke='url(%23b)'%20stroke-width='1.1'%20transform='translate(0,8)'/></svg>") no-repeat 0 62%/100% 150px,
  url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'><g%20fill='none'%20stroke='%23C9A9A6'%20stroke-linecap='butt'%20opacity='.23'><path%20d='M43,20%20L43,72%20Q43,86%2060,86%20Q77,86%2077,72%20L77,20'%20stroke-width='4'/><path%20d='M60,86%20L60,104'%20stroke-width='4'/><path%20d='M32,30%20L88,30'%20stroke-width='2.4'/></g></svg>") no-repeat right 6% center/auto 230px}
.phero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='n'><feTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/></filter><rect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/></svg>");opacity:.10;mix-blend-mode:soft-light}
@media(max-width:820px){.phero::before{background:
  linear-gradient(100deg,rgba(47,35,66,.90) 0%,rgba(47,35,66,.85) 60%,
    rgba(47,35,66,.74) 100%),
  url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'><g%20fill='none'%20stroke='%23C9A9A6'%20stroke-linecap='butt'%20opacity='.23'><path%20d='M43,20%20L43,72%20Q43,86%2060,86%20Q77,86%2077,72%20L77,20'%20stroke-width='4'/><path%20d='M60,86%20L60,104'%20stroke-width='4'/><path%20d='M32,30%20L88,30'%20stroke-width='2.4'/></g></svg>") no-repeat right -7% bottom -6%/auto 150px}
/* the waveform is deliberately ABSENT below 820px. At full-bleed type width
   there is nowhere for it to run that is not underneath a line of copy. */
.phero::after{opacity:.07}}

/* Stacking order, stated explicitly. img.bg is a real element with
   position:absolute and z-index:auto; ::before is treated as the first child.
   Positioned boxes at z-index auto/0 paint in TREE ORDER, so the ground image
   was painting over both pseudo-elements — the scrim and the entire waveform
   layer were loading and then being covered. Nothing errored; they were just
   invisible. Do not remove these four declarations. */
.phero img.bg{z-index:0}
.phero::before{z-index:1}
.phero::after{z-index:2}
.phero > .in{position:relative;z-index:3}

/* ═══════════════════════════════════════════════════════════════
   V6 · CONTENTS STRIP on hosts.html
   Vaughn opened hosts.html, saw Kathrine's photograph and the Bergens
   intro, concluded he was re-reading the homepage, and left without
   scrolling to the four sections below. He was not being careless — the
   two pages did open almost identically. This strip states the page's
   contents before a reader makes that judgement. Numbered, because the
   count is the point: there are five things here, not one.
   ═════════════════════════════════════════════════════════════ */
.toc{background:var(--tint);border-bottom:1px solid rgba(126,106,148,.16)}
.toc > .in{max-width:var(--col);margin:0 auto;padding:30px 28px 34px}
.toc .tlab{color:var(--wist);margin-bottom:16px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;
background:rgba(126,106,148,.16);counter-reset:t}
.toc li{background:var(--tint);counter-increment:t}
.toc a{display:grid;grid-template-columns:32px 1fr;gap:0 14px;align-items:baseline;
text-decoration:none;padding:13px 4px;transition:padding-left .18s}
.toc a:hover{padding-left:8px;background:rgba(255,255,255,.42)}
.toc a::before{content:counter(t,decimal-leading-zero);
font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;
color:var(--wist);grid-row:1/3}
.toc a b{font-family:Fraunces,serif;font-weight:300;font-size:19px;line-height:1.25;
color:var(--night);grid-column:2}
.toc a span{font-size:14px;line-height:1.55;color:var(--twi);grid-column:2;margin-top:3px}
.toc a:hover b{color:var(--twi)}
@media(max-width:600px){.toc a{grid-template-columns:26px 1fr;gap:0 10px}
.toc a b{font-size:17.5px}.toc a span{font-size:13.5px}}
/* an anchor that is also an eyebrow needs clearance from the sticky-free header */
#communities{scroll-margin-top:26px}

/* ═══════════════════════════════════════════════════════════════
   V7 · THE WEEK PAGE
   This is the page people spend six weeks inside, and it was the
   plainest in the build: a dark circular icon floating centred on bare
   shell above left-aligned type, a four-cell table for the rhythm, three
   visually identical cards, and the week's centering phrase — the single
   most useful thing on the page — sitting in dead space with its label
   underneath it in 9px mono.
   ═════════════════════════════════════════════════════════════ */

/* ── hero band ────────────────────────────────────────────────
   The icon is real artwork and deserves to be seen at size, so it is
   crisp on the right rather than used as a faint watermark. The rail
   underneath is the answer to "where am I", which no amount of
   "WEEK 01 OF 06" in mono was ever going to give at a glance. */
.whero{position:relative;background:#241A36;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(245,232,214,.10),inset 0 -1px 0 rgba(245,232,214,.16)}
/* NOT the same violet as the header. Matching them exactly removed the clash
   but left two identical planes stacked with a hairline between, which reads
   as an accident either way. Same hue, a deliberate step in value: the header
   is #2F2342, the hero settles to #241A36. Deeper also lets the artwork sit
   at full colour without washing out. */
.whero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center top;display:block;z-index:0}
.whero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(100deg,rgba(36,26,54,.95) 0%,rgba(36,26,54,.88) 30%,
rgba(36,26,54,.42) 58%,rgba(36,26,54,0) 88%),
linear-gradient(to top,rgba(36,26,54,.90) 0%,rgba(36,26,54,.62) 16%,
rgba(36,26,54,0) 42%)}
.whero > .in{position:relative;z-index:3;max-width:var(--col);margin:0 auto;
padding:64px 28px 20px}
.whero .mono{color:var(--gold);display:flex;align-items:center;gap:12px}
.whero .mono::before{content:"";width:26px;height:1px;flex:0 0 26px;
background:var(--gold);opacity:.55}
.whero h1{font-family:Fraunces,serif;font-weight:300;color:var(--shell);
font-size:clamp(38px,5.4vw,62px);line-height:1.03;letter-spacing:-.018em;
margin:15px 0 0}
.whero .sub2{color:var(--blush);font-size:19px;line-height:1.5;margin:14px 0 0;
font-family:Fraunces,serif;font-style:italic;font-weight:300}
/* OPTION B, chosen 18 Aug 2026. The week's artwork is the ambient, bled off the
   right edge, so every week looks different at a glance. This REQUIRES the
   -cut.webp alpha versions: the source icons are discs on a cream square and at
   this scale the originals show a pale box. No border-radius here — the alpha
   does the shaping, which also means no hard clipped edge. */
.wicon{position:absolute;right:-20%;top:46%;transform:translateY(-50%);
width:min(560px,50vw);height:auto;display:block;opacity:.70;
filter:saturate(1.14) contrast(1.02);pointer-events:none;z-index:1}
@media(min-width:1500px){.wicon{right:-14%;width:620px}}
@media(max-width:760px){
.whero > .in{padding:46px 24px 20px}
.wicon{width:360px;right:-30%;opacity:.52}
.whero h1{font-size:clamp(32px,9vw,44px)}}

/* ── the six-week rail ────────────────────────────────────── */
.rail{position:relative;z-index:3;max-width:var(--col);margin:0 auto;
padding:0 28px 32px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.rail a{text-decoration:none;display:block;padding-top:9px}
.rail a i{display:block;height:2px;border-radius:2px;
background:rgba(201,169,166,.34);transition:background .2s}
.rail a span{display:block;margin-top:8px;font-family:'IBM Plex Mono',monospace;
font-size:9px;letter-spacing:.14em;color:rgba(201,169,166,.72);transition:color .2s}
/* .55 measured 3.09:1 against the band — under AA even for large text.
   .72 brings it to ~3.9:1 while still reading as the inactive state. */
.rail a:hover i{background:var(--blush)}
.rail a:hover span{color:var(--blush)}
/* NOT .done — that class name is already the completion BUTTON at line 96, and
   a bare .done{background:var(--blush)} turned every walked week in the rail
   into a filled blush block. */
.rail a.walked i{background:rgba(245,232,214,.62)}
.rail a.walked span{color:rgba(245,232,214,.72)}
.rail a.on i{background:var(--gold);height:3px;margin-top:-1px}
.rail a.on span{color:var(--gold)}

/* ── the week's shape, as a line ──────────────────────────── */
.tline{list-style:none;margin:20px 0 0;padding:0;display:grid;
grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.tline::before{content:"";position:absolute;left:6px;right:6px;top:5px;height:1px;
background:var(--hair)}
.tline li{position:relative;padding:20px 10px 0 0}
.tline li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;
border-radius:50%;background:var(--shell);box-shadow:inset 0 0 0 1.5px var(--wist)}
.tline li:first-child::before{background:var(--wist);box-shadow:none}
.td{display:block;font-family:'IBM Plex Mono',monospace;font-size:9px;
letter-spacing:.14em;text-transform:uppercase;color:var(--wist)}
.tn{display:block;font-family:Fraunces,serif;font-weight:300;font-size:19px;
color:var(--night);margin-top:5px;line-height:1.2}
.tw{display:block;font-size:13.5px;color:var(--twi);margin-top:4px;line-height:1.5}
/* One line each in web view — a ragged row where two of four wrapped was the
   thing that read as unresolved. Two lines is fine and expected once the grid
   drops to two columns on small screens. */
@media(min-width:621px){.tw{white-space:nowrap}}
@media(max-width:620px){.tline{grid-template-columns:1fr 1fr;gap:22px 0}
.tline::before{display:none}}

/* ── the sessions ─────────────────────────────────────────
   Adopted from the week-card idea: each session carries a line saying what
   is actually in it, drawn from COURSE-MAP-v2, plus a duration slot.
   DURATIONS ARE NOT INVENTED — links.js fills .sdur and the slot stays
   empty until a real number exists. Canon has "10-17 minutes each" and no
   per-session figures, so nothing here may state one. */
.slist{margin-top:16px;border-top:1px solid var(--hair)}
.scard{display:flex;gap:18px;align-items:flex-start;text-decoration:none;
color:inherit;padding:22px 2px;border-bottom:1px solid var(--hair);
transition:padding-left .18s}
a.scard:hover{padding-left:8px}
.scard .dot{width:38px;height:38px;flex:0 0 38px;border-radius:50%;
background:var(--twi);display:flex;align-items:center;justify-content:center;
margin-top:2px;transition:background .18s}
a.scard:hover .dot{background:var(--night)}
.sc{flex:1 1 auto;min-width:0}
.sname{display:block;font-family:Fraunces,serif;font-weight:300;font-size:21px;
color:var(--night);line-height:1.2}
.sdesc{display:block;font-size:14.5px;line-height:1.55;color:var(--twi);
margin-top:5px;max-width:44em}
.smeta{display:flex;align-items:baseline;gap:14px;margin-top:9px;flex-wrap:wrap}
.smeta > *{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.13em;
text-transform:uppercase;color:var(--wist)}
.sdur:empty{display:none}
.scard.off{opacity:.45}
.scard.off .sdesc{display:none}
a.scard.seen .sname::after{content:" ✓";color:var(--wist);font-size:15px}
/* the boost card is the one that expands into a player */
.scard.audio:not(.off){cursor:pointer}
.scard.audio:not(.off):hover .dot{background:var(--night)}
/* the player now carries the week and the title, so the card's own day and
   runtime line steps aside rather than repeating them */
.scard.audio.open .smeta{display:none}
.scard.audio.open{cursor:default}

/* ── the centering phrase, given a ground ─────────────────── */
.phraseband{background:var(--gold);border-radius:3px;margin:46px 0 0;
padding:34px 34px 30px;text-align:center;
box-shadow:inset 0 0 0 1px var(--gold-rule)}
.phraseband .mono{color:var(--gold-ink);font-size:9px;letter-spacing:.16em}
.phraseband .phrase{font-family:Fraunces,serif;font-weight:300;
font-size:clamp(25px,3.4vw,36px);line-height:1.22;letter-spacing:-.012em;
color:#5E4220;margin:16px auto 0;max-width:26em}
.pnote{font-size:14px;line-height:1.6;color:var(--gold-ink);margin:18px auto 0;
max-width:38em}

/* ── the completion block ─────────────────────────────────
   The print variant used to render "Move on to week 2" inside a <code>
   element jammed hard against the button with no gap — a plain instruction
   dressed up as something to type. Only the companion path types anything. */
.tok{background:var(--night);border-radius:3px;margin-top:34px;
padding:26px 28px 28px}
.tok .mono{color:var(--blush);font-size:9px;letter-spacing:.15em;margin-bottom:14px}
.tok .tsay{font-family:Fraunces,serif;font-weight:300;font-size:22px;
color:var(--shell);margin:0 0 20px}
.tok code{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:14px;
color:var(--shell);background:rgba(201,169,166,.14);border-radius:3px;
padding:9px 14px;margin:0 0 20px;
box-shadow:inset 0 0 0 1px rgba(201,169,166,.26)}
.tok .done{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;
letter-spacing:.14em;text-transform:uppercase;background:var(--blush);
color:var(--night);border:0;border-radius:3px;padding:14px 22px;cursor:pointer;
transition:background .18s}
.tok .done:hover:not([disabled]){background:var(--shell)}
.tok .done[disabled]{background:transparent;color:var(--wist);cursor:default;
box-shadow:inset 0 0 0 1px rgba(201,169,166,.28)}

/* ═══════════════════════════════════════════════════════════════
   V8 · FOUNDATIONS — proof, and weight
   Her note: "too creme on light purple, too soft, you don't take it
   seriously". Two separate problems were behind that. The palette
   rhythm is fixed by the section grounds. This block fixes the second
   half — the page had no proof on it at all, and its two most important
   visual elements (the six-week arc and the receive list) were the
   lightest things on the page.
   ═════════════════════════════════════════════════════════════ */

/* ── three voices, immediately before the ask ─────────────── */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;
border-top:1px solid var(--hair)}
.proof figure{margin:0;padding:26px 26px 24px;border-right:1px solid var(--hair);
border-bottom:1px solid var(--hair);display:flex;flex-direction:column}
.proof figure:last-child{border-right:none}
.proof blockquote{font-family:Fraunces,serif;font-weight:300;font-style:normal;
font-size:16.5px;line-height:1.45;letter-spacing:-.004em;color:var(--ink);
margin:0 0 20px;border:0;padding:0;flex:1 1 auto}
.proof figcaption{display:flex;align-items:center;gap:12px}
.proof .av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;object-fit:cover;display:block}
.proof .who{display:flex;flex-direction:column;min-width:0}
.proof .who b{font-weight:500;font-size:13.5px;color:var(--night);line-height:1.3}
.proof .who span{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--wist);margin-top:3px}
.proof + .more{margin-top:22px}
@media(max-width:820px){.proof{grid-template-columns:1fr}
.proof figure{border-right:none}}

/* ── the arc, given weight ────────────────────────────────
   The six weeks ARE the product, and they were rendering as small
   low-contrast chips: 56px icons, 19px headings, a 1px hairline border on
   white. Bigger icon, a real numeral, and a left rule that lands the card
   on the ground instead of floating it. */
.weeks{gap:16px;margin-top:34px}
.wcard{gap:22px;padding:24px 24px 22px;border:1px solid var(--hair);
border-left:2px solid var(--blush);border-radius:3px;
box-shadow:0 1px 2px rgba(58,45,74,.04);transition:border-left-color .18s,transform .18s}
.wcard:hover{border-left-color:var(--night);transform:translateY(-2px)}
.wcard img{width:72px;height:72px;flex:0 0 72px}
.wcard .no{font-size:9px;letter-spacing:.18em;color:var(--wist)}
.wcard h3{font-size:22px;margin-top:3px}
.wcard p{font-size:14.5px;margin-top:7px}

/* ── what you receive ─────────────────────────────────────
   Was a plain two-column bulleted list on gold, directly above the price.
   The list is the value case, so it now reads as a ledger rather than
   an afterthought. */
.getlist{gap:0 40px;margin-top:34px}
.getlist li{padding:16px 0 16px 30px;font-size:15.5px;line-height:1.55;
color:var(--gold-ink)}
.getlist li::before{content:"";position:absolute;left:2px;top:24px;width:11px;height:1px;
background:var(--gold-ink);opacity:.55;border-radius:0}
.getlist li:last-child{border-bottom:1px solid var(--gold-rule)}
.getlist li b,.getlist li strong{color:#7A5424;font-weight:500}

/* the .proof grid doubles as a .tset for voices.js, so it needs the
   fade-out state and the hidden state the rotation relies on */
.proof.tset{transition:opacity .5s ease;opacity:1}
.proof.tset.out{opacity:0}
.proof.tset[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.proof.tset{transition:none}}
.proof + .tdots,.proof.tset + .tdots{margin-top:26px}

/* ═══════════════════════════════════════════════════════════════
   V9 · ARRIVING FOR THE FIRST TIME
   The old first run sent you to the welcome, which sent you back to the
   page you came from, and then asked you to scroll past the fold to find
   a decision you did not know you had to make. Three numbered steps in
   order, one decision per screen, and every screen moves forward.
   ═════════════════════════════════════════════════════════════ */
.setup-h{font-family:Fraunces,serif;font-weight:300;font-size:clamp(28px,3.6vw,38px);
line-height:1.1;letter-spacing:-.014em;color:var(--night);margin:14px 0 0}
.setup-dek{color:var(--twi);font-size:17.5px;margin-top:12px}

.steps{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--hair)}
.steps li{display:grid;grid-template-columns:44px 1fr auto;gap:0 18px;
padding:26px 2px 28px;border-bottom:1px solid var(--hair);align-items:start}
.sn{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
color:var(--wist);padding-top:5px}
.sbody h3{font-family:Fraunces,serif;font-weight:300;font-size:23px;color:var(--night);
line-height:1.2}
.sbody p{color:var(--twi);font-size:15.5px;line-height:1.6;margin-top:6px;max-width:44em}
.stime{font-size:9px;color:var(--wist);padding-top:7px;white-space:nowrap}
.sbtn{display:inline-block;margin-top:16px;font-family:'IBM Plex Mono',monospace;
font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
background:var(--night);color:var(--shell);border-radius:3px;padding:13px 22px;
transition:background .18s}
.sbtn:hover{background:var(--twi)}

/* Step states. Only ONE step offers a button at a time — that is the whole
   point of it being a sequence rather than a menu. */
.steps li.upcoming{opacity:.5}
.steps li.upcoming .sbtn{display:none}
.steps li.done .sbtn{display:none}
.steps li.done .sn::after{content:" ✓";color:var(--wist)}
.steps li.done .sbody h3{color:var(--twi)}
.steps li.done .sbody p{display:none}
.steps li.now{background:linear-gradient(90deg,rgba(245,232,214,.42) 0%,rgba(245,232,214,0) 70%);
box-shadow:inset 2px 0 0 var(--gold-ink)}
.steps li.now .sn{color:var(--gold-ink)}
@media(max-width:600px){.steps li{grid-template-columns:32px 1fr;gap:0 12px}
.stime{grid-column:2;padding-top:8px}}

/* the forward step at the end of the welcome */
.nextstep{background:var(--tint);border-radius:3px;padding:28px 30px 30px;margin-top:44px}
.nextstep .mono{font-size:9px;letter-spacing:.16em;color:var(--wist)}
.nextstep h3{font-family:Fraunces,serif;font-weight:300;font-size:25px;color:var(--night);
margin:10px 0 8px}
.nextstep p{color:var(--twi);font-size:15.5px;max-width:40em}

/* ── setup.html — one decision ── */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.pathcard{background:#fff;border:1px solid var(--hair);border-left:2px solid var(--blush);
border-radius:3px;padding:28px 28px 26px;display:flex;flex-direction:column}
.pathcard h2{font-family:Fraunces,serif;font-weight:300;font-size:26px;color:var(--night);
margin:8px 0 12px}
.pathcard > p{color:var(--twi);font-size:15.5px;line-height:1.6}
.plist{list-style:none;margin:18px 0 0;padding:0}
.plist li{position:relative;padding:7px 0 7px 22px;font-size:14.5px;color:var(--twi)}
.plist li::before{content:"";position:absolute;left:2px;top:16px;width:9px;height:1px;
background:var(--blush)}
.pathcard .sbtn{align-self:flex-start;margin-top:22px}
.pathcard .pnote{margin-top:14px;color:var(--wist)}
@media(max-width:760px){.paths{grid-template-columns:1fr}}

/* ── support.html ── */
.sup{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.supcard{display:flex;flex-direction:column;gap:7px;text-decoration:none;
background:#fff;border:1px solid var(--hair);border-radius:3px;padding:24px 26px;
transition:border-color .18s,transform .18s}
.supcard:hover{border-color:var(--wist);transform:translateY(-1px)}
.supcard .lab{font-size:9px;letter-spacing:.15em;color:var(--wist)}
.supcard b{font-family:Fraunces,serif;font-weight:300;font-size:21px;color:var(--night);
line-height:1.25}
.supcard span:last-child{font-size:14.5px;line-height:1.55;color:var(--twi)}
@media(max-width:700px){.sup{grid-template-columns:1fr}}
/* the footer now carries two items plus the motto */
footer .in .mono a{text-decoration:none}
footer .in .mono a:hover{color:var(--blush)!important}

/* ═══════════════════════════════════════════════════════════════
   V10 · WHAT TO HOLD — the playbook, portal side
   From the print-and-portal design proof: the prompts render READ-ONLY so
   the member knows what to carry into each recording, and the download
   sends them to the page where they actually write.
   There is no input here on purpose. This is a static build with no
   backend — anything typed would be lost on refresh, and the playbook's own
   closing line is "you have the evidence in your own handwriting".
   ═════════════════════════════════════════════════════════════ */
.hold{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.hbit{background:var(--tint);border-left:2px solid var(--wist);border-radius:0 4px 4px 0;
padding:20px 22px 22px}
.hlabel{font-size:9px!important;letter-spacing:.15em;color:var(--wist)!important;
margin:0 0 10px!important}
.hbit > p:not(.hlabel){color:var(--twi);font-size:15px;line-height:1.6;margin:0}
.hnote{margin-top:14px!important;font-size:13.5px!important;line-height:1.55;
color:var(--wist)!important;border-top:1px solid rgba(126,106,148,.20);padding-top:12px}
@media(max-width:760px){.hold{grid-template-columns:1fr}}

.pbook{display:flex;align-items:center;justify-content:space-between;gap:24px;
flex-wrap:wrap;margin-top:16px;background:var(--gold);border-radius:4px;
padding:22px 24px;box-shadow:inset 0 0 0 1px var(--gold-rule)}
.pbook .hlabel{color:var(--gold-ink)!important}
.pbook p:not(.hlabel){color:var(--gold-ink);font-size:15px;line-height:1.55;
margin:0;max-width:46em}
.pbook .sbtn{background:var(--gold-ink);flex:0 0 auto}
.pbook .sbtn:hover{background:#7A5424}

/* ── the reviewer prompt block, with a copy button ── */
.promptbox{position:relative;background:var(--night);border-radius:4px;
padding:44px 24px 24px;margin-top:6px}
.promptbox pre{margin:0;white-space:pre-wrap;word-wrap:break-word;
font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.65;
color:var(--blush);max-height:340px;overflow:auto}
.copybtn{position:absolute;top:12px;right:12px;font-family:'IBM Plex Mono',monospace;
font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
background:transparent;color:var(--blush);border:0;border-radius:3px;padding:8px 14px;
box-shadow:inset 0 0 0 1px rgba(201,169,166,.42);transition:background .18s,color .18s}
.copybtn:hover{background:var(--blush);color:var(--night)}
.copybtn.ok{background:var(--gold);color:var(--gold-ink);box-shadow:none}


/* ══ V11 · 2026-09-04 ══════════════════════════════════════════════════
   .grpnote — the group enquiry block under the pricing tiers on
   foundations.html. Sits on .g-gold, so it borrows the ink/blush pair
   rather than introducing a colour. Deliberately quieter than a .tier:
   it is a third option, not a third price, and must not compete with
   the two real ones directly above it. */
.grpnote{margin:34px auto 0;max-width:620px;padding:22px 26px;
  border:1px solid rgba(126,106,148,.30);border-radius:14px;
  background:rgba(245,239,233,.42)}
.grpnote .lab{color:var(--fork);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 8px}
.grpnote p{margin:0;color:var(--twi);font-size:15px;line-height:1.62}
.grpnote .more{margin-top:14px;display:inline-block}


/* ══ V12 · 2026-09-04 · MEMBER GATE ════════════════════════════════════
   .gated is set by an inline script in <head> on every member page and
   removed by auth.js once a user is confirmed. It hides the BODY rather
   than setting display:none on anything, so layout never reflows — and
   it must stay visibility rather than opacity, or the page is still
   readable by anyone who thinks to screenshot mid-load.
   If auth.js ever fails to load, the page stays hidden and the member is
   redirected. That is the intended failure direction: closed, not open. */
html.gated body{visibility:hidden}

/* The signed-in chip, injected into .topnav by auth.js so the thirteen
   member pages do not each carry a copy of the markup. */
.authchip{display:inline-flex;align-items:center;gap:10px;margin-left:18px;
  padding-left:18px;border-left:1px solid rgba(245,239,233,.22)}
.authchip .awho{font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.04em;color:var(--blush);opacity:.85;max-width:15em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.authchip .aout{background:none;border:0;padding:0;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.04em;
  color:var(--wist);text-decoration:underline;text-underline-offset:3px}
.authchip .aout:hover{color:var(--blush)}
@media(max-width:720px){.authchip{margin-left:0;padding-left:0;border-left:0;
  width:100%;justify-content:space-between}}

/* ── the sign-in card on login.html ── */
.signin{max-width:520px;margin:0 auto;padding:34px 32px;
  border:1px solid rgba(126,106,148,.26);border-radius:16px;
  background:rgba(245,239,233,.5)}
.signin .lab{color:var(--fork);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 10px}
.signin h2{font-family:Fraunces,serif;font-weight:300;font-size:26px;
  color:var(--night);margin:0 0 12px}
.signin p{color:var(--twi);font-size:15.5px;line-height:1.65;margin:0 0 8px}
.signin .btn{margin-top:20px}
.linkish{background:none;border:0;padding:0;cursor:pointer;color:var(--fork);
  text-decoration:underline;text-underline-offset:3px;font:inherit}


/* ══ V13 · 2026-09-05 · sign-in card, second path ══════════════════════
   The gate is also a shopfront: a stranger who followed a shared link
   lands here, and "get access" has to be a real path rather than a line
   of small print. .orline separates the two without a second card, which
   would imply two equally likely intentions. */
.orline{display:flex;align-items:center;gap:14px;margin:26px 0 18px;
  color:var(--wist);font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase}
.orline:before,.orline:after{content:"";flex:1;height:1px;
  background:rgba(126,106,148,.26)}


/* ══ V14 · 2026-09-12 · claim.html's own "choose your login" form ══════════
   The only plain text/password inputs anywhere in this build — every other
   auth surface hands off to the Identity widget's own modal. This one is
   deliberately custom-styled instead, because the whole point of the page
   is letting the buyer pick an email that has nothing to do with the one
   they paid with, which needs a real visible form, not a popup. */
.fld{display:block;margin:0 0 14px}
.fld span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--wist);margin:0 0 6px}
.fld input{width:100%;box-sizing:border-box;padding:11px 13px;
  border:1px solid rgba(126,106,148,.36);border-radius:8px;
  background:var(--shell);color:var(--night);font-family:'Instrument Sans',sans-serif;
  font-size:15px}
.fld input:focus{outline:2px solid var(--fork);outline-offset:1px}


/* ══ V14 · 2026-09-16 · FOOTER ═════════════════════════════════════════
   Two rows. Row one is the page label, the links and the motto — the
   working part. Row two is the legal line, deliberately quieter and
   below a hairline so it does not compete. The designer asked for a
   copyright and for a way to make contact rather than a bare domain;
   the domain moves to row two where it reads as a signature.
   .flinks a inherits the footer colour rather than the inline styles the
   old footer carried on every page, so the link colour now lives in one
   place instead of thirty. */
footer .ftr{display:block}
footer .frow{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap}
footer .flinks a{color:var(--wist);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .18s}
footer .flinks a:hover{border-bottom-color:var(--wist)}
footer .flinks .sep{color:var(--wist);opacity:.45;padding:0 8px}
footer .fmotto{color:var(--blush)}
footer .frule{height:1px;background:currentColor;opacity:.14;margin:18px 0 14px}
footer .fsmall{font-size:10px;opacity:.62;letter-spacing:.03em}
@media(max-width:640px){
  footer .frow{flex-direction:column;gap:10px}
  footer .fsmall{gap:6px}
}


/* ══ V15 · 2026-09-23 · RHYTHM DESCRIPTIONS ════════════════════════════
   Kathrine's Attune / Notice / Recode / Recognise framework gives each day
   a line of its own. The strip was label-only; .n is that line. Kept quiet
   so the four day names still read as the structure. */
.rhythm div{display:flex;flex-direction:column;gap:4px}
.rhythm .n{font-size:13px;line-height:1.5;opacity:.72;max-width:22em}
@media(max-width:640px){.rhythm .n{font-size:12.5px}}


/* ══ V16 · 2026-09-24 · INLINE VIMEO ═══════════════════════════════════
   The attunement and recode cards used to leave the site. They now open a
   player in place, on attunements.us, which is the only domain the videos
   are allowed to appear on. Built on click, never on load: no Vimeo request,
   no third-party cookie, and no layout cost until someone actually presses
   play. 56.25% is 16:9. */
.vwrap{position:relative;padding-top:56.25%;margin:14px 0 4px;border-radius:6px;
  overflow:hidden;background:var(--night) center/cover no-repeat;
  opacity:0;transform:translateY(-4px);transition:opacity .28s ease,transform .28s ease}
.vwrap.show{opacity:1;transform:none}
.vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.scard.hasvid{cursor:pointer}
.scard.hasvid.open{border-bottom-left-radius:0;border-bottom-right-radius:0}


/* ══ V17 · 2026-09-25 · FOUNDING LIST ══════════════════════════════════
   Selling is paused until the finished edits land, so the two Enroll
   buttons are a form instead. It sits on the gold band, so the fields are
   a light well rather than dark chrome. .hp is the honeypot — hidden from
   people, visible to bots, and Netlify drops anything that fills it. */
.joinbox{max-width:620px;margin:34px auto 0;text-align:left}
.joinbox h3{font-family:Fraunces,serif;font-weight:300;font-size:26px;
  color:var(--night);margin:6px 0 12px}
.joinbox > p{margin-bottom:22px}
.joinbox .lab{color:var(--wist)}

.jrow{display:flex;gap:14px}
@media(max-width:560px){.jrow{flex-direction:column;gap:0}}
.jfield{display:block;flex:1;margin-bottom:14px}
.jlab{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wist);margin-bottom:6px}
.jlab em{font-style:normal;opacity:.6;text-transform:none;letter-spacing:.04em}
.jfield input,.jfield textarea{width:100%;font-family:inherit;font-size:15px;
  color:var(--night);background:rgba(255,255,255,.62);
  border:1px solid rgba(126,106,148,.34);border-radius:4px;padding:11px 13px;
  transition:border-color .16s,background .16s}
.jfield input:focus,.jfield textarea:focus{outline:none;background:#fff;
  border-color:var(--wist)}
.jfield textarea{resize:vertical;min-height:52px}

#joinForm .btn{margin-top:6px}
#joinForm .btn[disabled]{opacity:.55;cursor:default}
.jnote{margin-top:12px;opacity:.7}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.joindone h3{font-family:Fraunces,serif;font-weight:300;font-size:26px;
  color:var(--night);margin:6px 0 12px}


/* ══ V18 · 2026-09-25 · CONTACT FORM ═══════════════════════════════════
   Every contact route on the site now lands on this form rather than
   firing a mailto:. The address is still shown — as plain selectable
   text, deliberately not a link, so nothing hijacks a mail client.
   Reuses the .jfield / .jrow / .hp field styles from V17. */
.cform{max-width:620px;margin:6px 0 4px}
.cform select{width:100%;font-family:inherit;font-size:15px;color:var(--night);
  background:rgba(255,255,255,.62);border:1px solid rgba(126,106,148,.34);
  border-radius:4px;padding:11px 13px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--wist) 50%),
                   linear-gradient(135deg,var(--wist) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cform select:focus{outline:none;background-color:#fff;border-color:var(--wist)}
.cdirect{margin-top:20px;opacity:.78}
/* .mono uppercases by default, which is wrong for an email address —
   an address is a literal string and must read exactly as it is typed. */
.addr{color:var(--night);border-bottom:1px dotted var(--wist);
  text-transform:none;letter-spacing:.01em;font-size:.95em;
  user-select:all;-webkit-user-select:all}