:root {
  --teal: #2ecfbf;
  --teal-dim: #1a8a82;
  --rust: #c4622d;
  --rust-bright: #e07040;
  --steel: #8a9ba8;
  --black: #060a0c;
  --black-mid: #0d1416;
  --black-light: #151d21;
  --black-card: #111820;
  --white: #e8edf0;
  --border: rgba(46, 207, 191, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

html { background: var(--black); scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: "Syne", sans-serif;
  line-height: 1.6;
}

body::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.035'/%3E%3C/svg%3E");
  content: "";
  inset: 0;
  opacity: .4;
  pointer-events: none;
  position: fixed;
  z-index: 9999;
}

.grid-bg {
  background-image: linear-gradient(rgba(46,207,191,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(46,207,191,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

a { color: inherit; }

.site-nav {
  align-items: center;
  backdrop-filter: blur(16px);
  background: rgba(6,10,12,.9);
  border-bottom: 1px solid var(--border);
  display: flex;
  height: 64px;
  justify-content: space-between;
  padding: 0 48px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
}

.site-logo {
  align-items: center;
  display: flex;
  font: 900 13px/1 "Orbitron", monospace;
  gap: 10px;
  letter-spacing: .12em;
  text-decoration: none;
}

.site-logo__text { color: inherit; }
.site-logo__text b, .read-heading h1 span {
  color: var(--teal);
  font-weight: inherit;
}

.site-logo i {
  animation: pulse 2s ease-in-out infinite;
  background: var(--teal);
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

@keyframes pulse { 50% { opacity: .4; transform: scale(.7); } }

.site-links { align-items: center; display: flex; gap: 30px; }

.site-links a {
  color: var(--steel);
  font: 400 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s;
}

.site-links a:hover, .site-links a.active { color: var(--teal); }

.site-links .subscribe {
  background: var(--teal);
  border-radius: 2px;
  color: var(--black);
  padding: 10px 18px;
}

.site-links .subscribe:hover { background: var(--rust-bright); color: var(--white); }

.read-main { margin: 0 auto; max-width: 1440px; padding: 132px 48px 80px; }

.read-heading { margin-bottom: 54px; max-width: 780px; }

.eyebrow, .story-intro time, .story-card time {
  color: var(--teal);
  font: 400 11px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.read-heading h1 {
  font: 900 clamp(38px, 7vw, 92px)/.96 "Orbitron", monospace;
  letter-spacing: -.045em;
  margin: 15px 0 22px;
  text-transform: uppercase;
}

.read-heading > p:last-child { color: var(--steel); font-size: 18px; margin: 0; }

.story-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.story-card {
  background: var(--black-card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 280px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

.story-card:hover {
  border-color: rgba(46,207,191,.55);
  box-shadow: 0 14px 44px rgba(0,0,0,.35);
  transform: translateY(-4px);
}

.story-card__image {
  aspect-ratio: 9 / 1;
  display: block;
  object-fit: cover;
  width: 100%;
}

.story-card__image--missing, .story-banner--missing {
  background: linear-gradient(110deg, var(--teal-dim), var(--black-light) 55%, var(--rust));
}

.story-card__body { display: flex; flex: 1; flex-direction: column; padding: 24px; }

.story-card h2 {
  font: 700 20px/1.25 "Orbitron", monospace;
  margin: 12px 0 10px;
}

.story-card p { color: var(--steel); margin: 0 0 24px; }

.story-card__body > span {
  color: var(--teal);
  font: 400 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  margin-top: auto;
  text-transform: uppercase;
}

.story-card__body b { color: var(--rust-bright); font-size: 16px; }

.empty-state { color: var(--steel); }

/* The header, prose, and story rail are separate rows. Only the prose scrolls. */
.story-page { height: 100vh; overflow: hidden; }

.story-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  padding-top: 64px;
}

.story-header { background: var(--black-mid); border-bottom: 1px solid var(--border); }

.story-banner {
  aspect-ratio: 9 / 1;
  display: block;
  max-height: 150px;
  min-height: 70px;
  object-fit: cover;
  width: 100%;
}

.story-intro {
  align-items: end;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1120px;
  padding: 18px 36px 20px;
}

.back-link {
  color: var(--steel);
  display: inline-block;
  font: 400 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  margin-right: 18px;
  text-decoration: none;
  text-transform: uppercase;
}

.story-intro h1 {
  font: 700 clamp(24px, 3vw, 44px)/1.1 "Orbitron", monospace;
  margin: 10px 0 6px;
}

.story-intro p { color: var(--steel); margin: 0; max-width: 760px; }

.read-aloud {
  align-items: center;
  background: var(--teal);
  border-radius: 2px;
  color: var(--black);
  display: inline-flex;
  flex-shrink: 0;
  font: 600 11px/1 "IBM Plex Mono", monospace;
  gap: 9px;
  letter-spacing: .12em;
  padding: 13px 18px;
  text-decoration: none;
  text-transform: uppercase;
}

.read-aloud:hover { background: var(--rust-bright); color: var(--white); }

.story-prose {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--teal-dim) var(--black-mid);
  scrollbar-width: thin;
}

.story-prose__inner {
  color: #d5dde0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.85;
  margin: 0 auto;
  max-width: 820px;
  padding: 40px 36px 64px;
}

.story-prose h1, .story-prose h2, .story-prose h3 {
  color: var(--white);
  font: 700 1.15em/1.4 "Orbitron", monospace;
  margin: 2.8em 0 1em;
}

.story-prose h1:first-child, .story-prose h2:first-child { margin-top: 0; }
.story-prose p { margin: 0 0 1.25em; }

.more-stories {
  align-items: stretch;
  background: var(--black-mid);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  height: 82px;
  padding: 8px 28px;
}

.more-stories__label {
  align-items: center;
  color: var(--teal);
  display: flex;
  font: 600 11px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.more-stories__rail { display: flex; gap: 12px; min-width: 0; overflow-x: auto; }

.more-stories .story-card { display: grid; flex: 0 0 280px; grid-template-columns: 68px 1fr; min-width: 0; }
.more-stories .story-card__image { aspect-ratio: auto; height: 100%; }
.more-stories .story-card__body { padding: 8px 12px; }
.more-stories .story-card h2 { font-size: 11px; margin: 3px 0; }
.more-stories .story-card p { display: none; }
.more-stories .story-card__body > span { font-size: 9px; }
.more-stories .story-card time { font-size: 7px; }

.only-story { align-self: center; color: var(--steel); font: 11px "IBM Plex Mono", monospace; }

.audio-overlay { display: none; inset: 0; place-items: center; position: fixed; z-index: 2000; }
.audio-overlay:target { display: grid; }
.audio-overlay__backdrop { background: rgba(0,0,0,.8); inset: 0; position: absolute; }

.audio-player {
  background: var(--black-card);
  border: 1px solid var(--teal-dim);
  box-shadow: 0 20px 80px #000;
  max-width: min(620px, calc(100vw - 32px));
  padding: 28px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.audio-player > p { font: 600 13px "Orbitron", monospace; margin: 0 32px 20px 0; }
.audio-player__close { color: var(--steel); font-size: 28px; line-height: 1; position: absolute; right: 18px; text-decoration: none; top: 14px; }

@media (max-width: 780px) {
  .site-nav { height: 56px; padding: 0 18px; }
  .site-links { gap: 16px; }
  .site-links a { display: none; }
  .site-links a.active, .site-links .subscribe { display: block; }
  .site-links .subscribe { font-size: 9px; padding: 9px 10px; }
  .read-main { padding: 100px 20px 60px; }
  .read-heading { margin-bottom: 36px; }
  .story-shell { padding-top: 56px; }
  .story-banner { min-height: 54px; }
  .story-intro { align-items: start; padding: 14px 20px 16px; }
  .story-intro p { font-size: 14px; line-height: 1.4; }
  .read-aloud { font-size: 0; padding: 12px; }
  .read-aloud span { font-size: 13px; }
  .story-prose__inner { padding: 30px 22px 50px; }
  .more-stories { grid-template-columns: 104px minmax(0, 1fr); height: 70px; padding: 7px 14px; }
  .more-stories__label { font-size: 8px; padding: 0; }
  .more-stories .story-card { flex-basis: 230px; grid-template-columns: 54px 1fr; }
}

@media (max-height: 720px) {
  .story-banner { max-height: 90px; min-height: 44px; }
  .story-intro { padding-bottom: 12px; padding-top: 12px; }
  .story-intro h1 { font-size: 24px; margin: 5px 0 3px; }
  .more-stories { height: 70px; }
}