/* ─────────────────────────────────────────────────────────────────────────────
 * The Bradbury — shared reading-page stylesheet
 * Used by every Anthology/<Story>/read.html. One file, so the look stays
 * consistent and edits land everywhere at once.
 * Claude + The Pope of Pueblo · June 2026
 * ───────────────────────────────────────────────────────────────────────────── */
:root{
  --ink:#c8c0b0; --ink-dim:#6a5a4a; --ink-faint:#2a2218;
  --red:#8a1a14; --gold-bright:#a07830;
  --bg:#06060a; --bg2:#0c0a10; --bg3:#100e14; --border:#1a1418;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink);
  font-family:Georgia,'Times New Roman',serif; min-height:100vh;
}

.back-link{
  position:fixed; top:14px; left:18px; z-index:50;
  font-family:'Segoe UI',sans-serif; font-size:0.62rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-dim); text-decoration:none;
  transition:color .2s; background:rgba(6,6,10,0.7); padding:4px 8px; border-radius:4px;
}
.back-link:hover{ color:var(--red); }

.reading{ max-width:680px; margin:0 auto; padding:92px 40px 70px; }
.read-sub{
  font-family:'Segoe UI',sans-serif; font-size:0.6rem; letter-spacing:0.25em;
  text-transform:uppercase; color:var(--red); margin-bottom:12px;
}
.read-title{
  font-size:clamp(2rem,5vw,3rem); font-style:italic; font-weight:900;
  color:var(--ink); margin-bottom:14px; letter-spacing:-0.01em; line-height:1.05;
}
.read-epi{
  font-style:italic; color:var(--gold-bright); line-height:1.7;
  margin-bottom:32px; font-size:1rem; padding-left:16px; border-left:2px solid var(--red);
}
.mv{
  font-size:0.7rem; letter-spacing:0.3em; color:var(--red);
  font-family:'Segoe UI',sans-serif; margin:46px 0 18px; text-align:center; text-transform:uppercase;
}
.reading p{ font-size:1.02rem; line-height:1.95; color:var(--ink); margin-bottom:20px; }
.reading p.first::first-letter{
  font-size:3.2rem; line-height:0.8; float:left; padding:4px 10px 0 0;
  color:var(--gold-bright); font-style:italic;
}
.pov-rule{ width:40px; height:1px; background:var(--red); margin:34px auto; border:0; }
.read-end{
  text-align:center; color:var(--red); letter-spacing:0.34em;
  font-family:'Segoe UI',sans-serif; font-size:0.7rem; margin-top:44px;
}
.read-colophon{
  text-align:center; color:var(--ink-faint); font-family:'Segoe UI',sans-serif;
  font-size:0.6rem; letter-spacing:0.1em; margin-top:18px; font-style:italic;
}

/* placeholder for art still to be generated */
.story-fig{ margin:0 0 30px; border:1px solid var(--border); border-radius:2px; overflow:hidden; }
.story-fig img{ display:block; width:100%; height:auto; }
.story-fig figcaption{ padding:8px 10px; font-family:'Segoe UI',sans-serif; font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-dim); background:var(--bg2); border-top:1px solid var(--border); }
.story-fig.todo{
  display:flex; align-items:center; justify-content:center; min-height:150px;
  border:1px dashed var(--gold-bright);
  background:repeating-linear-gradient(45deg,var(--bg2),var(--bg2) 10px,var(--bg3) 10px,var(--bg3) 20px);
}
.story-fig.todo .todo-tag{
  font-family:'Segoe UI',sans-serif; font-size:0.52rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--gold-bright); margin-bottom:6px;
}
.story-fig.todo .todo-name{ font-style:italic; color:var(--ink-dim); font-size:0.82rem; text-align:center; padding:0 12px; }

/* TEXT WRAP (Pope 2026-10-14: "we went pretty blah on the images actually a little text wrap might be nice").
   ![Caption](img.jpg){left} / {right} in STORY_*.md -> the plate sits inside the prose and the words flow around it;
   {wide} = full width (the old default). A scene break or part heading clears the float so it never hangs into the
   next scene. Phones get every plate full width: a 40% float on a 375 px screen is a postage stamp beside a word column. */
.story-fig.left { float:left;  width:42%; margin:6px 28px 18px 0; }
.story-fig.right{ float:right; width:42%; margin:6px 0 18px 28px; }
.story-fig.wide { float:none;  width:100%; }
.story-fig.left.narrow, .story-fig.right.narrow{ width:30%; }
.pov-rule, .mv, footer{ clear:both; }
@media (max-width:640px){
  .story-fig.left, .story-fig.right, .story-fig.left.narrow, .story-fig.right.narrow{ float:none; width:100%; margin:0 0 30px; }
}

footer{
  padding:36px; text-align:center; font-family:'Segoe UI',sans-serif;
  font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-faint); border-top:1px solid var(--border);
}
footer a{ color:var(--ink-faint); text-decoration:none; }
footer a:hover{ color:var(--red); }