:root {
  --color-lead: #26575a;      /* teal — unspooling range */
  --color-coral: #eb6d66;
  --color-yellow: #f8c417;
  --color-olive: #858e69;
  --color-red: #d34340;
  --color-paper: #fffdf8;
  --font-display: 'Prata', Georgia, serif;
  --font-heading: 'Raleway', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

* { box-sizing: border-box; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-lead);
  color: var(--color-paper);
  font-family: var(--font-body);
  scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

a { color: var(--color-paper); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--color-coral); }
a:focus-visible { outline: 2px solid var(--color-paper); outline-offset: 3px; }

/* Real sticky footer via flex column — the hint is a normal last child,
   never a fixed-position element fighting the embedding context's
   viewport. Nothing can render "under" it; document order guarantees it.
   main's height is FIXED (not min-height) so it can never grow past the
   viewport — .scroll-shell absorbs all overflow internally instead. */
main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.scroll-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-shell::-webkit-scrollbar { display: none; }
.scroll-shell:focus-visible {
  outline: 2px solid var(--color-paper);
  outline-offset: -2px;
}

.track {
  position: relative;
  width: 3700px;
  height: 900px;
}

.line {
  position: absolute;
  top: 320px; left: 0; right: 0; height: 1px;
  background: rgba(255, 253, 248, 0.35);
}

.marker {
  position: absolute;
  top: 315px;
  width: 11px; height: 11px;
  border-radius: 50%;
  transform: translate(-50%, 0);
}
.m1 { left: 300px;  background: var(--color-yellow); }
.m2 { left: 1080px; background: var(--color-coral); }
.m3 { left: 1930px; background: var(--color-olive); }
.m4 { left: 2750px; background: var(--color-red); }

.letter {
  position: absolute;
  top: 220px;
  font-family: var(--font-display);
  font-size: 170px;
  line-height: 1;
  color: var(--color-paper);
}
.letter--d { left: 60px; }
.letter--z { left: 3420px; }

.through {
  position: absolute;
  top: 300px; left: 500px;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 1.2em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, 0.4);
}

.stop { position: absolute; width: 300px; }
.stop .label {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 10px;
  color: rgba(255, 253, 248, 0.75);
}
.stop .title {
  font-family: var(--font-display); font-size: 28px; line-height: 1.25; margin: 0;
  font-weight: 400; font-style: normal;
}
.stop a.title { text-decoration: none; }
.stop a.title:hover, .stop a.title:focus-visible { color: var(--color-coral); }

.stop--book    { top: 130px; left: 260px; }
.stop--essays  { top: 400px; left: 1050px; text-align: right; }
.stop--process { top: 130px; left: 1900px; }

.stop--about {
  top: 340px; left: 2650px;
  width: 500px;
  padding-bottom: 40px;
}
.stop--about .bio {
  font-family: var(--font-body); font-size: 15px; line-height: 1.75;
  color: rgba(255, 253, 248, 0.9); margin: 16px 0 20px 0;
}
.stop--about .bio cite { font-style: italic; }
.stop--about .learn-more {
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.04em;
}

.hint {
  flex-shrink: 0;
  padding: 20px 6vw calc(20px + env(safe-area-inset-bottom, 0px)) 6vw;
  margin: 0;
  background: var(--color-lead);
  font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255, 253, 248, 0.9);
}

@media (max-width: 640px) {
  .track { width: 2500px; height: 1100px; }
  .line { top: 260px; }
  .marker { top: 255px; }
  .letter { top: 170px; font-size: 110px; }
  .letter--z { left: 2280px; }
  .through { top: 240px; left: 340px; font-size: 11px; letter-spacing: 0.8em; }
  .m1 { left: 200px; } .m2 { left: 720px; } .m3 { left: 1280px; } .m4 { left: 1820px; }
  .stop { width: 240px; }
  .stop--book    { top: 100px; left: 170px; }
  .stop--essays  { top: 320px; left: 700px; }
  .stop--process { top: 100px; left: 1260px; }
  .stop--about   { top: 280px; left: 1750px; width: 300px; padding-bottom: 40px; }
  .stop .title { font-size: 22px; }
  .hint { padding: 16px 6vw; }
}