/* ==========================================================================
   Sections — the issue, front to back.
   ========================================================================== */

/* --------------------------------------------------------------------------
   00 · PORTAL — a dimension gate opening onto the page.

   Modelled on the Spider-Verse collider portal: nested hexagons twisting out
   of a white-hot core in hot orange and amber, over a bruised purple field
   with scanlines and light streaks. No text, no progress bar — the curtain
   is an iris whose hole grows until the site is simply there.
   -------------------------------------------------------------------------- */

.portal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: transparent;
  overflow: hidden;
}

/* The curtain. A transparent circle wearing an enormous box-shadow, so
   growing the circle grows the hole you see the page through. 150vmax is
   the smallest aperture that still clears the corners at any aspect ratio
   (a square viewport needs ~141vmax). */
.portal-iris {
  width: 0;
  height: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 110vmax #0b0318;
  transition: width .95s cubic-bezier(.76, 0, .24, 1),
              height .95s cubic-bezier(.76, 0, .24, 1);
}
.portal.is-open .portal-iris { width: 150vmax; height: 150vmax; }

/* The bruised purple field the gate burns through, plus scanlines. */
.portal-field {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%,
      rgba(255, 186, 88, .34) 0%,
      rgba(255, 70, 46, .26) 20%,
      rgba(168, 46, 205, .26) 42%,
      rgba(62, 20, 112, .28) 62%,
      transparent 80%);
}

/* Light streaks firing off the gate. */
.portal-streaks {
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 214, 140, .85) 0deg .18deg,
    transparent .18deg 11deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 20%, #000 34%, #000 60%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 20%, #000 34%, #000 60%, transparent 76%);
  opacity: .5;
  animation: portal-streak 9s linear infinite;
}

/* The hexagon tunnel. */
.portal-hexes {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(88vmin, 900px);
  height: min(88vmin, 900px);
  overflow: visible;
  filter: drop-shadow(0 0 16px rgba(255, 120, 40, .7));
}
.hex {
  fill: none;
  stroke-width: 3.2;
  stroke-linejoin: miter;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: hex-fly 3.2s linear infinite;
}

/* Alternating heat: orange, red, amber. */
.hex--1, .hex--4, .hex--7 { stroke: #ff7a1f; }
.hex--2, .hex--5          { stroke: #ff3b2f; }
.hex--3, .hex--6          { stroke: #ffc03a; }

.hex--1 { animation-delay: 0.00s; }
.hex--2 { animation-delay: -0.46s; }
.hex--3 { animation-delay: -0.91s; }
.hex--4 { animation-delay: -1.37s; }
.hex--5 { animation-delay: -1.83s; }
.hex--6 { animation-delay: -2.29s; }
.hex--7 { animation-delay: -2.74s; }

/* A cyan copy nudged off-register for the chromatic fringe. */
.hex-ghost {
  transform: translate(.9px, -.7px);
  opacity: .5;
  mix-blend-mode: screen;
}
.hex-ghost .hex { stroke: #47d4ff; stroke-width: 1.6; }

/* White-hot centre. */
.portal-core {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 17vmin;
  height: 17vmin;
  border-radius: 50%;
  background: radial-gradient(circle,
    #fff 0 11%,
    #ffe9b8 20%,
    rgba(255, 150, 50, .85) 36%,
    rgba(255, 60, 60, .45) 54%,
    transparent 72%);
  animation: portal-charge 1.5s ease-in-out infinite;
}

@keyframes hex-fly {
  0%   { transform: scale(.07) rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: .85; }
  100% { transform: scale(2.15) rotate(58deg); opacity: 0; }
}

@keyframes portal-charge {
  0%, 100% { transform: scale(.82); opacity: .9; }
  50%      { transform: scale(1.14); opacity: 1; }
}

@keyframes portal-streak { to { transform: rotate(360deg); } }

/* On open the gate rushes past the viewer as the aperture widens. */
.portal.is-open .portal-hexes {
  animation: none;
  transform: scale(3.6);
  opacity: 0;
  transition: transform .75s cubic-bezier(.5, 0, .3, 1), opacity .6s linear;
}
.portal.is-open .portal-core,
.portal.is-open .portal-streaks {
  animation: none;
  transform: scale(5);
  opacity: 0;
  transition: transform .7s cubic-bezier(.5, 0, .3, 1), opacity .45s linear;
}
.portal.is-open .portal-field {
  opacity: 0;
  transition: opacity .5s linear;
}

@media (prefers-reduced-motion: reduce) {
  .portal { display: none; }
}

/* --------------------------------------------------------------------------
   The city. A procedurally drawn skyline in four parallax layers, fixed
   behind everything, recoloured by the chapter grade.
   -------------------------------------------------------------------------- */

.world {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.world-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 70% at 50% 108%,
      color-mix(in srgb, var(--grade-a) 30%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 90% 55% at 12% 88%,
      color-mix(in srgb, var(--grade-b) 22%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #03030a 0%, var(--surface) 55%, #05060f 100%);
  transition: background .8s var(--ease);
}
.world-layer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  will-change: transform;
}
.world-layer svg { width: 100%; height: 100%; }

/* The last chapter gets a real sunrise instead of more indigo. */
[data-grade="dawn"] .world-sky {
  background:
    radial-gradient(ellipse 140% 62% at 52% 106%,
      rgba(255, 138, 64, .62) 0%, rgba(255, 86, 120, .28) 42%, transparent 70%),
    radial-gradient(ellipse 90% 50% at 14% 96%,
      rgba(255, 47, 208, .22) 0%, transparent 62%),
    linear-gradient(180deg, #080720 0%, #1b1338 46%, #3a1c3f 78%, #5b2a35 100%);
}

/* Dims the whole city once the reader is past the hero. Fixed and on its
   own layer so it covers the skyline but never the panels. */
.world-veil-fixed {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #04040e;
  opacity: var(--veil, 0);
}

/* The corner vignette rides along with the veil rather than being its own
   composited layer. */
.tex--vignette {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%,
    transparent 40%, rgba(0, 0, 0, .55) 100%);
}

/* Fog between the layers so depth reads. */
.world-fog {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 40%,
    color-mix(in srgb, var(--grade-b) 7%, transparent) 72%,
    color-mix(in srgb, var(--grade-a) 12%, transparent) 100%);
}

/* --------------------------------------------------------------------------
   NAV — top bar with the sticker, plus the right-hand chapter rail.
   -------------------------------------------------------------------------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem var(--gutter);
  background: linear-gradient(180deg, rgba(3, 3, 10, .92), transparent);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--f-comic);
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: #fff;
}
.brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--red);
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  font-family: var(--f-display);
  font-size: .95rem;
  color: #fff;
  transform: rotate(-4deg);
}

.topbar-right { display: flex; align-items: center; gap: .55rem; }

.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-comic);
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .48rem .9rem;
  border: var(--border) solid #000;
  background: var(--yellow);
  color: #0a0a0a;
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  transition: transform .14s var(--pop), box-shadow .14s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.btn--ghost {
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border-color: #fff;
  box-shadow: 4px 4px 0 rgba(255, 255, 255, .25);
}
.btn--ghost:hover { box-shadow: 6px 6px 0 rgba(255, 255, 255, .35); }
.btn--red { background: var(--red); color: #fff; }
.btn--lg { font-size: var(--t-md); padding: .7rem 1.3rem; }

/* The chapter rail. */
.rail {
  position: fixed;
  right: max(10px, 1.4vw);
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .55rem .4rem;
  background: rgba(3, 3, 12, .55);
  border: 2px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}
.rail a {
  position: relative;
  display: block;
  width: 26px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  background: transparent;
  transition: all .22s var(--pop);
}
.rail a::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-family: var(--f-comic);
  font-size: .78rem;
  letter-spacing: .1em;
  color: #0a0a0a;
  background: var(--yellow);
  border: 2px solid #000;
  padding: .12rem .45rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--pop);
}
.rail a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail a:hover { border-color: #fff; }
.rail a.is-active {
  background: var(--grade-a);
  border-color: var(--grade-a);
  width: 34px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--grade-a) 70%, transparent);
}

/* Reading progress, printed as a strip of tape across the top. */
.progress {
  position: fixed; top: 0; left: 0;
  height: 4px; width: 0%;
  z-index: 85;
  background: linear-gradient(90deg, var(--red), var(--grade-a), var(--cyan));
  box-shadow: 0 0 12px color-mix(in srgb, var(--grade-a) 60%, transparent);
}

/* --------------------------------------------------------------------------
   01 · HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: clamp(5rem, 11vh, 7rem) clamp(3.5rem, 9vh, 5.5rem);
  z-index: 2;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg,
      rgba(3, 3, 12, .84) 0%,
      rgba(3, 3, 12, .64) 40%,
      rgba(3, 3, 12, .22) 68%,
      transparent 88%),
    linear-gradient(180deg, rgba(3, 3, 12, .6), transparent 34%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  gap: clamp(.9rem, 2.2vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
}
.hero-kicker {
  font-family: var(--f-comic);
  font-size: clamp(1.05rem, 2.6vw, 1.7rem);
  letter-spacing: .1em;
  color: var(--cyan);
  text-shadow: 3px 3px 0 #000;
}
.hero-name {
  font-size: var(--t-3xl);
  line-height: .82;
  letter-spacing: -.015em;
  color: #fff;
  text-shadow:
    calc(var(--split) * -2px) 0 0 var(--red),
    calc(var(--split) *  2px) 0 0 var(--cyan),
    8px 8px 0 #000;
}
.hero-name small {
  display: block;
  font-family: var(--f-comic);
  font-size: clamp(1rem, 3vw, 2rem);
  letter-spacing: .14em;
  color: var(--yellow);
  text-shadow: 4px 4px 0 #000;
  margin-top: .5rem;
}
.hero-lede {
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.6vw, 1.28rem);
  color: #dfe4ff;
}
.hero-lede strong { color: #fff; }
.hero-lede em { color: var(--cyan); font-style: normal; }

.hero-captions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }

.hero-sticker {
  position: absolute;
  right: clamp(12px, 6vw, 90px);
  top: clamp(90px, 16vh, 150px);
  z-index: 3;
  animation: sticker-sway 6s ease-in-out infinite;
}
@keyframes sticker-sway {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-1.4deg) translateY(-8px); }
}

.scroll-cue {
  position: absolute;
  left: 50%; bottom: clamp(18px, 4vh, 40px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  font-family: var(--f-comic);
  font-size: var(--t-sm);
  letter-spacing: .22em;
  color: #fff;
  opacity: .82;
}
.scroll-cue i {
  display: block; width: 2px; height: 42px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  animation: drop 1.5s steps(9, end) infinite;
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  70%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* --------------------------------------------------------------------------
   02 · MONTAGE — the "I've..." rapid-fire strip.
   -------------------------------------------------------------------------- */

.reel { padding: clamp(1rem, 2.6vw, 1.8rem) clamp(1.1rem, 3vw, 2.2rem); }

.reel-list { list-style: none; margin: 0; padding: 0; }
.reel-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.8rem, 3vw, 2.5rem);
  padding: clamp(.62rem, 1.5vw, .95rem) 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .16);
}
.reel-list li:last-child { border-bottom: 0; }
.reel-list span {
  font-weight: 600;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  line-height: 1.4;
  color: #e8ecff;
}
.reel-list b { color: var(--yellow); font-weight: 700; }
.reel-list .sfx {
  flex: none;
  font-style: normal;
  margin: 0;
  min-width: 4.5ch;
  text-align: right;
}

/* --------------------------------------------------------------------------
   03 · BEFORE — the newsprint flashback.
   -------------------------------------------------------------------------- */

/* The flashback is printed on paper, so the whole chapter is paper —
   otherwise the newsprint grade puts dark ink on a dark city. */
.chapter--paper {
  background: var(--paper-2);
  border-block: var(--border-lg) solid #000;
}
.chapter--paper::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, .14) 22%, transparent 26%);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.chapter--paper > * { position: relative; z-index: 1; }
.chapter--paper .ch-kicker { color: var(--red); }
.chapter--paper .ch-num { -webkit-text-stroke-color: rgba(0, 0, 0, .35); }
.chapter--paper .ch-title { color: var(--paper-ink); text-shadow: 4px 4px 0 rgba(0, 0, 0, .18); }

.news {
  background: var(--paper);
  color: var(--paper-ink);
  border: var(--border-lg) solid #000;
  box-shadow: var(--shadow-hard-lg);
  padding: clamp(1.2rem, 3.5vw, 2.4rem);
  transform: rotate(-.6deg);
  position: relative;
}
.news::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, .1) 22%, transparent 26%);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.news > * { position: relative; z-index: 1; }

.news-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 4px double #000;
  padding-bottom: .5rem;
  margin-bottom: 1.1rem;
}
.news-masthead .news-name {
  margin: 0;
  font-family: var(--f-mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-xs);
  letter-spacing: .14em;
}
.news-masthead span {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Institution crest beside the degree. */
.news-title {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.3rem);
  margin-bottom: .6rem;
}
.news-title .news-head { margin-bottom: 0; }
.crest {
  flex: none;
  width: clamp(54px, 7vw, 76px);
  height: auto;
  /* Printed on the same press as the rest of the page. */
  filter: saturate(.92) contrast(1.04);
}

/* Employer lockup: mark and dates on one baseline. */
.ch-org {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.6vw, 1rem);
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.ch-org .ch-kicker { margin-bottom: 0; }

/* Employer wordmark at the head of the work chapter. Boxed like a panel so
   it reads as part of the comic rather than a pasted-in corporate asset. */
.orglogo {
  display: inline-block;
  margin: 0;
  padding: .5rem .85rem;
  border: var(--border) solid #000;
  background: rgba(4, 4, 12, .72);
  box-shadow: var(--shadow-hard-sm);
  transform: rotate(-.8deg);
  transition: transform .18s var(--pop), box-shadow .18s var(--ease);
}
.orglogo img {
  width: clamp(120px, 15vw, 172px);
  height: auto;
}
.orglogo:hover {
  transform: rotate(-.8deg) translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

.news-head {
  font-size: clamp(1.5rem, 4.2vw, 2.7rem);
  line-height: .95;
  margin-bottom: .6rem;
}
.news-dek {
  font-family: var(--f-body);
  font-style: italic;
  font-size: var(--t-md);
  color: #4a4438;
  margin-bottom: 1.2rem;
}
.news-certs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.2rem;
}
.news-certs .chip {
  border-color: rgba(0, 0, 0, .35);
  color: #3f3a2e;
  background: rgba(0, 0, 0, .04);
}
.news-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .9rem;
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 3px solid #000;
  break-inside: avoid;
}
.news-facts .stat b { color: var(--red); text-shadow: none; }
.news-facts .stat span { color: #5d5647; }

/* --------------------------------------------------------------------------
   04 · THE BITE — the ten-panel comic page.
   -------------------------------------------------------------------------- */

.beats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(.8rem, 1.8vw, 1.3rem);
  align-items: stretch;
}
.beats .panel {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: flex-start;
}
.beats .caption { margin-bottom: .2rem; }
.beats .chip-row { margin-top: auto; }

.beat {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.6vw, 2rem);
  line-height: 1.02;
  color: #fff;
}
.beat em { color: var(--magenta); font-style: normal; }
.beat--big { font-size: clamp(1.8rem, 5vw, 3.6rem); }
.body-s { font-size: var(--t-sm); color: #cdd3f5; margin: 0; }

/* The dead-silent panel. */
.panel--dead { background: #000; border-color: #1a1a1a; }
.panel--dead .beat { color: var(--red); }

/* Rain of acronyms in the open-source panel. */
.rain { display: flex; flex-wrap: wrap; gap: .35rem; }
.rain .chip { opacity: .9; }

/* Acronym slot machine. */
.slots {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-family: var(--f-comic);
  font-size: clamp(1.1rem, 3vw, 2.1rem);
  letter-spacing: .06em;
  color: var(--muted);
}
.slots b {
  color: var(--cyan);
  text-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 60%, transparent);
}
.slots .win {
  color: var(--yellow);
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
}

/* The splash page. */
.splash {
  position: relative;
  min-height: 74svh;
  display: grid;
  place-items: center;
  text-align: center;
  border: var(--border-lg) solid #000;
  box-shadow: var(--shadow-hard-lg);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--grade-a) 34%, transparent), transparent 62%),
    #06030f;
  overflow: hidden;
  padding: clamp(1.5rem, 5vw, 3rem);
}
.splash-word {
  font-family: var(--f-display);
  font-size: clamp(3.6rem, 18vw, 15rem);
  line-height: .78;
  color: #fff;
  text-shadow:
    calc(var(--split) * -3px) 0 0 var(--red),
    calc(var(--split) *  3px) 0 0 var(--cyan),
    10px 10px 0 #000;
}
.splash-sub {
  margin-top: 1.1rem;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cyan);
}
.splash-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.2rem, 5vw, 3.5rem);
  margin-top: 2rem;
}
.splash-stats .stat { align-items: center; text-align: center; }

/* --------------------------------------------------------------------------
   05 · THE SUIT — gear cards.
   -------------------------------------------------------------------------- */

.gear {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(.8rem, 2vw, 1.3rem);
}
.gear .panel { display: flex; flex-direction: column; gap: .75rem; }
.gear h3 {
  font-family: var(--f-comic);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: .07em;
  color: var(--grade-a);
}


/* --------------------------------------------------------------------------
   06 · THE CITY — every lit building is a client.
   -------------------------------------------------------------------------- */

.blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
  align-items: stretch;
}
.block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: transform .25s var(--pop), box-shadow .25s var(--ease);
}
.block:hover {
  transform: translate(-3px, -5px);
  box-shadow:
    9px 11px 0 #000,
    inset 0 0 0 1px var(--grade-a),
    0 0 46px -6px color-mix(in srgb, var(--grade-a) 75%, transparent);
}
/* Windows lighting up along the top edge on hover. */
.block::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--grade-a), var(--grade-b));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--ease);
  z-index: 3;
}
.block:hover::after { transform: scaleX(1); }

.block-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
}
.block-code {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  color: #fff;
  letter-spacing: .01em;
}
.block-client {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grade-b);
}
.block-twist { font-size: var(--t-sm); color: #d6dbf8; margin: 0; }
.block-twist b { color: var(--yellow); font-weight: 700; }
.block-foot {
  margin-top: auto;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.block-foot .stat b { font-size: clamp(1.4rem, 3vw, 2.2rem); }

/* --------------------------------------------------------------------------
   07 · THE LESSON — a pull-quote that takes the whole screen.
   -------------------------------------------------------------------------- */

.lesson {
  text-align: center;
  max-width: 22ch;
  margin-inline: auto;
  font-family: var(--f-display);
  font-size: clamp(2rem, 8vw, 6rem);
  line-height: .94;
  color: #fff;
  text-shadow: 6px 6px 0 #000;
}
.lesson u {
  text-decoration: none;
  color: var(--grade-a);
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
}
.lesson-after {
  max-width: 54ch;
  margin: 2rem auto 0;
  text-align: center;
  color: #c6cdeb;
  text-shadow: 0 2px 14px rgba(2, 2, 10, .9);
}

/* --------------------------------------------------------------------------
   09 · SIDE QUESTS — variant covers.
   -------------------------------------------------------------------------- */

.covers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: clamp(.9rem, 2vw, 1.3rem);
}
.cover {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-height: 250px;
  transition: transform .25s var(--pop);
}
.cover:hover { transform: rotate(-1.2deg) translateY(-5px); }
.cover-badge {
  position: absolute;
  top: -12px; right: -10px;
  z-index: 4;
  background: var(--red);
  color: #fff;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  font-family: var(--f-comic);
  font-size: .72rem;
  letter-spacing: .1em;
  padding: .15rem .45rem;
  transform: rotate(7deg);
}
.cover h3 {
  font-family: var(--f-comic);
  font-size: clamp(1.1rem, 2.3vw, 1.45rem);
  letter-spacing: .05em;
  color: #fff;
}
.cover p { font-size: var(--t-sm); color: var(--muted); margin: 0; }
.cover-link {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grade-b);
}
.cover:hover .cover-link { color: var(--yellow); }

/* --------------------------------------------------------------------------
   10 · NOW — dawn.
   -------------------------------------------------------------------------- */

.now {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.now-head {
  font-size: clamp(1.9rem, 6vw, 4.2rem);
  line-height: .95;
  color: #fff;
  text-shadow: 5px 5px 0 #000;
}
.now-head u {
  text-decoration: none;
  color: var(--dawn);
}


/* --------------------------------------------------------------------------
   11 · HELLO — the sticker wall.
   -------------------------------------------------------------------------- */

.hello {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.8rem);
  justify-items: center;
  text-align: center;
}
.hello-head {
  font-size: clamp(2.2rem, 8vw, 5.5rem);
  color: #fff;
  text-shadow: 6px 6px 0 #000;
}
.wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.9rem, 2.5vw, 1.8rem);
}
.wall a {
  transition: transform .22s var(--pop);
}
.wall a:nth-child(2n) .sticker  { transform: rotate(2.4deg); }
.wall a:nth-child(3n) .sticker  { transform: rotate(-4deg); }
.wall a:hover { transform: translateY(-8px) scale(1.04); }
.wall .sticker {
  width: auto;
  min-width: 232px;
  border-radius: 16px;
  box-shadow: 7px 9px 0 rgba(0, 0, 0, .55), 0 16px 44px rgba(0, 0, 0, .5);
}
.wall .sticker-top { padding: .6rem 1.4rem .62rem; }
.wall .sticker-top b {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(.78rem, 1.4vw, .92rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wall .sticker-name {
  padding: .85rem 1.4rem 1.05rem;
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot {
  position: relative;
  z-index: 2;
  border-top: var(--border) solid #000;
  background: rgba(2, 2, 8, .7);
  padding: clamp(2rem, 6vh, 3.5rem) 0 clamp(1.4rem, 4vh, 2.2rem);
  text-align: center;
}
.foot-line {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 3.4vw, 2.2rem);
  color: #fff;
  text-shadow: 4px 4px 0 #000;
  margin-bottom: .8rem;
}
.foot-line u { text-decoration: none; color: var(--red); }
.foot-meta {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}