:root {
  --void: #0c0a17;        /* the Paths sky: indigo-black, not neutral black */
  --night: #151228;
  --bone: #e8e2d6;
  --dim: #918ba3;
  --rule: rgba(232, 226, 214, 0.13);
  --paths: #4de3c4;       /* the light of the coordinate */
  --paths-soft: rgba(77, 227, 196, 0.55);
  --aurora: #7b5fd0;      /* violet drift in the sky */
  --blood: #a01f24;       /* AoT identity: CTA, badges */
  --blood-bright: #c4272e;
  --bar-h: 3rem;
  --edge-h: 2.75rem;      /* phone page-turn row; keeps the player clear of it */
  /* Space the fixed chrome occupies. The paged view reserves it so the page is
     never drawn underneath the bars. Phones add the page-turn row below. */
  --chrome-top: calc(var(--bar-h) + env(safe-area-inset-top));
  --chrome-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
  --display: "Avenir Next Condensed", "Helvetica Neue", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: ui-sans-serif, system-ui, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--ui);
  background: var(--void);
  color: var(--bone);
}

::selection { background: var(--blood); color: var(--bone); }

/* ---------- landing ---------- */

.landing {
  /* Faint grain so the void reads as night, not as a dead screen. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(120% 60% at 70% -10%, rgba(123, 95, 208, 0.10), transparent 60%),
    var(--void);
}

/* 41rem less the 3rem of padding leaves a 38rem content column — the measure
   the prose wants (~70 characters). Everything else on the page inherits it,
   so chapter rows, share buttons and paragraphs share one edge. The hero
   opts out with max-width: none. */
.landing > * {
  max-width: 41rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* --- hero: full-bleed Paths sky --- */

.hero {
  max-width: none;        /* escape the column; the sky is full-bleed */
  padding: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.hero__sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* The image lives on a ::before so the blur doesn't touch the overlay
   gradients or the glow above it. Negative inset hides the soft edge
   that blur() creates. */
.hero__sky::before {
  content: "";
  position: absolute;
  inset: -2rem;
  background: url("paths-background.jpg") center center / cover no-repeat;
  filter: blur(7px) saturate(1.08);
}

/* Preserve copy contrast without hiding the Coordinate landscape. */
.hero__paths {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 10, 23, 0.88) 0%, rgba(12, 10, 23, 0.58) 38%, rgba(12, 10, 23, 0.16) 72%, rgba(12, 10, 23, 0.42) 100%),
    linear-gradient(180deg, rgba(12, 10, 23, 0.12), rgba(12, 10, 23, 0.42));
}

/* The coordinate's glow breathes, slowly. */
.hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 34% at 70% 28%, rgba(77, 227, 196, 0.22), transparent 70%),
    radial-gradient(60% 50% at 22% 78%, rgba(123, 95, 208, 0.16), transparent 70%);
  animation: glow-breathe 7s ease-in-out infinite alternate;
}

@keyframes glow-breathe {
  from { opacity: 0.65; }
  to   { opacity: 1; }
}

.hero__inner {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 7rem) 1.5rem 4rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: min(88vh, 52rem);
}

.hero__copy { max-width: 34rem; flex: 1 1 auto; }

.hero__eyebrow {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--dim);
  margin: 0 0 1.25rem;
}

.hero__title {
  margin: 0 0 1.5rem;
  line-height: 0.94;
}

.hero__series {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 4vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blood-bright);
  margin-bottom: 0.4rem;
}

.hero__variant {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.9rem, 10vw, 6rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bone);
  /* Lit from the Paths: a cold glow instead of printed ink. */
  text-shadow:
    0 0 24px rgba(77, 227, 196, 0.35),
    0.035em 0.035em 0 rgba(123, 95, 208, 0.35);
}

.hero__tagline {
  font-family: var(--body);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--dim);
  margin: 0 0 2.25rem;
  max-width: 30rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.hero__cta {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: var(--blood);
  color: var(--bone);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid var(--blood-bright);
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.hero__cta:hover {
  background: var(--blood-bright);
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(196, 39, 46, 0.35);
}

.hero__more {
  color: var(--dim);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.15rem;
}

.hero__more:hover { color: var(--paths); border-color: var(--paths-soft); }

.hero__badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--dim);
  margin: 0;
}

/* --- memory shards --- */

.shards {
  position: relative;
  flex: 0 0 24rem;
  align-self: stretch;
  min-height: 30rem;
}

.shard {
  position: absolute;
  margin: 0;
  /* clip-path swallows box-shadow, so the glow lives on the un-clipped
     wrapper as a drop-shadow. */
  filter: drop-shadow(0 0 16px rgba(77, 227, 196, 0.28))
          drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
  animation: shard-float 9s ease-in-out infinite alternate;
}

.shard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: contrast(1.05);
  border: 1px solid rgba(159, 242, 224, 0.35);
}

.shard--0 {
  width: 14rem;
  height: 17rem;
  right: 0;
  top: 6%;
  animation-duration: 10s;
}
.shard--0 img { clip-path: polygon(46% 0%, 100% 24%, 90% 92%, 26% 100%, 0% 38%); }

.shard--1 {
  width: 10.5rem;
  height: 13rem;
  right: 15rem;
  top: 38%;
  animation-duration: 8s;
  animation-delay: -3s;
}
.shard--1 img { clip-path: polygon(58% 0%, 100% 52%, 72% 100%, 0% 82%, 10% 16%); }

.shard--2 {
  width: 12rem;
  height: 15rem;
  right: 1.5rem;
  top: 56%;
  animation-duration: 12s;
  animation-delay: -6s;
}
.shard--2 img { clip-path: polygon(34% 0%, 100% 18%, 94% 76%, 42% 100%, 0% 56%); }

/* Empty glass fragments for depth — frosted, so they read against the
   photographic sky, not just against flat black. */
.shard--glass {
  background: linear-gradient(135deg, rgba(77, 227, 196, 0.30), rgba(123, 95, 208, 0.22));
  backdrop-filter: blur(4px) brightness(1.25);
  -webkit-backdrop-filter: blur(4px) brightness(1.25);
  filter: drop-shadow(0 0 12px rgba(77, 227, 196, 0.35));
}

/* Every splinter is a 5-point irregular polygon — 4 points read as tilted
   rectangles. Opacities alternate so the field has depth, not uniformity. */
.shard--g1 {
  width: 4.5rem;
  height: 5.5rem;
  right: 16rem;
  top: 12%;
  opacity: 0.85;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 22% 92%, 0% 35%);
  animation-duration: 7s;
  animation-delay: -2s;
}

.shard--g2 {
  width: 3.5rem;
  height: 4rem;
  right: 5rem;
  top: 44%;
  opacity: 0.5;
  clip-path: polygon(60% 0%, 100% 45%, 78% 96%, 25% 100%, 0% 52%);
  animation-duration: 11s;
  animation-delay: -5s;
}

/* Smaller splinters orbiting the memory shards. */
.shard--g3 {
  width: 2.2rem;
  height: 2.8rem;
  right: 13.5rem;
  top: 27%;
  opacity: 0.75;
  clip-path: polygon(45% 0%, 92% 28%, 100% 78%, 40% 100%, 0% 42%);
  animation-duration: 6s;
  animation-delay: -1s;
}

.shard--g4 {
  width: 1.6rem;
  height: 2rem;
  right: 2rem;
  top: 40%;
  opacity: 0.45;
  clip-path: polygon(55% 0%, 100% 40%, 74% 100%, 18% 88%, 0% 28%);
  animation-duration: 9s;
  animation-delay: -4s;
}

.shard--g5 {
  width: 2.8rem;
  height: 3.4rem;
  right: 15.5rem;
  top: 74%;
  opacity: 0.8;
  clip-path: polygon(40% 0%, 100% 22%, 88% 82%, 35% 100%, 0% 55%);
  animation-duration: 8s;
  animation-delay: -6s;
}

.shard--g6 {
  width: 1.9rem;
  height: 2.4rem;
  right: 8.5rem;
  top: 8%;
  opacity: 0.55;
  clip-path: polygon(52% 0%, 100% 30%, 90% 88%, 30% 100%, 0% 48%);
  animation-duration: 10s;
  animation-delay: -3s;
}

.shard--g7 {
  width: 2.4rem;
  height: 3rem;
  right: 0.5rem;
  top: 70%;
  opacity: 0.7;
  clip-path: polygon(42% 0%, 96% 18%, 100% 72%, 48% 100%, 0% 60%);
  animation-duration: 7.5s;
  animation-delay: -1.5s;
}

.shard--g8 {
  width: 1.4rem;
  height: 1.8rem;
  right: 18rem;
  top: 55%;
  opacity: 0.4;
  clip-path: polygon(48% 0%, 100% 42%, 80% 94%, 26% 100%, 0% 30%);
  animation-duration: 12s;
  animation-delay: -7s;
}

/* Self-floating drift: a little lift, a little sway, a slow tilt. The
   scroll parallax rides on the separate `translate` property from
   landing.js, so the two compose instead of fighting. */
@keyframes shard-float {
  from { transform: translate(0, 0) rotate(-1.2deg); }
  to   { transform: translate(7px, -14px) rotate(1.2deg); }
}

/* Narrow viewports: shards fall out of the sky into a simple row. */
@media (max-width: 63.99rem) {
  /* No side-by-side layout here: the copy sits directly over the sky, and the
     lower half of that image is a pale horizon. Hold the scrim dark the whole
     way down rather than letting it clear for a column that isn't there. */
  .hero__paths {
    background: linear-gradient(180deg, rgba(12, 10, 23, 0.86) 0%, rgba(12, 10, 23, 0.78) 55%, rgba(12, 10, 23, 0.62) 100%);
  }
  .hero__inner { flex-direction: column; align-items: flex-start; min-height: 0; }
  /* A second, local pool of shadow under the text — radial so it fades out
     inside its own box and never reads as a panel. */
  .hero__copy {
    max-width: none;
    align-self: stretch;
    padding: 1.25rem 1.5rem;
    margin: 0 -1.5rem;
    background: radial-gradient(120% 78% at 28% 46%, rgba(12, 10, 23, 0.82) 0%, rgba(12, 10, 23, 0.58) 55%, rgba(12, 10, 23, 0) 100%);
  }
  /* --dim was chosen against the void, not against a lit horizon. */
  .hero__tagline { color: #d3cde0; }
  .hero__eyebrow, .hero__more, .hero__badge { color: #b8b2c8; }
  .shards {
    position: static;
    flex: none;
    min-height: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding: 1rem 0 2rem;
  }
  .shard { position: static; animation: none; }
  .shard--0, .shard--1, .shard--2 { width: 28%; max-width: 11rem; height: auto; aspect-ratio: 4 / 5; }
  .shard--glass { display: none; }
}

@media (max-width: 34rem) {
  .shard--2 { display: none; }
}

/* --- shared section heading --- */

.section-heading {
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--paths);
  margin: 0 0 1rem;
}

.section-heading::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--paths), var(--aurora));
  margin-top: 0.6rem;
}

/* --- chapters --- */

.chapters { padding-top: 4rem; }

.chapters__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.chapters__item { border-bottom: 1px solid var(--rule); }

.chapters__item a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}

.chapters__item a:hover { background: rgba(77, 227, 196, 0.05); }

.chapters__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

/* Pushed to the far end of the row so the counts read as a column rather
   than trailing each title at whatever width it happens to be. */
.chapters__pages {
  margin-left: auto;
  text-align: right;
  color: var(--dim);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Upcoming chapters: same row shape, but unlinked and clearly pending. */
.chapters__row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
}

.chapters__item--soon .chapters__name { color: var(--dim); }

.chapters__soon {
  margin-left: auto;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blood-bright);
  border: 1px solid var(--blood);
  padding: 0.3rem 0.65rem;
  border-radius: 2px;
  animation: soon-pulse 2.4s ease-in-out infinite;
}

@keyframes soon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.chapters__note {
  font-family: var(--body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--dim);
  margin: 1rem 0 0;
}

/* --- ost --- */

.ost { padding-top: 4rem; }

.ost__soon {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.ost__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--dim);
}

.ost__info {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--dim);
  margin: 0;
}

.ost__dl { color: var(--paths); }
.ost__dl:hover { color: var(--bone); }

/* --- about --- */

.about { padding-top: 4.5rem; }

.about__body {
  font-family: var(--body);
  font-size: 1.1rem;
  line-height: 1.75;
  max-width: 38rem;
}

/* Justified to match the block feel of a manga page. Hyphenation is not
   optional here: without it the narrow measure on phones tears open rivers
   of whitespace between words. */
.about__body p {
  margin: 0 0 1.25rem;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.about__body strong { color: var(--bone); }

.about__link {
  color: var(--paths);
  text-decoration: none;
  white-space: nowrap;
}

.about__link:hover { color: var(--bone); }

/* --- production notes --- */

.process__back {
  padding-top: 2.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.process__back a { color: var(--dim); text-decoration: none; }
.process__back a:hover { color: var(--paths); }

.process__article { padding-top: 2.5rem; }

.process__title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 1.5rem;
}

/* The honest claim, stated before the detail that backs it up. Set apart so it
   reads as the summary rather than as the first of eight equal sections. */
.process__lede {
  margin: 0 0 3rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--paths-soft);
  color: var(--bone);
}

.process__lede p { font-size: 1.15rem; }
.process__lede p:last-child { margin-bottom: 0; }

.process__heading--lede { margin-top: 0; }

.process__heading {
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  margin: 3rem 0 1.1rem;
  color: var(--bone);
}

.process__list {
  margin: 0 0 1.25rem;
  padding-left: 1.2rem;
}

.process__list li { margin-bottom: 0.4rem; }

.process__return { padding-top: 1rem; }

/* --- share --- */

.share { padding-top: 4.5rem; }

.share__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.share__btn {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--bone);
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.share__btn:hover {
  border-color: var(--paths-soft);
  color: var(--paths);
  box-shadow: 0 0 14px rgba(77, 227, 196, 0.15);
}

/* Copy is the route to Discord and Instagram, which have no share intent, so
   it earns more weight than the platform buttons beside it. */
.share__btn--copy { border-color: var(--paths-soft); }

.share__note {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--dim);
}

/* --- colophon --- */

.colophon {
  padding-top: 4rem;
  padding-bottom: 6rem;
  margin-top: 3rem;
}

.colophon__legal,
.colophon__thanks {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--dim);
  max-width: 38rem;
  margin: 0 0 1.25rem;
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
}

.colophon__thanks {
  font-family: var(--body);
  font-style: italic;
  border-left-color: var(--blood);
  color: var(--bone);
}

.colophon__contact {
  margin: 2rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--dim);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.colophon__contact a { color: var(--paths); text-decoration: none; }
.colophon__contact a:hover { color: var(--bone); }

/* ---------- reader ---------- */

.reader {
  background: #0b0b0c;
  color: #e9e6e0;
  overscroll-behavior: none;
}

.stage {
  /* dvh, not vh. 100vh on mobile is the *largest* viewport height — it
     includes the space the URL bar occupies when hidden, so the bottom of
     every page ends up behind browser chrome. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  /* manipulation kills the 300ms tap delay and stops double-tap zoom from
     fighting the tap-zone handler. */
  touch-action: manipulation;
}

.stage img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #17171a;
}

/* Paged: fit the whole page in the space the chrome leaves, never crop. The
   bars are fixed and paint over the stage, so sizing the page to the full
   viewport hides its top and bottom edges behind them. Reserve their height
   and centre the page in what remains; hiding the chrome gives it all back. */
.stage--paged {
  padding: var(--chrome-top) 0 var(--chrome-bottom);
}

.stage--paged img {
  max-height: calc(100vh - var(--chrome-top) - var(--chrome-bottom));
  max-height: calc(100dvh - var(--chrome-top) - var(--chrome-bottom));
}

.chrome-hidden .stage--paged { padding: 0; }

.chrome-hidden .stage--paged img {
  max-height: 100vh;
  max-height: 100dvh;
}

.stage--paged {
  gap: 0;
  flex-direction: row;
}

/* Long-strip: fit to width, scroll vertically. Webtoon reading. */
.stage--strip {
  flex-direction: column;
  align-items: center;
  touch-action: pan-y;
}

.stage--strip img {
  width: 100%;
  max-width: 56rem;
  max-height: none;
}

/* Double-page spread only when the viewport is genuinely wide enough to
   show two pages without shrinking them to postage stamps. A tablet in
   landscape and a laptop want the same thing, so let the aspect ratio
   decide rather than guessing at pixel breakpoints. */
.stage--paged.stage--spread {
  gap: 0;
}

.stage--paged.stage--spread img { max-width: 50%; }

/* ---------- edge navigation ---------- */

/* Always-visible labeled arrows: Next on the right, Prev on the left.
   They sit outside the chrome-hidden toggle on purpose — navigation should
   never disappear. */
.edge {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 0.6rem;
  background: rgba(11, 11, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  color: #e9e6e0;
  font: inherit;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 140ms ease, border-color 140ms ease;
}

.edge:hover { opacity: 1; border-color: rgba(255, 255, 255, 0.45); }

.edge:disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

.edge--prev { left: calc(0.5rem + env(safe-area-inset-left)); }
.edge--next { right: calc(0.5rem + env(safe-area-inset-right)); }

.edge__arrow { font-size: 1.15rem; line-height: 1; }

/* Phones: centred on the side, the arrows sit on top of the artwork — which is
   the one place a reader is actually looking. Drop them into a row above the
   chapter bar instead, and let them hide with the rest of the chrome. Nothing
   becomes unreachable: the tap zones (left third back, right third forward)
   already navigate, so hidden chrome still turns the page. */
@media (max-width: 55rem) {
  /* The page-turn row sits below the art here, so it joins the reserve. */
  :root {
    --chrome-bottom: calc(var(--bar-h) + var(--edge-h) + 1rem + env(safe-area-inset-bottom));
  }

  .edge {
    top: auto;
    bottom: calc(var(--bar-h) + 0.5rem + env(safe-area-inset-bottom));
    transform: none;
    flex-direction: row;
    gap: 0.45rem;
    padding: 0 0.9rem;
    min-height: var(--edge-h);
    opacity: 0.9;
  }

  .chrome-hidden .edge {
    opacity: 0;
    pointer-events: none;
    transform: translateY(40%);
  }

  /* Stack above the new row rather than under it. */
  .reader .player {
    bottom: calc(var(--bar-h) + var(--edge-h) + 1.25rem + env(safe-area-inset-bottom));
  }
}

/* ---------- ost player ---------- */

/* Compact fixed pill, bottom-right on every page. Rendered only when the
   site was built with soundtrack files. */
.player {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  background: rgba(12, 10, 23, 0.85);
  border: 1px solid rgba(77, 227, 196, 0.3);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-size: 0.8rem;
  box-shadow: 0 0 18px rgba(77, 227, 196, 0.12);
}

/* On reader pages, sit above the bottom chapter bar. */
.reader .player {
  bottom: calc(var(--bar-h) + 1rem + env(safe-area-inset-bottom));
}

.player__note { color: var(--paths); }

.player__title {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dim);
}

.player__btn {
  background: none;
  border: none;
  color: var(--bone);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.8;
}

.player__btn:hover { opacity: 1; color: var(--paths); }
.player__btn--main { font-size: 1.05rem; }

@media (max-width: 34rem) {
  .player__title { display: none; }
}

/* ---------- chrome ---------- */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  background: rgba(11,11,12,0.92);
  backdrop-filter: blur(8px);
  font-size: 0.8125rem;
  z-index: 10;
  transition: transform 160ms ease, opacity 160ms ease;
}

.bar--top {
  top: 0;
  /* Notched phones hide the counter under the notch without this. */
  padding-top: env(safe-area-inset-top);
  height: calc(var(--bar-h) + env(safe-area-inset-top));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bar--bottom {
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.08);
}

.bar a { color: #e9e6e0; text-decoration: none; }
.bar a:hover { color: #fff; }

.bar__title { color: #8f8b84; }
.bar__counter { color: #8f8b84; font-variant-numeric: tabular-nums; }
.bar__nav--off { color: #4a4842; }

.bar__mode {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: #e9e6e0;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  font: inherit;
  cursor: pointer;
}

.bar__mode:hover { border-color: rgba(255,255,255,0.5); }

/* Middle tap zone hides the chrome — the convention every reader app uses,
   and it gives phones back the screen. */
.chrome-hidden .bar {
  opacity: 0;
  pointer-events: none;
}

.chrome-hidden .bar--top { transform: translateY(-100%); }
.chrome-hidden .bar--bottom { transform: translateY(100%); }

:focus-visible {
  outline: 2px solid var(--paths);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}