/* ─────────────────────────────────────────────────────────────
   SOFT POWER · MEMBER AREA
   Built strictly to 5D METHOD DESIGN.md v1.1.

   Dark mode is the default: DESIGN.md §8 puts the Soft Power
   program surface in dark mode. Light mode is the same system
   inverted, using the book's LIGHT MODE table verbatim.

   Rules from the book that shape everything below:
     · two typefaces only: Cormorant Garamond + Inter
     · no gradients on buttons, cards or backgrounds
     · no drop shadows anywhere
     · never fully rounded pill buttons: 4px, 8px for cards
     · gold is emphasis, not decoration
   ───────────────────────────────────────────────────────────── */

:root{
  /* DARK MODE: DESIGN.md §2 */
  --bg:        #0F1A2E;   /* background primary  · deep navy */
  --bg-2:      #1A2540;   /* background secondary */
  --bg-3:      #0A1322;   /* background tertiary */
  --bg-glass:  rgba(15,26,46,.92);

  --text:      #EFE4D2;   /* text primary · cream */
  --text-2:    #A89F8A;   /* text secondary · captions, eyebrows  (6.62:1) */
  --text-mute: #6B6357;   /* placeholders only: 2.94:1, never body text */

  --gold:      #C9A876;   /* accent primary  (7.74:1 on navy) */
  --gold-lt:   #D8B888;   /* hover */
  --gold-dp:   #B08F5A;   /* pressed */
  --on-gold:   #0F1A2E;   /* navy on gold  (7.74:1) */
  --invert:    #EFE4D2;   /* dark-mode primary hover fill */

  --hair:      rgba(239,228,210,0.12);
  --hair-gold: rgba(201,168,118,0.40);

  --teal:      #1A6B6B;   /* rare guest: once per surface, max */
  --clay:      #A85A3E;   /* form errors */

  /* spacing scale · §4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* motion · §7 */
  --micro: 180ms cubic-bezier(.4,0,.2,1);
  --macro: 500ms cubic-bezier(.25,.1,.25,1);
}

:root[data-theme="light"]{
  /* LIGHT MODE: DESIGN.md §2 */
  --bg:        #F7F4EE;   /* soft pearl */
  --bg-2:      #EAE4D8;   /* warm grey */
  --bg-3:      #FBFAF6;   /* almost-white */
  --bg-glass:  rgba(247,244,238,.92);

  --text:      #0F1A2E;   /* deep navy */
  --text-2:    #5C5750;   /* warm charcoal  (6.52:1) */
  --text-mute: #9A958C;   /* placeholders only: 2.71:1 */

  --gold:      #C9A876;
  --gold-lt:   #D8B888;
  --gold-dp:   #B08F5A;
  --on-gold:   #0F1A2E;
  --invert:    #0F1A2E;   /* light-mode primary hover fill */

  --hair:      rgba(15,26,46,0.12);
  --hair-gold: rgba(201,168,118,0.55);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
  transition:background-color var(--macro), color var(--macro);
}

/* ── Type · §3 ──────────────────────────────────────────── */
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300}
h1{font-size:56px;line-height:1.1;letter-spacing:-0.015em}
/* the week title runs at the book's Display size, not H1: this is the
   one headline a member sees every time she opens the portal */
section.fade > .head h1{font-size:72px;line-height:1.05;letter-spacing:-0.02em}
h2{font-size:40px;line-height:1.15;letter-spacing:-0.01em}
h3{font-size:28px;line-height:1.25;font-weight:400;letter-spacing:0}

/* italic is emphasis, and only at display sizes: gold on pearl
   measures 2.05:1, so gold text never runs small in light mode */
em,.italic{font-style:italic;color:var(--gold)}
:root[data-theme="light"] em,
:root[data-theme="light"] .italic{color:var(--text)}

.eyebrow{
  font-family:Inter,sans-serif;font-weight:400;
  font-size:12px;line-height:1.4;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-2);
}
.muted{color:var(--text-2)}
.small{font-size:15px;font-weight:400}
.hint{font-size:13px;font-weight:400;color:var(--text-2);line-height:1.5}

p+p{margin-top:var(--s5)}
a{color:inherit}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--s8)}
.prose{max-width:580px}
.pull{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-style:italic;
  font-size:32px;line-height:1.3;letter-spacing:0;color:var(--text);
}
@media(max-width:760px){.pull{font-size:24px}}
.rule{width:80px;height:1px;background:var(--gold);border:0}

/* ── Buttons · §5 ───────────────────────────────────────── */
/* Primary: flat gold, navy label, 4px corners. No gradient, no shadow. */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;
  padding:16px 32px;border:0;border-radius:100px;cursor:pointer;
  background:linear-gradient(100deg,#B08F5A 0%,#E8D5B0 50%,#B08F5A 100%);
  color:#0F1A2E;
  box-shadow:0 12px 34px -12px rgba(201,168,118,.6);
  text-decoration:none;
  transition:filter var(--micro), box-shadow var(--micro), transform var(--micro);
  -webkit-tap-highlight-color:transparent;
}
/* the gold underline draws in beneath on hover */
.btn::after{display:none}
.btn:hover{filter:brightness(1.05);box-shadow:0 14px 40px -12px rgba(201,168,118,.8)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn:disabled{opacity:.45;cursor:default}
.btn .arrow{display:inline-block;transition:transform var(--micro)}
.btn:hover .arrow{transform:translateX(4px)}

/* Secondary: outline, inverts on hover */
.btn-ghost{
  background:transparent;color:var(--gold);
  border:1px solid var(--hair-gold);
  box-shadow:none;
}
.btn-ghost:hover{filter:none;box-shadow:none;background:rgba(201,168,118,.10);color:var(--gold-lt)}
.btn-ghost:active{transform:translateY(1px)}

/* buttons keep a 44px+ tap target everywhere: the one deliberate
   step past the book, which specifies 14px padding on mobile (42px) */
.btn-sm{padding:14px 26px;font-size:13px;letter-spacing:.16em}

/* Tertiary: text link with a permanent gold underline */
.link{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:Inter,sans-serif;font-weight:400;font-size:15px;
  color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--gold);padding-bottom:4px;
  transition:border-color var(--micro), color var(--micro);
}
.link:hover{border-bottom-width:2px;padding-bottom:3px;border-color:var(--gold-dp)}
.link:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ── Cards · §5 ─────────────────────────────────────────── */
.card{
  background:var(--bg-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:var(--s6);
}
.card+.card{margin-top:var(--s4)}

.card-link{
  display:block;text-decoration:none;
  transition:border-color 250ms cubic-bezier(.25,.1,.25,1),
             transform  250ms cubic-bezier(.25,.1,.25,1);
}
.card-link:hover{border-color:var(--hair-gold);transform:translateY(-2px)}
.card-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.card-locked{opacity:.4}

/* ── Form fields · §5 ───────────────────────────────────── */
label{
  display:block;font-family:Inter,sans-serif;font-weight:400;font-size:13px;
  letter-spacing:.04em;color:var(--text-2);margin-bottom:var(--s2);
}
/* Radios and checkboxes are not text boxes. They were caught by this rule
   and given width:100%, so on the consent step the radio stretched across
   the whole row and crushed its own label into a one-word-per-line column. */
input:not([type=radio]):not([type=checkbox]),textarea,select{
  width:100%;background:var(--bg-3);color:var(--text);
  border:1px solid var(--hair);border-radius:4px;
  padding:14px 16px;font-family:Inter,sans-serif;font-weight:400;font-size:16px;line-height:1.5;
  transition:border-color var(--micro);
}
input::placeholder,textarea::placeholder{color:var(--text-mute)}
input:focus,textarea:focus,select:focus{outline:0;border:2px solid var(--gold);padding:13px 15px}
textarea{min-height:110px;resize:vertical}
.field{max-width:580px}
.field+.field{margin-top:var(--s5)}
form .btn{margin-top:var(--s6)}
.err{color:var(--clay);font-size:13px;margin-top:var(--s2)}
.ok{color:var(--text-2);font-size:13px;margin-top:var(--s2)}

/* ── Navigation · §5 ────────────────────────────────────── */
header.top{
  position:sticky;top:0;z-index:30;
  background:var(--bg-glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--micro);
}
header.top.scrolled{border-bottom-color:var(--hair)}
.top-in{
  position:relative;
  max-width:1280px;margin:0 auto;padding:0 var(--s8);
  height:80px;display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
}
.mark{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:18px;line-height:1.2;white-space:nowrap}
.mark small{
  display:block;margin-top:3px;
  font-family:Inter,sans-serif;font-size:10px;font-weight:400;
  letter-spacing:.32em;text-transform:uppercase;color:var(--text-2);
}
.mark:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

nav.tabs{display:flex;align-items:center;gap:var(--s6);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:16px}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{
  position:relative;
  font-family:Inter,sans-serif;font-weight:400;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-2);text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;
  transition:color var(--micro);
}
nav.tabs a::after{
  content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--micro);
}
nav.tabs a:hover{color:var(--text)}
nav.tabs a.on{color:var(--text)}
nav.tabs a.on::after{transform:scaleX(1)}
nav.tabs a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.theme-btn{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--hair);color:var(--text-2);
  cursor:pointer;font-size:14px;line-height:1;margin-left:var(--s2);
  transition:color var(--micro),border-color var(--micro);
}
.theme-btn:hover{color:var(--gold);border-color:var(--hair-gold)}
.theme-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── Layout · §4 ────────────────────────────────────────── */
main.wrap{padding:var(--s9) var(--s8) var(--s10)}
section+section{margin-top:var(--s10)}
.head{margin-bottom:var(--s7)}
.head .eyebrow{margin-bottom:var(--s4)}
.head h1+.muted,.head h2+.muted{margin-top:var(--s4)}

.grid{display:grid;gap:var(--s4)}
@media(min-width:760px){.grid-2{grid-template-columns:1fr 1fr}}

/* ── Week numeral ───────────────────────────────────────── */
/* Inter, not Cormorant: the serif's oldstyle figures read "0" as
   brackets and "1" as an I at display size. Both faces are the
   book's; this only picks the one that stays legible. */
.wk-n{
  font-family:Inter,sans-serif;font-weight:300;font-size:34px;line-height:1;
  color:var(--gold);letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums;
}
:root[data-theme="light"] .wk-n{color:var(--gold-dp)}

.badge{
  display:inline-flex;align-items:center;
  font-family:Inter,sans-serif;font-weight:400;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-2);border:1px solid var(--hair);border-radius:4px;
  padding:5px 12px;
}
.badge-live{border-color:var(--hair-gold)}

/* ── Spotlight video ────────────────────────────────────── */
.spotlight{margin-bottom:var(--s7)}
.video{
  position:relative;padding-top:56.25%;border-radius:8px;overflow:hidden;
  border:1px solid var(--hair);background:var(--bg-3);
}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.video-soon{
  background:var(--bg-3);border:1px solid var(--hair);border-radius:8px;
  padding:var(--s9) var(--s5);text-align:center;
}
audio{width:100%;margin-top:var(--s4)}
:root:not([data-theme="light"]) audio{filter:invert(.9) hue-rotate(180deg)}

/* ── Prompt widget ──────────────────────────────────────── */
.prompt-box{
  background:var(--bg-3);border:1px solid var(--hair);border-radius:8px;
  padding:var(--s5);margin-top:var(--s4);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;line-height:1.7;color:var(--text-2);
  white-space:pre-wrap;max-height:280px;overflow-y:auto;
}
.prompt-bar{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s5);align-items:center}

/* ── Calendar ───────────────────────────────────────────── */
.ev{display:flex;gap:var(--s6);padding:var(--s6) 0;border-bottom:1px solid var(--hair);align-items:flex-start}
.ev:last-child{border-bottom:0}
.ev-date{flex:0 0 84px;text-align:center;padding-top:2px}
.ev-day{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:36px;line-height:1;
  color:var(--text);font-variant-numeric:lining-nums tabular-nums;
}
.ev-mon{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);margin-top:7px}
.ev-body{flex:1;min-width:0}
.ev-past{opacity:.45}
.ev-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}

/* ── Progress ───────────────────────────────────────────── */
.done-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin:var(--s5) 0 var(--s6)}
.done-row .hint{flex:1;min-width:210px}

.prog{background:var(--bg-2);border:1px solid var(--hair);border-radius:8px;padding:var(--s6);margin:var(--s7) 0}
.prog-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-bottom:var(--s4)}
.prog-track{height:2px;background:var(--hair);overflow:hidden}
.prog-fill{height:100%;background:var(--gold);transition:width var(--macro)}
.prog .rail{margin-top:var(--s5)}
.dot{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:Inter,sans-serif;font-size:13px;font-weight:400;color:var(--text-2);
  border:1px solid var(--hair);
  font-variant-numeric:lining-nums;
  transition:background-color var(--micro),border-color var(--micro),color var(--micro);
}
.dot.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}

/* ── Admin grid ─────────────────────────────────────────── */
.grid-cell{text-align:center;font-size:15px}
.tick{color:var(--gold)}
:root[data-theme="light"] .tick{color:var(--gold-dp)}
.no-tick{color:var(--text-2);opacity:.45}

/* ── Markdown body ──────────────────────────────────────── */
.md h4{font-family:Inter,sans-serif;font-size:15px;font-weight:500;letter-spacing:.02em;margin:var(--s5) 0 var(--s2)}
.md strong{font-weight:500;color:var(--text)}
.md code{font-family:ui-monospace,Menlo,monospace;font-size:14px;background:var(--bg-3);padding:2px 6px;border-radius:4px;color:var(--text)}
.md ol,.md ul{margin:var(--s3) 0 var(--s3) var(--s5)}
.md li{margin-bottom:var(--s2)}

/* ── Toast ──────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,12px);
  background:var(--gold);color:var(--on-gold);
  padding:14px 28px;border-radius:100px;
  font-family:Inter,sans-serif;font-size:13px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  z-index:60;opacity:0;pointer-events:none;
  transition:opacity var(--micro),transform var(--macro);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── Draft ribbon ───────────────────────────────────────── */
.ribbon{
  position:relative;z-index:40;
  background:var(--bg-2);color:var(--text);
  border-bottom:1px solid var(--hair-gold);
  font-family:Inter,sans-serif;font-size:12px;font-weight:400;
  letter-spacing:.06em;line-height:1.5;
  padding:12px var(--s5);text-align:center;
}
.ribbon strong{font-weight:500}

/* ── Gate / footer ──────────────────────────────────────── */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s5)}
.gate-in{width:100%;max-width:440px}
footer.bot{border-top:1px solid var(--hair);padding:var(--s8) 0;margin-top:var(--s10)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s6);margin-bottom:var(--s5)}

/* ─────────────────────────────────────────────────────────
   Gold graphics · DESIGN.md §6
   One hairline element per surface, edge-anchored, outline only.
   Never a fill, never a set of concentric rings.
   ───────────────────────────────────────────────────────── */
main.wrap{position:relative}
main.wrap::before{
  content:'';position:absolute;pointer-events:none;
  top:-40px;right:-180px;width:420px;height:420px;
  border:1px solid var(--gold);border-radius:50%;
  opacity:.16;
}
@media(max-width:900px){main.wrap::before{width:260px;height:260px;right:-130px;top:-30px;opacity:.13}}

/* a single hairline anchor above every section heading */
.head .eyebrow{position:relative;padding-left:34px}
.head .eyebrow::before{
  content:'';position:absolute;left:0;top:50%;width:22px;height:1px;background:var(--gold);
}

/* ── Section label inside a card ────────────────────────── */
.card-h{
  font-family:Inter,sans-serif;font-weight:400;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--text-2);
  margin-bottom:var(--s4);
}

/* ── Coach row · the two things reached for mid-week ────── */
.coach-row{
  display:flex;flex-wrap:wrap;gap:var(--s4);
  margin:0 0 var(--s8);
}

/* ── Calendar grid ──────────────────────────────────────── */
.cal-months{display:grid;gap:var(--s7);margin-bottom:var(--s8)}
@media(min-width:820px){.cal-months{grid-template-columns:1fr 1fr;gap:var(--s8)}}

.cal-dow{
  display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1);
  font-family:Inter,sans-serif;font-size:10px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);
  text-align:center;margin-bottom:var(--s3);
}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1)}
.cal-cell{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:4px;padding:0;
  font-family:Inter,sans-serif;font-size:13px;font-weight:400;
  color:var(--text-2);font-variant-numeric:lining-nums tabular-nums;
}
.cal-empty{visibility:hidden}
.cal-num{line-height:1}

.cal-has{cursor:pointer;transition:border-color var(--micro),background-color var(--micro),color var(--micro)}
.cal-other{border:1px solid var(--hair-gold);color:var(--text)}
.cal-other:hover{border-color:var(--gold)}
.cal-live{background:var(--gold);color:var(--on-gold);font-weight:500}
.cal-retreat{border:1px solid var(--gold);color:var(--gold);background:none}
:root[data-theme="light"] .cal-retreat{color:var(--gold-dp);border-color:var(--gold-dp)}
.cal-retreat:hover{background:var(--bg-2)}
.cal-live:hover{background:var(--gold-lt)}
.cal-past{opacity:.4}
.cal-today{box-shadow:inset 0 0 0 1px var(--text-2)}
.cal-has:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.cal-key{display:flex;flex-wrap:wrap;gap:var(--s6);margin-bottom:var(--s8)}
.cal-key-item{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--text-2)}
.cal-swatch{width:14px;height:14px;border-radius:3px;display:inline-block}
.cal-swatch-live{background:var(--gold)}
.cal-swatch-other{border:1px solid var(--hair-gold)}
.cal-swatch-retreat{border:1px solid var(--gold)}

.ev-flash{background:var(--bg-2);border-radius:8px}

/* ── Profile ────────────────────────────────────────────── */
.photo-row{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.avatar{
  width:96px;height:96px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--hair-gold);background:var(--bg-3);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;color:var(--gold);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

.field-grid{display:grid;gap:var(--s5);margin-bottom:var(--s6)}
@media(min-width:720px){.field-grid{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6)}}
.field-grid .field{max-width:none;margin-top:0}

/* ── Questionnaire ──────────────────────────────────────── */
.q-section{margin-bottom:var(--s8)}
.q-section:last-of-type{margin-bottom:var(--s6)}

.scale-row{margin-bottom:var(--s6);max-width:580px}
.scale-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4)}
.scale-head label{margin-bottom:0}
.scale-val{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:28px;line-height:1;
  color:var(--gold);font-variant-numeric:lining-nums tabular-nums;
}
:root[data-theme="light"] .scale-val{color:var(--text)}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:28px;background:none;border:0;padding:0;margin-top:var(--s2);
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--hair)}
input[type=range]::-moz-range-track{height:2px;background:var(--hair)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;background:var(--gold);
  border:0;margin-top:-10px;cursor:pointer;
  transition:transform var(--micro);
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--gold);border:0;cursor:pointer;
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.center{text-align:center}

.spin{width:20px;height:20px;border:1px solid var(--hair);border-top-color:var(--gold);border-radius:50%;animation:sp 1s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── Motion · §7 ────────────────────────────────────────── */
/* Fade-up on scroll: 24px translate, opacity 0→1, 60ms stagger.
   Only ever dimmed while the script is alive and driving it. */
/* Fade-up on scroll: DESIGN.md §7: 24px translate, opacity 0 -> 1,
   60ms stagger, macro easing.

   Written so that NO resting rule anywhere holds content at opacity 0.
   A block is fully visible by default; entering the viewport plays a
   500ms keyframe that always completes. Three separate live failures
   came from the older pattern where CSS dimmed everything and JS was
   responsible for undimming it: if that JS missed even one element,
   the element stayed invisible. It cannot happen in this shape. */
[data-reveal].in{
  animation:fu var(--macro) both;
  animation-delay:calc(var(--i,0) * 60ms);
}

.fade{animation:fu var(--macro) both}

/* Entrance motion is the book's 24px rise, and nothing else.
   Opacity is deliberately NOT animated here. Three separate live
   failures in this project ended with a container stuck at opacity 0
   and its content invisible; the only durable fix is that no entrance
   animation anywhere touches opacity. The rise alone reads as arrival. */
@keyframes fu{from{transform:translateY(24px)}to{transform:none}}

/* ── Admin extras ───────────────────────────────────────── */
.adm-grid{display:grid;gap:var(--s4)}
@media(min-width:900px){.adm-grid-2{grid-template-columns:1fr 1fr}}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
details.card{padding:0}
details.card>summary{
  padding:var(--s5) var(--s6);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:44px;
}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
details.card>div{padding:0 var(--s6) var(--s6)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px 9px;border-bottom:1px solid var(--hair)}
th{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);font-weight:400}

/* ── Responsive · §3 §4 ─────────────────────────────────── */
@media(max-width:900px){
  .wrap{padding:0 40px}
  main.wrap{padding:var(--s8) 40px var(--s9)}
  .top-in{padding:0 40px}
}
@media(max-width:760px){
  body{font-size:16px}
  h1{font-size:36px}h2{font-size:28px}h3{font-size:22px}
  section.fade > .head h1{font-size:44px;line-height:1.06}
  .wrap{padding:0 var(--s5)}
  main.wrap{padding:var(--s8) var(--s5) 80px}
  section+section{margin-top:80px}
  .head{margin-bottom:var(--s6)}
  .card{padding:var(--s5)}
  .top-in{
    height:auto;padding:14px var(--s5) 10px;
    flex-direction:column;align-items:flex-start;gap:10px;
  }
  nav.tabs{width:100%;gap:var(--s5)}
  .theme-btn{position:absolute;top:12px;right:var(--s5);margin:0}
  .btn{padding:16px 24px}          /* 46px tall: keeps the 44px tap target */
  .btn::after{left:24px;right:24px}
  .btn-sm{padding:15px 22px}
  .btn-sm::after{left:22px;right:22px}
  .ev{gap:var(--s4);padding:var(--s5) 0}
  .ev-date{flex-basis:58px}
  .ev-day{font-size:30px}
  .prog{padding:var(--s5)}
  .prog-dots{gap:var(--s2)}
  .foot-links{gap:var(--s5)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal].in{animation:none}
}

/* ── required-field marker ─────────────────────────────── */
.req{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-mute);margin-left:8px;
}

/* ── discussion ────────────────────────────────────────── */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.cm{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--hair)}
.cm:first-child{border-top:0;padding-top:0}
.cm-av{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--hair-gold);color:var(--gold);
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.06em;
}
.cm-main{min-width:0;flex:1}
.cm-meta{font-family:var(--sans);font-size:13px;margin:0 0 6px}
.cm-body{margin:0;font-size:15px;line-height:1.65;overflow-wrap:anywhere}
.cm-del{
  margin-top:10px;padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-mute);
}
.cm-del:hover{color:var(--text-2)}
.cm-del:disabled{opacity:.4;cursor:default}

/* ── 5D profile ────────────────────────────────────────── */
.fived{margin:var(--s7) 0}
.fived-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap;
}
.fived-doc{
  margin-top:var(--s5);border:1px solid var(--hair-gold);background:var(--bg-3);
  border-radius:4px;overflow:hidden;
}
.fived-doc iframe{display:block;width:100%;height:min(78vh,860px);border:0}
.fived-doc img{display:block;width:100%;height:auto}
.fived-wait{
  margin-top:var(--s5);padding:var(--s5);border-radius:4px;
  border:1px solid var(--hair);background:var(--bg-2);
}
.fived-need{
  margin:12px 0 0;padding:0;list-style:none;
  font-family:var(--sans);font-size:13px;color:var(--text-2);
}
.fived-need li{padding:6px 0 6px 18px;position:relative}
.fived-need li::before{
  content:"";position:absolute;left:0;top:14px;
  width:6px;height:1px;background:var(--gold);
}
@media (max-width:640px){
  .fived-doc iframe{height:70vh}
}

/* ── progress rail ─────────────────────────────────────────
   Six weeks, six lengths of one bar. Empty reads as the dark and
   done reads as the gold, in both themes: the empty colour is mixed
   from the text colour, so it is a faint light on navy and a faint
   dark on pearl rather than a grey that disappears in one of them. */
.rail{display:flex;gap:6px;width:100%}
.rail-seg{
  position:relative;flex:1 1 0;height:6px;border-radius:2px;overflow:hidden;
  background:color-mix(in srgb, var(--text) 14%, transparent);
}
.rail-seg::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
}
.rail-seg.lit::after{
  animation:rail-fill 640ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--i, 0) * 90ms);
}
@keyframes rail-fill{to{transform:scaleX(1)}}

/* the newest length keeps a slow breath, so the bar reads as alive */
.rail-seg.edge::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--gold-lt);
  opacity:0;animation:rail-breath 3.2s ease-in-out 1.2s infinite;
}
@keyframes rail-breath{0%,100%{opacity:0}50%{opacity:.5}}

/* on top of the video the rail is the first thing in the spotlight */
.spotlight > .rail{margin-bottom:14px}

@media (prefers-reduced-motion:reduce){
  .rail-seg.lit::after{animation:none;transform:scaleX(1)}
  .rail-seg.edge::before{animation:none;opacity:0}
}

/* ── The Mirror ─────────────────────────────────────────── */
/* Week 0 and week 6 on the same wording. The card sits above the week so it
   is the first thing seen, and shrinks to one line once it is done. */

.mirror-todo{border-color:var(--hair-gold)}
.mirror-done{padding-top:var(--s4);padding-bottom:var(--s4)}

/* A slider nobody has touched shows its number in the muted tone, so
   "move every slider" is visible rather than only enforced at submit. */
.scale-val.untouched{color:var(--text-mute)}
.scale-ends{
  display:flex;justify-content:space-between;gap:var(--s4);
  font-size:12px;line-height:1.4;color:var(--text-2);margin-top:var(--s1);
}
.scale-ends span{max-width:46%}
.scale-ends span:last-child{text-align:right}

/* choice: one row of outline chips, no fills until chosen */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);max-width:580px}
.chip{
  font-family:inherit;font-size:14px;line-height:1;
  padding:11px var(--s4);border:1px solid var(--hair);background:none;
  color:var(--text-2);cursor:pointer;transition:all var(--micro);
}
.chip:hover{border-color:var(--hair-gold);color:var(--text)}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.chip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* consent: four rows, radio left, one line of plain explanation under each */
.perm{max-width:580px}
.perm-row{
  display:flex;gap:var(--s3);align-items:flex-start;
  padding:var(--s3) 0;border-top:1px solid var(--hair);cursor:pointer;margin:0;
}
.perm-row:first-child{border-top:0}
.perm-row input{margin-top:3px;flex:0 0 auto;accent-color:var(--gold)}
.perm-row span{display:block}
.perm-row b{display:block;font-weight:500;font-size:15px;color:var(--text)}
.perm-row em{display:block;font-style:normal;font-size:13px;line-height:1.5;color:var(--text-2);margin-top:2px}

/* the five composites, after she sends it */
.scores{display:grid;gap:var(--s5)}
.score{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);align-items:baseline}
.score .lbl{font-size:20px;color:var(--text)}
.score .n{font-size:26px;color:var(--gold);font-variant-numeric:lining-nums tabular-nums;text-align:right}
.score .bar{grid-column:1/-1;height:2px;background:var(--hair);display:block}
.score .bar i{display:block;height:100%;background:var(--gold);transition:width var(--macro)}
.score .desc{grid-column:1/-1}

.mirror-pledge{border-left:1px solid var(--hair-gold)}

/* Mirror · admin. The wall is for reading thirty answers in one pass:
   a column layout so no answer is truncated and none looks more important
   than the next. */
.wall{columns:2;column-gap:var(--s5)}
@media(max-width:760px){.wall{columns:1}}
.wall-q{
  break-inside:avoid;display:inline-block;width:100%;
  padding:var(--s4) 0;border-top:1px solid var(--hair);
}
.wall-q:first-child{border-top:0;padding-top:0}
/* Week four is the quiet-drop week: the column gets its own ground. */
th.wk4,td.wk4{background:rgba(201,168,118,.06)}

/* ── the Mirror, step by step ──────────────────────────── */
.m-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin-bottom:14px;flex-wrap:wrap;
}
.m-count{
  margin:0;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
}
.m-dots{display:flex;gap:6px;flex-shrink:0}
.m-dot{
  width:6px;height:6px;border-radius:50%;
  background:color-mix(in srgb, var(--text) 18%, transparent);
  transition:background var(--micro), transform var(--micro);
}
.m-dot.done{background:var(--gold)}
.m-dot.now{background:var(--gold);transform:scale(1.6)}

.m-step{animation:m-in 260ms cubic-bezier(.2,.8,.2,1) both}
@keyframes m-in{from{transform:translateY(10px)}to{transform:none}}

.m-nav{
  display:flex;align-items:center;gap:var(--s4);
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--hair);
}
.m-nav #m-next, .m-nav #m-submit{margin-left:auto}

@media (max-width:640px){
  .m-head{gap:10px}
  .m-count{font-size:10px}
  /* thumb-reachable and full width, so nobody hunts for the button */
  .m-nav{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .m-nav .btn{width:100%;justify-content:center}
  .m-nav #m-next, .m-nav #m-submit{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .m-step{animation:none}
}

/* Sliders on a phone: a 28px strip is a thin thing to catch with a thumb
   while standing on a train, so the touch area grows to 44px and the handle
   with it. The track stays a hairline: only the target gets bigger. */
@media (max-width:640px){
  input[type=range]{height:44px}
  input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-12px}
  input[type=range]::-moz-range-thumb{width:26px;height:26px}
  .scale-head{gap:12px}
  .scale-val{font-size:24px}
  .perm-row{padding:14px 0}
  .perm-row input{width:20px;height:20px}
}

/* The four tabs did not fit a 390px phone: the row was 420px wide inside a
   342px box, and instead of scrolling inside itself it pushed the document,
   so the whole page slid sideways under a thumb. Two fixes, because either
   alone is fragile: the type tightens until all four fit, and the header
   clips so no future label can push the page again. */
.top-in{overflow-x:clip}
@media (max-width:420px){
  nav.tabs{gap:16px}
  nav.tabs a{font-size:11px;letter-spacing:.10em}
}

/* The decorative circle hangs 130px past the right edge by design. It was
   also making the document 520px wide on a 390px phone, which is how a
   whole page ends up swipeable sideways. Clip it at the container: the
   circle still bleeds off the edge, it just no longer drags the page with it.
   `clip` rather than `hidden` so nothing inside loses sticky positioning. */
main.wrap{overflow-x:clip}

/* ── the consent controls ──────────────────────────────── */
.perm-row input[type=radio],
.perm-row input[type=checkbox]{
  width:18px;height:18px;flex:0 0 18px;
  margin:5px 0 0;padding:0;border:0;background:none;
  accent-color:var(--gold);cursor:pointer;
}

/* ── reading size in the questions ─────────────────────────
   The question is the most important text on the page and it was set at
   13px in secondary grey: the size of a form hint. Thirty-four of those
   is a squint, and this is the one form where a careless answer costs the
   whole measurement. The prompt now reads at the size of body copy, in the
   primary colour; the helper sits under it, quieter but still readable. */
#mirror-form label,
#profile-form label{
  font-size:17px;line-height:1.45;letter-spacing:0;
  color:var(--text);margin-bottom:10px;
}
#mirror-form label .muted,
#profile-form label .muted{font-size:15px}
#mirror-form .hint,
#profile-form .hint{font-size:15px;line-height:1.55}
#mirror-form .scale-ends{font-size:13px;line-height:1.45}
#mirror-form .q-section>.small{font-size:16px;line-height:1.6}
#mirror-form textarea{font-size:17px;line-height:1.6}
.perm-row b{font-size:17px;line-height:1.4}
.perm-row em{font-size:15px;line-height:1.55;margin-top:4px}

@media (max-width:640px){
  #mirror-form label,
  #profile-form label{font-size:16px}
  #mirror-form textarea{font-size:16px}
  .perm-row b{font-size:16px}
}

/* ── onboarding card ───────────────────────────────────────
   Three rows on the home page that say what to do now, in
   order. Each leaves the card when it is done, so the card is
   always a list of what is still open: never a scoreboard. */
.ob{border-color:var(--hair-gold)}
.ob-step{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px 0;border-top:1px solid var(--hair);
}
.ob-step:first-of-type{border-top:0;padding-top:0}
.ob-n{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--hair-gold);color:var(--gold);
  font-size:13px;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.ob-body{flex:1 1 auto;min-width:0}
.ob-title{font-size:17px;line-height:1.4;color:var(--text);margin:0 0 6px}
.ob-line{font-size:15px;line-height:1.6;color:var(--text-2);margin:0 0 12px;max-width:56ch}
.ob-cta{font-size:14px}
@media (max-width:640px){
  .ob-step{gap:12px;padding:18px 0}
  .ob-n{flex-basis:26px;width:26px;height:26px;font-size:12px}
  .ob-title{font-size:16px}
}

/* ── what the 5D profile is ────────────────────────────────
   She is asked for her birth hour before she has ever seen one
   of these. So the page shows her the shape of the document
   and what it is worth, and then asks. */
.fived-explain{
  display:grid;grid-template-columns:1fr .85fr;gap:var(--s6);
  align-items:start;margin-top:var(--s5);
}
.fived-what .card-h{margin-bottom:14px}
.fived-list{list-style:none;padding:0;margin:0}
.fived-list li{
  position:relative;padding:0 0 14px 20px;
  font-size:15px;line-height:1.6;color:var(--text-2);max-width:54ch;
}
.fived-list li::before{
  content:'';position:absolute;left:0;top:10px;
  width:6px;height:1px;background:var(--gold);
}
.fived-list b{color:var(--text);font-weight:400}
.fived-worth{
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--hair);
  font-size:15px;line-height:1.6;color:var(--text-2);
}
.fived-price{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:30px;line-height:1;color:var(--gold);
}

/* the miniature. A drawing of the format, not a real profile :
   so it is decorative to a screen reader and captioned to eyes. */
.fived-preview{margin:0}
.fp-page{
  border:1px solid var(--hair);border-radius:8px;
  background:var(--bg-3);padding:18px 16px;overflow:hidden;
}
.fp-hero{display:flex;gap:14px;align-items:center;padding-bottom:16px}
.fp-orbit{
  position:relative;flex:0 0 62px;width:62px;height:62px;
  border-radius:50%;border:1px solid var(--hair-gold);
}
.fp-orbit i{
  position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;
  border-radius:50%;background:var(--gold);
}
.fp-orbit span{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--text-2);opacity:.75;
}
.fp-orbit .p1{left:50%;top:-3px;margin-left:-2.5px}
.fp-orbit .p2{right:-3px;top:38%}
.fp-orbit .p3{left:22%;bottom:-3px}
.fp-orbit .p4{left:-3px;top:56%}
.fp-hero-txt{min-width:0}
.fp-hero-txt b{
  display:block;font-size:11px;letter-spacing:.06em;
  color:var(--text);font-weight:400;
}
.fp-hero-txt em{
  display:block;font-size:10.5px;line-height:1.5;margin-top:4px;
  color:var(--text-2);font-style:normal;
}
.fp-sec{padding-top:14px;border-top:1px solid var(--hair)}
.fp-sec u{
  display:block;text-decoration:none;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:8px;
}
.fp-card{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--hair);border-radius:4px;
  padding:7px 9px;margin-bottom:6px;
}
.fp-card b{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:14px;font-weight:400;color:var(--text);
}
.fp-card i{font-style:normal;font-size:12px;color:var(--gold)}
.fp-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.fp-tabs b{
  font-size:9.5px;letter-spacing:.05em;font-weight:400;
  color:var(--text-2);padding-bottom:3px;border-bottom:1px solid transparent;
}
.fp-tabs b.on{color:var(--gold);border-bottom-color:var(--gold)}
.fp-cells{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.fp-cells s{
  text-decoration:none;font-size:9px;letter-spacing:.04em;
  color:var(--text-2);border:1px solid var(--hair);border-radius:4px;
  padding:9px 6px 22px;
}
.fived-preview figcaption{margin-top:10px;font-size:13px}

@media (max-width:820px){
  .fived-explain{grid-template-columns:1fr;gap:var(--s5)}
  .fived-preview{max-width:420px}
}

/* An HTML profile is a whole page with its own scroll, so it gets more
   room than a PDF page does. It still has "Open in a tab" above it for
   anyone who wants the full width. */
.fived-doc.is-html iframe{height:min(88vh,1100px)}
@media (max-width:640px){ .fived-doc.is-html iframe{height:78vh} }

/* Five tabs instead of four. At phone widths they have to fit without
   the row scrolling sideways, which it did the last time a tab was added. */
@media (max-width:520px){ nav.tabs{gap:14px} nav.tabs a{font-size:11px;letter-spacing:.08em} }
@media (max-width:420px){ nav.tabs{gap:10px} nav.tabs a{font-size:10px;letter-spacing:.05em} }
@media (max-width:360px){ nav.tabs{gap:8px}  nav.tabs a{font-size:9.5px;letter-spacing:.03em} }

/* The profile frame is empty until the document arrives, a second or so
   after the page draws. Empty frames paint white, which reads as broken. */
#fived-frame{background:var(--bg-3)}

/* ── "Watched" ─────────────────────────────────────────────
   The button that closes a lesson. It sits under the video, full
   width on a phone, and it is the largest control on the page,
   because the old one was small, grey, below the field work and
   almost nobody pressed it. Done state is gold-on-navy inverted
   to a quiet outline: still obviously a button you can press
   again, but no longer shouting for attention. */
.watched{margin:var(--s5) 0 var(--s2);text-align:center}
.btn-watched{
  font-size:14px;letter-spacing:.14em;padding:18px 46px;min-width:280px;
}
.watched-hint{margin-top:12px;max-width:46ch;margin-left:auto;margin-right:auto}
.watched.is-done .btn-watched{
  background:transparent;color:var(--gold);
  border:1px solid var(--hair-gold);
  box-shadow:none;filter:none;
}
.watched.is-done .btn-watched:hover{background:var(--bg-2);color:var(--gold-lt);box-shadow:none;filter:none}
.watched .tick{margin-right:10px;font-size:15px}
@media (max-width:640px){
  .btn-watched{width:100%;min-width:0;padding:18px 20px}
}
/* The base button carries a decorative gold hairline under it, invisible
   while the button is gold and a stray line the moment it is not. */
.watched.is-done .btn-watched::after{display:none}

/* ── a watched lesson, seen from across the list ────────────
   The old signal was the words "complete" in small grey type at the
   end of a muted line, which is not a signal. */
.lesson-meta{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lesson-meta > span{display:inline-flex;align-items:center}
.lesson-meta > span + span::before{
  content:'·';margin-right:10px;color:var(--text-2);opacity:.7;
}
.lesson .seen{color:var(--gold);letter-spacing:.06em}
.lesson .tick{margin-right:6px}
.lesson.is-seen{border-color:var(--hair-gold)}
.lesson.is-seen .wk-n{
  color:var(--gold);
  border:1px solid var(--hair-gold);border-radius:50%;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
}
.lesson-count{
  margin-top:18px;color:var(--gold);letter-spacing:.06em;
}
.lesson-count .tick{margin-right:8px}
@media (max-width:640px){
  .lesson.is-seen .wk-n{width:42px;height:42px}
}

/* ─────────────────────────────────────────────────────────────
   COMMUNITY · the feed, a post, the library
   Built on the same tokens as the rest: no gradients, no shadows,
   8px on cards, gold as emphasis and never as decoration.
   ───────────────────────────────────────────────────────────── */

.feed{display:flex;flex-direction:column;gap:var(--s4)}

.post{
  background:var(--bg-2);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:var(--s6);
}
.post-pinned{border-color:var(--hair-gold)}

.post-top{
  display:flex;align-items:center;gap:var(--s3);
  flex-wrap:wrap;margin-bottom:var(--s4);
}

.post-title{font-size:clamp(22px,3vw,30px);line-height:1.2;margin:0}
.post-title a{color:var(--text);text-decoration:none}
.post-title a:hover{color:var(--gold)}
.post-title a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.post-preview{margin-top:var(--s4)}
/* The preview is a window on the post, not the post. Three lines of the
   body and then the eye stops: that is what the fade is for, and it is
   the one place in this stylesheet where a gradient is allowed, because
   it is doing work rather than decorating. */
.post-preview{
  position:relative;max-height:150px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);
}
.post-preview .md p:first-child{margin-top:0}

.post-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4);
}
.post-lock{margin-top:var(--s4)}

.post-cover{
  border-radius:8px;overflow:hidden;border:1px solid var(--hair);
  margin-bottom:var(--s6);
}
.post-cover img{display:block;width:100%;height:auto}

.post-body{margin-bottom:var(--s6)}
.post-body .md p,
.post-body .md ul,
.post-body .md ol,
.post-body .md h4{max-width:64ch}
.post-body .md h4{margin-top:var(--s7)}
.post-body .md li{margin-bottom:10px}

.react-row{display:flex;gap:var(--s3);margin-bottom:var(--s6)}

.badge-founding{
  border-color:var(--hair-gold);color:var(--gold);
  vertical-align:middle;margin-left:var(--s3);
}

/* The membership card. It stands out by border, not by fill: a gold
   block behind the one thing asking for money reads as an ad. */
.join-card{border-color:var(--hair-gold);margin-bottom:var(--s6)}

/* ── Library ────────────────────────────────────────────── */
.lib-folder{margin-bottom:var(--s7)}
.lib-folder>h3{font-size:clamp(20px,2.5vw,26px)}
.lib-list{margin-top:var(--s4);border-top:1px solid var(--hair)}

.lib-item{
  border-bottom:1px solid var(--hair);
  padding:var(--s4) 0;
}
.lib-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  cursor:pointer;list-style:none;
}
.lib-item summary::-webkit-details-marker{display:none}
.lib-item summary::after{
  content:'+';font-family:Inter,sans-serif;font-size:20px;
  color:var(--text-2);transition:transform var(--micro),color var(--micro);
}
.lib-item[open] summary::after{transform:rotate(45deg);color:var(--gold)}
.lib-item summary:hover h4{color:var(--gold)}
.lib-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.lib-item h4{margin:0;font-size:18px;transition:color var(--micro)}
.lib-item .hint{margin-top:var(--s1)}

.lib-locked{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  opacity:.45;
}
.lib-locked h4{margin:0;font-size:18px}

@media (prefers-reduced-motion:reduce){
  .lib-item summary::after{transition:none}
}

@media (max-width:640px){
  .post{padding:var(--s5)}
  .post-preview{max-height:120px}
}

/* ─────────────────────────────────────────────────────────────
   THE MEMBERSHIP PAGE
   The one page in the hub that is asking for something, so it is
   also the one page allowed to breathe more than the others: wider
   rhythm, bigger type, more air between the blocks. Still no
   gradients on cards, still no shadows, still gold as emphasis.
   ───────────────────────────────────────────────────────────── */

.join-hero{
  text-align:center;
  padding:var(--s7) 0 var(--s8);
  border-bottom:1px solid var(--hair);
  margin-bottom:var(--s8);
}
.join-h1{
  font-size:clamp(30px,5.5vw,54px);
  line-height:1.12;
  margin:var(--s4) auto var(--s5);
  max-width:24ch;
}
.join-lede{margin:0 auto;max-width:52ch}
.join-now{margin-top:var(--s5)}
.join-now strong{color:var(--gold);font-weight:400}

/* Four pillars. Two columns on a laptop, one on a phone, and the
   numbers are the only ornament on the page. */
.join-pillars{
  display:grid;gap:var(--s6);
  margin-bottom:var(--s8);
}
@media(min-width:760px){ .join-pillars{grid-template-columns:1fr 1fr;gap:var(--s7) var(--s6)} }

.join-pillar h3{font-size:clamp(19px,2.4vw,23px);margin:var(--s3) 0 var(--s2)}
.join-num{
  font-family:Inter,sans-serif;font-size:12px;font-weight:400;
  letter-spacing:.2em;color:var(--gold);
  font-feature-settings:'lnum' 1;
}

.join-block{
  padding-top:var(--s7);
  border-top:1px solid var(--hair);
  margin-bottom:var(--s8);
}
.join-block>h2{font-size:clamp(24px,3.4vw,34px);margin-top:var(--s3);max-width:22ch}
.join-sub{margin-top:var(--s3);max-width:52ch}

/* The anatomy of a forecast. A numbered spine, because the order is
   the product: the misread has to land before the protocol does. */
.anatomy{list-style:none;counter-reset:step;margin-top:var(--s6);padding:0}
.anatomy li{
  counter-increment:step;
  position:relative;
  padding:0 0 var(--s5) var(--s7);
  border-left:1px solid var(--hair);
  margin-left:12px;
}
.anatomy li:last-child{border-left-color:transparent;padding-bottom:0}
.anatomy li::before{
  content:counter(step);
  position:absolute;left:-13px;top:-2px;
  width:26px;height:26px;border-radius:50%;
  background:var(--bg);border:1px solid var(--hair-gold);
  color:var(--gold);font-family:Inter,sans-serif;font-size:12px;
  font-feature-settings:'lnum' 1;
  display:flex;align-items:center;justify-content:center;
}
.anatomy h4{margin:0 0 var(--s2);font-size:19px}

.join-two{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media(min-width:760px){ .join-two{grid-template-columns:1fr 1fr} }

.join-rules .pull{margin-top:var(--s4)}

/* Price. Two cards, and the yearly one carries the gold hairline,
   because that is the one that is worth more to both sides. */
.join-price{display:grid;gap:var(--s4);margin-bottom:var(--s8)}
@media(min-width:760px){ .join-price{grid-template-columns:1fr 1fr} }

.price-card{display:flex;flex-direction:column}
.price-card .btn{align-self:flex-start;margin-top:auto}
.price-card-lit{border-color:var(--hair-gold)}

.price{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(44px,7vw,64px);line-height:1;
  font-feature-settings:'lnum' 1;
  margin:var(--s3) 0 var(--s4);
}
.price span{
  display:block;
  font-family:Inter,sans-serif;font-size:13px;font-weight:300;
  letter-spacing:.04em;color:var(--text-2);
  margin-top:var(--s3);
}

.join-founding{border-color:var(--hair-gold)}
.join-founding h2{font-size:clamp(24px,3.4vw,32px)}

.join-honest .md p{max-width:58ch}

@media(max-width:640px){
  .join-hero{padding:var(--s5) 0 var(--s6);margin-bottom:var(--s6)}
  .join-block{padding-top:var(--s6);margin-bottom:var(--s6)}
  .anatomy li{padding-left:var(--s6)}
}

/* The global `.card + .card` spacing rule is for cards stacked in a
   column. Inside these two grids the gap already does that job, and
   the extra margin landed on the second card only, so the pair sat at
   different heights and the two buttons stopped lining up. */
.join-two .card + .card,
.join-price .card + .card{margin-top:0}

/* Gold is a dark-mode accent. On the pearl background it drops to
   roughly 2:1, which is fine for a hairline and not fine for words.
   Light mode therefore uses the deeper gold for the small numerals,
   the same swap the week numbers already make, and drops gold
   entirely for the one line that carries real information. */
:root[data-theme="light"] .join-num{color:var(--gold-dp)}
:root[data-theme="light"] .anatomy li::before{color:var(--gold-dp);border-color:var(--gold-dp)}
:root[data-theme="light"] .join-now strong{color:var(--text)}

/* ─────────────────────────────────────────────────────────────
   PROGRAMME HUB · the redesign
   Less text, more graphics. The home page is a dashboard you read
   at a glance; the lesson itself lives on its own screen.
   Everything below uses the tokens, so light mode inverts with
   the rest of the system and nothing is hardcoded navy.
   ───────────────────────────────────────────────────────────── */

/* ── app bar: the six weeks, always ─────────────────────── */
.spine{display:flex;align-items:center;gap:var(--s4);flex:0 0 auto;margin-left:var(--s3)}
/* the hero already carries a graphic on the right; the decorative ring
   that sits behind every other screen would collide with the arc */
main.wrap:has(.hero)::before{display:none}
.spine-bars{display:flex;gap:4px}
.spine-bars i{width:22px;height:4px;border-radius:2px;background:var(--hair);transition:background-color var(--micro)}
.spine-bars i.open{background:var(--hair-gold)}
.spine-bars i.done{background:var(--gold)}
.spine-lbl{
  font-family:Inter,sans-serif;font-size:11px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;
}
@media(max-width:1100px){.spine{display:none}}

/* ── hero ───────────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) 520px;
  gap:var(--s8);align-items:center;
}
.hero-h{font-size:64px;line-height:1.04;letter-spacing:-0.02em;max-width:15ch;text-wrap:balance;margin-bottom:var(--s3)}
.hero-sub{font-size:30px;font-style:italic;color:var(--text-2);line-height:1.25}
:root[data-theme="light"] .hero-sub{color:var(--text-2)}
.hero-line{margin-top:var(--s6);font-size:18px;line-height:1.7;color:var(--text-2);max-width:44ch}
.hero-cta{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s7);flex-wrap:wrap}
.hero-arc{min-width:0}

/* a gold eyebrow with a gold dot, replacing the generic rule */
.gold-eyebrow{color:var(--gold);display:flex;align-items:center;gap:var(--s3)}
.gold-eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto;
}
.head .gold-eyebrow{padding-left:0}
.head .gold-eyebrow::before{position:static;width:6px;height:6px;border-radius:50%;background:var(--gold)}

.play{
  display:inline-block;width:0;height:0;
  border-left:9px solid currentColor;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}

.arc{width:100%;height:auto;display:block;overflow:visible}
.arc-lbl{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.16em}
.arc-date{font-family:Inter,sans-serif;font-size:10px;letter-spacing:.08em;opacity:.75}

/* ── the three instruments ──────────────────────────────── */
.insts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--hair);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  margin-top:var(--s8);
}
.inst{
  background:var(--bg);padding:var(--s6) var(--s5);
  display:flex;align-items:center;gap:var(--s5);
  text-decoration:none;color:inherit;
  transition:background-color var(--micro);
}
.inst:hover{background:var(--bg-2)}
.inst:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.inst-body{min-width:0;flex:1}
.inst-h{font-size:24px;line-height:1.2;margin:var(--s2) 0 6px}
.inst-sub{font-size:13px;line-height:1.5;color:var(--text-2)}
.ring{flex:0 0 auto}
.ring-t{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;fill:var(--text)}
.mirror-pair{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
.mirror-pair i{width:13px;height:13px;border-radius:50%;border:1px solid var(--hair-gold);display:block}
.mirror-pair i.on{background:var(--gold);border-color:var(--gold)}
.mirror-pair b{width:26px;height:1px;background:var(--hair);display:block}

/* ── the six weeks ──────────────────────────────────────── */
.wk-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.wk-card{
  background:var(--bg-3);border:1px solid var(--hair);border-radius:6px;
  padding:var(--s5);min-height:172px;
  display:flex;flex-direction:column;justify-content:space-between;
  text-decoration:none;color:inherit;
  transition:border-color var(--micro),transform var(--micro),background-color var(--micro);
}
a.wk-card:hover{border-color:var(--hair-gold);transform:translateY(-2px)}
a.wk-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wk-card.is-now{background:var(--bg-2);border-color:var(--hair-gold)}
.wk-card.is-locked{opacity:.55}
.wk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.wk-num{font-size:30px;line-height:1;color:var(--gold)}
.wk-card.is-locked .wk-num{color:var(--text-2);opacity:.6}
.wk-dot{width:8px;height:8px;border-radius:50%;background:var(--hair)}
.wk-dot.now,.wk-dot.done{background:var(--gold)}
.wk-title{font-size:18px;line-height:1.25}
.wk-card.is-locked .wk-title{color:var(--text-2)}
.wk-when{
  margin-top:var(--s3);font-family:Inter,sans-serif;font-size:10px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);
}
.wk-card.is-now .wk-when{color:var(--gold)}

/* ── lessons: the intro sits above the six ──────────────── */
.intro-card{
  display:flex;align-items:center;gap:var(--s5);
  background:var(--bg-2);border:1px solid var(--hair-gold);border-radius:8px;
  padding:var(--s6);text-decoration:none;color:inherit;
  transition:border-color var(--micro),transform var(--micro);
}
.intro-card:hover{transform:translateY(-2px)}
.intro-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.intro-card.is-seen{border-color:var(--hair)}
.intro-ring{
  flex:0 0 auto;width:64px;height:64px;border-radius:50%;
  border:1px solid var(--hair-gold);
  display:flex;align-items:center;justify-content:center;color:var(--gold);
}
.intro-card > div{flex:1;min-width:0}
.intro-card .arrow{color:var(--gold)}

/* ── the lesson screen ──────────────────────────────────── */
.week-head .hero-sub{margin-top:var(--s2)}

/* ── responsive ─────────────────────────────────────────── */
@media(max-width:1080px){
  .hero{grid-template-columns:1fr;gap:var(--s7)}
  .hero-h{font-size:52px}
  .hero-arc{max-width:560px}
  .wk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .insts{grid-template-columns:1fr;gap:1px}
  .inst{padding:var(--s5) 0}
}
@media(max-width:760px){
  .hero-h{font-size:40px;line-height:1.08}
  .hero-sub{font-size:22px}
  .hero-line{font-size:16px;margin-top:var(--s5)}
  .hero-cta{margin-top:var(--s6)}
  .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wk-card{min-height:142px;padding:var(--s4)}
  .wk-num{font-size:26px}
  .wk-title{font-size:16px}
  .intro-card{padding:var(--s5);gap:var(--s4)}
  .intro-ring{width:52px;height:52px}
  .inst-h{font-size:21px}
}

/* ── the lesson screen: four numbered pieces + the thread ─ */
.lesson-min{
  margin-top:var(--s4);
  font-family:Inter,sans-serif;font-size:12px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--text-2);
}
.week-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s8);align-items:start}
.week-main{min-width:0}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s5);padding-bottom:var(--s7)}
.step:last-child{padding-bottom:0}
.step-rail{display:flex;flex-direction:column;align-items:center;gap:10px}
.step-n{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--hair-gold);
  display:flex;align-items:center;justify-content:center;
  font-family:Inter,sans-serif;font-size:12px;color:var(--gold);
}
.step-n.is-gold{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.step-line{width:1px;flex:1;min-height:30px;background:var(--hair)}
.step-body{min-width:0}
.step-title{font-size:26px;line-height:1.25;margin:var(--s2) 0 var(--s3)}
.step-body .md{margin-top:var(--s3)}
.step-body audio{margin-top:var(--s4)}
.step-body .pull{margin-top:var(--s3)}

.fieldwork{border:1px solid var(--hair-gold);border-radius:8px;padding:var(--s6)}
.gold-h{color:var(--gold)}
.fieldwork-why{
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--hair);
  font-size:15px;color:var(--text-2);
}
.fieldwork-why .card-h{display:inline;margin-right:var(--s3)}

.materials{display:flex;gap:14px;flex-wrap:wrap}
.mat{
  display:flex;align-items:center;gap:14px;text-align:left;
  background:var(--bg-3);border:1px solid var(--hair);border-radius:6px;
  padding:14px 20px;color:inherit;text-decoration:none;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:300;
  transition:border-color var(--micro);
}
.mat:hover{border-color:var(--hair-gold)}
.mat:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.mat-i{color:var(--gold);font-size:18px;line-height:1}
.mat-t{display:block}
.mat .card-h{display:block;margin-top:2px}

.week-side{position:sticky;top:104px}
.week-side .card{margin-top:0}
.week-side #cm-list{max-height:none}

.intro-card{max-width:760px}

@media(max-width:1080px){
  .week-layout{grid-template-columns:1fr;gap:var(--s7)}
  .week-side{position:static}
}
@media(max-width:760px){
  .step{grid-template-columns:34px minmax(0,1fr);gap:var(--s4);padding-bottom:var(--s6)}
  .step-n{width:28px;height:28px;font-size:11px}
  .step-title{font-size:22px}
  .fieldwork{padding:var(--s5)}
  .materials{flex-direction:column}
  .mat{width:100%}
  .arc-lbl{font-size:17px;letter-spacing:.08em}
  .arc-date{display:none}
}
.step-body .watched{text-align:left;margin-top:var(--s4)}
.step-body .watched-hint{margin-left:0;margin-right:0}

/* Light mode: gold at small sizes measures about 2:1 on pearl, so every
   small gold label in the redesign steps down to the pressed tone. */
:root[data-theme="light"] .wk-num,
:root[data-theme="light"] .gold-eyebrow,
:root[data-theme="light"] .wk-card.is-now .wk-when,
:root[data-theme="light"] .step-n,
:root[data-theme="light"] .gold-h,
:root[data-theme="light"] .mat-i,
:root[data-theme="light"] .intro-ring{color:var(--gold-dp)}
:root[data-theme="light"] .wk-card.is-locked{opacity:.75}

/* The tab strip scrolls sideways once seven tabs stop fitting. A phone
   shows no scrollbar, so without this there is nothing to say that
   Calendar and My profile are further along. */
@media (max-width:760px){
  nav.tabs{
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
            mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
  }
}

/* ── The forecast post · §12 ────────────────────────────────
   A week is not a wall of text. Same furniture as the public
   page: the shape of the week, sections with their own eyebrow,
   a line worth stopping on, and seven days that read as seven. */
.fc-hero{margin:var(--s6) 0 var(--s7);max-width:64ch}
.fc-hero:has(.fc-top.has-audio){max-width:none}

/* the shape of the week and her voice, side by side */
.fc-top{margin-top:var(--s6)}
.fc-top-curve{min-width:0}
.fc-top.has-audio{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.95fr);
  gap:var(--s6);align-items:center;max-width:1000px;
}
.fc-top.has-audio .ap{margin:0;max-width:none}
@media (max-width:900px){
  .fc-top.has-audio{grid-template-columns:1fr;gap:var(--s5)}
}
.fc-stand{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;font-weight:300;font-size:26px;line-height:1.4;
  color:var(--text);
}
.fc-curve{display:block;width:100%;max-width:620px;height:auto}
.fc-base{stroke:var(--hair)}
.fc-dot{fill:var(--bg);stroke:var(--gold);stroke-width:1.5}
.fc-dot.is-end{fill:var(--gold)}
.fc-lab{font-family:Inter,sans-serif;font-size:10px;letter-spacing:.16em;fill:var(--text-2)}
.fc-lab.is-end{fill:var(--gold)}

.fc-body section.fc-sec{margin-top:var(--s8);max-width:64ch}
.fc-body section.fc-sec:first-child{margin-top:var(--s5)}
.fc-sec-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.fc-sec-h .eyebrow{font-size:11px;letter-spacing:.24em;color:var(--gold)}
.fc-sec-h .rule{width:36px;flex:0 0 36px}
.fc-body .fc-sec h2{font-size:30px;line-height:1.22;margin-bottom:var(--s5)}
.fc-body p{max-width:64ch}
.fc-body .pull{margin:var(--s6) 0;max-width:58ch}

.fc-days{margin-top:var(--s6);border-top:1px solid var(--hair);max-width:72ch}
.fc-day{
  display:grid;grid-template-columns:104px 1fr;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--hair);
}
.fc-day-n{
  font-family:Inter,sans-serif;font-size:11px;line-height:1.4;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding-top:6px;
}
.fc-day-b{font-size:16px;line-height:1.75;color:var(--text-2)}
.fc-day-b b{color:var(--text);font-weight:500}

@media (max-width:700px){
  .fc-day{grid-template-columns:1fr;gap:6px}
  .fc-day-n{padding-top:0}
  .fc-body .fc-sec h2{font-size:25px}
  .fc-stand{font-size:22px}
}

/* ── Her voice · §13 ────────────────────────────────────────
   One big button, her face inside a gold ring, a play triangle
   over it. The grey browser bar is gone. */
.ap{
  display:flex;align-items:center;gap:var(--s5);
  margin:var(--s7) 0;padding:var(--s5);
  border:1px solid var(--hair-gold);border-radius:18px;
  background:linear-gradient(180deg, rgba(201,168,118,.07), rgba(201,168,118,.02));
  max-width:64ch;
}
.ap audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.ap-face{
  position:relative;flex:0 0 auto;
  width:96px;height:96px;border-radius:50%;
  border:1px solid var(--hair-gold);
  background:var(--bg-2);
  padding:0;overflow:hidden;cursor:pointer;
  box-shadow:0 10px 30px -14px rgba(201,168,118,.55);
  transition:transform var(--micro), box-shadow var(--micro), border-color var(--micro);
  -webkit-tap-highlight-color:transparent;
}
.ap-face:hover{transform:translateY(-1px);border-color:var(--gold);box-shadow:0 14px 36px -14px rgba(201,168,118,.8)}
.ap-face:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* the triangle, and the two bars it becomes while playing */
.ap-ic{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:background-color var(--micro);
}
.ap-ic::before{
  content:'';display:block;
  width:0;height:0;margin-left:5px;
  border-left:22px solid var(--gold);
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
}
.ap.is-playing .ap-ic::before{
  margin-left:0;width:7px;height:26px;border:0;
  background:var(--gold);
  box-shadow:14px 0 0 0 var(--gold);
  transform:translateX(-7px);
}

.ap-meta{flex:1 1 auto;min-width:0}
.ap-kicker{
  font-family:Inter,sans-serif;font-size:10px;line-height:1;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
}
.ap-title{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:24px;line-height:1.2;color:var(--text);margin-top:8px;
}
.ap-bar{
  position:relative;height:4px;border-radius:2px;
  background:var(--hair);margin-top:14px;cursor:pointer;touch-action:none;
}
.ap-bar::after{content:'';position:absolute;inset:-12px 0;}
.ap-bar i{
  display:block;height:100%;width:0;border-radius:2px;
  background:var(--gold);transition:width .18s linear;
}
.ap-time{
  font-family:Inter,sans-serif;font-size:12px;letter-spacing:.06em;
  color:var(--text-2);margin-top:8px;font-variant-numeric:tabular-nums;
}
.ap-sep{opacity:.5;margin:0 2px}
.ap-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ap-rate{
  flex:0 0 auto;margin-top:8px;
  font-family:Inter,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.14em;color:var(--text-2);
  background:none;border:1px solid var(--hair);border-radius:100px;
  padding:5px 12px;cursor:pointer;
  transition:color var(--micro),border-color var(--micro);
  -webkit-tap-highlight-color:transparent;
}
.ap-rate:hover{color:var(--gold);border-color:var(--hair-gold)}
.ap-rate.is-fast{color:var(--gold);border-color:var(--hair-gold)}
.ap-rate:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (max-width:700px){
  .ap{gap:var(--s4);padding:var(--s4)}
  .ap-face{width:76px;height:76px}
  .ap-ic::before{border-left-width:18px;border-top-width:11px;border-bottom-width:11px}
  .ap.is-playing .ap-ic::before{width:6px;height:21px;box-shadow:11px 0 0 0 var(--gold);transform:translateX(-6px)}
  .ap-title{font-size:20px}
}

/* ── phone navigation ──────────────────────────────────────
   Seven tabs in a scrolling strip was the wrong shape for a phone:
   two of them sat off screen and the strip gave no sign of it. On a
   small screen the four sections used every week sit in a bar under
   the thumb, and the occasional ones live in a sheet behind More.
   Off by default until data-nav="bottom" is set, so this can be
   looked at on a real phone before the cohort gets it. */
.mnav{display:none}
.sheet,.sheet-back{display:none}

@media (max-width:760px){
  :root[data-nav="bottom"] nav.tabs{display:none}
  :root[data-nav="bottom"] .top-in{justify-content:space-between;align-items:center}
  :root[data-nav="bottom"] .theme-btn{display:none}

  :root[data-nav="bottom"] .mnav{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--bg-glass);backdrop-filter:blur(14px);
    border-top:1px solid var(--hair);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  :root[data-nav="bottom"] .mnav a,
  :root[data-nav="bottom"] .mnav button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;padding:9px 2px 8px;min-height:56px;
    background:none;border:0;cursor:pointer;
    font-family:inherit;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--text-2);text-decoration:none;-webkit-tap-highlight-color:transparent;
    transition:color var(--micro);
  }
  :root[data-nav="bottom"] .mnav svg{width:22px;height:22px;fill:none;
    stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
  :root[data-nav="bottom"] .mnav svg .fill{fill:currentColor;stroke:none}
  :root[data-nav="bottom"] .mnav a[aria-current="page"],
  :root[data-nav="bottom"] .mnav button.on{color:var(--gold)}
  :root[data-nav="bottom"] .mnav a:focus-visible,
  :root[data-nav="bottom"] .mnav button:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
  /* the bar floats over the page, so the page has to end above it */
  :root[data-nav="bottom"] footer.bot{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}

  :root[data-nav="bottom"] .sheet-back{
    display:block;position:fixed;inset:0;z-index:70;
    background:rgba(10,19,34,.55);opacity:0;transition:opacity var(--micro)}
  :root[data-nav="bottom"] .sheet-back.open{opacity:1}
  :root[data-nav="bottom"] .sheet{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--bg-2);border-top:1px solid var(--hair);
    border-radius:18px 18px 0 0;
    padding:10px 0 calc(14px + env(safe-area-inset-bottom,0px));
    max-height:82vh;overflow-y:auto;
    transform:translateY(102%);transition:transform var(--micro)}
  :root[data-nav="bottom"] .sheet.open{transform:translateY(0)}
  .sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--hair);
    margin:2px auto 12px}
  .sheet-rows a,.sheet-rows button{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;padding:15px var(--s5);min-height:52px;
    background:none;border:0;cursor:pointer;text-align:left;
    font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;
    color:var(--text);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .sheet-rows a[aria-current="page"]{color:var(--gold)}
  .sheet-rows a:focus-visible,.sheet-rows button:focus-visible{
    outline:2px solid var(--gold);outline-offset:-3px}
  .sheet-rows .sheet-sep{height:1px;background:var(--hair);margin:8px var(--s5)}
  .sheet-rows .sheet-note{padding:4px var(--s5) 10px;font-size:12px;color:var(--text-2);
    font-family:inherit;letter-spacing:.02em}
  .sheet-rows .arrow{color:var(--text-2);font-size:14px}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  :root[data-nav="bottom"] .sheet,
  :root[data-nav="bottom"] .sheet-back{transition:none}
}

/* ── Add-ons · §14 ──────────────────────────────────────────
   The community is one price. These are the two things she can
   put on top of it, and each card is gone the moment she owns
   the thing it sells. */
.addons{margin-top:var(--s8)}
.addon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s5)}
.addon{
  display:flex;flex-direction:column;
  border:1px solid var(--hair-gold);border-radius:16px;
  padding:var(--s6);
  background:linear-gradient(180deg, rgba(201,168,118,.07), rgba(201,168,118,.02));
}
.addon-k{
  font-family:Inter,sans-serif;font-size:10px;line-height:1;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
}
.addon-h{font-size:24px;line-height:1.25;margin-top:14px;color:var(--text)}
.addon-t{font-size:15px;line-height:1.75;color:var(--text-2);margin-top:12px}
.addon-p{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;
  color:var(--text);margin-top:auto;padding-top:var(--s5);
}
.addon-p span{
  font-family:Inter,sans-serif;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-2);margin-left:6px;
}
.addon .btn{align-self:flex-start;margin-top:var(--s5)}
@media (max-width:700px){.addon-h{font-size:21px}.addon{padding:var(--s5)}}

/* two ways in, on the screen a woman with no account lands on */
.join-two{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:var(--s6);
}

/* the forecast card on the programme home */
.fc-card{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s6);align-items:center;text-decoration:none;color:inherit}
.fc-card:hover{border-color:var(--hair-gold)}
.fc-card-arc svg{width:100%;height:auto;display:block}
.fc-card-title{font-size:clamp(26px,3vw,34px);line-height:1.15}
@media(max-width:760px){.fc-card{grid-template-columns:1fr}.fc-card-arc{display:none}}

/* Remind me, when it is on */
.remind-on{background:rgba(201,168,118,.16);color:var(--gold,#C9A876);border:1px solid rgba(201,168,118,.5);box-shadow:none}
.remind-on:hover{background:rgba(201,168,118,.24)}

/* ── place of birth, chosen from a list ─────────────────── */
.opt{
  font-family:Inter,sans-serif;font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-mute);margin-left:8px;
}
.ac{position:relative}
.ac input{width:100%}
.ac-list{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  margin:0;padding:6px 0;list-style:none;
  background:var(--bg-2);border:1px solid var(--hair-gold);border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  max-height:290px;overflow-y:auto;
}
.ac-list li{
  padding:11px 16px;
  font-family:Inter,sans-serif;font-size:15px;line-height:1.4;color:var(--text);
  cursor:pointer;
}
.ac-list li:hover,.ac-list li.on{background:var(--gold);color:var(--on-gold)}


/* ── her birthday card ─────────────────────────────────── */
.bd-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,13,26,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .6s ease}
.bd-ov.in{opacity:1}
.bd-card{position:relative;width:min(460px,100%);max-height:92vh;overflow:auto;text-align:center;border-radius:28px;padding:56px 34px 34px;
  color:#EFE4D2;background:radial-gradient(120% 70% at 50% 0%,#24365f 0%,#0F1A2E 58%,#0b1326 100%);
  box-shadow:0 40px 120px -20px rgba(0,0,0,.7),0 0 0 1px rgba(201,168,118,.32);
  transform:translateY(26px) scale(.97);opacity:0;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s ease;outline:none}
.bd-ov.in .bd-card{transform:none;opacity:1}
.bd-rings{position:absolute;left:50%;top:-60px;width:0;height:0;pointer-events:none}
.bd-rings span{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;
  border:1px solid rgba(201,168,118,.55);opacity:0;animation:bdRing 4.5s cubic-bezier(.2,.6,.2,1) infinite}
.bd-rings span:nth-child(2){animation-delay:1.5s}.bd-rings span:nth-child(3){animation-delay:3s}
@keyframes bdRing{0%{transform:scale(.4);opacity:0}15%{opacity:.9}100%{transform:scale(3.2);opacity:0}}
.bd-sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.bd-sparks i{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#E7CF9F;box-shadow:0 0 8px 2px rgba(231,207,159,.6);
  opacity:0;animation:bdRise linear infinite}
@keyframes bdRise{0%{transform:translateY(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-560px);opacity:0}}
.bd-x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(239,228,210,.08);
  color:#EFE4D2;font-size:22px;line-height:36px;cursor:pointer;z-index:2}
.bd-eb{position:relative;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#C9A876;margin:0 0 16px}
.bd-h{position:relative;font-size:44px;line-height:1.05;font-weight:400;margin:0;color:#F3EADB}
.bd-h em{color:#D9B97E}
.bd-p{position:relative;font-size:15.5px;line-height:1.65;color:rgba(239,228,210,.82);margin:18px auto 0;max-width:32ch}
.bd-tracks{position:relative;display:flex;flex-direction:column;gap:12px;margin:26px 0 0;text-align:left}
.bd-track{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;background:rgba(239,228,210,.06);border:1px solid rgba(201,168,118,.25)}
.bd-play{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid #C9A876;background:transparent;cursor:pointer;position:relative}
.bd-play span{position:absolute;left:19px;top:15px;width:0;height:0;border-left:13px solid #C9A876;border-top:9px solid transparent;border-bottom:9px solid transparent}
.bd-track.is-playing .bd-play span{left:17px;top:16px;width:4px;height:16px;border:0;background:#C9A876;box-shadow:9px 0 0 #C9A876}
.bd-tmeta{flex:1;min-width:0}
.bd-kicker{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#C9A876;margin:0}
.bd-tname{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;color:#F3EADB;margin:3px 0 8px}
.bd-bar{height:2px;background:rgba(239,228,210,.14);border-radius:2px;overflow:hidden}
.bd-bar i{display:block;height:100%;width:0;background:#C9A876}
.bd-sign{position:relative;font-style:italic;font-size:22px;color:#D9B97E;margin:26px 0 22px}
.bd-ok{position:relative}
.bd-x:focus-visible,.bd-play:focus-visible{outline:2px solid #C9A876;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.bd-rings span,.bd-sparks i{animation:none;opacity:0}.bd-card,.bd-ov{transition:none}}