/* Dial-up time machine, project 14.

   Two visual worlds on one page. The modern one is the site design system
   untouched; everything below the retro divider is deliberately, lovingly
   garish, which design-system.md section 10 allows a playful page to be.

   Garish is allowed. Unreadable is not. Every colour pair carrying real text
   in the retro world is checked, and the ratio is written next to it, because
   "it looked right" is not a measurement. Every texture is drawn in CSS, so
   the page loads no image of any kind. */

/* ------------------------------------------------------- modern world */

.du-about {
  margin-block-start: var(--s-5);
  color: var(--text-2);
  max-width: 68ch;
}

.du-actions {
  margin-block-start: var(--s-6);
}

.du-note {
  margin-block-start: var(--s-4);
  color: var(--text-3);
  font-size: var(--t-sm);
}

.du-note:empty {
  display: none;
}

/* ------------------------------------------------------ the connection */

.du-dialing {
  max-width: 640px;
  margin: var(--s-8) auto;
  padding: var(--s-6);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.du-dialing__title {
  font-size: var(--t-lg);
  margin-block-end: var(--s-5);
}

.du-dialing__lines {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  font-family: "Mono", ui-monospace, monospace;
  font-size: var(--t-sm);
  color: var(--text-1);
  min-height: 7.5em;
}

.du-dialing__lines li {
  padding-block: 2px;
}

.du-dialing__bar {
  height: 8px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.du-dialing__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 200ms linear;
}

.du-dialing__actions {
  display: flex;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}

/* ---------------------------------------------------------- retro world */

/* The starfield, tiled from two repeating radial gradients rather than an
   image, so the retro world costs no extra request. It sits behind the page
   and carries no text, so it has no contrast obligation of its own. */
.du-retro {
  position: relative;
  min-height: 100vh;
  margin: 0;
  padding: var(--s-6) var(--s-4) 96px;
  background: #000033;
}

.du-retro__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(#ffffff 1px, transparent 1px),
    radial-gradient(#9999cc 1px, transparent 1px);
  background-size: 64px 64px, 91px 91px;
  background-position: 0 0, 23px 37px;
  opacity: 0.7;
  pointer-events: none;
}

.du-retro__page {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  font-family: "Comic Sans MS", "Chalkboard SE", "Times New Roman", Times, serif;
}

/* Yellow on the navy field: 15.4:1. The marquee is a real h1 with real text
   under the movement, so the page still has one heading that says what it is. */
.du-marquee {
  overflow: hidden;
  margin: 0 0 var(--s-5);
  padding: var(--s-3) 0;
  background: #000000;
  border-block: 3px ridge #c0c0c0;
  color: #ffff00;
  font-size: clamp(1.25rem, 0.9rem + 2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.du-marquee__text {
  display: inline-block;
  padding-inline-start: 100%;
  animation: du-scroll 14s linear infinite;
}

@keyframes du-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-200%); }
}

/* The pause control (WCAG 2.2.2) and reduced motion both land here: the text
   stops where it can be read from the start rather than mid-sentence. */
.du-retro[data-motion="off"] .du-marquee__text {
  animation: none;
  padding-inline-start: 0;
  white-space: normal;
}

.du-retro[data-motion="off"] .du-marquee {
  white-space: normal;
}

/* Yellow and black hazard stripes, drawn rather than fetched. Decoration
   only, so it is aria-hidden in the markup. */
.du-barricade {
  height: 20px;
  background: repeating-linear-gradient(
    45deg,
    #ffcc00 0 14px,
    #000000 14px 28px
  );
  border: 2px solid #000000;
}

/* Black on white: 21:1. */
.du-construction,
.du-intro {
  margin: var(--s-3) 0 var(--s-5);
  padding: var(--s-3);
  background: #ffffff;
  color: #000000;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.du-panel {
  margin-block-end: var(--s-5);
  padding: var(--s-4);
  background: #ffffff;
  border: 3px ridge #c0c0c0;
  color: #000000;
}

/* Navy on white: 16.6:1. */
.du-h2 {
  margin: 0 0 var(--s-3);
  color: #000080;
  font-size: 1.375rem;
  font-weight: 700;
  text-decoration: underline;
}

.du-hotlist {
  margin: 0;
  padding-inline-start: var(--s-6);
  list-style: square;
  color: #000000;
}

.du-hotlist li {
  padding-block: 4px;
  line-height: 1.5;
}

/* The 1998 link palette, kept because it still measures well. Blue #0000ee on
   white is 8.6:1, visited purple #551a8b is 8.5:1. Underlined, so the link is
   never told apart from body text by colour alone. */
.du-link,
.du-hotlist a {
  color: #0000ee;
  text-decoration: underline;
  font-weight: 700;
}

.du-hotlist a:visited {
  color: #551a8b;
}

.du-link:focus-visible,
.du-hotlist a:focus-visible {
  outline: 3px solid #ffff00;
  outline-offset: 2px;
}

.du-hotlist__note {
  color: #000000;
  font-style: italic;
}

/* Silver bar, black and blue text on #c0c0c0: 12.6:1 and 6.7:1. */
.du-webring {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-5);
  padding: var(--s-3);
  background: #c0c0c0;
  border: 3px outset #ffffff;
  color: #000000;
  font-size: 0.875rem;
  font-weight: 700;
}

.du-webring .du-link {
  color: #0000cc;
}

.du-webring__sep {
  color: #000000;
}

.du-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-block-end: var(--s-6);
}

.du-badge {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: #c0c0c0;
  border: 3px outset #ffffff;
  color: #000000;
  font-size: 0.8125rem;
  font-weight: 700;
}

.du-badge--counter {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Lime on black: 15.3:1. */
.du-odometer {
  display: inline-block;
  padding: 2px 6px;
  background: #000000;
  color: #00ff00;
  font-family: "Mono", ui-monospace, monospace;
  font-size: 1rem;
  letter-spacing: 0.15em;
}

.du-retro__controls {
  display: flex;
  gap: var(--s-3);
}

/* The two modern controls that live inside or over the retro world. They keep
   the site's own styling on purpose: they are the way out, and the way out
   should not be camouflaged. */
.du-retro__controls .c-btn {
  font-family: "Inter Var", system-ui, sans-serif;
}

.du-return {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 10;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}

/* --------------------------------------------------------- narrow screens */

@media (max-width: 480px) {
  .du-retro {
    padding-inline: var(--s-3);
  }

  .du-return {
    right: var(--s-3);
    left: var(--s-3);
    bottom: var(--s-3);
  }
}

/* ------------------------------------------------------- reduced motion */

/* accessibility.md section 4. Nothing here still animates meaningfully: the
   marquee stops (handled by data-motion above, which the script also sets),
   the progress fill snaps rather than slides, and the odometer never spins. */
@media (prefers-reduced-motion: reduce) {
  .du-marquee__text {
    animation: none;
    padding-inline-start: 0;
    white-space: normal;
  }

  .du-marquee {
    white-space: normal;
  }

  .du-dialing__fill {
    transition: none;
  }
}