/* Pursue · web prototype
   Layout concept: a dark Joy "cover" band opens each screen (logo, Anton, teal halftone), and the reading
   happens on paper below it: one comfortable column, wide figures that break out of it, and the print
   book's furniture (kickers, rules, black boxes) adapted for scrolling.
   Each colour has one job: pink = where you are and the one action to take; teal = progress and
   completion; gold = Scripture and swash; your own marks are drawn in pink pen. */

:root {
  --bg: #FFFFFF;          /* paper */
  --bg-2: #F2F2F4;        /* mist panel, as in the print boxes */
  --bg-3: #E9E9EE;
  --fg: #1F1F24;          /* running text */
  --strong: #0A0A0A;      /* headings, rules */
  --muted: #5A5A63;
  --faint: #8A8A94;
  --rule: #D4D4DA;
  --rule-2: #A9A9B2;
  --inv-bg: #0A0A0A;      /* the print's black boxes */
  --inv-fg: #FFFFFF;
  --inv-muted: #B4B4BE;
  --night: #0A0A0A;       /* cover bands */
  --night-2: #16161B;
  --pink: #EA1064;
  --pink-ink: #CC0D57;    /* pink text on paper */
  --gold: #FFB400;
  --teal: #00A79D;
  --teal-ink: #00776F;    /* teal text on paper */
  --mark: #E0115F;        /* your pen */
  --focus: #00A79D;
  --shadow: 0 1px 2px rgba(10, 10, 10, .06), 0 8px 28px rgba(10, 10, 10, .08);
  --sim: #8A6A00;         /* simulated-feature ink */
  --sim-bg: #FFF4D6;

  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --label: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --measure: 680px;
  --wide: 980px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --rs: 1;                /* reader text scale */
  --mainw: calc(100vw - 520px); /* width of the reading pane, for figures that break out of the column */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F0F12; --bg-2: #1A1A20; --bg-3: #24242B; --fg: #E4E4E9; --strong: #FFFFFF; --muted: #A3A3AD;
    --faint: #7C7C87; --rule: #2B2B33; --rule-2: #44444E; --inv-bg: #22222A; --inv-fg: #FFFFFF; --inv-muted: #B4B4BE;
    --night: #060608; --night-2: #141419; --pink-ink: #FF4D8D; --teal-ink: #2FD1C4; --mark: #FF4D8D;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35); --sim: #FFCF5A; --sim-bg: #2B2410;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F0F12; --bg-2: #1A1A20; --bg-3: #24242B; --fg: #E4E4E9; --strong: #FFFFFF; --muted: #A3A3AD;
  --faint: #7C7C87; --rule: #2B2B33; --rule-2: #44444E; --inv-bg: #22222A; --inv-fg: #FFFFFF; --inv-muted: #B4B4BE;
  --night: #060608; --night-2: #141419; --pink-ink: #FF4D8D; --teal-ink: #2FD1C4; --mark: #FF4D8D;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35); --sim: #FFCF5A; --sim-bg: #2B2410;
  color-scheme: dark;
}

/* The reader can pin its own page: paper or night, whatever the app theme. */
.reader[data-page="paper"] {
  --bg: #FFFFFF; --bg-2: #F2F2F4; --bg-3: #E9E9EE; --fg: #1F1F24; --strong: #0A0A0A; --muted: #5A5A63; --faint: #8A8A94;
  --rule: #D4D4DA; --rule-2: #A9A9B2; --inv-bg: #0A0A0A; --inv-fg: #FFFFFF; --inv-muted: #B4B4BE; --pink-ink: #CC0D57;
  --teal-ink: #00776F; --mark: #E0115F; --sim: #8A6A00; --sim-bg: #FFF4D6; color-scheme: light;
}
.reader[data-page="night"] {
  --bg: #0F0F12; --bg-2: #1A1A20; --bg-3: #24242B; --fg: #E4E4E9; --strong: #FFFFFF; --muted: #A3A3AD; --faint: #7C7C87;
  --rule: #2B2B33; --rule-2: #44444E; --inv-bg: #22222A; --inv-fg: #FFFFFF; --inv-muted: #B4B4BE; --pink-ink: #FF4D8D;
  --teal-ink: #2FD1C4; --mark: #FF4D8D; --sim: #FFCF5A; --sim-bg: #2B2410; color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--night); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sc { font-size: .78em; letter-spacing: .04em; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--strong); color: var(--bg); padding: 8px 14px; }
.skip:focus { top: calc(8px + env(safe-area-inset-top, 0px)); }

.kicker { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; color: var(--muted); }
.kicker.pink { color: var(--pink-ink); }
.kicker.gold { color: var(--gold); }
.anton { font-family: var(--display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ chips, buttons, badges */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border: 0; border-radius: 0; background: var(--pink); color: #FFFFFF; text-decoration: none;
  font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 13px;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { background: #D10D59; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--strong); box-shadow: inset 0 0 0 2px var(--strong); }
.btn.ghost:hover { background: var(--strong); color: var(--bg); }
.btn.on-night { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.btn.on-night:hover { background: #FFFFFF; color: #0A0A0A; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 12px; }
.btn.quiet { background: var(--bg-2); color: var(--strong); }
.btn.quiet:hover { background: var(--bg-3); }
.btn .arrow { font-family: var(--body); font-weight: 700; letter-spacing: 0; }
.link { background: none; border: 0; padding: 0; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  font-size: 12px; color: var(--strong); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.link:hover { text-decoration-color: var(--pink); }

.sim {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 7px; border: 1px dashed var(--sim); color: var(--sim);
  background: var(--sim-bg); font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  font-size: 10.5px; line-height: 1.2; white-space: nowrap; text-decoration: none;
}
.sim::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.state { display: inline-flex; align-items: center; gap: 6px; font-family: var(--label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; font-size: 11px; color: var(--muted); }
.state.done { color: var(--teal-ink); }
.state.now { color: var(--pink-ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.check { width: 16px; height: 16px; flex-shrink: 0; }

.meter { height: 6px; background: var(--bg-3); position: relative; overflow: hidden; }
.meter > i { position: absolute; inset: 0 auto 0 0; background: var(--teal); transition: width .4s ease; }
.on-dark .meter { background: rgba(255, 255, 255, .14); }

/* ------------------------------------------------------------------ app bar (all screens but the reader) */
.appbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--night); color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.appbar .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #FFFFFF; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
.brand .anton { font-size: 26px; line-height: 1; letter-spacing: .02em; }
.appnav { display: flex; gap: 4px; margin-left: 18px; }
.appnav a { padding: 8px 12px; text-decoration: none; font-family: var(--label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: 12px; color: #B4B4BE; }
.appnav a:hover { color: #FFFFFF; }
.appnav a[aria-current="page"] { color: #FFFFFF; box-shadow: inset 0 -2px 0 var(--pink); }
.appbar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.appbar .sim { background: transparent; color: #FFCF5A; border-color: rgba(255, 207, 90, .7); }
.avatar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--teal); color: #0A0A0A; font-family: var(--label);
  font-weight: 600; font-size: 14px; letter-spacing: .04em; display: grid; place-items: center; }
.saved { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: #8A8A94;
  opacity: 0; transition: opacity .3s ease; }
.saved.show { opacity: 1; }
.saved.warn { color: #FFCF5A; opacity: 1; }

.tabbar { display: none; }

/* ------------------------------------------------------------------ cover bands */
.cover { position: relative; background: var(--night); color: #FFFFFF; overflow: hidden; isolation: isolate; }
.cover .stripe, .stripe { height: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stripe > i:nth-child(1) { background: var(--pink); }
.stripe > i:nth-child(2) { background: var(--gold); }
.stripe > i:nth-child(3) { background: var(--teal); }
.halftone { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.halftone i { position: absolute; inset: 0; background-repeat: repeat; background-size: 13px 13px; }
.halftone i:nth-child(1) { background-image: radial-gradient(circle at 6.5px 6.5px, var(--teal) 1.4px, transparent 1.6px);
  -webkit-mask-image: radial-gradient(circle at 100% 0, rgba(0,0,0,.9) 0, transparent calc(620px * var(--hs, 1))); mask-image: radial-gradient(circle at 100% 0, rgba(0,0,0,.9) 0, transparent calc(620px * var(--hs, 1))); }
.halftone i:nth-child(2) { background-image: radial-gradient(circle at 6.5px 6.5px, var(--teal) 2.5px, transparent 2.7px);
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 0, rgba(0,0,0,.6) calc(300px * var(--hs, 1)), transparent calc(400px * var(--hs, 1))); mask-image: radial-gradient(circle at 100% 0, #000 0, rgba(0,0,0,.6) calc(300px * var(--hs, 1)), transparent calc(400px * var(--hs, 1))); }
.halftone i:nth-child(3) { background-image: radial-gradient(circle at 6.5px 6.5px, var(--teal) 3.6px, transparent 3.8px);
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 0, rgba(0,0,0,.7) calc(160px * var(--hs, 1)), transparent calc(230px * var(--hs, 1))); mask-image: radial-gradient(circle at 100% 0, #000 0, rgba(0,0,0,.7) calc(160px * var(--hs, 1)), transparent calc(230px * var(--hs, 1))); }
.halftone.bl i { -webkit-mask-position: 0 0; }
.halftone.bl i:nth-child(1) { -webkit-mask-image: radial-gradient(circle at 0 100%, rgba(0,0,0,.9) 0, transparent 620px); mask-image: radial-gradient(circle at 0 100%, rgba(0,0,0,.9) 0, transparent 620px); }
.halftone.bl i:nth-child(2) { -webkit-mask-image: radial-gradient(circle at 0 100%, #000 0, rgba(0,0,0,.6) 300px, transparent 400px); mask-image: radial-gradient(circle at 0 100%, #000 0, rgba(0,0,0,.6) 300px, transparent 400px); }
.halftone.bl i:nth-child(3) { -webkit-mask-image: radial-gradient(circle at 0 100%, #000 0, rgba(0,0,0,.7) 160px, transparent 230px); mask-image: radial-gradient(circle at 0 100%, #000 0, rgba(0,0,0,.7) 160px, transparent 230px); }
.swash { display: block; height: 14px; }
.swash path { fill: var(--gold); }

/* ------------------------------------------------------------------ dashboard */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-block: 64px 56px; }
.hero .hello { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; font-size: 13px; color: #FFB400; }
.wordmark { font-family: var(--display); text-transform: uppercase; font-size: clamp(84px, 13vw, 168px); line-height: .84; letter-spacing: .01em; margin-top: 18px; }
.wordmark span { position: relative; display: inline-block; }
.wordmark .swash { position: absolute; left: -4px; right: -4px; bottom: -20px; width: calc(100% + 8px); height: 18px; }
.hero .subtitle { margin-top: 40px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; line-height: 1.25; }
.hero .mission { margin-top: 14px; color: #B4B4BE; font-size: 15px; max-width: 46ch; }

.resume { background: rgba(20, 20, 25, .86); border: 1px solid rgba(255, 255, 255, .12); padding: 22px 22px 20px; display: grid; gap: 14px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.resume .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.resume h2 { font-family: var(--display); text-transform: uppercase; font-size: 34px; line-height: .98; }
.resume .where { color: #B4B4BE; font-size: 14px; }
.resume .where strong { color: #FFFFFF; font-weight: 600; }
.resume .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.resume .meter { flex: 1 1 140px; }
.resume .pct { font-family: var(--label); font-weight: 600; letter-spacing: .12em; font-size: 12px; color: #B4B4BE; }

.band { padding-block: 72px; }
.band.tight { padding-block: 48px; }
.band.mist { background: var(--bg-2); }
.band-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.band-head h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(36px, 5vw, 56px); line-height: .92; color: var(--strong); margin-top: 10px; }
.band-head p { max-width: 52ch; color: var(--muted); }

/* the path: four phases, seven layers */
.rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 28px; }
.rail .seg { height: 8px; background: var(--bg-3); position: relative; overflow: hidden; }
.rail .seg > i { position: absolute; inset: 0 auto 0 0; background: var(--teal); }
.rail .seg.here { box-shadow: 0 0 0 2px var(--pink); }
.phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.phase { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.phase-head { border-top: 3px solid var(--strong); padding-top: 12px; display: grid; gap: 4px; min-height: 148px; align-content: start; }
.phase-head h3 { font-family: var(--display); text-transform: uppercase; font-size: 26px; line-height: .98; color: var(--strong); }
.phase-head p { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.layer-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: start;
  padding: 18px 18px 16px; background: var(--bg); border: 1px solid var(--rule); text-decoration: none; color: inherit; text-align: left;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; width: 100%;
}
.layer-card:hover { border-color: var(--strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.layer-card .n { font-family: var(--display); font-size: 46px; line-height: .82; color: var(--strong); }
.layer-card .h4 { display: block;  font-family: var(--display); text-transform: uppercase; font-size: 21px; line-height: 1; color: var(--strong); }
.layer-card .sub { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.layer-card .foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--rule); }
.layer-card .len { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--muted); }
.layer-card.live { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); }
.layer-card.live .n, .layer-card.live .h4 { color: var(--inv-fg); }
.layer-card.live .n { color: var(--pink); }
.layer-card.live .sub, .layer-card.live .len { color: var(--inv-muted); }
.layer-card.live .foot { border-top-color: rgba(255, 255, 255, .16); }
.layer-card.live .meter { background: rgba(255, 255, 255, .16); flex: 1 1 80px; }
.layer-card .here { position: absolute; top: -11px; right: 14px; background: var(--pink); color: #FFFFFF; font-family: var(--label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; padding: 4px 8px; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.panel { background: var(--bg); border: 1px solid var(--rule); padding: 24px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.panel h3 { font-family: var(--display); text-transform: uppercase; font-size: 28px; line-height: .95; color: var(--strong); }
.panel .head { display: flex; justify-content: space-between; gap: 12px; align-items: start; flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.facts > div { background: var(--bg); padding: 12px 14px; display: grid; gap: 2px; }
.facts b { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--strong); }
.facts span { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--muted); }
.assign { background: var(--bg-2); padding: 16px 18px; display: grid; gap: 8px; }
.assign .t { font-weight: 600; color: var(--strong); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 14px; }
.kv dt { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--muted); padding-top: 2px; }
.kv dd { margin: 0; color: var(--strong); }
.quote-me { border-left: 4px solid var(--gold); padding: 2px 0 2px 16px; font-size: 15px; color: var(--strong); }

.footer { background: var(--night); color: #9A9AA6; }
.footer .wrap { padding-block: 34px 40px; display: grid; gap: 14px; }
.footer .addr { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; display: flex;
  justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer .addr .t { color: var(--teal); }
.footer .esv { font-size: 11px; line-height: 1.5; max-width: 900px; }

/* ------------------------------------------------------------------ course overview */
.course-cover .wrap { padding-block: 56px 52px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px; align-items: end; }
.course-cover .crumb { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: #B4B4BE; text-decoration: none; }
.course-cover .crumb:hover { color: #FFFFFF; }
.course-cover .bign { font-family: var(--display); font-size: clamp(110px, 16vw, 190px); line-height: .8; color: var(--pink); }
.course-cover h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(54px, 8vw, 104px); line-height: .88; margin-top: 12px; }
.course-cover .sub { font-size: clamp(18px, 2vw, 22px); font-weight: 600; margin-top: 26px; }
.course-cover .titles { display: flex; gap: 26px; align-items: end; flex-wrap: wrap; }
.course-cover .side { display: grid; gap: 14px; }
.course-cover .side .facts { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .12); }
.course-cover .side .facts > div { background: var(--night-2); }
.course-cover .side .facts b { color: #FFFFFF; }
.course-cover .side .facts span { color: #9A9AA6; }

.subnav { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--rule); }
.subnav .wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex-shrink: 0; padding: 16px 12px 14px; text-decoration: none; font-family: var(--label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--strong); }
.subnav a.on { color: var(--strong); border-bottom-color: var(--pink); }

.cs { padding-block: 64px; border-bottom: 1px solid var(--rule); scroll-margin-top: 120px; }
.cs:last-of-type { border-bottom: 0; }
.cs-head { display: grid; gap: 10px; margin-bottom: 28px; }
.cs-head h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(38px, 5vw, 60px); line-height: .92; color: var(--strong); }
.printref { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--faint); }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--strong); max-width: 60ch; }
.bws { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 30px; }
.byweek6 { background: var(--inv-bg); color: var(--inv-fg); padding: 26px 26px 24px; display: grid; gap: 14px; }
.byweek6 ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.byweek6 li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: baseline; font-weight: 600; font-size: 16.5px; line-height: 1.4; }
.byweek6 li b { font-family: var(--display); font-weight: 400; font-size: 28px; color: var(--gold); line-height: 1; }
.stack { display: grid; gap: 16px; align-content: start; }
.boxed { border: 2px solid var(--strong); padding: 18px 20px; display: grid; gap: 12px; }
.tick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; font-size: 15px; }
.tick input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 2px 0 0; border: 2px solid var(--strong); background: var(--bg); display: grid; place-items: center; cursor: pointer; }
.tick input:checked { background: var(--strong); }
.tick input:checked::after { content: ""; width: 9px; height: 5px; border: solid var(--bg); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.note-gray { background: var(--bg-2); padding: 16px 18px; font-size: 14.5px; color: var(--strong); }

.moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.move { border-top: 5px solid var(--strong); padding-top: 14px; display: grid; gap: 10px; align-content: start; }
.move:first-child { border-top-color: var(--pink); }
.move .t { display: flex; align-items: baseline; gap: 10px; }
.move .t b { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: .85; color: var(--strong); }
.move:first-child .t b { color: var(--pink); }
.move .t span { font-family: var(--display); text-transform: uppercase; font-size: 30px; line-height: 1; color: var(--strong); }
.move .q { font-weight: 700; font-size: 17px; color: var(--strong); }
.bul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bul li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; font-size: 14.5px; line-height: 1.5; }
.bul li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; background: var(--strong); }
.bul.gold li::before { background: var(--gold); width: 9px; height: 9px; margin-top: 6px; }
.prayband { margin-top: 34px; background: var(--inv-bg); color: var(--inv-fg); padding: 22px 26px; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: center; }
.prayband h3 { font-family: var(--display); text-transform: uppercase; font-size: 30px; line-height: .95; }
.prayband p { color: var(--inv-muted); font-size: 15px; }
.guard { margin-top: 34px; display: grid; gap: 14px; }
.guard .bul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 12px; }

.weeks { display: grid; border-top: 2px solid var(--strong); }
.wk { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 210px) 160px; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit; }
a.wk:hover .wt { color: var(--pink-ink); }
.wk .wn { font-family: var(--display); font-size: 60px; line-height: .8; color: var(--strong); }
.wk .wt { font-family: var(--display); text-transform: uppercase; font-size: 26px; line-height: 1; color: var(--strong); transition: color .15s ease; }
.wk .wq { color: var(--muted); font-size: 14.5px; margin-top: 6px; }
.wk .wp { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--strong); }
.wk .ws { display: grid; gap: 8px; justify-items: end; }
.wk.off { opacity: .55; }
.wk.off .wn, .wk.off .wt { color: var(--muted); }
.runs { margin-top: 40px; background: var(--bg-2); padding: 22px 24px; display: grid; gap: 14px; }
.runs ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.runs li { display: grid; gap: 6px; font-weight: 600; font-size: 14px; color: var(--strong); }
.runs li b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; }

.fits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fits .ph { display: grid; gap: 10px; align-content: start; }
.fits .ph > div:first-child { border-bottom: 2px solid var(--strong); padding-bottom: 8px; }
.fits .ph b { display: block; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--strong); }
.fits .ph span { font-size: 12.5px; color: var(--muted); }
.fits .ls { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.fits .l { background: var(--bg-2); padding: 12px; display: grid; gap: 3px; align-content: start; min-height: 104px; text-decoration: none; color: inherit; }
.fits .l b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; color: var(--strong); }
.fits .l strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 15px; line-height: 1.05; color: var(--strong); }
.fits .l span { font-size: 11.5px; color: var(--muted); }
.fits .l.here { background: var(--inv-bg); }
.fits .l.here b { color: var(--pink); }
.fits .l.here strong { color: var(--inv-fg); }
.fits .l.here span { color: var(--inv-muted); }
.fits .l .k { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 9.5px; color: var(--gold); }
.esvnote { font-size: 11.5px; color: var(--faint); line-height: 1.5; max-width: 900px; }

/* ------------------------------------------------------------------ reader shell */
.reader { min-height: 100%; background: var(--bg); color: var(--fg); }
.rbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--night); color: #FFFFFF;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; height: 60px;
  padding-left: var(--gutter); padding-right: var(--gutter-r);
}
.rbar .back { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; font-family: var(--label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: 12px; min-width: 0; }
.rbar .back img { height: 28px; width: auto; }
.rbar .back svg { width: 20px; height: 20px; flex-shrink: 0; }
svg:not([width]):not(.swash):not(.check) { max-width: 24px; max-height: 24px; }
.rbar .back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbar .ttl { text-align: center; min-width: 0; }
.rbar .ttl b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 19px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbar .ttl span { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; color: #9A9AA6; }
.rbar .rtools { display: flex; justify-content: flex-end; gap: 6px; }
.ibtn { height: 40px; min-width: 40px; padding: 0 10px; border: 0; background: transparent; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; }
.ibtn:hover, .ibtn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.ibtn svg { width: 20px; height: 20px; }
.ibtn .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #0A0A0A; font-size: 10.5px; letter-spacing: 0; display: grid; place-items: center; }
.rprog { position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 39; height: 3px; background: var(--rule); }
.rprog i { position: absolute; inset: 0 auto 0 0; background: var(--teal); width: 0; }

.rbody { display: grid; grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 0; }
.outline { position: sticky; top: calc(63px + env(safe-area-inset-top, 0px)); align-self: start; max-height: calc(100vh - 63px); overflow: auto;
  padding: 40px 18px 40px max(20px, env(safe-area-inset-left, 0px)); display: grid; gap: 18px; }
.outline ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.outline button { width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 10px 9px 12px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; gap: 8px;
  align-items: start; border-left: 2px solid transparent; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.outline button:hover { color: var(--strong); background: var(--bg-2); }
.outline button.on { border-left-color: var(--pink); color: var(--strong); font-weight: 600; background: var(--bg-2); }
.outline button b { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1; color: var(--faint); }
.outline button.on b { color: var(--pink-ink); }
.outline .seen { color: var(--teal-ink); }
.outline .mine { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--rule); }
.outline .mine div { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.outline .mine b { color: var(--strong); font-weight: 600; }
.outline .refs { display: grid; gap: 8px; }

.rmain { min-width: 0; padding: 0 var(--gutter-r) 120px var(--gutter); }
.lesson { max-width: var(--measure); margin: 0 auto; font-size: calc(17px * var(--rs)); line-height: 1.7; }

/* ------------------------------------------------------------------ lesson typography & blocks */
.sec { padding-top: 72px; scroll-margin-top: 80px; }
.sec + .sec { border-top: 1px solid var(--rule); margin-top: 64px; }
.sec-head { display: grid; gap: 10px; margin-bottom: 24px; }
.sec-head .meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.sec-head h2 { font-family: var(--display); text-transform: uppercase; font-size: calc(clamp(34px, 5.4vw, 50px) * var(--rs)); line-height: .94; color: var(--strong); }
.b + .b { margin-top: 32px; }
.b-lead p { font-size: calc(19px * var(--rs)); line-height: 1.6; color: var(--strong); }
.wide { width: min(var(--wide), calc(var(--mainw) - 56px)); position: relative; left: 50%; transform: translateX(-50%); }

.op { padding-top: 56px; }
.op .top { display: flex; align-items: flex-end; gap: 18px; }
.op .wn { font-family: var(--display); font-size: calc(clamp(120px, 18vw, 168px) * var(--rs)); line-height: .78; color: var(--pink); }
.op .k { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; font-size: 12.5px; color: var(--muted); }
.op h1 { font-family: var(--display); text-transform: uppercase; font-size: calc(clamp(42px, 7vw, 66px) * var(--rs)); line-height: .9; color: var(--strong); margin-top: 8px; }
.op .swash { width: 220px; margin-top: 14px; }
.qbig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 34px; }
.qbig > div { padding: 18px 20px; display: grid; gap: 8px; align-content: start; }
.qbig .q { background: var(--bg-2); }
.qbig .q p { font-family: var(--display); text-transform: uppercase; font-size: calc(26px * var(--rs)); line-height: 1; color: var(--strong); }
.qbig .i { border: 2px solid var(--strong); }
.qbig .i p { font-size: calc(16px * var(--rs)); line-height: 1.55; color: var(--strong); }

/* Scripture */
.scr { display: grid; gap: 16px; }
.scr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.scr-head h3 { font-family: var(--display); text-transform: uppercase; font-size: calc(28px * var(--rs)); line-height: 1; color: var(--strong); }
.scr-head .instr { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--strong); }
.passage-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.passage-wrap.with-margin { grid-template-columns: minmax(0, 1fr) minmax(0, 180px); }
.passage { border-left: 4px solid var(--gold); padding: 4px 0 4px 22px; color: var(--strong); font-size: calc(19px * var(--rs)); line-height: 1.95; }
.passage .pv { font-family: var(--label); font-weight: 600; font-size: .6em; color: var(--faint); margin-right: 4px; vertical-align: super; line-height: 0; }
.passage.poetry { line-height: 1.7; }
.passage .ln { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; }
.passage .ln .pv { vertical-align: baseline; font-size: 11px; margin: 0; line-height: 1; }
.passage .ln > span:last-child { padding-left: 2.4em; text-indent: -2.4em; }
.passage .ln.indent > span:last-child { text-indent: -1.2em; }
.passage .supers { font-size: .78em; color: var(--muted); }
.passage .ref { margin-top: 14px; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.passage .ref em { font-style: normal; color: var(--faint); }
.w { border-radius: 2px; transition: background .12s ease; }
.marking .passage { touch-action: none; -webkit-user-select: none; user-select: none; cursor: crosshair; }
.marking .passage .w:hover { background: var(--bg-2); }
.w.m-underline { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2.5px; text-underline-offset: 4px; }
.w.m-circle { box-shadow: 0 0 0 1.6px var(--mark); border-radius: 999px; padding: 0 .18em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.w.m-box { box-shadow: 0 0 0 1.6px var(--mark); border-radius: 1px; padding: 0 .12em; margin: 0 -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.w.m-question { text-decoration: underline dotted var(--mark); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.w.m-question::after { content: "?"; font-family: var(--label); font-weight: 600; font-size: .62em; color: var(--mark); vertical-align: super; margin-left: 1px; line-height: 0; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tool { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px 6px 10px; border: 1px solid var(--rule-2); background: var(--bg);
  text-align: left; line-height: 1.2; }
.tool:hover { border-color: var(--strong); }
.tool[aria-pressed="true"] { background: var(--strong); color: var(--bg); border-color: var(--strong); }
.tool .sw { font-family: var(--body); font-weight: 600; font-size: 14px; }
.tool .nm { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; }
.tool .lb { font-size: 12.5px; opacity: .8; }
.tool .sw.u { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tool .sw.c { box-shadow: 0 0 0 1.5px var(--mark); border-radius: 999px; padding: 0 5px; }
.tool .sw.b { box-shadow: 0 0 0 1.5px var(--mark); padding: 0 4px; }
.tool .sw.q { color: var(--mark); font-family: var(--label); }
.tool[aria-pressed="true"] .sw.u, .tool[aria-pressed="true"] .sw.c, .tool[aria-pressed="true"] .sw.b { --mark: #FF6FA3; }
.toolhint { font-size: 13px; color: var(--muted); }
.toolhint b { color: var(--strong); }
.margin-notes { display: grid; gap: 8px; align-content: start; }

/* digital-only "bonus" content is always labeled */
.b.bonus { border-left: 3px solid var(--teal); padding-left: 16px; }
.bonus-tag { display: block; margin-bottom: 10px; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; color: var(--teal-ink); }

/* writing surfaces */
.field { display: grid; gap: 8px; }
.field > label, .field > .lbl { font-weight: 600; font-size: calc(16px * var(--rs)); line-height: 1.45; color: var(--strong); }
.lined, .linput {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule-2); background:
  repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.9em - 1px), var(--rule) calc(1.9em - 1px), var(--rule) 1.9em);
  font-size: calc(16px * var(--rs)); line-height: 1.9em; padding: 0 2px; resize: none; color: var(--strong); min-height: calc(1.9em * 3);
  border-radius: 0; outline-offset: 4px; background-attachment: local;
}
.lined::placeholder, .linput::placeholder { color: var(--faint); }
.linput { min-height: 0; height: 1.9em; background: transparent; }
.lined:focus, .linput:focus { outline: 0; border-bottom-color: var(--teal); box-shadow: 0 1px 0 var(--teal); }
.prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.numlist { display: grid; gap: 4px; }
.numlist .row { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: end; gap: 8px; }
.numlist .row b { font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--strong); line-height: 1.9; }
.numlist.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.listbox { border: 2px solid var(--strong); padding: 18px 20px; }
.listhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.listhead h3 { font-family: var(--display); text-transform: uppercase; font-size: calc(24px * var(--rs)); line-height: 1; color: var(--strong); }
.listhead .t { font-weight: 600; font-size: calc(16px * var(--rs)); color: var(--strong); }
.listhead span { font-size: 13.5px; color: var(--muted); }

/* At your table */
.table-talk { background: var(--bg-2); padding: 22px 22px 18px; display: grid; gap: 12px; }
.table-talk .q { font-weight: 700; font-size: calc(18px * var(--rs)); line-height: 1.45; color: var(--strong); }
.table-talk .foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.recall { border-top: 1px solid var(--rule); padding-top: 12px; display: grid; gap: 12px; }
.recall .passage { font-size: calc(16px * var(--rs)); }

/* quotes, stats, roads */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quotes > div { padding: 22px 24px; display: grid; gap: 14px; align-content: space-between; min-height: 170px; }
.quotes .dark { background: var(--inv-bg); color: var(--inv-fg); }
.quotes .light { background: var(--bg-2); color: var(--strong); }
.quotes p { font-weight: 600; font-size: calc(21px * var(--rs)); line-height: 1.35; }
.quotes .k { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; }
.quotes .dark .k { color: var(--gold); }
.quotes .light .k { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stats > div { border-top: 3px solid var(--strong); padding-top: 10px; display: grid; gap: 4px; align-content: start; }
.stats b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(30px * var(--rs)); line-height: 1; color: var(--strong); }
.stats span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.roads { display: grid; gap: 0; }
.roadart { height: 54px; display: grid; grid-template-columns: 1fr 1.1fr 1fr; }
.roadart > i { position: relative; }
.roadart .ditch { background: repeating-linear-gradient(135deg, var(--bg-3) 0 6px, var(--bg-2) 6px 12px); }
.roadart .road { background: var(--inv-bg); }
.roadart .road::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 4px; margin-top: -2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 26px, transparent 26px 44px); }
.roadcards { display: grid; grid-template-columns: 1fr 1.1fr 1fr; }
.roadcards > div { padding: 18px 20px 22px; display: grid; gap: 8px; align-content: start; }
.roadcards .ditch { background: var(--bg-2); }
.roadcards .road { background: var(--inv-bg); color: var(--inv-fg); }
.roadcards .k { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: var(--muted); }
.roadcards .road .k { color: var(--gold); }
.roadcards h4 { font-family: var(--display); text-transform: uppercase; font-size: calc(23px * var(--rs)); line-height: 1; color: var(--strong); }
.roadcards .road h4 { color: var(--pink); }
.roadcards p { font-size: calc(14.5px * var(--rs)); line-height: 1.5; }
.roadcards .road p { color: var(--inv-muted); }

/* library */
.lib { display: grid; gap: 26px; }
.shelf { display: grid; gap: 10px; }
.shelf-k { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--strong); }
.shelf-row { display: flex; align-items: flex-start; gap: 6px; }
.sgroup { display: grid; gap: 6px; min-width: 0; flex: none; }
.spines { display: flex; align-items: flex-end; gap: 2px; height: 96px; }
.spine { flex: none; width: 18px; border: 0; padding: 0; position: relative; background: var(--c); transition: transform .15s ease, filter .15s ease; }
.spine::after { content: ""; position: absolute; left: 18%; right: 18%; top: 11px; height: 2px; background: rgba(255, 255, 255, .55); }
.spine:hover, .spine.hot { transform: translateY(-6px); }
.spine.dim { filter: grayscale(1) opacity(.3); }
.spine.found { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--strong); transform: translateY(-8px); }
.sgroup .rule { height: 3px; background: var(--c); }
.sgroup .lab { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; color: var(--strong); white-space: nowrap; width: 0; overflow: visible; }
.sgroup .lab.lo { margin-top: 16px; position: relative; }
.sgroup .lab.lo::before { content: ""; position: absolute; left: 8px; top: -17px; height: 13px; border-left: 1px solid var(--rule-2); }
.sgroup .lab.end { width: auto; text-align: right; direction: rtl; }
.shelf-row { padding-bottom: 6px; }
.libinfo { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-2); font-size: 14px; color: var(--muted); }
.libinfo b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 22px; color: var(--strong); line-height: 1; }
.libinfo .sw { width: 14px; height: 14px; background: var(--c); flex-shrink: 0; }
.liblists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; font-size: 13.5px; line-height: 1.5; color: var(--fg); }
.liblists strong { color: var(--strong); }
.liblists button { all: unset; cursor: pointer; display: block; padding: 4px 6px; margin: 0 -6px; font-size: 13.5px; line-height: 1.5; color: var(--fg); }
.liblists button:hover, .liblists button.on { background: var(--bg-2); }
.liblists button:focus-visible { outline: 2px solid var(--focus); }

.grid-table { display: grid; border: 2px solid var(--strong); padding: 18px 20px 14px; gap: 0; }
.gt-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; margin-bottom: 10px; }
.gt-head h3 { font-family: var(--display); text-transform: uppercase; font-size: calc(24px * var(--rs)); line-height: 1; color: var(--strong); }
.gt-head span { font-size: 13.5px; color: var(--muted); }
.gt-row { display: grid; grid-template-columns: var(--cols); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.gt-row.th { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--muted); padding-top: 0; }
.gt-row .rl { font-weight: 700; color: var(--strong); font-size: calc(15px * var(--rs)); }
.gt-row select, .gt-row input[type="text"] { width: 100%; min-width: 0; height: 38px; border: 1px solid var(--rule-2); background: var(--bg); padding: 0 8px; font-size: 14px; border-radius: 0; }
.gt-row select:focus, .gt-row input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.gt-row .ml { display: none; }
.gt-row .cell { display: block; min-width: 0; }
.verdict { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; display: inline-flex; gap: 6px; align-items: center; }
.verdict.ok { color: var(--teal-ink); }
.verdict.no { color: var(--pink-ink); }
.gt-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; }
.gt-foot span { font-size: 13px; color: var(--muted); }

/* genres & sort */
.genres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; }
.genres > div { border-top: 3px solid var(--strong); padding-top: 8px; display: grid; gap: 4px; align-content: start; }
.genres b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(19px * var(--rs)); line-height: 1; color: var(--strong); }
.genres span { font-size: calc(13.5px * var(--rs)); line-height: 1.45; color: var(--fg); }
.bandhead { background: var(--inv-bg); color: var(--inv-fg); padding: 12px 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bandhead h3 { font-family: var(--display); text-transform: uppercase; font-size: calc(22px * var(--rs)); line-height: 1; }
.bandhead span { font-size: 13.5px; color: var(--inv-muted); }
.sortlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.sortitem { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-content: start; }
.sortitem .key { width: 30px; height: 30px; background: var(--inv-bg); color: var(--inv-fg); display: grid; place-items: center; font-family: var(--display); font-size: 16px; }
.sortitem p { font-size: calc(15.5px * var(--rs)); line-height: 1.55; color: var(--strong); }
.sortitem .r { display: block; margin-top: 4px; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--muted); }
.picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.picks .lbl { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; color: var(--muted); margin-right: 4px; }
.pick { border: 1px solid var(--rule-2); background: var(--bg); padding: 5px 9px; font-size: 12.5px; line-height: 1.2; color: var(--fg); }
.pick:hover { border-color: var(--strong); }
.pick[aria-pressed="true"] { background: var(--strong); border-color: var(--strong); color: var(--bg); font-weight: 600; }

/* story */
.story { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; position: relative; }
.part { border: 0; text-align: left; padding: 16px 16px 14px; background: var(--bg-2); display: grid; gap: 6px; align-content: start; position: relative; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.part:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 10px solid var(--strong); border-right: 0; }
.part:hover { transform: translateY(-2px); }
.part[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--teal); }
.part .h4 { display: block;  font-family: var(--display); text-transform: uppercase; font-size: calc(24px * var(--rs)); line-height: 1; color: var(--strong); }
.part .rf { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--muted); }
.part .p { display: block;  font-size: calc(13.5px * var(--rs)); line-height: 1.45; color: var(--fg); }
.part .th { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule-2); display: grid; gap: 2px; }
.part .th span { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 9.5px; color: var(--muted); }
.part .th b { font-size: 14px; color: var(--strong); }
.part.focus { background: var(--inv-bg); }
.part.focus .h4 { color: var(--pink); }
.part.focus .p, .part.focus .th b { color: var(--inv-fg); }
.part.focus .rf, .part.focus .th span { color: var(--gold); }
.part.focus .th { border-top-color: rgba(255, 255, 255, .2); }

.matrix { display: grid; }
.mx-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); align-items: center; border-bottom: 1px solid var(--rule); min-height: 44px; }
.mx-row.th { border-bottom: 2px solid var(--strong); min-height: 0; padding-bottom: 6px; }
.mx-row.th span { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.25; padding: 0 4px; }
.mx-row.th span:first-child { text-align: left; }
.mx-row .ev { font-weight: 600; font-size: calc(14.5px * var(--rs)); color: var(--strong); padding: 8px 8px 8px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mx-row .ev em { font-style: normal; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; color: var(--muted); }
.mx-row.ex { background: var(--bg-2); }
.mx-cell { display: grid; place-items: center; height: 100%; transition: background .15s ease; }
.mx-cell.hl { background: rgba(0, 167, 157, .12); }
.mx-cell label { display: grid; place-items: center; width: 100%; height: 100%; min-height: 44px; cursor: pointer; }
.mx-cell .ml { display: none; }
.box { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--strong); background: var(--bg); display: grid; place-items: center; cursor: pointer; }
.box:checked { background: var(--strong); }
.box:checked::after { content: ""; width: 10px; height: 5px; border: solid var(--bg); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); }
.box:disabled { cursor: default; opacity: .8; }

/* home */
.homeband { background: var(--inv-bg); color: var(--inv-fg); padding: 20px 22px; display: grid; gap: 14px; }
.homeband p { font-size: calc(17px * var(--rs)); line-height: 1.55; }
.homeband strong { color: var(--gold); font-weight: 700; }
.readings { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.readings .lbl { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--inv-muted); margin-right: 4px; }
.rd { width: 40px; height: 40px; border: 2px solid rgba(255, 255, 255, .6); background: transparent; color: #FFFFFF; font-family: var(--display); font-size: 18px; }
.rd[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #0A0A0A; }
.legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-bottom: 2px solid var(--strong); padding-bottom: 12px; }

/* Week 2 blocks */
.statements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.statements > div { display: grid; gap: 6px; align-content: start; border-top: 4px solid var(--strong); padding-top: 12px; }
.statements > div:first-child { border-top-color: var(--pink); }
.statements h4 { font-family: var(--display); text-transform: uppercase; font-size: calc(23px * var(--rs)); line-height: 1; color: var(--strong); }
.statements .qq { font-weight: 700; color: var(--strong); font-size: calc(15px * var(--rs)); }
.statements .nn { font-size: calc(14px * var(--rs)); color: var(--muted); }
.statements .ex { background: var(--bg-2); padding: 12px 14px; font-size: calc(14.5px * var(--rs)); line-height: 1.5; color: var(--strong); margin-top: 6px; }
.callout { padding: 18px 22px; font-size: calc(16px * var(--rs)); line-height: 1.55; }
.callout.dark { background: var(--inv-bg); color: var(--inv-fg); }
.callout.light { background: var(--bg-2); color: var(--strong); }
.callout strong { font-weight: 700; }
.callout.dark strong { color: var(--gold); }
.lenses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; }
.lens { display: grid; gap: 4px; border-top: 3px solid var(--strong); padding-top: 10px; align-content: start; }
.lens h4 { font-family: var(--display); text-transform: uppercase; font-size: calc(21px * var(--rs)); line-height: 1; color: var(--strong); }
.lens p { font-size: calc(14.5px * var(--rs)); color: var(--fg); }
.lens .in { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; color: var(--muted); margin-top: 8px; }
.stepb { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.stepb .sn { font-family: var(--display); font-size: 44px; line-height: .85; color: var(--pink); }
.stepb .st { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.stepb h3 { font-family: var(--display); text-transform: uppercase; font-size: calc(24px * var(--rs)); line-height: 1; color: var(--strong); }
.stepb .sx { color: var(--fg); font-size: calc(15.5px * var(--rs)); }
.stepb .body { display: grid; gap: 12px; min-width: 0; }
.emph .row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 14px; align-items: end; }
.emph .row b { font-weight: 700; color: var(--strong); font-size: calc(15px * var(--rs)); line-height: 1.9; }
.classify { display: grid; }
.cl-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) repeat(3, 118px); gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.cl-row.th { border-bottom: 2px solid var(--strong); padding-top: 0; }
.cl-row.th span { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--muted); text-align: center; }
.cl-row.th span:nth-child(2) { text-align: left; }
.cl-row .no { font-family: var(--display); font-size: 17px; color: var(--strong); }
.cl-row p { font-size: calc(15px * var(--rs)); line-height: 1.5; color: var(--strong); }
.cl-row .opt { display: grid; place-items: center; }
.cl-row .opt button { width: 100%; min-height: 36px; border: 1px solid var(--rule-2); background: var(--bg); font-size: 12px; font-weight: 600; color: var(--muted); }
.cl-row .opt button:hover { border-color: var(--strong); color: var(--strong); }
.cl-row .opt button[aria-pressed="true"] { background: var(--strong); color: var(--bg); border-color: var(--strong); }
.labeled { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { background: var(--bg-2); padding: 8px 12px; font-weight: 600; font-size: calc(14.5px * var(--rs)); color: var(--strong); }
.compare { display: grid; border-top: 2px solid var(--strong); }
.compare .cr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.compare .cr.th { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--muted); padding: 10px 0 8px; }
.compare .cr span:first-child { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.compare .cr span:last-child { color: var(--strong); font-weight: 600; }
.compare .cr.th span { text-decoration: none; color: var(--muted); font-weight: 600; }
.stepslist { display: grid; gap: 12px; }
.stepslist h3 { font-family: var(--display); text-transform: uppercase; font-size: calc(24px * var(--rs)); line-height: 1; color: var(--strong); }
.stepslist ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.stepslist li { display: grid; gap: 6px; padding: 12px; background: var(--bg-2); font-weight: 600; font-size: calc(14px * var(--rs)); line-height: 1.4; color: var(--strong); align-content: start; }
.stepslist li b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; color: var(--strong); }
.writeout .lined { min-height: calc(1.9em * 6); }
.ttable .gt-row input { height: 36px; }

/* section footer, finish */
.sec-foot { margin-top: 36px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sec-foot .state { gap: 8px; }
.notebtn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px dashed var(--rule-2); padding: 8px 12px; color: var(--muted); font-size: 13px; }
.notebtn:hover { border-color: var(--strong); color: var(--strong); }
.notebtn svg { width: 16px; height: 16px; }
.finish { max-width: var(--measure); margin: 80px auto 0; background: var(--night); color: #FFFFFF; position: relative; overflow: hidden; isolation: isolate; }
.finish .in { padding: 34px 30px 30px; display: grid; gap: 18px; }
.finish .halftone { opacity: .28; }
.finish h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(36px, 6vw, 52px); line-height: .92; }
.finish .facts { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.finish .facts > div { background: var(--night-2); }
.finish .facts b { color: #FFFFFF; }
.finish .facts span { color: #9A9AA6; }
.finish .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.finish .fine { font-size: 13px; color: #9A9AA6; }
.finish .next { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 18px; display: grid; gap: 8px; }
.finish .next b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 26px; line-height: 1; }

/* ------------------------------------------------------------------ drawers, sheets, popovers */
.scrim { position: fixed; inset: 0; background: rgba(5, 5, 8, .5); z-index: 70; opacity: 0; transition: opacity .2s ease; }
.scrim.show { opacity: 1; }
.drawer { position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--bg); color: var(--fg); box-shadow: -10px 0 40px rgba(0, 0, 0, .25);
  display: grid; grid-template-rows: auto minmax(0, 1fr); transform: translateX(100%); transition: transform .25s ease;
  padding-top: env(safe-area-inset-top, 0px); padding-right: env(safe-area-inset-right, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer.show { transform: none; }
.drawer.left { right: auto; left: 0; transform: translateX(-100%); padding-right: 0; padding-left: env(safe-area-inset-left, 0px); }
.drawer.left.show { transform: none; }
.dhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; background: var(--night); color: #FFFFFF; }
.dhead h2 { font-family: var(--display); text-transform: uppercase; font-size: 26px; line-height: 1; }
.dbody { overflow: auto; padding: 18px; display: grid; gap: 18px; align-content: start; }
.composer { display: grid; gap: 10px; background: var(--bg-2); padding: 14px; }
.composer textarea, .note textarea { width: 100%; min-height: 90px; border: 1px solid var(--rule-2); background: var(--bg); padding: 10px 12px; font-size: 14.5px; line-height: 1.55; resize: vertical; border-radius: 0; }
.composer textarea:focus, .note textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.composer .row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.composer select { height: 36px; border: 1px solid var(--rule-2); background: var(--bg); padding: 0 8px; font-size: 13px; max-width: 100%; border-radius: 0; }
.notegroup { display: grid; gap: 10px; }
.notegroup h3 { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--muted); }
.note { display: grid; gap: 6px; border-left: 3px solid var(--gold); padding-left: 12px; }
.note .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--faint); align-items: center; }
.note textarea { min-height: 70px; border-color: transparent; background: var(--bg-2); }
.empty { color: var(--muted); font-size: 14px; padding: 8px 0; }
.empty b { color: var(--strong); }

.pop { position: fixed; z-index: 90; right: var(--gutter-r); top: calc(62px + env(safe-area-inset-top, 0px)); width: 280px; background: var(--bg); color: var(--fg); border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 14px; }
.pop h4 { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--muted); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--rule-2); }
.seg button { border: 0; background: var(--bg); min-height: 38px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--rule-2); }
.seg button[aria-pressed="true"] { background: var(--strong); color: var(--bg); }

.sheet { position: fixed; z-index: 80; left: 50%; top: 50%; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto;
  transform: translate(-50%, -46%); opacity: 0; transition: transform .2s ease, opacity .2s ease; background: var(--bg); color: var(--fg); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.sheet.show { transform: translate(-50%, -50%); opacity: 1; }
.sheet .cover { padding: 26px 24px 22px; --hs: .55; }
.sheet .halftone { opacity: .45; }
.sheet .cover h2 { font-family: var(--display); text-transform: uppercase; font-size: 40px; line-height: .92; margin-top: 10px; }
.sheet .cover .n { font-family: var(--display); font-size: 80px; line-height: .8; color: var(--pink); }
.sheet .in { padding: 22px 24px 24px; display: grid; gap: 16px; }
.sheet .x { position: absolute; right: 10px; top: 10px; z-index: 2; }
.sheet label.f { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--strong); }
.sheet input[type="text"] { height: 44px; border: 1px solid var(--rule-2); padding: 0 12px; font-size: 15px; background: var(--bg); border-radius: 0; }
.confirm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--bg-2); padding: 12px 14px; }

.toast { position: fixed; z-index: 95; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; transition: all .25s ease;
  background: var(--strong); color: var(--bg); padding: 12px 18px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ------------------------------------------------------------------ notebook & prototype notes */
.page-cover .wrap { padding-block: 52px 44px; display: grid; gap: 12px; }
.page-cover h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(54px, 8vw, 96px); line-height: .88; }
.page-cover p { color: #B4B4BE; max-width: 60ch; font-size: 16px; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 28px; overflow-x: auto; }
.tabs button { flex-shrink: 0; border: 0; background: none; padding: 14px 12px 12px; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 12px;
  color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--strong); border-bottom-color: var(--pink); }
.tabs button span { color: var(--faint); margin-left: 4px; }
.nb-lesson { display: grid; gap: 18px; margin-bottom: 44px; }
.nb-lesson > h2 { font-family: var(--display); text-transform: uppercase; font-size: 34px; line-height: .95; color: var(--strong); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.nb-lesson > h2 a { font-family: var(--label); font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.nb-sec { display: grid; gap: 12px; border-top: 1px solid var(--rule); padding-top: 14px; }
.nb-sec h3 { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; color: var(--muted); }
.ans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; }
.ans .l { font-size: 14px; color: var(--muted); }
.ans .v { font-size: 15px; color: var(--strong); white-space: pre-wrap; }
.myq { background: var(--inv-bg); color: var(--inv-fg); padding: 20px 22px; display: grid; gap: 8px; margin-bottom: 36px; }
.myq p { font-size: 18px; font-weight: 600; }
.myq .kicker { color: var(--gold); }

.proto { display: grid; gap: 56px; }
.proto h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(32px, 4.4vw, 46px); line-height: .92; color: var(--strong); }
.proto .intro { display: grid; gap: 14px; max-width: 68ch; }
.proto .intro p { font-size: 17px; line-height: 1.65; color: var(--strong); }
.status3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.status3 > div { padding: 20px; display: grid; gap: 12px; align-content: start; }
.status3 .real { background: var(--inv-bg); color: var(--inv-fg); }
.status3 .real .bul li::before { background: var(--teal); }
.status3 .fake { background: var(--sim-bg); color: var(--strong); border: 1px dashed var(--sim); }
.status3 .later { background: var(--bg-2); color: var(--strong); }
.status3 h3 { font-family: var(--display); text-transform: uppercase; font-size: 26px; line-height: 1; }
.layers3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 2px solid var(--strong); }
.layers3 > div { padding: 20px; display: grid; gap: 10px; align-content: start; }
.layers3 > div + div { border-left: 2px solid var(--strong); }
.layers3 .n { font-family: var(--display); font-size: 40px; line-height: .85; color: var(--pink); }
.layers3 h3 { font-family: var(--display); text-transform: uppercase; font-size: 24px; line-height: 1; color: var(--strong); }
.layers3 p { font-size: 14.5px; line-height: 1.55; }
.layers3 code, .proto code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .88em; background: var(--bg-2); padding: 1px 5px; color: var(--strong); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tblwrap { overflow-x: auto; }
.tbl th { text-align: left; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--muted); padding: 10px 12px 8px 0; border-bottom: 2px solid var(--strong); }
.tbl td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--strong); }
.tbl td:first-child { white-space: nowrap; }
.future { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.future > div { border-top: 3px solid var(--strong); padding-top: 12px; display: grid; gap: 6px; align-content: start; }
.future h4 { font-family: var(--display); text-transform: uppercase; font-size: 21px; line-height: 1; color: var(--strong); }
.future p { font-size: 14px; line-height: 1.55; }
.future .hook { font-size: 13px; color: var(--muted); }
.nextsteps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.nextsteps li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.55; color: var(--strong); }
.nextsteps li::before { content: counter(s); font-family: var(--display); font-size: 26px; line-height: 1; color: var(--pink); }
.files { display: flex; gap: 8px; flex-wrap: wrap; }
.files a { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; padding: 6px 10px; background: var(--bg-2); color: var(--strong); text-decoration: none; }
.files a:hover { background: var(--bg-3); }

.loading { min-height: 60vh; display: grid; place-items: center; color: var(--muted); font-family: var(--label); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; }
.err { margin: 40px auto; max-width: 640px; padding: 20px; border: 2px solid var(--pink); color: var(--strong); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1240px) {
  :root { --mainw: calc(100vw - 240px); }
  .rbody { grid-template-columns: 240px minmax(0, 1fr); }
  .rbody .spacer { display: none; }
}
@media (max-width: 1020px) {
  :root { --mainw: 100vw; }
  .rbody { grid-template-columns: minmax(0, 1fr); }
  .outline { display: none; }
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .phase-head { min-height: 0; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 48px 40px; }
  .course-cover .wrap { grid-template-columns: minmax(0, 1fr); }
  .wk { grid-template-columns: 56px minmax(0, 1fr) 150px; }
  .wk .wp { grid-column: 2; grid-row: 2; }
  .wk .ws { grid-column: 3; grid-row: 1 / span 2; }
  .runs ol, .stepslist ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status3, .future { grid-template-columns: minmax(0, 1fr); }
  .layers3 { grid-template-columns: minmax(0, 1fr); }
  .layers3 > div + div { border-left: 0; border-top: 2px solid var(--strong); }
}
@media (min-width: 1021px) {
  .only-mobile { display: none !important; }
}
@media (max-width: 760px) {
  :root { --hs: .5; }
  body { font-size: 14.5px; }
  .appbar .wrap { height: 56px; gap: 12px; }
  .appnav, .appbar .saved { display: none; }
  .brand img { height: 30px; }
  .brand .anton { font-size: 22px; }
  .tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; background: var(--night);
    border-top: 1px solid rgba(255, 255, 255, .1); padding: 0 max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px)); }
  .tabbar a { display: grid; justify-items: center; gap: 3px; padding: 9px 2px 8px; color: #9A9AA6; text-decoration: none; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: #FFFFFF; }
  .tabbar a[aria-current="page"] svg { color: var(--pink); }
  .app-screen { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .subnav { top: calc(56px + env(safe-area-inset-top, 0px)); }
  .band { padding-block: 52px; }
  .phases { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .resume h2 { font-size: 28px; }
  .bws { grid-template-columns: minmax(0, 1fr); }
  .moves { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .prayband { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .guard .bul { grid-template-columns: minmax(0, 1fr); }
  .wk { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 18px 0; }
  .wk .wn { font-size: 46px; grid-row: 1 / span 3; }
  .wk .wt { font-size: 22px; }
  .wk .wp { grid-column: 2; grid-row: 2; margin-top: 6px; }
  .wk .ws { grid-column: 2; grid-row: 3; justify-items: start; margin-top: 10px; }
  .runs ol, .stepslist ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fits { grid-template-columns: minmax(0, 1fr); }
  .cs { padding-block: 48px; }

  .rbar { height: 56px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .rbar .back span { display: none; }
  .rbar .ttl b { font-size: 16px; }
  .rbar .ttl .tt { display: none; }
  .rprog { top: calc(56px + env(safe-area-inset-top, 0px)); }
  .ibtn .tl { display: none; }
  .sec { padding-top: 52px; }
  .sec + .sec { margin-top: 48px; }
  .qbig { grid-template-columns: minmax(0, 1fr); }
  .wide { width: 100%; left: 0; transform: none; }
  .prompts, .quotes, .labeled, .sortlist, .lenses { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roadcards, .roadart { grid-template-columns: minmax(0, 1fr); }
  .roadart { display: none; }
  .roadcards .road::before { content: ""; height: 6px; margin: -2px 0 6px; background: repeating-linear-gradient(90deg, var(--gold) 0 22px, transparent 22px 36px); }
  .genres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .part:not(:last-child)::after { right: 50%; top: auto; bottom: -15px; margin: 0 -8px 0 0; border: 8px solid transparent; border-top: 10px solid var(--strong); border-bottom: 0; }
  .statements { grid-template-columns: minmax(0, 1fr); }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passage-wrap.with-margin { grid-template-columns: minmax(0, 1fr); }
  .passage { padding-left: 16px; font-size: calc(18px * var(--rs)); }
  .liblists { grid-template-columns: minmax(0, 1fr); }
  .sgroup .lab { display: none; }
  .sgroup { flex: var(--n) 1 0; }
  .spine { flex: 1 1 0; width: auto; min-width: 3px; }
  .spines { height: 72px; }
  .shelf-row { gap: 3px; }
  .numlist.two { grid-template-columns: minmax(0, 1fr); }
  .emph .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .emph .row b { line-height: 1.5; }
  .compare .cr { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .compare .cr.th { display: none; }
  .finish .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finish .in { padding: 28px 20px 24px; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts b { font-size: 24px; }

  /* tables become stacked cards */
  .gt-row.th, .mx-row.th, .cl-row.th { display: none; }
  .grid-table { padding: 14px 14px 10px; }
  .gt-row { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; padding: 12px 0; }
  .gt-row .cell { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
  .gt-row .ml { display: block; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--muted); }
  .mx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px 0; }
  .mx-row .ev { grid-column: 1 / -1; padding: 0 0 4px; }
  .mx-cell { place-items: stretch; }
  .mx-cell label { display: flex; justify-content: flex-start; gap: 8px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--rule); font-size: 12.5px; line-height: 1.25; }
  .mx-cell .ml { display: inline; }
  .mx-row.ex .mx-cell label { background: var(--bg); }
  .cl-row { grid-template-columns: 24px minmax(0, 1fr); row-gap: 10px; }
  .cl-row .opts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
@media (min-width: 761px) {
  .cl-row .opts { display: contents; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================ imported layouts (Weeks 3 to 6)
   Generic pieces the importer finds in the print pages. Tone boxes redefine the page tokens, so
   whatever sits inside a black box (a prompt, a list, ruled lines) draws itself in the box's colors. */
.tbox { padding: 20px 22px; }
.tbox.dark { background: var(--inv-bg); color: var(--inv-fg); --strong: var(--inv-fg); --fg: var(--inv-fg); --muted: var(--inv-muted); --faint: #8A8A95; --rule: #3A3A44; --rule-2: #5A5A63; --bg: var(--inv-bg); --bg-2: #1A1A20; }
.tbox.dark .kicker { color: var(--gold); }
.tbox.light { background: var(--bg-2); }
.tbox.ruled, .callout.ruled { border: 2px solid var(--strong); }
.card.ruled { border: 2px solid var(--strong); padding: 18px; }
.tbox.grp { display: grid; gap: 22px; }
.tbox.grp > .b + .b { margin-top: 0; }
.tbox .tbox.light { background: var(--bg); }
.lt { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(22px * var(--rs)); line-height: 1.05; color: var(--strong); }
.lx { font-weight: 600; font-size: calc(16px * var(--rs)); line-height: 1.45; color: var(--strong); }
.ln-note { font-size: calc(14px * var(--rs)); line-height: 1.5; color: var(--muted); }
.pfield { gap: 6px; }
.pfield .kicker + .lt, .pfield .kicker + .lx { margin-top: 2px; }
.hd { justify-content: flex-start; column-gap: 14px; margin-bottom: -12px; }
.hd .kicker { flex-basis: 100%; }
.kvp { display: inline-grid; gap: 4px; border: 1.5px solid var(--strong); padding: 8px 14px; }
.kvp b { font-weight: 700; color: var(--strong); }
.vquote { margin: 0; border-left: 4px solid var(--gold); padding: 4px 0 4px 18px; display: grid; gap: 8px; }
.vquote p { font-size: calc(18px * var(--rs)); line-height: 1.55; color: var(--strong); }
.vquote cite { font-style: normal; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); gap: 12px; }
.card { border-top: 3px solid var(--strong); padding: 10px 0 2px; display: grid; gap: 6px; align-content: start; }
.card.accent { border-top-color: var(--pink); }
.card.dark, .card.light { border-top: 0; padding: 20px 20px 18px; }
.card.dark { background: var(--inv-bg); color: var(--inv-fg); --strong: var(--inv-fg); --muted: var(--inv-muted); }
.card.dark .kicker { color: var(--gold); }
.card.light { background: var(--bg-2); }
.card h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(21px * var(--rs)); line-height: 1.05; color: var(--strong); }
.card p { font-size: calc(14.5px * var(--rs)); line-height: 1.5; }
.card .nt { color: var(--muted); }
.tbox.light .card { border-top-color: var(--rule-2); }
.bulbox { display: grid; gap: 12px; }
.bulbox .bul li::before { background: var(--gold); }
.fields { display: grid; gap: 10px; }
.fld { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 4px 18px; align-items: end; }
.fld > label { display: grid; gap: 2px; font-size: calc(15px * var(--rs)); line-height: 1.4; color: var(--strong); padding-bottom: 6px; }
.fld > label b { font-weight: 700; }
.fld .sub { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--muted); }
.fld .nt { font-size: calc(13.5px * var(--rs)); color: var(--muted); }
.fld.has-note { grid-template-columns: minmax(0, 1fr); }
.fld.has-note > label { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding-bottom: 0; }
.fld.has-note > label b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(20px * var(--rs)); }
.fld .lined { min-height: 0; }
.checklist { display: grid; gap: 10px; }
.chk { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: calc(15.5px * var(--rs)); line-height: 1.45; color: var(--strong); cursor: pointer; }
.chk .box { margin-top: 1px; }
.choice { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.choice .q { font-weight: 700; color: var(--strong); }
.choice .opts { display: flex; gap: 6px; flex-wrap: wrap; }
.choice .pick { font-size: 13.5px; padding: 7px 12px; }
.cl-row .tag { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--muted); white-space: nowrap; margin-left: 6px; }
.ctable { display: grid; border-top: 2px solid var(--strong); }
.ct-row { display: grid; grid-template-columns: minmax(130px, 190px) repeat(var(--n), minmax(0, 1fr)); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.ct-row.th { font-family: var(--display); text-transform: uppercase; font-size: calc(18px * var(--rs)); line-height: 1.1; color: var(--strong); padding: 10px 0; }
.ct-row .rl { font-weight: 700; font-size: calc(15px * var(--rs)); line-height: 1.4; color: var(--strong); }
.ct-row .pr { font-size: calc(15px * var(--rs)); line-height: 1.5; color: var(--muted); font-style: italic; }
.ct-row .ml { display: none; }
.ct-row .lined { min-height: calc(1.9em * 2); }
.turns { display: grid; border: 2px solid var(--strong); padding: 6px 20px; }
.turn { display: grid; grid-template-columns: minmax(150px, 220px) 30px minmax(0, 1fr); gap: 12px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.turn:last-child { border-bottom: 0; }
.turn .from b { font-weight: 700; color: var(--strong); }
.turn .from .kicker { font-size: 10.5px; margin-left: 6px; letter-spacing: .14em; }
.turn .arr { font-family: var(--display); font-size: 20px; color: var(--strong); line-height: 1.6; }
.turn .to { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.turn .to .kicker { font-size: 10.5px; letter-spacing: .14em; padding-bottom: 6px; }
.rings { max-width: 300px; }
.ring { border: 1.5px solid var(--strong); background: var(--bg-2); padding: 8px 10px 10px; display: grid; gap: 8px; }
.ring.alt { background: var(--bg); }
.ring .kicker { font-size: 11px; color: var(--strong); letter-spacing: .16em; }
.ring:not(:has(.ring)) { background: var(--inv-bg); border-color: var(--inv-bg); }
.ring:not(:has(.ring)) .kicker { color: var(--gold); }
.brow { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 24px; align-items: start; }
.bcol { display: grid; gap: 22px; }
.bcol > .b + .b { margin-top: 0; }
.steprows { display: grid; gap: 12px; }
.steprows ol { list-style: none; margin: 0; padding: 0; display: grid; }
.steprows li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.steprows li:first-child { border-top: 2px solid var(--strong); }
.steprows .sn { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; color: var(--strong); }
.steprows li.accent .sn { color: var(--pink-ink); }
.steprows h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(19px * var(--rs)); line-height: 1.1; color: var(--strong); }
.steprows p { font-size: calc(15px * var(--rs)); line-height: 1.5; }
.callout.rich { display: grid; gap: 6px; }
.callout.dark .kicker { color: var(--gold); }
.callout.dark .lt { color: var(--inv-fg); }
.callout.dark .lx, .callout.dark .ln-note { color: var(--inv-fg); }
.passage p + p { margin-top: .7em; }
.w.m-star::after { content: "★"; font-size: .6em; color: var(--mark); vertical-align: super; margin-left: 1px; line-height: 0; }
.w.m-star { text-decoration: underline dashed var(--mark); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.tool .sw.s { color: var(--mark); }
@media (max-width: 760px) {
  .brow { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .tbox { padding: 18px 16px; }
  .fld { grid-template-columns: minmax(0, 1fr); }
  .fld > label { padding-bottom: 0; }
  .ct-row.th { display: none; }
  .ct-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ct-row .cell { display: grid; gap: 4px; }
  .ct-row .ml { display: block; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--muted); }
  .turns { padding: 4px 14px; }
  .turn { grid-template-columns: minmax(0, 1fr) 24px; }
  .turn .to { grid-column: 1 / -1; }
  .rings { max-width: none; }
}
@media (min-width: 761px) and (max-width: 1020px) {
  .cards { grid-template-columns: repeat(var(--c2), minmax(0, 1fr)); }
}
.fld:has(.lined) { align-items: start; }
.fld:has(.lined) > label { padding-top: 6px; }

/* drawings from print: carried exactly; print's black ink follows the page's ink so they read on a night page too */
.art { line-height: 0; }
.art svg { max-width: 100%; height: auto; }
.art [stroke="#0A0A0A"] { stroke: var(--strong); }
.art [fill="#0A0A0A"] { fill: var(--strong); }
.card .art { margin-bottom: 6px; }
.steprows li.sq .sn { width: 34px; height: 34px; display: grid; place-items: center; background: var(--strong); color: var(--bg); font-size: 19px; align-self: start; }
.steprows li.sq.accent .sn { background: var(--pink); color: #fff; }

/* imported Weeks 1 and 2 */
.stepn { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; margin-bottom: 6px; background: var(--strong); color: var(--bg); font-family: var(--display); font-size: 19px; line-height: 1; justify-self: start; }
.tbl-head { display: grid; gap: 4px; margin-bottom: 12px; }
.ctable.printed .ct-row:not(.th) .rl { font-weight: 400; color: var(--muted); }
.ctable.printed .pr { font-style: normal; color: var(--strong); font-weight: 600; }
.ctable.grow .ct-row { grid-template-columns: 70px repeat(var(--n), minmax(0, 1fr)); align-items: end; }
.ctable.grow .ct-row.th { font-family: var(--label); font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.ctable .ct-row.th span:first-child { font-family: var(--label); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ctable .gt-foot { padding-top: 8px; display: flex; justify-content: space-between; }
.card .sub { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--rule); display: grid; gap: 2px; }
.card.dark .sub { border-top-color: #3A3A44; }
.card .sub b { font-weight: 700; font-size: calc(14px * var(--rs)); }
.keyed { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); gap: 12px 24px; }
.ky { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ky .key { width: 28px; height: 28px; background: var(--inv-bg); color: var(--inv-fg); display: grid; place-items: center; font-family: var(--display); }
.ky .r { display: block; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--muted); margin-top: 4px; }
@media (max-width: 760px) { .keyed { grid-template-columns: minmax(0, 1fr); } .ctable.grow .ct-row { grid-template-columns: minmax(0, 1fr); } }
.numlist.two { grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); }
.brow.stack { grid-template-columns: minmax(0, 1fr); }
.ctable.printed .ct-row.th span { font-family: var(--label); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .numlist.two { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); } }

/* the print book's covers, carried whole and scaled to fit */
.printpage { position: relative; margin: 0; width: 100%; aspect-ratio: 816 / 1056; overflow: hidden; background: #0A0A0A; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.printpage .pp { position: absolute; left: 0; top: 0; width: 816px; height: 1056px; transform: scale(var(--k, .5)); transform-origin: 0 0; }
.printpage [data-field] { gap: 14px; }
.pp-field { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 600 20px/1 var(--body, 'Montserrat', sans-serif); color: #0A0A0A; outline: none; }
.pp-field:focus { box-shadow: inset 0 -3px 0 var(--teal); }
.coverrow { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; align-items: end; }
.coverrow.back { grid-template-columns: minmax(0, 420px); margin-top: 40px; }
.cover-note { color: var(--muted); font-size: 14px; max-width: 34ch; }
.backbook { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.wsbox, .notespage { border: 2px solid var(--strong); padding: 22px; display: grid; gap: 12px; }
.wsbox h3, .notespage h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 1; color: var(--strong); }
.wsbox .meta, .notespage .meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wsbox p { color: var(--muted); font-size: 14.5px; }
.wslist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.wslist a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--strong); }
.wslist span { color: var(--muted); font-size: 13px; }
.wsnew { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: end; }
.wsnew .kicker { grid-column: 1 / -1; }
.kvp.write { min-width: 260px; }
.wslink { margin-top: 14px; }
@media (max-width: 760px) {
  .coverrow, .backbook { grid-template-columns: minmax(0, 1fr); }
  .wsnew { grid-template-columns: minmax(0, 1fr); }
}
.printpage svg { max-width: none !important; max-height: none !important; }