:root {
  /* Compliance text: `IBM Plex Mono` from Google Fonts; `Inter` from Google Fonts gives the Frutiger-adjacent transit clarity needed for a fast news interface. Source Sans 3` while pushing scale. */
  --carbon: #070708;
  --paper: #F2F0EA;
  --cyan: #00D7FF;
  --violet: #2A1838;
  --acid: #DFFF00;
  --magenta: #FF2D8D;
  --display: "Inter", Arial, sans-serif;
  --body: "Source Sans 3", "Inter", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--carbon); }
body {
  margin: 0;
  color: var(--paper);
  background: var(--carbon);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain,
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}
.grain {
  opacity: .34;
  mix-blend-mode: overlay;
  background:
    radial-gradient(circle at 18% 23%, rgba(255,45,141,.28) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 36%, rgba(0,215,255,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 81%, rgba(242,240,234,.2) 0 1px, transparent 2px),
    repeating-radial-gradient(circle at 50% 50%, rgba(242,240,234,.07) 0 1px, transparent 1px 5px);
  background-size: 41px 47px, 67px 59px, 83px 71px, 9px 9px;
}
.scanlines {
  opacity: .2;
  background: repeating-linear-gradient(0deg, rgba(242,240,234,.13) 0 1px, transparent 1px 5px);
}

.site-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  font-family: var(--mono);
  color: var(--paper);
  mix-blend-mode: difference;
}
.mast-mini {
  position: relative;
  color: inherit;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.mast-mini span { color: var(--magenta); }
.mast-mini::before,
.mast-mini::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.mast-mini::before { color: var(--cyan); }
.mast-mini::after { color: var(--magenta); }
.mast-mini:hover::before { opacity: .9; transform: translate(-5px, 2px); }
.mast-mini:hover::after { opacity: .9; transform: translate(5px, -2px); }
.issue-code { font-size: 11px; letter-spacing: .08em; }
.progress-rail { position: fixed; right: 14px; top: 72px; bottom: 28px; width: 4px; background: rgba(242,240,234,.15); z-index: 121; }
.progress-rail i { display: block; width: 100%; height: 0; background: var(--acid); box-shadow: 0 0 18px var(--acid); }

.focus-dot {
  position: fixed;
  left: 72vw;
  top: 18vh;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--cyan);
  border-radius: 50%;
  z-index: 130;
  pointer-events: none;
  transition: left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), border-color .25s;
  box-shadow: 0 0 0 10px rgba(0,215,255,.08), 0 0 26px rgba(255,45,141,.45);
}
.focus-dot span { position: absolute; inset: 12px; border-radius: 50%; background: var(--magenta); }

.spread {
  position: relative;
  min-height: 100vh;
  display: grid;
  overflow: hidden;
  isolation: isolate;
  transform: scale(1.12);
  filter: blur(7px) contrast(1.08);
  opacity: .78;
  transition: transform .8s cubic-bezier(.2,.9,.16,1), filter .8s ease, opacity .8s ease;
}
.spread.is-active { transform: scale(1); filter: blur(0) contrast(1); opacity: 1; }
.spread::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(242,240,234,.35);
  z-index: 2;
  pointer-events: none;
}
.spread::after {
  content: "";
  position: absolute;
  left: 50%; top: -10vh; bottom: -10vh;
  width: 18px;
  background: rgba(7,7,8,.55);
  box-shadow: 0 0 0 1px rgba(242,240,234,.16), 0 0 40px rgba(0,0,0,.6);
  z-index: 1;
}
.page-label,
.folio,
.caption-rail,
.caption-strip,
.seal {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-label { position: absolute; top: 32px; left: 34px; z-index: 5; font-size: 12px; color: var(--acid); }
.rotate { writing-mode: vertical-rl; transform: rotate(180deg); }
.folio { position: absolute; right: 34px; bottom: 26px; z-index: 7; color: var(--cyan); font-size: 15px; }
.crop { position: absolute; width: 34px; height: 34px; z-index: 6; }
.crop::before,
.crop::after { content: ""; position: absolute; background: var(--paper); }
.crop::before { width: 34px; height: 2px; }
.crop::after { width: 2px; height: 34px; }
.crop-a { left: 22px; top: 22px; } .crop-b { right: 22px; top: 22px; transform: rotate(90deg); }
.crop-c { left: 22px; bottom: 22px; transform: rotate(-90deg); } .crop-d { right: 22px; bottom: 22px; transform: rotate(180deg); }

.spread-hero {
  grid-template-columns: 1.05fr .95fr;
  background:
    linear-gradient(90deg, var(--magenta) 0 49%, var(--cyan) 49% 100%);
  color: var(--carbon);
}
.hero-left { position: relative; z-index: 4; padding: 17vh 0 10vh 5vw; }
.ticker {
  display: inline-block;
  margin: 0 0 2vh 8vw;
  padding: 8px 13px;
  background: var(--acid);
  color: var(--carbon);
  font: 700 13px var(--mono);
  transform: rotate(-6deg);
}
.masthead {
  position: relative;
  margin: 0 0 0 -1vw;
  font-family: var(--display);
  font-size: clamp(7.8rem, 24vw, 23rem);
  line-height: .72;
  letter-spacing: -.09em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--carbon);
  text-shadow: 12px 12px 0 var(--paper);
}
.glitch::before,
.glitch::after,
h2::before,
h2::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform .22s ease, opacity .22s ease;
}
.glitch::before { color: var(--cyan); transform: translate(-14px, 10px); }
.glitch::after { color: var(--magenta); transform: translate(16px, -8px); }
.masthead:hover::before { transform: translate(-28px, 6px); opacity: .75; }
.masthead:hover::after { transform: translate(30px, -6px); opacity: .75; }
.deck {
  max-width: 570px;
  margin: 28px 0 0 8vw;
  color: var(--paper);
  background: var(--carbon);
  padding: 18px 22px;
  font-size: clamp(1.15rem, 2.1vw, 2rem);
  line-height: 1.04;
  font-weight: 700;
}
.spine-news {
  align-self: center;
  justify-self: center;
  z-index: 4;
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-size: clamp(4rem, 11vw, 10rem);
  font-weight: 900;
  letter-spacing: -.08em;
  color: var(--paper);
  text-shadow: -10px 0 0 var(--violet);
}
.spine-news span { color: var(--acid); }
.orbit { position: absolute; z-index: 5; padding: 9px 12px; background: var(--carbon); color: var(--paper); font: 700 13px var(--mono); }
.orbit-one { top: 23vh; right: 22vw; transform: rotate(12deg); }
.orbit-two { bottom: 19vh; left: 17vw; transform: rotate(-10deg); background: var(--paper); color: var(--carbon); }
.orbit-three { top: 61vh; right: 8vw; transform: rotate(5deg); background: var(--acid); color: var(--carbon); }

.reticle { position: absolute; width: 28vmin; height: 28vmin; border: 2px solid currentColor; border-radius: 50%; z-index: 3; color: var(--paper); opacity: .7; transition: transform .8s ease; }
.spread.is-active .reticle { transform: scale(.78); }
.reticle::before,
.reticle::after,
.reticle i,
.reticle b { content: ""; position: absolute; background: currentColor; display: block; }
.reticle::before { left: 50%; top: -20%; width: 2px; height: 140%; }
.reticle::after { top: 50%; left: -20%; height: 2px; width: 140%; }
.reticle i { inset: 22%; border: 2px solid currentColor; border-radius: 50%; background: transparent; }
.reticle b { width: 8px; height: 8px; border-radius: 50%; left: calc(50% - 4px); top: calc(50% - 4px); }
.hero-reticle { right: 14vw; top: 9vh; color: var(--carbon); }

.spread-desk {
  grid-template-columns: 13vw 1fr 1fr 12vw;
  grid-template-rows: 14vh 1fr 1fr 12vh;
  background: var(--paper);
  color: var(--carbon);
}
.particle-map { position: absolute; inset: 0; background: radial-gradient(circle at 18% 40%, rgba(7,7,8,.95) 0 2px, transparent 3px), radial-gradient(circle at 68% 28%, rgba(255,45,141,.65) 0 3px, transparent 4px), radial-gradient(circle at 41% 76%, rgba(0,215,255,.75) 0 2px, transparent 3px); background-size: 34px 31px, 61px 53px, 47px 43px; opacity: .43; }
.article-plate {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  z-index: 4;
  background: rgba(242,240,234,.88);
  border: 3px solid var(--carbon);
  box-shadow: 18px 18px 0 var(--magenta), -14px -14px 0 var(--cyan);
  padding: clamp(28px, 5vw, 70px);
}
.stamp { display: inline-block; padding: 7px 10px; margin-bottom: 18px; background: var(--magenta); color: var(--paper); font: 700 12px var(--mono); letter-spacing: .08em; transform: rotate(-2deg); }
h2 { position: relative; margin: 0 0 22px; font: 900 clamp(3rem, 9vw, 9rem)/.78 var(--display); letter-spacing: -.07em; text-transform: uppercase; }
h2::before { content: attr(data-shadow); color: var(--cyan); transform: translate(-10px, 8px); }
h2::after { content: attr(data-shadow); color: var(--magenta); transform: translate(12px, -8px); }
.article-plate p,
.story-panel p { font-size: clamp(1.1rem, 1.8vw, 1.55rem); line-height: 1.08; font-weight: 600; max-width: 880px; }
.mono-line { font-family: var(--mono); color: var(--violet); font-size: 13px !important; letter-spacing: .05em; border-top: 4px solid var(--carbon); padding-top: 14px; }
.pull { position: absolute; z-index: 5; font: 900 clamp(2.4rem, 6vw, 6rem)/.82 var(--display); letter-spacing: -.07em; text-transform: uppercase; color: var(--paper); background: var(--violet); width: 45vw; padding: 18px; transform: rotate(-8deg); }
.pull-left { left: -4vw; bottom: 12vh; }
.caption-strip { position: absolute; right: 6vw; top: 23vh; z-index: 5; background: var(--acid); color: var(--carbon); padding: 8px 12px; transform: rotate(90deg); transform-origin: right top; font-size: 11px; }
.photo-crop { position: absolute; z-index: 2; filter: grayscale(1) contrast(1.25); mix-blend-mode: multiply; }
.smoke-a { right: 4vw; bottom: 10vh; width: 30vw; height: 28vh; background: radial-gradient(circle at 40% 80%, var(--carbon), transparent 35%), linear-gradient(135deg, var(--cyan), var(--violet)); opacity: .75; }
.smoke-b { left: 9vw; top: 13vh; width: 22vw; height: 28vh; background: repeating-linear-gradient(90deg, var(--carbon) 0 12px, var(--magenta) 12px 24px); opacity: .26; }
.redaction { position: absolute; right: 18vw; bottom: 30vh; z-index: 6; background: var(--carbon); color: var(--acid); padding: 12px 34px; font: 700 18px var(--mono); transform: rotate(6deg); }
.desk-reticle { left: 40vw; top: 34vh; color: var(--magenta); }

.spread-split { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); background: var(--carbon); }
.split { position: absolute; top: 0; bottom: 0; width: 52%; z-index: 0; }
.split.cyan { left: 0; background: var(--cyan); }
.split.magenta { right: 0; background: var(--magenta); }
.story-panel { z-index: 4; background: rgba(7,7,8,.9); color: var(--paper); border: 2px solid var(--paper); padding: clamp(24px, 4vw, 58px); box-shadow: 14px 14px 0 rgba(242,240,234,.22); }
.panel-a { grid-column: 2 / 8; grid-row: 2 / 7; }
.panel-b { grid-column: 7 / 12; grid-row: 4 / 8; background: var(--paper); color: var(--carbon); box-shadow: -18px -18px 0 var(--violet); transform: rotate(2deg); }
.panel-b h3 { margin: 0; font: 900 clamp(2.2rem, 5vw, 5.2rem)/.82 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.acid { background: var(--acid); color: var(--carbon); }
.giant-mark { position: absolute; left: 45vw; top: -8vh; z-index: 2; font: 900 58vw/.8 var(--display); color: rgba(7,7,8,.28); letter-spacing: -.12em; }
.caption-rail { position: absolute; left: 54vw; bottom: 5vh; z-index: 5; color: var(--paper); background: var(--carbon); padding: 9px 11px; font-size: 11px; }
.split-reticle { left: 23vw; top: 48vh; color: var(--acid); }

.spread-archive { background: var(--violet); grid-template-columns: 7vw 1fr 7vw; grid-template-rows: 13vh auto 1fr 12vh; color: var(--paper); }
.archive-title { grid-column: 2; grid-row: 2; z-index: 4; }
.poster-wall { grid-column: 2; grid-row: 3; z-index: 4; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(62px, auto); gap: 10px; align-content: start; transform: rotate(-1deg); }
.headline { position: relative; min-height: 76px; padding: 10px; border: 2px solid var(--paper); background: var(--carbon); color: var(--paper); font: 900 clamp(1.1rem, 2.4vw, 3.3rem)/.82 var(--display); letter-spacing: -.06em; text-transform: uppercase; overflow: hidden; }
.headline::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-8deg, transparent 0 10px, rgba(242,240,234,.08) 10px 12px); }
.headline.big { grid-column: span 3; grid-row: span 2; }
.cyan-text { color: var(--cyan); }
.magenta-text { color: var(--magenta); }
.acid-text { color: var(--acid); }
.ghost { opacity: .5; filter: blur(1px); }
.seal { position: absolute; left: 8vw; right: 8vw; bottom: 36px; z-index: 5; background: var(--acid); color: var(--carbon); padding: 12px; text-align: center; font-size: 12px; }
.archive-reticle { right: 11vw; bottom: 15vh; color: var(--cyan); }

.magnifier {
  position: fixed;
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  border: 2px solid var(--acid);
  border-radius: 50%;
  z-index: 125;
  pointer-events: none;
  display: grid;
  place-items: center;
  color: var(--acid);
  font: 700 11px var(--mono);
  background: rgba(7,7,8,.22);
  backdrop-filter: contrast(1.8) saturate(1.4);
  opacity: 0;
  transition: opacity .18s ease;
}
.magnifier.is-on { opacity: 1; }

@media (max-width: 800px) {
  .site-chrome { padding: 12px; }
  .issue-code { display: none; }
  .spread { min-height: 110vh; }
  .spread-hero, .spread-desk, .spread-split, .spread-archive { display: block; padding: 86px 22px 70px; }
  .hero-left { padding: 6vh 0; }
  .masthead { font-size: 28vw; }
  .deck { margin-left: 0; }
  .spine-news { position: absolute; right: 20px; top: 20vh; font-size: 22vw; }
  .article-plate, .story-panel, .archive-title, .poster-wall { position: relative; margin: 10vh 0; }
  .pull, .caption-strip, .caption-rail { display: none; }
  .poster-wall { grid-template-columns: 1fr; transform: none; }
  .headline.big { grid-column: span 1; grid-row: span 1; }
  .panel-a, .panel-b { transform: none; }
}