/* ─────────────────────────────────────────────────────────────
   Midsentence · The Reading Room (Band Two)
   Shared styles for the library shelf, the book pages, and the
   chapter reader. Extends the station's own materials — same ink
   field, same Spectral + Plex Mono, same red pivot on the crosshair.
   ───────────────────────────────────────────────────────────── */
@font-face{ font-family:"Spectral"; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/spectral-400.woff2") format("woff2"); }
@font-face{ font-family:"Spectral"; font-weight:500; font-style:normal; font-display:swap; src:url("/fonts/spectral-500.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/plexmono-400.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:500; font-style:normal; font-display:swap; src:url("/fonts/plexmono-500.woff2") format("woff2"); }

:root{
  --ink:#171B29; --ink-deep:#10131E; --ivory:#F2EAD9; --amber:#E8A33D;
  --signal:#D6453D; --dim:#9AA0B8; --hair:rgba(242,234,217,.14); --hair-2:rgba(242,234,217,.07);
  --good:#7FC99A;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif:"Spectral", Iowan Old Style, Charter, Georgia, serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; background:var(--ink-deep); }  /* dark root: no white flash in the bottom safe area */
body{ background:var(--ink-deep); color:var(--ivory); font-family:var(--mono); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-tap-highlight-color:transparent; }
a{ color:inherit; text-decoration:none; }

/* ══════════════════════════════════════════════════════════════
   THE READER  (full-screen, like the station; noindex)
   ══════════════════════════════════════════════════════════════ */
.reader-body{
  height:100dvh; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 42%, #1E2333 0%, var(--ink) 45%, var(--ink-deep) 100%);
  display:grid; place-items:center;
  touch-action:manipulation; user-select:none;
}
.r-tag{
  position:fixed; top:max(18px, env(safe-area-inset-top)); left:max(20px, env(safe-area-inset-left));
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
  z-index:3;
}
.r-tag b{ color:var(--dim); font-weight:400; }
.r-tag:hover{ color:var(--ivory); } .r-tag:hover b{ color:var(--ivory); }

.r-stage{ width:100%; display:grid; place-items:center; padding:0 16px; }
.reticle{ position:relative; width:100%; display:grid; justify-items:center; }
.tick{ width:1px; height:14px; background:var(--hair); justify-self:center; }
#word{
  font-family:var(--serif); font-weight:500; font-size:clamp(38px,9vw,78px);
  line-height:1.35; letter-spacing:-.01em;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:baseline; align-content:center; width:100%; padding:14px 0;
  height:calc(clamp(38px,9vw,78px)*1.35 + 28px); white-space:pre;
}
#word .pre { justify-self:end;    text-align:right; }
#word .orp { justify-self:center; color:var(--signal); }
#word .post{ justify-self:start;  text-align:left; }
#word{ transition:opacity .45s ease; }   /* the last word holds, then fades before the card */
#word.faded{ opacity:0; }

/* Intro cards — before the words begin, the reader names the book, then the
   chapter (keeps #word's fixed height so the reticle ticks never move). */
#word.announce{
  display:flex; align-items:center; justify-content:center;
  white-space:normal; text-align:center; padding:8px 24px; overflow:hidden;
  font-size:clamp(22px,4.6vw,40px); line-height:1.3; letter-spacing:0;
}
#word.announce.by{ color:var(--dim); font-size:clamp(18px,3.6vw,30px); font-style:italic; }

.r-bar{ position:fixed; left:0; bottom:0; width:100%; height:1px; background:var(--hair); z-index:2; }
.r-bar span{ display:block; height:1px; width:0; background:var(--ivory); opacity:.5; }

/* swipe-to-rewind overlay — the words streak past on this while the DOM word waits */
.r-scrub{ position:fixed; inset:0; z-index:4; pointer-events:none; }
.r-scrub[hidden]{ display:none; }

/* end-of-chapter / sealed card + the pause menu. The [hidden] rules must win
   over the display below, or these panels cover the word and dim it. */
.r-end[hidden], .r-menu[hidden]{ display:none; }
.r-end{
  position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:24px;
  background:radial-gradient(120% 80% at 50% 42%, rgba(30,35,51,.96), rgba(16,19,30,.98));
}
.r-menu{
  position:fixed; inset:0; z-index:6; display:grid; place-items:center; padding:24px;
  background:radial-gradient(120% 80% at 50% 42%, rgba(23,27,41,.86), rgba(16,19,30,.93));
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.r-end .card, .r-menu .card{ text-align:center; max-width:440px; display:grid; gap:6px; justify-items:center; }
.r-end .eyebrow, .r-menu .eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
.r-end h2, .r-menu h2{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,5vw,36px); color:var(--ivory); line-height:1.05; margin:.1em 0; }
.r-end .sub, .r-menu .sub{ font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.04em; margin-bottom:6px; }
.r-end .sub .up{ color:var(--ivory); }     /* the next chapter's name */

/* the end card fades up as the last word fades out */
.r-end{ transition:opacity .55s ease; }
.r-end.entering{ opacity:0; }

/* how far into the book you now are */
.r-end .bprog{ display:grid; gap:9px; justify-items:center; width:min(300px,78vw); margin-top:10px; }
.r-end .bprog .bmeter{ position:relative; height:2px; width:100%; background:var(--hair); }
.r-end .bprog .bmeter span{ position:absolute; left:0; top:0; height:2px; background:var(--ivory); opacity:.55; transition:width .9s cubic-bezier(.2,.7,.2,1); }
.r-end .bprog .bnote{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--dim); }
.r-end .bprog .bnote .on{ color:var(--amber); }
.r-end .acts, .r-menu .acts{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
.r-menu .acts.col{ flex-direction:column; width:min(300px,82vw); margin-top:12px; }
.r-menu .acts.col .btn{ width:100%; }
.r-end .btn, .r-menu .btn{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 18px; border:1px solid var(--hair); color:var(--dim); border-radius:6px; background:none; cursor:pointer;
  appearance:none; -webkit-appearance:none; transition:color .2s, border-color .2s; }
.r-end .btn:hover, .r-menu .btn:hover{ color:var(--ivory); border-color:rgba(242,234,217,.4); }
.r-end .btn.primary, .r-menu .btn.primary{ color:var(--ivory); border-color:rgba(232,163,61,.5); }
.r-end .btn.primary:hover, .r-menu .btn.primary:hover{ border-color:var(--amber); }

/* ══════════════════════════════════════════════════════════════
   ROOM DOCUMENTS  (library + book pages — scrollable, indexable*)
   ══════════════════════════════════════════════════════════════ */
.room-body{
  min-height:100dvh;
  background:radial-gradient(130% 90% at 50% 0%, #1E2333 0%, var(--ink) 46%, var(--ink-deep) 100%) fixed;
  line-height:1.6;
}
.wrap{ max-width:760px; margin:0 auto; padding:0 clamp(18px,5vw,34px) 100px; }

/* persistent masthead — the soul-guard carries the live Band One readout */
.strip{
  position:sticky; top:0; z-index:10;
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  max-width:760px; margin:0 auto;
  /* clear the notch / status bar (viewport-fit=cover) so the bar isn't clipped */
  padding:max(12px, env(safe-area-inset-top)) clamp(18px,5vw,34px) 12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  background:rgba(16,19,30,.72); backdrop-filter:blur(8px); border-bottom:1px solid var(--hair);
}
.strip .wm{ color:var(--dim); } .strip a.wm:hover{ color:var(--ivory); }
.strip .live{ justify-self:center; display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; }
.strip .live .lw{ color:var(--ivory); opacity:.9; text-transform:none; letter-spacing:.02em; transition:opacity .4s; }
.strip .live .lwpm{ color:var(--amber); }
.strip .dot{ width:6px; height:6px; border-radius:50%; background:var(--signal); flex:none; animation:pulse 2.6s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(214,69,61,.5); } 70%{ box-shadow:0 0 0 7px rgba(214,69,61,0); } 100%{ box-shadow:0 0 0 0 rgba(214,69,61,0); } }
.strip .pace{ justify-self:end; white-space:nowrap; } .strip .pace b{ color:var(--ivory); font-weight:400; }
@media (max-width:560px){ .strip{ grid-template-columns:1fr auto; font-size:9.5px; } .strip .live{ display:none; } }
@media (prefers-reduced-motion: reduce){ .strip .dot{ animation:none; } .strip .live .lw{ transition:none; } }

.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
h1.room-title{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; color:var(--ivory);
  font-size:clamp(34px,7vw,58px); line-height:1; margin:.25em 0 .1em; text-wrap:balance; }

/* ---- library shelf ---- */
.lib-head{ padding-top:clamp(30px,7vw,60px); }
.lib-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-top:12px; }
.lib-note{ font-family:var(--serif); font-size:clamp(17px,2.5vw,19px); line-height:1.5; color:var(--ivory); opacity:.92; max-width:56ch; margin-top:20px; }

.bin{ margin-top:30px; }
.bin-div{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--hair); padding-bottom:7px; }
.bin-div .bt{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.bin-div .bn{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--dim); opacity:.8; }

.row{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:3px 14px; align-items:center;
  padding:15px 6px 15px 15px; border-bottom:1px solid var(--hair-2); }
a.row{ transition:background .2s; } a.row:hover{ background:rgba(242,234,217,.03); }
.row .heat{ position:absolute; left:0; top:0; bottom:0; width:2px; }
.row .mark{ grid-row:1/3; align-self:center; justify-self:center; color:var(--dim); font-size:13px; line-height:1; }
.row.now .mark{ color:var(--signal); }
.row .title{ font-family:var(--serif); font-size:19px; color:var(--ivory); line-height:1.15; }
.row.locked .title{ color:var(--dim); }
.row .subl{ grid-column:2; font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--dim); }
.row .subl .on{ color:var(--amber); }
.row .subl .wpm{ color:var(--amber); }   /* the pace this book reads at */
.row .rt{ grid-row:1; justify-self:end; font-family:var(--mono); font-size:16px; color:var(--amber);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.row.locked .rt{ color:var(--dim); }
.row .rt .c{ color:var(--signal); }
.row .gloss{ grid-row:2; justify-self:end; font-family:var(--mono); font-size:10.5px; color:var(--dim); text-align:right; }
@media (max-width:560px){
  .row{ grid-template-columns:22px 1fr; }
  .row .rt{ grid-row:auto; grid-column:2; justify-self:start; margin-top:3px; }
  .row .gloss{ grid-row:auto; grid-column:2; justify-self:start; text-align:left; }
}

/* ---- book page ---- */
.bp{ padding-top:clamp(24px,5vw,44px); text-align:center; }
.bp .crumb{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.bp .crumb a:hover{ color:var(--ivory); }
.bp-eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:22px 0 14px; }
.bp h1{ font-family:var(--serif); font-weight:500; font-size:clamp(32px,6vw,50px); line-height:1; color:var(--ivory); }
.bp-by{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--dim); margin-top:12px; }

.hero{ display:flex; flex-direction:column; align-items:center; gap:7px; margin:34px 0 28px; }
.hero .tk{ width:1px; height:15px; background:var(--hair); }
.hero .rt{ font-family:var(--mono); font-size:clamp(40px,9vw,66px); color:var(--amber); letter-spacing:.01em; font-variant-numeric:tabular-nums; line-height:1; }
.hero .rt .c{ color:var(--signal); }
.hero .rtsub{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-top:4px; }
.hero .rtsave{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ivory); opacity:.82; }

.bp-desc{ font-family:var(--serif); font-size:17px; line-height:1.55; color:var(--ivory); opacity:.92;
  max-width:58ch; margin:0 auto 30px; text-align:left; border-left:1px solid var(--hair); padding-left:18px; }

.prog{ display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--dim);
  max-width:560px; margin:0 auto 9px; font-variant-numeric:tabular-nums; }
.prog .on{ color:var(--amber); }   /* read so far */
.prog .tot{ color:var(--dim); }    /* total */
.meter{ position:relative; height:1px; background:var(--hair); max-width:560px; margin:0 auto 30px; }
.meter .fill{ position:absolute; left:0; top:0; height:1px; background:var(--ivory); opacity:.5; }
.meter .di{ position:absolute; top:50%; width:6px; height:6px; background:var(--ivory); transform:translate(-50%,-50%) rotate(45deg); }

.chap{ font-family:var(--mono); font-size:13px; max-width:560px; margin:0 auto; text-align:left; }
.chap a, .chap div.cr{ display:grid; grid-template-columns:16px 40px 1fr auto auto; gap:12px; align-items:center;
  padding:11px 2px; border-bottom:1px solid var(--hair-2); color:var(--dim); }
.chap a.cr{ transition:background .15s; } .chap a.cr:hover{ background:rgba(242,234,217,.03); }
.chap .st{ grid-column:1; }
.chap .cn{ font-variant-numeric:tabular-nums; }
.chap .ct{ font-family:var(--serif); font-size:15px; color:var(--ivory); opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chap .dur{ font-variant-numeric:tabular-nums; text-align:right; }
.chap .act{ text-align:right; font-size:11px; letter-spacing:.06em; }
.chap .cr.done .st{ color:var(--amber); opacity:.75; }
.chap .cr.done .ct{ opacity:.6; }
.chap .cr.cue{ color:var(--ivory); }
.chap .cr.cue .st{ color:var(--signal); }
.chap .cr.cue .act{ color:var(--ivory); }
.chap .cr.cue .ct{ opacity:1; }
.chap .cr.sealed{ opacity:.42; }
.chap .cr.sealed .dur{ color:var(--dim); }
@media (max-width:560px){ .chap a, .chap div.cr{ grid-template-columns:16px 32px 1fr auto; } .chap .act{ display:none; } }

.room-foot{ margin-top:60px; border-top:1px solid var(--hair); padding-top:18px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--dim); line-height:1.7; }
.room-foot a{ color:var(--dim); } .room-foot a:hover{ color:var(--ivory); }