*{box-sizing:border-box;margin:0;padding:0}

/* ============================================================
   B1 LOCKED DESIGN TOKENS — type scale, spacing scale, radius.
   Type tokens hold clamp() expressions per ratified path (δ);
   rendered desktop output unchanged. Mobile staircase (A2) is
   re-defined inside @media(max-width:767px) below.
   ============================================================ */
:root{
 /* colour (existing) */
 --ink:#221F18; --ink-2:#4A4639; --ink-3:#6E6A59;
 --paper:#F6F3EB; --paper-2:#FBF9F2;
 --rule:#C9BFA4; --rule-2:#DDD5BB;
 --accent:#BC5639; --accent-deep:#9A4029; --accent-soft:#F2E5D6;
 /* type scale */
 --t-eyebrow:12px;
 --t-meta:14px;
 --t-body:15px;
 --t-tag:13px;
 --t-body-lg:clamp(17px,1.5vw,21px);
 --t-h3:clamp(18px,1.7vw,22px);
 --t-h2:clamp(24px,3vw,38px);
 --t-h1:clamp(34px,5vw,64px);
 /* spacing scale (8px baseline) */
 --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
 --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
 /* radius scale */
 --r-pill:4px; --r-card:6px; --r-frame:8px;
 /* D2 scrim base + per-day tint override (default transparent —
    modal.js sets --modal-scrim-tint via inline style on open) */
 --modal-scrim-base:rgba(34,31,24,.66);
 --modal-scrim-tint:transparent;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);
 font-family:'Hanken Grotesk',system-ui,sans-serif;line-height:1.6;
 -webkit-font-smoothing:antialiased}
a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 7%}
.eyebrow{font-weight:700;font-size:var(--t-eyebrow);letter-spacing:.26em;
 text-transform:uppercase;color:var(--accent-deep)}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:700;
 line-height:1.14;letter-spacing:-.012em;color:var(--ink)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
em{font-style:italic;color:var(--accent-deep)}
p{color:var(--ink-2);max-width:64ch}
/* header / nav.
   D1: .site-head border-bottom is the GLOBAL neutral 1px hairline,
   applied site-wide (all 14 pages). Per-day visual signal lives on
   .day-ribbon below (day pages only). Intentional asymmetry — do
   not collapse to a single rule. */
.site-head{display:flex;align-items:center;justify-content:space-between;
 padding:var(--s-5) 7%;border-bottom:1px solid var(--rule-2)}
.site-head .mark{width:46px}.site-head .mark svg{width:100%;display:block}
.nav a{margin-left:var(--s-5);font-weight:600;font-size:var(--t-body);
 color:var(--ink-2);letter-spacing:.02em}
.nav a:hover,.nav a[aria-current]{color:var(--accent-deep)}
/* sections */
section{padding:var(--s-8) 0}
.hero{padding:88px 0 var(--s-8)} /* 88 retained — kept off-scale to
                                    preserve hero height; deviation noted */
.hero h1{max-width:18ch}.hero .lede{font-size:var(--t-body-lg);
 margin-top:var(--s-5);color:var(--ink-2)}
/* C1 — front-door text-link CTA inline pair (text-link-with-arrow
   treatment, single editorial line). Replaces solid-fill .cta + ghost
   pair. .cta-* tokens live here; the legacy .cta is retained for the
   MCQ "Try again" button. */
.cta-link{display:inline-block;color:var(--accent-deep);font-weight:700;
 font-size:var(--t-body);letter-spacing:.02em;margin-top:var(--s-6)}
.cta-link:hover{text-decoration:underline}
.cta-sep{display:inline-block;color:var(--ink-3);margin:0 var(--s-3);
 margin-top:var(--s-6);font-weight:400}
/* MCQ retry button uses .cta legacy treatment (solid rose; opt-out
   on front door per C1) */
.cta{display:inline-block;margin-top:var(--s-6);background:var(--accent);
 color:var(--paper);padding:var(--s-3) var(--s-5);
 border-radius:var(--r-card);font-weight:700;letter-spacing:.02em}
.cta:hover{background:var(--accent-deep);text-decoration:none}
.rule{height:1px;background:var(--rule);border:0;margin:0}
/* chapter list */
.chapters{list-style:none}
.chapters li{border-bottom:1px solid var(--rule-2)}
.chapters a{display:flex;align-items:baseline;gap:var(--s-5);
 padding:var(--s-5) var(--s-1);color:var(--ink)}
.chapters a:hover{text-decoration:none;background:var(--paper-2)}
.chapters .dn{font-family:'JetBrains Mono',monospace;font-weight:700;
 font-size:var(--t-meta);color:var(--accent-deep);min-width:56px}
.chapters .ct{font-family:'Fraunces',serif;font-weight:700;font-size:20px}
.chapters .cd{color:var(--ink-3);font-size:var(--t-body);margin-left:auto;
 padding-left:var(--s-5)}
.chapters .swatch{width:var(--s-2);height:var(--s-2);border-radius:2px;
 align-self:center}
.arc-h{margin:40px 0 var(--s-2);font-size:var(--t-eyebrow);
 letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
 font-weight:700}
/* cards / resources */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
 gap:var(--s-4);margin-top:var(--s-5)}
/* E1: card promotion — whole-card clickable when .card.dl-card.
   .card alone (without dl-card) remains static (used by chapters or
   future static-card contexts). */
.card{border:1px solid var(--rule);border-left:3px solid var(--accent);
 background:var(--paper-2);border-radius:var(--r-card);
 padding:var(--s-5) var(--s-5);position:relative;
 transition:box-shadow 120ms ease, border-color 120ms ease}
.card h3{margin-bottom:var(--s-2);max-width:calc(100% - 36px)} /* leave
                                                                room for E1 glyph */
.card p{font-size:var(--t-meta);color:var(--ink-3)}
.card .dl{display:inline-block;margin-top:var(--s-4);font-weight:700;
 font-size:var(--t-meta);color:var(--accent-deep)}
.card[aria-disabled=true]{opacity:.6}
.card[aria-disabled=true] .dl{color:var(--ink-3);
 border:1px dashed var(--rule);padding:var(--s-1) var(--s-2);
 border-radius:var(--r-pill)}
/* E1: dl-card promotion — whole surface clickable + visual focus */
.card.dl-card{cursor:pointer}
.card.dl-card:hover{border-color:var(--accent);
 box-shadow:0 4px 14px rgba(34,31,24,.08)}
.card.dl-card:focus-visible{outline:2px solid var(--accent-deep);
 outline-offset:2px}
.card.dl-card[aria-disabled=true]{cursor:default}
.card.dl-card[aria-disabled=true]:hover{border-color:var(--rule);
 box-shadow:none}
.card-glyph{position:absolute;top:var(--s-5);right:var(--s-5);
 width:22px;height:26px;color:var(--ink-3);opacity:.7}
.card-glyph svg{display:block;width:100%;height:auto}
/* disclaimer */
.habits{list-style:none;margin-top:var(--s-5);max-width:62ch}
.habits li{padding:var(--s-3) 0;border-bottom:1px solid var(--rule-2);
 color:var(--ink-2);font-size:var(--t-body)}
.habits strong{color:var(--ink);font-weight:700}
.disc{font-size:var(--t-meta);color:var(--ink-3);max-width:74ch}
.disc strong{color:var(--ink)}
.disc li{margin:var(--s-3) 0;list-style:none}
/* G1 — defensive ink rule for ACN-bearing content: any element
   marked .acn renders at body-ink colour, never inherits the rose
   link colour. Catches edge-case specificity drift even if current
   render is already ink. */
.acn,.disc .acn,.site-foot .acn{color:var(--ink)}
.fillin{display:inline-block;background:var(--accent-soft);
 color:var(--accent-deep);font-family:'JetBrains Mono',monospace;
 font-size:var(--t-eyebrow);padding:2px var(--s-2);
 border-radius:3px;letter-spacing:.04em}
/* footer */
.site-foot{border-top:1px solid var(--rule-2);background:var(--paper-2);
 padding:40px 7%;margin-top:40px;font-size:var(--t-tag);
 color:var(--ink-3)}
.site-foot p{color:var(--ink-3);font-size:var(--t-tag);max-width:none;
 margin:5px 0}
.site-foot a{color:var(--accent-deep);font-weight:600}
.site-foot .tm{font-size:var(--t-eyebrow)}
/* day page.
   D1: .day-ribbon is the per-day 6px visual signal (day pages only).
   It inherits --accent from the body inline style. .site-head above
   is global; day-ribbon is per-day. Intentional dual treatment. */
.day-ribbon{height:6px;background:var(--accent)}
.day-head{padding:54px 0 var(--s-3)} /* 54 retained — preserves day-head
                                        vertical rhythm; deviation noted */
.day-head .dn{font-family:'JetBrains Mono',monospace;font-weight:700;
 font-size:var(--t-meta);letter-spacing:.22em;color:var(--accent-deep)}
.day-head h1{margin-top:var(--s-3);max-width:20ch}
.slot{margin:var(--s-5) 0;color:var(--ink-2)}
.slot.empty{border:1px dashed var(--rule);border-radius:var(--r-card);
 padding:var(--s-4) var(--s-4);color:var(--ink-3);font-size:var(--t-meta);
 font-family:'JetBrains Mono',monospace}
.day-video{margin:var(--s-6) 0 var(--s-2);border:1px solid var(--rule);
 border-radius:var(--r-frame);overflow:hidden;background:#000;
 box-shadow:0 6px 26px rgba(34,31,24,.10)}
.day-video video{display:block;width:100%;height:auto}
.day-video-wrapper{position:relative;padding-bottom:56.25%;height:0;
 overflow:hidden}
.day-video-wrapper iframe{position:absolute;top:0;left:0;width:100%;
 height:100%;border:0}
/* E4: section-spacing tokens — collapse to two values site-wide.
   section-to-section: --s-7 (48px). h2-to-content: --s-4 (16px,
   handled via .blk-h margin-bottom). */
.blk-h{font-family:'Fraunces',serif;font-weight:700;
 font-size:var(--t-h3);margin:var(--s-7) 0 var(--s-4)}
.checkmount{border:1px solid var(--rule);border-left:3px solid var(--accent);
 background:var(--paper-2);border-radius:var(--r-card);
 padding:var(--s-5) var(--s-5);min-height:90px}
/* E3: symmetric pager — labelled both sides; ← All chapters on day-01
   left, Resources → on day-10 right (KP-PM ratified) */
.pager{display:flex;justify-content:space-between;margin:54px 0 var(--s-3);
 border-top:1px solid var(--rule-2);padding-top:var(--s-5);font-weight:700}
.pager a{color:var(--accent-deep)}.pager .disabled{color:var(--rule);
 pointer-events:none}
/* MCQ */
.mcq-sub{font-size:var(--t-tag);color:var(--ink-3);margin:2px 0 var(--s-2)}
.mcq-q{margin:var(--s-5) 0;padding-top:var(--s-4);
 border-top:1px solid var(--rule-2)}
.mcq-q:first-of-type{border-top:0;padding-top:var(--s-1)}
.mcq-stem{font-weight:600;color:var(--ink);margin-bottom:var(--s-3)}
.mcq-n{display:inline-block;font-family:'JetBrains Mono',monospace;
 font-weight:700;color:var(--accent-deep);margin-right:var(--s-2)}
.mcq-opts{display:flex;flex-direction:column;gap:var(--s-2)}
.mcq-opt{text-align:left;font:inherit;font-size:var(--t-body);
 color:var(--ink);background:var(--paper);border:1px solid var(--rule);
 border-radius:var(--r-card);padding:var(--s-3) var(--s-4);cursor:pointer}
.mcq-opt:hover:not(:disabled){border-color:var(--accent);
 background:var(--paper-2)}
.mcq-opt:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.mcq-opt:disabled{cursor:default}
.mcq-opt.is-correct{border-color:#4F6840;background:#EBF0E4;color:#33502B}
.mcq-opt.is-wrong{border-color:#9A4029;background:#F6E3DC;color:#7A2E1C}
.mcq-fb{margin-top:var(--s-2);font-size:var(--t-meta);color:var(--ink-2);
 border-left:3px solid var(--rule);padding-left:var(--s-3)}
.mcq-fb.ok{border-left-color:#4F6840}.mcq-fb.no{border-left-color:#9A4029}
.mcq-status{margin-top:var(--s-4);font-size:var(--t-tag);color:var(--ink-3)}
.mcq-done{margin-top:var(--s-5);text-align:center}
.mcq-score{font-family:'Fraunces',serif;font-weight:700;font-size:38px;
 color:var(--accent-deep);margin-bottom:var(--s-4)}
.mcq-todo{color:var(--ink-3);font-size:var(--t-meta);
 font-family:'JetBrains Mono',monospace}
@media(max-width:680px){.nav a{margin-left:var(--s-4);font-size:var(--t-meta)}
 .chapters .cd{display:none}}
/* ============================================================
   PDF viewer modal (Path α native iframe) — locked design tokens
   WO #16.1 A1: D2 scrim two-layer background reverted to single-
   layer rgba per Director live-diagnostic 2026-05-22 (universal
   PDF-nav failure across mobile + desktop). The --modal-scrim-tint
   token is left dormant in :root for possible future revisit; the
   .modal background no longer composes it. Per-day modal-frame
   left-border remains the visible per-day signal.
   ============================================================ */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:1000;
 background:var(--modal-scrim-base);
 display:flex;align-items:center;justify-content:center;padding:var(--s-5)}
.modal-frame{background:var(--paper);
 border-left:3px solid var(--accent,#BC5639);border-radius:var(--r-card);
 width:min(960px,100%);height:min(86vh,900px);
 display:flex;flex-direction:column;
 box-shadow:0 12px 40px rgba(34,31,24,.30)}
.modal-header{display:flex;align-items:flex-start;
 justify-content:space-between;padding:var(--s-4) var(--s-4);
 border-bottom:1px solid var(--rule-2);gap:var(--s-3)}
.modal-title-block{flex:1;min-width:0}
.modal-title{font-family:'Fraunces',Georgia,serif;font-weight:700;
 font-size:18px;line-height:1.14;color:var(--ink);margin:0;max-width:none}
/* F1: modal metadata line (pages · format · size) — Hanken sans,
   small, ink-tertiary. Built by modal.js from data-pages/format/size
   attrs on the trigger link */
.modal-meta{font-size:var(--t-tag);color:var(--ink-3);
 margin-top:var(--s-1);font-family:'Hanken Grotesk',system-ui,sans-serif;
 font-weight:400;letter-spacing:.01em}
.modal-meta:empty{display:none}
/* E5: modal-close corner radius matches global card radius */
.modal-close{background:transparent;border:0;color:var(--ink-2);
 font-size:26px;line-height:1;cursor:pointer;
 padding:var(--s-1) var(--s-3);border-radius:var(--r-card);
 font-family:inherit;flex:0 0 auto}
.modal-close:hover{color:var(--ink);background:var(--paper-2)}
.modal-close:focus-visible{outline:2px solid var(--accent-deep,#9A4029);
 outline-offset:2px}
.modal-iframe{flex:1;border:0;width:100%;background:var(--paper-2,#FBF9F2)}
@media(prefers-reduced-motion:no-preference){
 .modal.open{animation:modal-fade 150ms ease-out}}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
/* ============================================================
   A1 modal full-bleed at <768px + iOS safe-area handling.
   A2 mobile heading staircase via --t-h1 / --t-h2 redef.
   Combined breakpoint per WO16 §A1 implementation note.
   ============================================================ */
@media(max-width:767px){
 :root{
  --t-h1:clamp(44px,11vw,48px);
  --t-h2:32px;
 }
 .modal{padding:0;align-items:stretch;justify-content:stretch}
 .modal-frame{width:100%;height:100vh;height:100dvh;
  border-radius:0;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:none}
 .modal-header{padding-top:max(var(--s-4),env(safe-area-inset-top))}
}