/* =========================================================
   modern.css: today.
   One idea runs the whole page: the rainbow from the 1999
   title grew up. It becomes the thread down the timeline,
   then the candles on the cake. The 1999 night sky comes
   back once, behind Alex's note.
   Type: Newsreader and Schibsted Grotesk, two faces born at
   newspapers, a grown-up nod to Times New Roman, the font
   every 1999 page wore by default.
   ========================================================= */

.era-today {
  --paper: #f3f5fb;
  --card: #ffffff;
  --ink: #141b4d;
  --ink-2: #4a5280;
  --rule: #d3d9ec;
  --night: #000033;
  --red: #ef4358;
  --orange: #f38b1f;
  --yellow: #f2be1a;
  --green: #23a86b;
  --blue: #2a8bdb;
  --indigo: #5250e8;
  --violet: #a44ad6;
  --spectrum: linear-gradient(var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--indigo), var(--violet));
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad-x: max(clamp(20px, 6vw, 72px), calc((100% - 1120px) / 2));
  --spine-gap: clamp(36px, 6vw, 64px);

  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.125rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.era-today a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.era-today a:hover { color: var(--indigo); }
.era-today :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.era-today #layout { max-width: none; }
.era-today #sidebar { display: none; }
.era-today :is(.tagline, .construction, .gb-form input[type="reset"]) { display: none; }

.era-today :is(#main > section, #photos, #guestbook) { padding: clamp(80px, 11vw, 150px) var(--pad-x) 0; }
.era-today #main h2 {
  margin: 0 0 0.35em; max-width: 18ch;
  font: 500 clamp(2.25rem, 5vw, 3.5rem)/1.05 var(--serif); letter-spacing: -0.015em;
}
.era-today .section-note { margin: 0 0 2.5rem; max-width: 34rem; color: var(--ink-2); }

/* ---------- hero ---------- */
.era-today #masthead {
  position: relative; min-height: 100vh; min-height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px var(--pad-x) 22vh; text-align: left;
}
.era-today #title { margin: 0; outline: none; }
.era-today .title-today {
  display: block; max-width: 9.5em;
  font: 500 clamp(3.5rem, 11.5vw, 10.5rem)/0.92 var(--serif); letter-spacing: -0.035em;
  font-variation-settings: "opsz" 72;
}
.era-today .subtitle { margin: 2rem 0 0; max-width: 24ch; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.4; color: var(--ink-2); }
/* the start of the thread: it drops from the hero into the timeline */
.era-today #masthead::after {
  content: ""; position: absolute; left: var(--pad-x); bottom: 0; width: 3px; height: 16vh;
  background: linear-gradient(transparent, var(--red)); border-radius: 3px 3px 0 0;
}

/* ---------- the timeline ---------- */
.era-today #main > #journey { position: relative; padding-left: calc(var(--pad-x) + var(--spine-gap)); padding-bottom: 40px; }
.era-today #journey::before,
.era-today #journey::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); width: 3px; border-radius: 0 0 3px 3px;
}
.era-today #journey::before { background: var(--rule); }
.era-today #journey::after { background: var(--spectrum); transform-origin: top; transform: scaleY(var(--progress, 1)); }

.timeline { list-style: none; margin: 0; padding: 0; }
.milestone {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(48px, 7vw, 88px) 0;
}
.milestone:nth-child(1) { --c: var(--red); }
.milestone:nth-child(2) { --c: var(--orange); }
.milestone:nth-child(3) { --c: var(--green); }
.milestone:nth-child(4) { --c: var(--blue); }
.milestone:nth-child(5) { --c: var(--violet); }
.milestone::before {
  content: ""; position: absolute; z-index: 1; top: 50%; left: calc(-1 * var(--spine-gap) - 6px);
  width: 15px; height: 15px; margin-top: -7.5px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 5px var(--paper);
}
.milestone .when { margin: 0 0 0.4rem; font-weight: 600; font-size: 1rem; color: var(--c); }
.milestone h3 { margin: 0 0 0.6rem; font: 500 clamp(2rem, 3.6vw, 2.75rem)/1.08 var(--serif); letter-spacing: -0.01em; }
.milestone-text p:last-child { margin: 0; max-width: 30ch; color: var(--ink-2); }
.artifact { margin: 0; }

/* milestones settle in as you reach them (only once warp.js says it's watching) */
.reveal-ready .milestone > * { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal-ready .milestone:not(.is-visible) > * { opacity: 0; transform: translateY(18px); }
.reveal-ready .milestone:not(.is-visible)::before { transform: scale(0.3); }
.reveal-ready .milestone > .artifact { transition-delay: 0.12s; }
.milestone::before { transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }

/* 1999: a Notepad window, typed live */
.code-artifact {
  background: #c0c0c0; padding: 3px; font: 12px Tahoma, Verdana, sans-serif;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff, 10px 12px 0 rgba(20, 27, 77, 0.08);
}
.code-artifact .titlebar {
  padding: 3px 6px; color: #fff; font-weight: bold;
  background: linear-gradient(90deg, #000080, #1084d0);
}
.code-artifact pre {
  margin: 0; padding: 14px 16px; min-height: 13.5em; overflow-x: auto; background: #fff; color: #000;
  font: clamp(12px, 1.4vw, 14px)/1.55 "Lucida Console", "Courier New", monospace;
  box-shadow: inset 1px 1px #808080, inset 2px 2px #0a0a0a;
}

/* AOL: the sign-on screen */
.signon .win98-window {
  background: #c0c0c0; padding: 3px; color: #000; font: 13px Tahoma, Verdana, sans-serif;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff, 10px 12px 0 rgba(20, 27, 77, 0.08);
}
.signon-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 22px 16px 18px; }
.signon-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #6b6b6b; font-size: 12px; }
.step-icon {
  display: grid; place-items: center; width: 56px; height: 56px; font-size: 26px; color: #808080; background: #b5b5b5;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #fff;
}
.signon-steps li.on { color: #000; font-weight: bold; }
.signon-steps li.on .step-icon { color: #000080; background: #fff8c4; }
.mail-bubble {
  margin: 0 16px 16px; padding: 10px 14px; text-align: center; font-weight: bold; font-size: 15px;
  background: #ffffe1; border: 1px solid #000; visibility: hidden;
}
.mail-bubble.on { visibility: visible; animation: mail-pop 0.45s cubic-bezier(0.3, 1.8, 0.5, 1); }
.mail-envelope { display: inline-block; color: #000080; font-size: 18px; margin-right: 4px; }
@keyframes mail-pop { from { transform: scale(0.6); opacity: 0; } }

/* Big Brother: an early-2000s TV website vote panel */
.vote {
  padding: 24px 22px 20px; text-align: center; color: #fff;
  font-family: Verdana, Tahoma, sans-serif;
  background: radial-gradient(circle at 50% -20%, #6b3fd1, #2a1466 55%, #160a3d);
  border: 3px solid #ffcc00; border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 10px 12px 0 rgba(20, 27, 77, 0.08);
}
.vote-head { margin: 0 0 14px; font: italic 900 22px "Arial Black", Arial, sans-serif; color: #ffcc00; text-shadow: 2px 2px 0 #000; }
.vote-btn {
  padding: 14px 26px; cursor: pointer; border: 2px solid #8a4b00; border-radius: 40px;
  font: bold 15px Verdana, Tahoma, sans-serif; color: #3a1d00;
  background: linear-gradient(#fff3a6, #ffd23a 48%, #ffad0a 52%, #ffc94a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 4px 0 #8a4b00, 0 6px 12px rgba(0, 0, 0, 0.45);
}
.vote-btn:hover { filter: brightness(1.06); }
.vote-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 1px 0 #8a4b00; }
.vote-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vote-tally { height: 14px; margin: 18px 0 8px; border-radius: 7px; background: #120833; box-shadow: inset 0 1px 3px #000; overflow: hidden; }
.vote-bar { display: block; height: 100%; width: 100%; background: linear-gradient(#9cff6b, #2fbf2f); }
.vote.bump .vote-bar { animation: bump 0.4s ease-out; }
@keyframes bump { 50% { filter: brightness(1.6); } }
.vote-result { margin: 0; font-size: 13px; color: #e2d8ff; }

/* Amazon: Africa lights up */
.map { padding: clamp(16px, 3vw, 28px); background: #0b1140; border-radius: 10px; }
.map-stack { position: relative; }
.map-stack img { display: block; width: 100%; height: auto; }
.map-africa { position: absolute; inset: 0; filter: drop-shadow(0 0 6px rgba(247, 178, 59, 0.75)); }
.reveal-ready .milestone:not(.is-visible) .map-africa { clip-path: inset(0 0 100% 0); }
.reveal-ready .milestone.is-visible .map-africa { clip-path: inset(0); transition: clip-path 1.6s ease 0.5s; }

/* The Karma Group: the wink */
.milestone-today { grid-template-columns: 1fr; }
.karma { margin: 0; font: 400 clamp(1.4rem, 2.4vw, 1.9rem)/1.3 var(--serif); color: var(--ink) !important; max-width: none !important; }
.karma-btn {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: help; text-align: left;
  text-decoration: underline dotted var(--violet); text-decoration-thickness: 2px; text-underline-offset: 0.18em;
}
.karma-works { transition: color 0.3s; }
.karma-wink {
  display: inline-block; margin-left: 0.3em; font-style: italic; color: var(--violet);
  opacity: 0; transform: translateX(-6px); transition: opacity 0.35s, transform 0.35s;
}
.karma.revealed .karma-wink { opacity: 1; transform: none; }
.karma.revealed .karma-works { color: var(--ink-2); text-decoration: line-through 2px var(--violet); }
@media (hover: hover) {
  .karma:hover .karma-wink { opacity: 1; transform: none; }
  .karma:hover .karma-works { color: var(--ink-2); text-decoration: line-through 2px var(--violet); }
}

/* ---------- then and now ---------- */
.compare {
  position: relative; max-width: 980px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px;
  background: var(--rule); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
}
.era-today .compare img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.compare-then { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 27, 77, 0.25);
}
.compare-handle::after {
  content: "\2039\00A0\203A"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--ink); font: 600 22px/1 var(--sans); box-shadow: 0 4px 14px rgba(20, 27, 77, 0.3);
}
.compare-label {
  position: absolute; top: 14px; padding: 4px 10px; border-radius: 4px;
  background: rgba(20, 27, 77, 0.72); color: #fff; font-size: 0.85rem; font-weight: 600;
}
.compare-label-then { left: 14px; }
.compare-label-now { right: 14px; }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(.compare-range:focus-visible) { outline: 3px solid var(--blue); outline-offset: 4px; }

/* ---------- photo album (the 1999 gallery, grown up) ---------- */
.era-today #photos h2 font { display: none; }
.era-today .gallery tbody { columns: 3 240px; column-gap: 24px; }
.era-today .gallery > tbody > tr { display: contents; }
.era-today .gallery > tbody > tr > td { break-inside: avoid; margin-bottom: 28px; }
.era-today .gallery img { display: block; width: 100%; height: auto; border-radius: 4px; }
.era-today .caption { display: block; margin-top: 10px; font-size: 0.95rem; color: var(--ink-2); }

/* ---------- what you made possible ---------- */
.possible-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.possible-list li { padding-top: 20px; border-top: 1px solid var(--ink); }
.possible-list h3 { margin: 0 0 0.5rem; font: 500 1.6rem/1.15 var(--serif); }
.possible-list p { margin: 0; color: var(--ink-2); }

/* ---------- the note from Alex, on the old night sky ---------- */
.era-today #letter {
  margin-top: clamp(80px, 11vw, 150px); padding-bottom: clamp(80px, 11vw, 150px);
  background: var(--night) url("assets/tile-bg.gif"); color: #eef1ff;
}
.letter { position: relative; margin: 0 auto; max-width: 30ch; font: 400 clamp(1.5rem, 2.8vw, 2.15rem)/1.42 var(--serif); }
.letter p { margin: 0 0 0.9em; }
.letter .signoff { margin: 1.4em 0 0; font-style: italic; color: #c6ccf5; }

/* ---------- guestbook ---------- */
.era-today #guestbook { display: flex; flex-direction: column; }
.era-today #guestbook h2 font { display: none; }
.era-today .gb-entries-head { order: 1; margin: 0 0 1.25rem; font: 600 1rem var(--sans); color: var(--ink-2); }
.era-today .gb-entries { order: 2; columns: 3 260px; column-gap: 24px; }
.era-today .gb-layout { order: 3; margin-top: 2.5rem; padding: clamp(24px, 4vw, 40px); background: var(--card); border-radius: 10px; max-width: 640px; }
.era-today .gb-layout::before { content: "Add your note"; display: block; margin-bottom: 1rem; font: 500 1.6rem var(--serif); }
.era-today .gb-entry {
  break-inside: avoid; margin: 0 0 24px; padding: 22px 24px; background: var(--card);
  border-radius: 10px; border-top: 4px solid var(--c, var(--blue));
}
.era-today .gb-entry:nth-child(7n + 1) { --c: var(--red); }
.era-today .gb-entry:nth-child(7n + 2) { --c: var(--orange); }
.era-today .gb-entry:nth-child(7n + 3) { --c: var(--yellow); }
.era-today .gb-entry:nth-child(7n + 4) { --c: var(--green); }
.era-today .gb-entry:nth-child(7n + 5) { --c: var(--blue); }
.era-today .gb-entry:nth-child(7n + 6) { --c: var(--indigo); }
.era-today .gb-entry:nth-child(7n + 7) { --c: var(--violet); }
.era-today .gb-msg { margin: 0 0 14px; font: 400 1.2rem/1.45 var(--serif); white-space: pre-line; }
.era-today .gb-meta { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
.era-today .gb-name { font-weight: 600; color: var(--ink); margin-right: 8px; }
.era-today .gb-form p { margin: 0 0 1rem; }
.era-today .gb-form label { font-weight: 600; font-size: 0.95rem; }
.era-today .gb-form br { display: none; }
.era-today .gb-form :is(input[type="text"], textarea) {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 12px 14px;
  font: 400 1.05rem/1.5 var(--sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 8px;
}
.era-today .gb-form :is(input[type="text"], textarea):focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
.era-today .gb-status { margin: 0; color: var(--ink-2); }

/* buttons */
.era-today :is(.button, .gb-form input[type="submit"]) {
  display: inline-block; min-width: 0; padding: 0.85em 1.5em; cursor: pointer;
  font: 600 1rem/1 var(--sans); color: var(--paper); background: var(--ink);
  border: 0; border-radius: 999px; box-shadow: none; text-transform: none; letter-spacing: 0;
}
.era-today :is(.button, .gb-form input[type="submit"]):hover { background: var(--indigo); }
.era-today :is(.button, .gb-form input[type="submit"]):active { transform: translateY(1px); padding: 0.85em 1.5em; }

/* ---------- make a wish ---------- */
.era-today #candles { text-align: center; padding-bottom: clamp(80px, 10vw, 140px); }
.era-today #candles h2, .era-today #candles .section-note { margin-left: auto; margin-right: auto; }
.cake {
  position: relative; display: block; width: min(340px, 82vw); aspect-ratio: 34 / 27; margin: 1rem auto 2rem;
  padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cake:focus-visible { outline-offset: 10px; border-radius: 12px; }
.candles { position: absolute; left: 16%; right: 16%; top: 4%; height: 36%; display: flex; justify-content: space-between; align-items: flex-end; z-index: 2; }
.candle {
  position: relative; width: 11px; height: 62%; border-radius: 3px 3px 1px 1px;
  background: repeating-linear-gradient(150deg, var(--c) 0 7px, #fff 7px 10px);
}
.candle::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 7px; margin-left: -1px; background: #3a3a3a; }
.flame {
  position: absolute; left: 50%; bottom: calc(100% + 5px); width: 13px; height: 24px; margin-left: -6.5px;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #fffbe0 0 18%, #ffd34d 42%, #ff8a1f 72%, rgba(255, 120, 20, 0) 74%);
  transform-origin: 50% 90%; animation: flicker 1.1s ease-in-out infinite alternate;
  rotate: calc(var(--wind, 0) * -40deg); /* leans when you blow into the mic */
  transition: opacity 0.25s, transform 0.25s;
}
.candle:nth-child(2n) .flame { animation-duration: 0.9s; animation-delay: -0.3s; }
.candle:nth-child(3n) .flame { animation-duration: 1.3s; animation-delay: -0.6s; }
@keyframes flicker {
  0% { transform: rotate(-3deg) scaleY(1); }
  50% { transform: rotate(2deg) scaleY(1.08); }
  100% { transform: rotate(-1deg) scaleY(0.94); }
}
.candle.out .flame { opacity: 0; transform: scale(0.2) translateY(6px); animation: none; }
.candle.out::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 8px); width: 8px; height: 34px; margin-left: -4px;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(140, 146, 180, 0.55), transparent 70%);
  animation: smoke 1.8s ease-out forwards;
}
@keyframes smoke { from { opacity: 1; transform: translateY(0) scaleX(0.6); } to { opacity: 0; transform: translateY(-40px) scaleX(1.6); } }
.cake-top {
  position: absolute; z-index: 1; left: 8%; right: 8%; top: 34%; height: 16%; border-radius: 50%;
  background: #fff; box-shadow: inset 0 -4px 0 #e6e9f5;
}
.cake-body {
  position: absolute; left: 8%; right: 8%; top: 42%; height: 40%; border-radius: 0 0 14px 14px;
  background:
    radial-gradient(circle at 50% 0, #fff 0 46%, transparent 48%) 0 0 / calc(100% / 7) 32% repeat-x,
    var(--ink);
}
.cake-plate { position: absolute; left: 0; right: 0; bottom: 4%; height: 14%; border-radius: 50%; background: var(--rule); z-index: -1; }
.candles-actions { margin: 0 0 1rem; }
.candles-status { min-height: 1.6em; margin: 0; color: var(--ink-2); }
.finale {
  margin: 1.5rem auto 0; max-width: 12ch;
  font: 500 clamp(2.75rem, 8vw, 6rem)/1 var(--serif); letter-spacing: -0.03em;
  animation: finale 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes finale { from { opacity: 0; transform: translateY(20px) scale(0.96); } }

/* ---------- footer ---------- */
.era-today #footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  padding: 32px var(--pad-x) 88px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 1rem;
}
.era-today #footer p { margin: 0; }
.era-today #footer br { display: none; }
.era-today .today-footer { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.era-today .view-source {
  padding: 0; min-width: 0; border: 0; background: none; box-shadow: none; cursor: pointer;
  font: 500 1rem var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em;
}
.era-today .view-source:hover { color: var(--indigo); }
.era-today .view-source:active { padding: 0; }

/* ---------- placeholders Alex still has to fill (remove the data-placeholder attribute when done) ---------- */
[data-placeholder] { position: relative; }
[data-placeholder]::before {
  content: "PLACEHOLDER: " attr(data-placeholder); position: absolute; z-index: 3; top: -34px; right: 0;
  padding: 4px 8px; border-radius: 3px; background: #ffe14d; color: #000;
  font: 600 12px/1.3 system-ui, sans-serif; letter-spacing: 0; font-style: normal; transform: rotate(-1.5deg);
}

/* confetti canvas */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 960; pointer-events: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 860px) {
  .milestone { grid-template-columns: 1fr; gap: 24px; }
  .milestone::before { top: calc(clamp(48px, 7vw, 88px) + 1.25rem); }
  .milestone:has(.when)::before { top: calc(clamp(48px, 7vw, 88px) + 2.6rem); }
  .possible-list { grid-template-columns: 1fr; }
  .era-today #masthead { padding-bottom: 18vh; }
}
@media (max-width: 520px) {
  .era-today { font-size: 1.0625rem; }
  .signon-steps { padding: 16px 8px 14px; gap: 6px; }
  .step-icon { width: 44px; height: 44px; font-size: 20px; }
  .vote-btn { padding: 12px 18px; font-size: 14px; }
  .compare { aspect-ratio: 1 / 1; }
  [data-placeholder]::before { top: -30px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .milestone > *, .milestone::before { transition: none; }
  .reveal-ready .milestone:not(.is-visible) > * { opacity: 1; transform: none; }
  .reveal-ready .milestone:not(.is-visible)::before { transform: none; }
  .reveal-ready .milestone:not(.is-visible) .map-africa { clip-path: none; }
  .flame { animation: none; }
  .finale, .mail-bubble.on { animation: none; }
  .karma-wink { transition: none; }
}

/* AOL: the free-trial CDs that came with everything, peeking out from behind the sign-on window */
.signon { position: relative; }
.signon .win98-window { position: relative; z-index: 1; }
.cd-stack { position: absolute; z-index: 0; right: -38px; bottom: -58px; width: 130px; height: 100px; }
.cd-stack .cd { --size: 84px; position: absolute; box-shadow: 0 0 0 1px #8a8fa8, 4px 6px 0 rgba(20, 27, 77, 0.08); }
.cd-stack .cd:nth-child(1) { right: 26px; bottom: 6px; rotate: -18deg; }
.cd-stack .cd:nth-child(2) { right: 8px; bottom: 0; rotate: 12deg; }
.cd-stack .cd:nth-child(3) { right: 0; bottom: 18px; rotate: 34deg; }
@media (max-width: 520px) {
  .cd-stack { right: -8px; bottom: -54px; }
}