:root{
  --paper:#F3F4F0; --ink:#191A17; --ink-soft:#5E625B; --rule:#DBDDD5;
  --accent:#2F5D53; --sel:rgba(47,93,83,.14);
  --measure:33rem; --step:1.125rem;
}
[data-theme="dusk"]{
  --paper:#E9E2D5; --ink:#2E251C; --ink-soft:#6B6152; --rule:#D5CBB9;
  --accent:#6B4A2F; --sel:rgba(107,74,47,.14);
}
[data-theme="night"]{
  --paper:#16181A; --ink:#C9CCC7; --ink-soft:#868B85; --rule:#2A2E30;
  --accent:#7FB3A5; --sel:rgba(127,179,165,.18);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Newsreader",Iowan Old Style,Palatino,Georgia,serif;
  font-size:var(--step); line-height:1.66;
  font-variant-numeric:oldstyle-num;
  transition:background .4s ease, color .4s ease;
}
::selection{background:var(--sel)}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* ---------- chrome ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);opacity:.55;z-index:10;transition:width .1s linear}
.rail{
  max-width:var(--measure); margin:0 auto; padding:1.6rem 1.5rem .4rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.rail .running{font-size:.78rem; letter-spacing:.02em; color:var(--ink-soft); font-style:italic}
.themes{display:flex; gap:.55rem; align-items:center}
.themes button{
  width:.95rem;height:.95rem;border-radius:50%;border:1px solid var(--rule);
  transition:transform .15s ease
}
.themes button[aria-pressed="true"]{border-color:var(--ink-soft); transform:scale(1.25)}
.sw-paper{background:#F3F4F0}.sw-dusk{background:#E9E2D5}.sw-night{background:#16181A}

main{max-width:var(--measure); margin:0 auto; padding:0 1.5rem 7rem}
.view{animation:settle .45s ease both}
@keyframes settle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view{animation:none} *{transition:none!important}}

/* ---------- title page ---------- */
.plate{padding:4.5rem 0 2.5rem; border-bottom:1px solid var(--rule)}
.plate h1{
  margin:0; font-weight:300; font-size:clamp(3rem,13vw,4.6rem);
  line-height:.94; letter-spacing:-.025em;
}
.plate .byline{margin:1.6rem 0 0; font-size:.95rem; color:var(--ink-soft)}
.plate .state{
  margin:.35rem 0 0; font-size:.95rem; font-style:italic; color:var(--ink-soft);
}
.blurb{margin:2.2rem 0 0; color:var(--ink-soft); font-size:1rem}

.contents{list-style:none; margin:0; padding:2.2rem 0 0}
.contents li{border-bottom:1px solid var(--rule)}
.contents button{
  display:flex; gap:1.1rem; align-items:baseline; width:100%; text-align:left;
  padding:1rem .2rem; transition:padding-left .2s ease
}
.contents button:hover{padding-left:.55rem}
.contents .num{
  flex:0 0 1.4rem; color:var(--accent); font-size:.9rem; font-variant-numeric:oldstyle-num
}
.contents .ttl{flex:1; font-size:1.12rem; line-height:1.35}
.contents .meta{font-size:.78rem; color:var(--ink-soft); font-style:italic; white-space:nowrap}
.contents .fresh{color:var(--accent); font-style:normal}
.forthcoming{
  padding:1.6rem .2rem; color:var(--ink-soft); font-style:italic; font-size:.95rem;
}

/* ---------- chapter ---------- */
.chapter-open{padding:3.5rem 0 0}
.chapter-open .num{color:var(--accent); font-size:.88rem; letter-spacing:.06em}
.chapter-open h2{
  margin:.7rem 0 2.6rem; font-weight:400; font-size:clamp(1.9rem,6.5vw,2.45rem);
  line-height:1.16; letter-spacing:-.015em
}
.prose p{margin:0; text-indent:1.4em; hyphens:auto}
.prose p:first-of-type{text-indent:0}
.prose p:first-of-type::first-letter{font-size:1.35em; line-height:1}
.prose .break{text-indent:0; margin:1.5rem 0; text-align:center; color:var(--ink-soft)}

.endmark{margin:3rem 0 0; border-top:1px solid var(--rule); padding-top:1.5rem}
.turn{display:flex; justify-content:space-between; gap:1rem; align-items:flex-start}
.turn button{max-width:46%; line-height:1.35}
.turn .dir{display:block; font-size:.75rem; font-style:italic; color:var(--ink-soft); margin-bottom:.25rem}
.turn .name{font-size:.98rem}
.turn .next{text-align:right; margin-left:auto}
.back{display:block; margin:2.4rem auto 0; font-size:.85rem; font-style:italic; color:var(--ink-soft)}

/* ---------- responses ---------- */
.responses{margin:3.5rem 0 0; border-top:1px solid var(--rule); padding-top:1.2rem}
.responses>summary{
  list-style:none; cursor:pointer; font-size:.88rem; font-style:italic;
  color:var(--ink-soft); padding:.3rem 0
}
.responses>summary::-webkit-details-marker{display:none}
.responses>summary::before{content:"— "; color:var(--accent)}
.note{margin:1.4rem 0 0; font-size:.96rem}
.note .who{font-style:italic; color:var(--ink-soft); font-size:.85rem}
.note p{margin:.2rem 0 0}
.compose{margin:1.8rem 0 0; display:flex; flex-direction:column; gap:.7rem}
.compose textarea{
  font:inherit; font-size:.96rem; background:transparent; color:var(--ink);
  border:1px solid var(--rule); border-radius:2px; padding:.7rem .8rem; resize:vertical; min-height:4.5rem
}
.compose input{
  font:inherit; font-size:.9rem; background:transparent; color:var(--ink);
  border:0; border-bottom:1px solid var(--rule); padding:.35rem 0; max-width:14rem
}
.compose .send{align-self:flex-start; font-size:.9rem; color:var(--accent); border-bottom:1px solid var(--accent)}

/* ---------- shelf ---------- */
.shelf{padding:4rem 0 0}
.shelf h1{font-weight:300; font-size:2.6rem; margin:0 0 .4rem; letter-spacing:-.02em}
.shelf .sub{color:var(--ink-soft); font-style:italic; margin:0 0 2.6rem}
.shelf ol{list-style:none;margin:0;padding:0}

/* =========================================================
   Server-rendered additions. Nothing above this line was changed.
   Every rule here exists because the pages are now real URLs
   (links, not buttons) or because of features the prototype
   could not have (resume marker, response moderation notice).
   ========================================================= */

/* Links standing in for the prototype's buttons — same box, same behaviour. */
.contents a{
  display:flex; gap:1.1rem; align-items:baseline; width:100%; text-align:left;
  padding:1rem .2rem; transition:padding-left .2s ease; text-decoration:none; color:inherit;
}
.contents a:hover{padding-left:.55rem}
.turn a{max-width:46%; line-height:1.35; text-decoration:none; color:inherit; display:block}
.turn a.next{text-align:right; margin-left:auto}
a.back{display:block; text-align:center; margin:2.4rem auto 0; font-size:.85rem; font-style:italic; color:var(--ink-soft); text-decoration:none}

/* The chapter you were last reading, on the contents page. */
.contents .resume{color:var(--accent); font-style:normal}

/* Shown after posting a response, and when responses are closed. */
.responses .notice{margin:1.2rem 0 0; font-size:.9rem; font-style:italic; color:var(--ink-soft)}
.compose .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
[hidden]{display:none !important}

/* Safari, both macOS and iOS, still needs the prefix for hyphens. Line 85
   sets `hyphens:auto` unprefixed, so the justified-feeling prose measure
   hyphenates in Chrome and Firefox and does not in Safari — the same
   paragraph breaks differently depending on the reader's browser. The
   prototype's rule is frozen, so the prefix is added here instead. Same
   declared value, so nothing changes in a browser that already hyphenated. */
.prose p{-webkit-hyphens:auto}

/* Reading size — three steps, scaling the ROOT rather than the body.
   `--measure` is 33rem and `--step` is 1.125rem, both relative to the root, so
   scaling the root scales the column along with the type and a line keeps the
   same number of characters. Scaling `body` alone would leave the column at a
   fixed width while the type grew, giving fewer characters per line at every
   step up — a worse measure exactly when the reader has asked for more comfort.
   `medium` deliberately declares nothing: 100% is the approved design, so the
   default rendering is byte-identical to having no control at all. */
:root[data-size="small"]{font-size:93.75%}    /* 15px at a 16px default */
:root[data-size="large"]{font-size:112.5%}    /* 18px */

/* Grouped with the theme dots in the rail, which keeps `.rail`'s
   space-between to two children. */
.controls{display:flex; align-items:center; gap:1.15rem}
.sizes{display:flex; align-items:baseline; gap:.5rem}
.sizes button{
  font-family:inherit; line-height:1; color:var(--ink-soft);
  transition:color .15s ease, transform .15s ease;
}
.sizes button[data-size-set="small"]{font-size:.72rem}
.sizes button[data-size-set="medium"]{font-size:.88rem}
.sizes button[data-size-set="large"]{font-size:1.06rem}
.sizes button:hover{color:var(--ink)}
.sizes button[aria-pressed="true"]{color:var(--ink); transform:scale(1.12)}

/* Site footer. Same restraint as the forthcoming line it used to sit beside on
   the shelf, with room above it so it reads as a footer rather than as a last
   sentence of the page. */
.site-foot{
  margin:4rem 0 0; padding-top:1.4rem; border-top:1px solid var(--rule);
  font-size:.82rem; font-style:italic; color:var(--ink-soft);
}