/* ══════════════════════════════════════════════════════════════════════
   MEANWHILE  ·  page-scoped

   A day-book of the War of the Ring: one chart, thirty-one days, ten
   threads. The map is a WORK (it wears the kit's gilt); the strip, the
   book and the legend are FURNITURE (hairline, the room's ground).
   Everything spends the proto's tokens; the only thing minted here is
   the ten thread inks, which have to read on cream paper, not on the
   room's dark ground — so they are pigments, not the site palette.
   ══════════════════════════════════════════════════════════════════════ */
.mw{ max-width:1180px; margin-inline:auto; }
.mw .pageTitle{ font-size:clamp(40px,5vw,78px); letter-spacing:-.01em; }
.mw .pageLede{ max-width:66ch; }
.mw .mwHead{ max-width:760px; }

/* ── Thread inks (pigments on paper) ─────────────────────────────────
   The storybook reader is appended to <body>, outside .mw, so it is named
   here too: one definition, two roots. */
.mw, .mwReader{
  --ink-frodo:#9c2a1c;   --ink-aragorn:#2f5b7d;  --ink-gandalf:#6e5a92;
  --ink-pippin:#c0611c;  --ink-merry:#237a76;    --ink-rohan:#a8781a;
  --ink-ents:#3a6b3c;    --ink-gondor:#6f7c8c;   --ink-enemy:#1c1a1a;
  --paper:#f3e8d6;
}
.mwT--frodo, .mwEntry--frodo, .mwChip--frodo{ --ink:var(--ink-frodo); }
.mwT--aragorn, .mwEntry--aragorn, .mwChip--aragorn{ --ink:var(--ink-aragorn); }
.mwT--gandalf, .mwEntry--gandalf, .mwChip--gandalf{ --ink:var(--ink-gandalf); }
.mwT--pippin, .mwEntry--pippin, .mwChip--pippin{ --ink:var(--ink-pippin); }
.mwT--merry, .mwEntry--merry, .mwChip--merry{ --ink:var(--ink-merry); }
.mwT--rohan, .mwEntry--rohan, .mwChip--rohan{ --ink:var(--ink-rohan); }
.mwT--ents, .mwEntry--ents, .mwChip--ents{ --ink:var(--ink-ents); }
.mwT--gondor, .mwEntry--gondor, .mwChip--gondor{ --ink:var(--ink-gondor); }
.mwT--enemy, .mwEntry--enemy, .mwChip--enemy{ --ink:var(--ink-enemy); }

/* ── The strip: thirty-one days on one rule ──────────────────────── */
.mwStrip{
  margin-top:clamp(28px,4vh,48px);
  border-top:1px solid rgba(201,168,117,.22);
  border-bottom:1px solid rgba(201,168,117,.22);
  padding:clamp(14px,2vh,22px) 0;
}
.mwStripTop{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.mwDate{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(30px,3.2vw,46px); line-height:1; color:var(--warm-gold);
  min-width:9ch;
}
.mwOrdinal{
  font-family:var(--font-serif); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(201,168,117,.75);
}
.mwVerbs{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.mwBtn{
  appearance:none; background:transparent; cursor:pointer;
  border:1px solid rgba(201,168,117,.32); color:var(--warm-gold);
  font-family:var(--font-serif); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  padding:9px 14px; min-height:36px; line-height:1;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.mwBtn:hover{ border-color:rgba(232,200,154,.7); color:#fff5e2; }
.mwBtn:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:3px; }
.mwBtn.is-on{ background:rgba(201,168,117,.14); }
.mwBtn--arrow{ padding:9px 12px; font-size:13px; letter-spacing:0; }

.mwTicks{
  display:flex; align-items:flex-end; gap:0; margin-top:clamp(12px,1.8vh,18px);
  position:relative; padding-top:8px;
}
.mwTicks::before{
  content:''; position:absolute; left:0; right:0; top:8px; height:1px;
  background:rgba(201,168,117,.28);
}
.mwTick{
  appearance:none; border:0; background:transparent; cursor:pointer; padding:0;
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(160,168,181,.7); font-family:var(--font-serif); font-size:10.5px; letter-spacing:.04em;
  transition:color .2s ease;
}
.mwTick i{ display:block; width:1px; height:9px; background:rgba(201,168,117,.45); transition:height .2s ease, background .2s ease; }
.mwTick.is-past{ color:rgba(201,168,117,.7); }
.mwTick.is-past i{ background:rgba(201,168,117,.65); }
.mwTick:hover{ color:#fff5e2; }
.mwTick.is-on{ color:#fff5e2; }
.mwTick.is-on i{ height:18px; width:2px; background:var(--warm-gold); }
.mwTick:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:2px; }
.mwMonths{
  display:flex; justify-content:space-between; margin-top:8px;
  font-family:var(--font-serif); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(201,168,117,.55);
}
.mwMonths span:first-child{ flex:0 0 19.35%; }   /* Feb 25–30 is 6 of 31 ticks */

/* ── The stage: chart + book ─────────────────────────────────────── */
.mwStage{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);
  gap:clamp(20px,2.6vw,38px); margin-top:clamp(22px,3.2vh,36px); align-items:start;
}
.mwChart{ position:sticky; top:clamp(12px,3vh,28px); }
.mwPanel{ position:relative; }
.mwPanel img{ display:block; width:100%; height:auto; }
.mwSvg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.mwPanel[data-panel="war"]{
  aspect-ratio:1639 / 1039; background:var(--paper); overflow:hidden;
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
}
.mwPanel.is-dragging{ cursor:grabbing; }
.mwWorld{ position:absolute; inset:0; transform-origin:0 0; will-change:transform; }
.mwWorld img{ position:absolute; inset:0; width:100%; height:100%; }
.mwZoom{
  position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:3px; z-index:2;
}
.mwZoom button{
  appearance:none; cursor:pointer; width:30px; height:30px; padding:0;
  border:1px solid rgba(60,40,20,.45); background:rgba(243,232,214,.92); color:#3a2a1a;
  font-family:var(--font-serif); font-size:17px; line-height:1;
  transition:background .2s ease, opacity .2s ease;
}
.mwZoom button:hover{ background:#fff8ea; }
.mwZoom button:disabled{ opacity:.35; cursor:default; }
.mwZoom button:focus-visible{ outline:1px solid #3a2a1a; outline-offset:2px; }


/* Cartography marks */
.mwAmbient text{
  font-family:var(--font-display); font-style:italic; font-size:28px; letter-spacing:.06em;
  fill:#3a2a1c; text-anchor:middle; pointer-events:none;
  /* A letterform-fitted paper clearing, never a scrim: the halo is the
     paper's own colour drawn under the glyphs, so a name can sit on a
     mountain range and still read. */
  paint-order:stroke fill; stroke:var(--paper); stroke-width:7px; stroke-linejoin:round; stroke-linecap:round;
}
.mwTrail{
  fill:none; stroke:var(--ink); stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1 11; opacity:.55; transition:opacity .3s ease;
}
.mwStation{ fill:var(--ink); opacity:.6; transition:opacity .3s ease; }
.mwMark{ cursor:pointer; transition:opacity .3s ease; }
.mwMark .mwHalo{ fill:var(--ink); opacity:.16; }
.mwMark .mwRing{ fill:var(--ink); stroke:var(--paper); stroke-width:4; }
.mwMark .mwTickLine{ stroke:var(--ink); stroke-width:4; stroke-linecap:round; }
.mwMark text{
  font-family:var(--font-serif); font-size:30px; font-weight:700; fill:var(--paper);
  text-anchor:middle; dominant-baseline:middle; pointer-events:none;
}
.mwMark.is-ghost .mwRing{ fill:var(--paper); stroke:var(--ink); stroke-width:4; }
.mwMark.is-ghost text{ fill:var(--ink); }
.mwMark.is-ghost .mwHalo{ opacity:0; }
.mwMark.is-ghost .mwTickLine{ opacity:.5; }
.mwMark:hover .mwHalo{ opacity:.3; }
.mwT.is-dim{ opacity:.12; }
.mwT.is-solo{ opacity:1; }

/* Hover preview beside a map mark: lives in .mwPanel (screen space), outside
   .mwWorld, so it never inherits the camera transform. Positioned in JS
   (positionPeek) from the mark's transformed panel coordinates. */
.mwPeek{
  position:absolute; z-index:3; width:180px; padding:5px;
  background:var(--paper); border:1px solid var(--ink);
  box-shadow:0 12px 26px rgba(0,0,0,.4);
  /* Reachable even unpinned: the picture on it is a door to the storybook,
     so the pointer has to be able to travel there (meanwhile.js holds the
     card open for a grace period on the way). */
  pointer-events:auto;
}
/* The card's picture, as a control */
.mwPeekOpen{
  appearance:none; display:block; position:relative; width:100%; padding:0; margin:0;
  border:0; background:transparent; cursor:zoom-in;
}
.mwPeekOpen:focus-visible{ outline:1px solid #3a2a1a; outline-offset:-2px; }
.mwPeekZoom{                            /* the chart's corner button, smaller */
  position:absolute; top:4px; right:4px; display:none;
  align-items:center; justify-content:center; width:20px; height:20px;
  border:1px solid rgba(60,40,20,.45); background:rgba(243,232,214,.92); color:#3a2a1a;
  font-family:var(--font-serif); font-style:normal; font-size:12px; line-height:1;
}
.mwPeek.is-pinned .mwPeekZoom{ display:flex; }
.mwPeekOpen:hover .mwPeekZoom{ display:flex; background:#fff8ea; }
.mwPeek[hidden]{ display:none; }
.mwChip[hidden]{ display:none; }   /* a thread that hasn't begun yet */
.mwPeek.is-pinned{ width:236px; pointer-events:auto; }
.mwPeekText{
  margin:6px 0 0; font-family:var(--font-display); font-size:12.5px; line-height:1.4;
  color:#3a2a1a;
}
.mwPeekGo{
  display:inline-block; margin-top:7px; padding-bottom:1px;
  font-family:var(--font-serif); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink);
}
.mwPeekGo:hover{ opacity:.75; }
@media (max-width:900px){
  /* The sheet is not placed beside a mark, so it must ignore the inline
     left/top positionPeek() writes for the desktop card — hence !important,
     the one place a stylesheet has to outrank an element's own style. */
  .mwPeek.is-pinned{
    position:fixed; left:8px !important; right:8px !important; bottom:8px; top:auto !important;
    width:auto; height:auto; z-index:40;
    display:flex; gap:10px; align-items:flex-start; padding:8px;
    box-shadow:0 -6px 30px rgba(0,0,0,.5);
  }
  .mwPeek.is-pinned .mwPeekOpen{ width:40%; flex:0 0 40%; }
  .mwPeek.is-pinned .mwPeekBody{ flex:1 1 auto; min-width:0; }
  .mwPeek.is-pinned .mwPeekWho{ margin-top:0; }
}
.mwPeekImg{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.mwPeek.is-dimmed .mwPeekImg{ opacity:.55; filter:saturate(.6); }
.mwPeekWho{
  display:block; margin-top:6px;
  font-family:var(--font-serif); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#3a2a1a;
}
.mwPeekWhere{
  display:block; margin-top:1px;
  font-family:var(--font-display); font-style:italic; font-size:12.5px;
  color:rgba(58,42,26,.72);
}

/* The street-view picture-book: follow a thread and the right column leads
   with one plate + caption instead of the day's full entry list. The plate
   box holds a fixed 4:3 aspect ratio; the caption and the aside beside it
   get a min-height computed once in JS (meanwhile.js's applyStableHeights)
   from the tallest content they will ever hold, so the column's shape stays
   constant across a day-step — the sticky chart beside it never has to
   recompute its pinned range. */
.mwFilmstrip[hidden], .mwPicturebook[hidden], .mwBook[hidden]{ display:none !important; }
.mwFilmstrip{
  margin-top:clamp(10px,1.6vh,16px); display:flex; gap:5px; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.mwFilmstrip::-webkit-scrollbar{ display:none; height:0; width:0; }
.mwFilmTile{
  appearance:none; padding:0; cursor:pointer; flex:0 0 auto; position:relative;
  height:44px; aspect-ratio:4/3; border:1.5px solid transparent; background:var(--paper);
  overflow:hidden; opacity:.75; transition:opacity .2s ease, border-color .2s ease;
}
.mwFilmTile:hover{ opacity:1; }
.mwFilmTile.is-current{ border-color:var(--ink); opacity:1; }
.mwFilmTile:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:2px; }
.mwFilmThumb{ display:block; width:100%; height:100%; object-fit:cover; }

.mwPicturebook{ display:flex; flex-direction:column; }
.mwPbBack{
  align-self:flex-start; margin-bottom:12px;
  font-family:var(--font-serif); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(160,168,181,.75); text-decoration:none; cursor:pointer;
  transition:color .2s ease;
}
.mwPbBack:hover{ color:var(--ink); }
.mwPbBack:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:2px; }
.mwPlateFrame{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border:1.5px solid var(--ink); background:var(--paper);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  cursor:zoom-in;                       /* the picture opens the storybook */
  transition:box-shadow .25s ease;
}
.mwPicturebook .mwPlateFrame:hover{ box-shadow:0 16px 38px rgba(0,0,0,.5); }
.mwPlateZoom{ z-index:3; }              /* the ⤢ the chart's corner set wears */
.mwPlateLayer{ position:absolute; inset:0; opacity:0; transition:opacity .25s ease; }
.mwPlateLayer.is-active{ opacity:1; }
.mwPlateImg{ display:block; width:100%; height:100%; object-fit:cover; }
.mwPlateFrame.is-dimmed .mwPlateImg{ opacity:.5; filter:saturate(.6); }
.mwPlateCaption{ margin-top:12px; }
.mwPlateCaption .mwWho{
  font-family:var(--font-serif); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(232,200,154,.85);
}
.mwPlateCaption .mwWhere{
  font-family:var(--font-display); font-style:italic; font-size:14.5px; letter-spacing:.02em;
  color:rgba(160,168,181,.85); margin-left:10px;
}
.mwPlateCaption p{
  margin:5px 0 0; font-family:var(--font-display); font-size:17.5px; line-height:1.5;
  color:rgba(232,228,221,.86); text-wrap:pretty;
}
.mwPlateCaption p.is-quiet{ font-style:italic; color:rgba(160,168,181,.8); }
.mwPlateCaption .mwRef{
  display:block; margin-top:5px;
  font-family:var(--font-serif); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(201,168,117,.62);
}
.mwPlateCaption .mwInf{ font-style:italic; text-transform:none; letter-spacing:.04em; color:rgba(160,168,181,.7); }

/* The day-book */
.mwBook{ display:flex; flex-direction:column; }
.mwEntry{
  display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-areas:"glyph body";
  gap:12px; align-items:start;
  padding:13px 0; border-top:1px solid rgba(201,168,117,.14);
  transition:opacity .3s ease, background .25s ease;
}
.mwEntry.has-shot{ grid-template-columns:30px minmax(0,1fr) 84px; grid-template-areas:"glyph body tile"; }
.mwEntry:first-child{ border-top:0; padding-top:2px; }
.mwEntry.is-dim{ opacity:.28; }
.mwEntry.is-lit{ background:rgba(201,168,117,.06); }
.mwGlyphBtn{ grid-area:glyph; }
.mwEntryBody{ grid-area:body; }
/* Reset for the follow controls (glyph + name buttons): same look as the
   plain markup they replace, just clickable. */
.mwGlyphBtn, .mwWhoBtn{
  appearance:none; border:0; background:transparent; padding:0; margin:0; cursor:pointer;
  font:inherit; color:inherit; text-align:left; display:block;
}
.mwGlyphBtn:focus-visible, .mwWhoBtn:focus-visible, .mwEntryTile:focus-visible{
  outline:1px solid var(--warm-gold); outline-offset:2px;
}
.mwGlyph{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; margin-top:2px;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-serif); font-size:12px; font-weight:700;
  box-shadow:0 0 0 1.5px var(--paper);
}
.mwEntry--enemy .mwGlyph{ box-shadow:0 0 0 1.5px rgba(232,200,154,.55); }
.mwWhoBtn{ display:inline-block; }
.mwWhoBtn:hover .mwWho{ border-bottom:1px solid rgba(232,200,154,.5); }
.mwWho{
  font-family:var(--font-serif); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(232,200,154,.85); border-bottom:1px solid transparent; transition:border-color .2s ease;
}
/* The day-view tile: a small vignette on the right, thread-ink hairline on
   paper — the third grid column when the day's entry has a drawn shot. */
.mwEntryTile{
  grid-area:tile; appearance:none; padding:0; margin:0; border:1px solid var(--ink); cursor:pointer;
  width:84px; aspect-ratio:4/3; background:var(--paper); align-self:start;
  transition:transform .18s ease, box-shadow .18s ease;
}
.mwEntryTile:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.35); }
.mwEntryTileImg{ display:block; width:100%; height:100%; object-fit:cover; }
.mwWhere{
  font-family:var(--font-display); font-style:italic; font-size:14.5px; letter-spacing:.02em;
  color:rgba(160,168,181,.85); margin-left:10px;
}
.mwEntryBody p{
  margin:5px 0 0; font-family:var(--font-display); font-size:17.5px; line-height:1.5;
  color:rgba(232,228,221,.86); text-wrap:pretty;
}
.mwEp{
  color:inherit; text-decoration:none;
  border-bottom:1px dotted rgba(201,168,117,.6);
  transition:border-color .2s ease, color .2s ease;
}
.mwEp:hover{ color:#fff5e2; border-bottom:1px solid var(--warm-gold); }
.mwEp:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:2px; }
.mwInf{ font-style:italic; text-transform:none; letter-spacing:.04em; color:rgba(160,168,181,.7); }
.mwRef{
  display:block; margin-top:5px;
  font-family:var(--font-serif); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(201,168,117,.62);
}
.mwAside{ margin-top:16px; border-top:1px solid rgba(201,168,117,.3); padding-top:12px; }
.mwAside p{
  margin:0; font-family:var(--font-display); font-size:16.5px; line-height:1.5;
  color:rgba(232,200,154,.9);
}
.mwAside p + p{ margin-top:9px; }
.mwAside p span{
  display:block; font-family:var(--font-serif); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(201,168,117,.7); margin-bottom:3px;
}
.mwSync{ font-style:italic; }

/* The legend, which is also the solo control */
.mwLegendHead{ margin-top:clamp(18px,2.4vh,26px); }
.mwLegendLabel{
  margin:0; font-family:var(--font-serif); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--warm-gold);
}
.mwLegendCaption{
  margin:4px 0 0; font-family:var(--font-display); font-style:italic; font-size:14px;
  letter-spacing:.02em; color:rgba(160,168,181,.85);
}
.mwLegend{
  display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:10px;
}
.mwChip{
  appearance:none; border:1px solid rgba(201,168,117,.2); background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; padding:5px 11px 5px 6px;
  color:rgba(232,228,221,.8); font-family:var(--font-display); font-size:14px; letter-spacing:.02em;
  transition:opacity .25s ease, border-color .25s ease, background .25s ease;
}
.mwChip b{
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; background:var(--ink); color:var(--paper);
  font-family:var(--font-serif); font-size:10px; box-shadow:0 0 0 1px var(--paper);
}
.mwChip:hover{ border-color:rgba(232,200,154,.55); }
.mwChip.is-solo{ border-color:var(--warm-gold); background:rgba(201,168,117,.12); }
.mwChip.is-dim{ opacity:.4; }
.mwChip:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:2px; }
.mwLegendRow{ display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap; }
.mwLegendRow .mwLegendNote{ margin-top:0; }
.mwEntry.is-quiet p{ color:rgba(160,168,181,.8); font-style:italic; }
.mwLegendNote{
  margin-top:10px; font-family:var(--font-serif); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(160,168,181,.6);
}

/* Colophon + closing plate */
.mwAfter{ margin-top:clamp(40px,6vh,72px); max-width:760px; }
.mwAfter .prose{ font-size:18.5px; }
.mwPlate{ margin-top:clamp(26px,4vh,40px); max-width:900px; }
.mwPlate .plateCaption{ margin-top:12px; }

@media (max-width: 900px){
  .mwStage{ grid-template-columns:1fr; }
  .mwChart{ position:static; }
  .mwTick span{ display:none; }
  .mwTick.is-on span, .mwTick:nth-child(5n+1) span{ display:block; }
    .mwAmbient text{ font-size:34px; }
  .mwEntry.has-shot{
    grid-template-columns:30px minmax(0,1fr);
    grid-template-areas:"tile tile" "glyph body";
  }
  .mwEntry.has-shot .mwEntryTile{ width:120px; margin-bottom:10px; }
}

/* The whole month as text: a real, readable fallback (and the indexable
   copy of the day-book), folded until asked for. */
.mwText{ margin-top:clamp(28px,4vh,44px); max-width:760px; border-top:1px solid rgba(201,168,117,.22); padding-top:14px; }
.mwText summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-serif); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--warm-gold); padding:8px 0;
}
.mwText summary::-webkit-details-marker{ display:none; }
.mwText summary::after{ content:'\2193'; transition:transform .3s ease; }
.mwText[open] summary::after{ transform:rotate(180deg); }
.mwText summary:hover{ color:#fff5e2; }
.mwTextBody{ margin-top:14px; font-family:var(--font-display); color:rgba(232,228,221,.84); }
.mwTextLede{ font-size:17.5px; line-height:1.55; margin:0 0 18px; }
.mwDay{ margin-top:22px; }
.mwDay h2{ font-family:var(--font-display); font-weight:400; font-size:22px; color:var(--warm-gold); margin:0 0 8px; }
.mwDay ul{ margin:0; padding:0; list-style:none; }
.mwDay li{ font-size:16px; line-height:1.5; padding:5px 0; border-top:1px solid rgba(201,168,117,.1); }
.mwDay li strong{ font-family:var(--font-serif); font-weight:400; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(232,200,154,.85); margin-right:6px; }
.mwDay li em{ color:rgba(160,168,181,.85); }
.mwDay li small{ display:block; font-family:var(--font-serif); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(201,168,117,.6); margin-top:2px; }
.mwDay li a{ color:inherit; text-decoration:none; border-bottom:1px dotted rgba(201,168,117,.6); }
.mwDay li a:hover{ color:#fff5e2; border-bottom-style:solid; }
.mwDaySync{ font-size:15.5px; line-height:1.5; color:rgba(232,200,154,.9); margin:8px 0 0; font-style:italic; }
.mwDaySync strong{ font-style:normal; font-family:var(--font-serif); font-weight:400; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(201,168,117,.7); margin-right:6px; }

/* ══════════════════════════════════════════════════════════════════════
   THE STORYBOOK READER

   The picture-book given the whole window: one plate as large as the glass
   allows, its caption under it, the month on a rule beneath. It is a VIEW
   over the page's own (thread, day) — closing it leaves the page where it
   stood — so it borrows the page's vocabulary wholesale: the plate is a
   .mwPlateFrame, the caption a .mwPlateCaption, the days .mwTick on
   .mwTicks, and nothing here mints a colour of its own. It lives on <body>
   (above the room's grain at z-index 400), which is why the thread inks are
   named on .mwReader at the top of this sheet.
   ══════════════════════════════════════════════════════════════════════ */
.mwReader{
  position:fixed; inset:0; z-index:500;
  display:flex; flex-direction:column;
  background:var(--room-lo, #04060a);
  --mwChrome:348px;     /* head + caption + month, reserved out of the glass */
}
.mwReader[hidden]{ display:none !important; }

/* ── The head: who, when, where else, and the way out ─────────────── */
.mwReaderHead{
  flex:0 0 auto; display:flex; align-items:baseline; flex-wrap:wrap;
  gap:6px clamp(10px,1.6vw,22px);
  padding:clamp(9px,1.5vh,16px) clamp(12px,2.4vw,28px);
  border-bottom:1px solid rgba(201,168,117,.18);
}
.mwReaderTitle{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px clamp(10px,1.6vw,22px);
}
.mwReaderWho{
  font-family:var(--font-serif); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(232,200,154,.85);
}
.mwReaderDate{
  font-family:var(--font-display); font-weight:400; line-height:1;
  font-size:clamp(22px,2.6vw,38px); color:var(--warm-gold);
}
.mwReaderOrd{
  font-family:var(--font-serif); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(201,168,117,.7);
}
.mwReaderGlyphs{ display:flex; align-items:center; gap:5px; margin-left:auto; }
.mwReaderGlyph{
  appearance:none; cursor:pointer; padding:0; width:23px; height:23px; border-radius:50%;
  border:1px solid rgba(201,168,117,.22); background:var(--ink); color:var(--paper);
  font-family:var(--font-serif); font-size:10.5px; font-weight:700; line-height:1;
  opacity:.5; transition:opacity .2s ease, border-color .2s ease;
}
.mwReaderGlyph:hover{ opacity:.9; }
.mwReaderGlyph.is-on{ opacity:1; border-color:var(--warm-gold); }
.mwReaderGlyph:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:2px; }
.mwReaderTools{ display:flex; align-items:center; gap:6px; }
.mwReaderClose{
  appearance:none; cursor:pointer; align-self:center;
  width:36px; height:36px; padding:0; line-height:1;
  background:transparent; border:1px solid rgba(201,168,117,.32); color:var(--warm-gold);
  font-family:var(--font-serif); font-size:19px;
  transition:border-color .25s ease, color .25s ease;
}
.mwReaderClose:hover{ border-color:rgba(232,200,154,.7); color:#fff5e2; }
.mwReaderClose:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:3px; }

/* ── The plate, as large as the glass allows ──────────────────────── */
.mwReaderStage{
  flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center;
  gap:clamp(4px,1.4vw,16px); padding:clamp(10px,1.8vh,20px) clamp(8px,2vw,22px);
}
.mwReaderPlate{
  width:min(92vw, calc((100vh - var(--mwChrome)) * 4 / 3));
  max-width:100%; max-height:100%;   /* a short window crops the plate, never the head */
  cursor:default; flex:0 1 auto;
}
.mwReaderZone{
  position:absolute; top:0; bottom:0; width:33%; z-index:2; display:none;
  appearance:none; border:0; background:transparent; padding:0;
}
.mwReaderZone--prev{ left:0; cursor:w-resize; }
.mwReaderZone--next{ right:0; cursor:e-resize; }
@media (hover:hover) and (pointer:fine){ .mwReaderZone{ display:block; } }
.mwReaderArrow{
  appearance:none; cursor:pointer; flex:0 0 auto; padding:0; line-height:1;
  width:clamp(36px,3.4vw,50px); height:clamp(54px,8vh,84px);
  background:transparent; border:1px solid rgba(201,168,117,.22); color:var(--warm-gold);
  font-family:var(--font-serif); font-size:21px;
  transition:border-color .25s ease, background .25s ease, opacity .25s ease;
}
.mwReaderArrow:hover{ border-color:rgba(232,200,154,.7); background:rgba(201,168,117,.1); }
.mwReaderArrow:disabled{ opacity:.22; cursor:default; background:transparent; }
.mwReaderArrow:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:3px; }

/* ── The caption: the same voice, one step louder ─────────────────── */
.mwReaderCaption{
  flex:0 0 auto; max-width:64ch; margin:clamp(9px,1.5vh,16px) auto 0; padding:0 clamp(10px,2vw,18px);
  text-align:center; overflow-y:auto;
}
.mwReaderCaption p{ font-size:clamp(17px,1.42vw,20.5px); }
.mwReaderCaption .mwWhere{ font-size:15.5px; }

/* ── The month ────────────────────────────────────────────────────── */
.mwReaderTime{ flex:0 0 auto; padding:0 clamp(12px,2.4vw,28px) clamp(9px,1.5vh,16px); }
.mwReaderTicks{ margin-top:0; overflow-x:auto; scrollbar-width:none; }
.mwReaderTicks::-webkit-scrollbar{ display:none; height:0; }
.mwReaderTicks .mwTick{ min-width:14px; }
.mwReaderTicks .mwTick i{ width:2px; }
/* A day this thread has no plate for: the tick is drawn hollow. */
.mwReaderTicks .mwTick.is-blank i{ width:3px; background:transparent; border:1px solid rgba(201,168,117,.3); }
/* Today, in the thread's own ink — which on a dark ground can be nearly
   black (the Enemy), so it carries the gilt hairline that makes it read. */
.mwReaderTicks .mwTick.is-on i{
  height:18px; width:3px; background:var(--ink); border:0;
  box-shadow:0 0 0 1px rgba(232,200,154,.85);
}
.mwReaderTime .mwMonths{ margin-top:6px; }

@media (max-width:900px){
  .mwReader{ --mwChrome:250px; }
  /* A phone head is two lines and a corner: the day on top, the other
     threads and the playback verb beneath it, and the way out pinned where
     a thumb expects it — never a third row of furniture above the picture. */
  .mwReaderHead{
    position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; gap:6px 10px; padding:8px 54px 8px 14px;
  }
  .mwReaderTitle{ grid-column:1 / -1; }
  .mwReaderDate{ font-size:24px; }
  .mwReaderGlyphs{ margin-left:0; flex-wrap:wrap; }
  .mwReaderFs{ display:none; }          /* a phone has no second full screen */
  .mwReaderClose{ position:absolute; top:6px; right:7px; width:40px; height:40px; }
  /* The picture sits high: a modest gap under the head, the month pinned to
     the foot, and whatever room is left over falls under the words. */
  .mwReaderStage{ flex:0 0 auto; padding:10px 0 0; }
  /* Full width, no side rule to fuss over; the arrows become the picture's
     own edges rather than furniture beside it. */
  .mwReaderPlate{ width:100vw; max-width:100vw; border-left:0; border-right:0; }
  .mwReaderZone{ display:block; }
  .mwReaderArrow{ display:none; }
  .mwReaderCaption{ padding:0 16px; max-height:30vh; }
  .mwReaderTime{ margin-top:auto; padding-inline:10px; }
  .mwReaderTicks .mwTick span{ display:none; }
  .mwReaderTicks .mwTick.is-on span{ display:block; }
  .mwReaderTools .mwBtn{ padding:8px 10px; letter-spacing:.14em; }
}

@media (prefers-reduced-motion: reduce){
  .mwPlateLayer{ transition:none; }
  .mwReaderTicks{ scroll-behavior:auto; }
}