:root { --black:#0d0d0d; --white:#f4f0e8; --pink:#ff75ba; --teal:#22d7c7; --sky:#65b8ff; --yellow:#ffe248; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--white); font-family:"DM Mono",monospace; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:4px solid var(--yellow); outline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.reader-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.3rem clamp(1.25rem,4vw,4rem); }
.mark { color:var(--pink); font:1.55rem/1 "Archivo Black",sans-serif; letter-spacing:-.08em; }
.back { color:var(--teal); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; }
.story-nav { display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; padding:.9rem clamp(1.25rem,4vw,4rem); border-top:1px solid #555; border-bottom:1px solid #555; }
.story-nav a { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; }
.story-nav a:hover { color:var(--yellow); }
.story { padding:clamp(2rem,5vw,5rem) clamp(1rem,4vw,4rem); border-bottom:1px solid #555; }
.story-heading { max-width:900px; margin:0 auto 1.4rem; display:flex; justify-content:space-between; align-items:end; gap:1rem; }
.story-heading h2 { margin:0; color:var(--pink); font:clamp(2.5rem,7vw,6rem)/.9 "Archivo Black",sans-serif; letter-spacing:-.08em; text-transform:uppercase; }
.story:nth-of-type(2) h2 { color:var(--teal); }
.story:nth-of-type(3) h2 { color:var(--sky); }
.story:nth-of-type(4) h2 { color:var(--yellow); }
.story:nth-of-type(5) h2 { color:var(--pink); }
.story-heading span { font-size:.62rem; text-transform:uppercase; white-space:nowrap; }
.pages { display:grid; gap:1.5rem; max-width:900px; margin:auto; }
.pages img { display:block; width:100%; height:auto; background:#fff; border:1px solid #777; }
footer { display:flex; justify-content:space-between; gap:1rem; padding:1.5rem clamp(1.25rem,4vw,4rem); font-size:.65rem; text-transform:uppercase; }
footer a:first-child { color:var(--yellow); }
footer a:last-child { color:var(--teal); }
@media (max-width:700px) {
  .story-nav { gap:.6rem 1rem; }
  .story-heading { flex-wrap:wrap; align-items:baseline; }
  .story-heading h2 { order:2; flex-basis:100%; font-size:clamp(2.6rem,12vw,5rem); }
  .story-heading span:last-child { margin-left:auto; }
  .pages { gap:.7rem; }
}