/* =============================================================================
   The book, futuristic edition: a holographic display.

   Contents
   1. Font
   2. Tokens
   3. Header, desk and device
   4. Pages and tabs
   5. Page contents
   6. The map
   7. Page turning and controls
   8. Phone layout
   9. Motion

   The notebook (book.css) is the base, and this file only restyles it, while
   <html> carries data-edition="futuristic" (see edition.js). Everything is
   nested under that one selector, and the file loads after book.css, so it
   wins wherever the two disagree. It is linked with media="screen": the book
   always prints as the notebook.

   Glass panels in a dark room, lit in cyan, with a grid, corner brackets in
   each chapter's colour and a glowing seam for a spine. The map becomes a
   star chart: the trail is a live route and "you are here" pulses. One look
   only: it is always dark, so the theme toggle hides.
   ========================================================================== */

/* 1. Font ==================================================================
   Oxanium, for headings and every label. Only downloaded when this edition
   is on screen. SIL Open Font License, see assets/fonts/OFL.txt.
   ========================================================================== */

@font-face {
  font-family: "Oxanium";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/oxanium.woff2") format("woff2");
}

:root[data-edition="futuristic"] {
  /* 2. Tokens ============================================================= */

  color-scheme: dark;

  /* The light, and the colours of the room. Further down, rgba(62, 232,
     255, …) is --glow and rgba(255, 79, 216, …) is --glow-2, dimmed. */
  --glow: #3ee8ff;
  --glow-2: #ff4fd8;
  --void: #03060c;
  --panel: #091324;
  --panel-edge: rgba(62, 232, 255, 0.3);
  --chart: #040a16;

  /* Type, from the brightest to the faintest. */
  --bright: #f0fbff;
  --tint: #c4f1fd;
  --light: #dff4fd;
  --light-soft: #a6c7db;
  --light-faint: #7392aa;

  /* The site's tokens (main.css), for the header and the edition menu. */
  --bg: #050a14;
  --bg-sunk: #03060c;
  --surface: #0b1528;
  --surface-2: #11203a;
  --border: rgba(62, 232, 255, 0.2);
  --border-strong: rgba(62, 232, 255, 0.42);
  --ink: var(--light);
  --ink-soft: var(--light-soft);
  --ink-muted: var(--light-faint);
  --accent: var(--glow);
  --accent-tint: rgba(62, 232, 255, 0.14);
  --note: #ffe156;
  --note-bg: rgba(255, 225, 86, 0.07);
  --grain-opacity: 0.04;
  --grain-blend: screen;
  --shadow-soft:
    0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 32px -20px rgba(0, 0, 0, 0.9);
  --shadow-lift:
    0 0 0 1px rgba(62, 232, 255, 0.08), 0 0 32px -12px rgba(62, 232, 255, 0.4),
    0 22px 44px -22px rgba(0, 0, 0, 0.9);

  /* The book's tokens (book.css). */
  --font-book: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Oxanium", "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-hand: var(--font-display);

  --desk: var(--void);
  --paper: var(--panel);
  --paper-edge: var(--panel-edge);
  --cover: #0a1222;
  --cover-dark: #04080f;

  --study: #4dffb8;
  --work: #ffb14a;
  --beyond: #5aa8ff;
  --extra: #ffe156;
  --focus: #c77dff;

  & .book {
    --ink: var(--light);
    --ink-soft: var(--light-soft);
    --ink-faint: var(--light-faint);
    --pen: var(--glow-2);
    /* The notebook's red is its accent. Here it is the light. */
    --red: var(--glow);
  }

  /* 3. Header, desk and device ============================================ */

  & [data-theme-toggle] {
    display: none;
  }

  & .site-header {
    box-shadow: 0 8px 28px -18px rgba(62, 232, 255, 0.5);
  }

  & .wordmark {
    letter-spacing: 0.04em;
  }

  & .wordmark::before {
    box-shadow: 0 0 8px var(--glow);
  }

  & .edition-menu__panel {
    background: rgba(8, 16, 32, 0.92);
    backdrop-filter: blur(12px);
  }

  /* Deep space: a few stars, two nebulae. */
  & body.desk {
    background-color: var(--void);
    background-image:
      radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 68% 42%, #cfefff, transparent),
      radial-gradient(
        2px 2px at 36% 76%,
        rgba(255, 255, 255, 0.9),
        transparent
      ),
      radial-gradient(1.5px 1.5px at 88% 88%, #ffd6f5, transparent),
      radial-gradient(
        46rem 30rem at 12% 8%,
        rgba(62, 232, 255, 0.13),
        transparent 70%
      ),
      radial-gradient(
        40rem 30rem at 92% 96%,
        rgba(255, 79, 216, 0.1),
        transparent 70%
      ),
      linear-gradient(180deg, #060c19, var(--void));
    background-size:
      17rem 17rem,
      23rem 23rem,
      29rem 29rem,
      13rem 13rem,
      auto,
      auto,
      auto;
  }

  /* The device: a dark bezel with a lit edge, and a light bar where the
     notebook has its ribbon. */
  & .book {
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 22%),
      linear-gradient(135deg, #0e1830, var(--cover-dark));
    box-shadow:
      inset 0 0 0 1px rgba(62, 232, 255, 0.38),
      inset 0 0 22px rgba(62, 232, 255, 0.1),
      0 0 0 1px rgba(0, 0, 0, 0.7),
      0 0 46px -10px rgba(62, 232, 255, 0.4),
      0 30px 60px -30px rgba(0, 0, 0, 0.95);
  }

  & .book::after {
    top: 0.3rem;
    left: calc(50% - 1.6rem);
    width: 3.2rem;
    height: 0.2rem;
    border-radius: 1rem;
    background: var(--glow);
    box-shadow: 0 0 10px 1px var(--glow);
    clip-path: none;
  }

  & .book__pages {
    border-radius: 8px;
    box-shadow:
      0 0 0 1px var(--panel-edge),
      0 0 26px -6px rgba(62, 232, 255, 0.3);
  }

  /* The spine: a seam of light. */
  & .book__pages::after {
    left: calc(50% - 1px);
    width: 2px;
    background: linear-gradient(
      180deg,
      transparent,
      var(--glow) 18%,
      var(--glow-2) 82%,
      transparent
    );
    box-shadow: 0 0 14px 2px rgba(62, 232, 255, 0.4);
    opacity: 0.75;
  }

  /* 4. Pages and tabs ===================================================== */

  & .page {
    --chapter: var(--glow);
    padding-inline: 2.4rem;
    background-color: var(--panel);
    /* Scan lines, a grid, and light from the top. */
    background-image:
      repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.022) 0 1px,
        transparent 1px 3px
      ),
      linear-gradient(rgba(62, 232, 255, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(62, 232, 255, 0.045) 1px, transparent 1px),
      radial-gradient(
        120% 70% at 50% 0%,
        rgba(62, 232, 255, 0.09),
        transparent 65%
      ),
      linear-gradient(180deg, #0b172c, #070f1e);
    background-size:
      auto,
      2rem 2rem,
      2rem 2rem,
      auto,
      auto;
    background-position: 0 0;
  }

  & .page[data-chapter="study"] {
    --chapter: var(--study);
  }
  & .page[data-chapter="work"] {
    --chapter: var(--work);
  }
  & .page[data-chapter="focus"] {
    --chapter: var(--focus);
  }
  & .page[data-chapter="beyond"] {
    --chapter: var(--beyond);
  }
  & .page[data-chapter="skills"] {
    --chapter: var(--extra);
  }

  /* Corner brackets in the chapter's colour: a frame, masked down to its
     four corners. */
  & .page::before {
    --corner: 1.1rem;
    content: "";
    position: absolute;
    inset: 0.7rem;
    border: 1.5px solid var(--chapter);
    opacity: 0.8;
    pointer-events: none;
    mask:
      linear-gradient(#000 0 0) top left / var(--corner) var(--corner) no-repeat,
      linear-gradient(#000 0 0) top right / var(--corner) var(--corner)
        no-repeat,
      linear-gradient(#000 0 0) bottom left / var(--corner) var(--corner)
        no-repeat,
      linear-gradient(#000 0 0) bottom right / var(--corner) var(--corner)
        no-repeat;
  }

  & .page.side-left {
    box-shadow: inset -22px 0 26px -24px rgba(62, 232, 255, 0.45);
  }

  & .page.side-right {
    box-shadow: inset 22px 0 26px -24px rgba(255, 79, 216, 0.4);
  }

  & .page__num {
    bottom: 1.05rem;
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
  }

  & .side-left .page__num {
    left: 2.4rem;
  }

  & .side-right .page__num,
  & .page:not(.side-left) .page__num {
    right: 2.4rem;
  }

  /* Tabs: dark glass, edged and lettered in the chapter's colour. The one
     on screen lights up. */
  & .tab {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tab);
    background: rgba(8, 16, 32, 0.92);
    border: 1px solid color-mix(in srgb, var(--tab) 45%, transparent);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 0 12px -4px color-mix(in srgb, var(--tab) 60%, transparent);
  }

  & .tab:hover,
  & .tab[aria-current="true"] {
    color: var(--void);
    background: var(--tab);
    box-shadow: 0 0 18px -2px var(--tab);
  }

  & .tab--map {
    --tab: var(--glow);
  }
  & .tab--focus {
    --tab: var(--focus);
  }

  /* 5. Page contents ====================================================== */

  & .page h2 {
    font-size: 1.8em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bright);
    text-shadow: 0 0 18px rgba(62, 232, 255, 0.45);
  }

  & .page h3 {
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--tint);
  }

  & .page a {
    text-decoration-color: rgba(62, 232, 255, 0.5);
  }

  & .page a:hover {
    text-shadow: 0 0 8px rgba(62, 232, 255, 0.7);
  }

  /* A kicker is a status line, with a lit bar in front of it. */
  & .kicker {
    font-size: 0.72em;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(62, 232, 255, 0.55);
  }

  & .kicker::before {
    content: "";
    display: inline-block;
    width: 1.3em;
    height: 2px;
    margin-right: 0.7em;
    vertical-align: middle;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
  }

  /* A pen note is a line in the log. */
  & .pen {
    padding-left: 0.8em;
    border-left: 2px solid var(--glow-2);
    font-size: 0.9em;
    line-height: var(--leading);
    letter-spacing: 0.03em;
    transform: none;
  }

  & .pen a {
    color: inherit;
  }

  & .picked + .pen {
    margin-top: calc(var(--leading) * 0.5);
  }

  & .page__note {
    top: calc(var(--leading) * 1.5);
    right: 2.4rem;
    font-size: 0.72em;
    line-height: var(--leading);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    rotate: none;
  }

  & .page__note a {
    color: var(--glow);
  }

  & .picked__label {
    font-size: 0.66em;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  & .picked ul,
  & .marks {
    gap: 0.4em;
  }

  & .picked li,
  & .marks li {
    padding: 0 0.6em;
    border: 1px solid rgba(62, 232, 255, 0.28);
    border-radius: 2px;
    background: rgba(62, 232, 255, 0.06);
    color: var(--tint);
    font-family: var(--font-body);
    font-size: 0.8em;
    font-weight: 500;
    line-height: 1.75;
  }

  & .from {
    margin-top: 0.3em;
    font-size: 0.66em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* Post-its become data panels in the colour of the note. */
  & .postit {
    --note: var(--extra);
    padding: 0.65em 1em 0.7em;
    border: 1px solid color-mix(in srgb, var(--note) 40%, transparent);
    border-left: 3px solid var(--note);
    border-radius: 2px;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--note) 13%, transparent),
      color-mix(in srgb, var(--note) 3%, transparent)
    );
    color: var(--ink);
    box-shadow: 0 0 20px -8px var(--note);
    transform: none;
  }

  & .postit--pink {
    --note: var(--glow-2);
  }
  & .postit--blue {
    --note: var(--beyond);
  }
  & .postit--green {
    --note: var(--study);
  }

  & .postit summary {
    font-size: 0.98em;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--bright);
  }

  & .postit summary::after {
    color: var(--note);
    opacity: 1;
  }

  & .postit summary small {
    font-family: var(--font-display);
    font-size: 0.8em;
    letter-spacing: 0.1em;
    color: var(--note);
    opacity: 1;
  }

  /* A figure on a readout. */
  & .postit--static {
    padding: 0.55em 1em 0.6em;
    font-size: 0.74em;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  & .postit--static strong {
    margin-bottom: 0.1em;
    font-size: 3em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--note);
    text-shadow: 0 0 16px var(--note);
  }

  & .tape {
    display: none;
  }

  & .polaroid {
    padding: 0.35em;
    border: 1px solid rgba(62, 232, 255, 0.4);
    background: rgba(62, 232, 255, 0.05);
    box-shadow: 0 0 24px -8px rgba(62, 232, 255, 0.6);
    rotate: none;
  }

  & .polaroid figcaption {
    margin-top: 0.35em;
    font-size: 0.64em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: left;
  }

  & .featured .polaroid:has(> a:hover, > a:focus-visible) {
    rotate: none;
    scale: 1.02;
    box-shadow: 0 0 30px -6px rgba(62, 232, 255, 0.8);
  }

  & .featured__note {
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
    rotate: none;
  }

  & .featured .featured__note {
    color: var(--glow);
    text-shadow: 0 0 10px rgba(62, 232, 255, 0.6);
  }

  & .featured .featured__note:hover,
  & .featured .featured__note:focus-visible {
    color: var(--glow-2);
  }

  & .featured__note svg {
    stroke-width: 1.6;
    filter: drop-shadow(0 0 4px currentColor);
  }

  & .card-note {
    border: 1px solid rgba(62, 232, 255, 0.2);
    border-top: 2px solid var(--card, var(--glow));
    background: rgba(8, 18, 36, 0.88);
    box-shadow: 0 0 26px -12px var(--card, var(--glow));
  }

  & .card-note .kicker {
    font-size: 0.64em;
  }

  & .card-note--clip::before {
    display: none;
  }

  /* The certificate is a hologram: an edge that shifts colour. */
  & .stamp {
    padding: 0.6em 1.4em;
    border: 1px solid transparent;
    border-radius: 4px;
    background:
      linear-gradient(var(--panel), var(--panel)) padding-box,
      linear-gradient(
          120deg,
          var(--glow),
          var(--glow-2),
          var(--extra),
          var(--glow)
        )
        0 0 / 300% 100% border-box;
    color: var(--ink-soft);
    letter-spacing: 0.22em;
    box-shadow: 0 0 22px -8px var(--glow-2);
    rotate: none;
    opacity: 1;
    animation: holo-shimmer 6s linear infinite;
  }

  & .stamp strong {
    letter-spacing: 0.08em;
    color: var(--bright);
    text-shadow: 0 0 12px var(--glow);
  }

  & .pencil-line {
    margin-left: 0.35rem;
    border-left: 2px solid rgba(62, 232, 255, 0.3);
  }

  & .pencil-line li::before {
    left: calc(-0.3em - 1px);
    width: 0.6em;
    height: 0.6em;
    border: 2px solid var(--glow);
    background: var(--panel);
    box-shadow: 0 0 8px var(--glow);
  }

  & .pencil-line b {
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-shadow: 0 0 8px rgba(62, 232, 255, 0.6);
  }

  /* 6. The map ============================================================
     A star chart on a grid: the trail is a lit route with light running
     along it, what happened within a stop is drawn in magenta, what ran in
     parallel in violet, and every place is a lit node in the colour of its
     kind. */

  & .page--map {
    padding-inline: 1.4rem;
  }

  & .map {
    filter: drop-shadow(0 0 18px rgba(62, 232, 255, 0.22));
    rotate: none;
  }

  & .map__paper {
    --grid: rgba(62, 232, 255, 0.075);
    background-color: var(--chart);
    /* One line every 50 units of the 600 x 720 grid the places sit on. */
    background-image:
      radial-gradient(
        60% 50% at 50% 45%,
        rgba(62, 232, 255, 0.1),
        transparent 70%
      ),
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:
      auto,
      calc(100% / 12) calc(100% / 14.4),
      calc(100% / 12) calc(100% / 14.4);
    background-blend-mode: normal;
    box-shadow: inset 0 0 40px rgba(62, 232, 255, 0.12);
    /* Cut corners. */
    clip-path: polygon(
      0 4cqw,
      4cqw 0,
      calc(100% - 4cqw) 0,
      100% 4cqw,
      100% calc(100% - 4cqw),
      calc(100% - 4cqw) 100%,
      4cqw 100%,
      0 calc(100% - 4cqw)
    );
  }

  /* The drawing's colours and lines are presentation attributes in
     index.html, for the notebook. CSS overrides them. */
  & .map__art {
    color: var(--glow);
    filter: drop-shadow(0 0 3px rgba(62, 232, 255, 0.55));
  }

  & .map__frame {
    stroke-width: 1;
    opacity: 0.45;
  }

  & .map__island {
    fill: rgba(90, 168, 255, 0.07);
    stroke: var(--beyond);
    stroke-width: 1.3;
    opacity: 0.9;
  }

  & .map__sea {
    stroke: var(--beyond);
    opacity: 0.55;
  }

  & .map__trail {
    stroke: var(--glow);
    stroke-width: 2.6;
    stroke-dasharray: 12 6;
    animation: holo-route 2.4s linear infinite;
  }

  & .map__within {
    stroke: var(--glow-2);
    stroke-width: 1.8;
    stroke-dasharray: 0.5 5;
    opacity: 0.9;
  }

  & .map__within--sea {
    stroke: var(--beyond);
  }

  & .map__parallel {
    stroke: #9b7bff;
    stroke-width: 1.4;
    stroke-dasharray: 6 5;
    opacity: 0.9;
  }

  & .map__here {
    stroke: var(--glow-2);
    stroke-width: 3;
    animation: holo-blink 1.8s ease-in-out infinite;
  }

  & .map__title {
    color: var(--ink-soft);
  }

  & .map__title p {
    font-size: 2.2cqw;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--glow);
  }

  & .map__title p:last-child {
    font-size: 2.3cqw;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
  }

  & .map__title h1 {
    margin: 0.8cqw 0 0.6cqw;
    font-size: 5.6cqw;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bright);
    text-shadow: 0 0 2cqw rgba(62, 232, 255, 0.6);
  }

  & .map__key {
    left: 50%;
    right: auto;
    gap: 3cqw;
    width: max-content;
    padding: 0.8cqw 2cqw;
    translate: -50% 0;
    border: 1px solid rgba(62, 232, 255, 0.3);
    background: rgba(4, 10, 22, 0.85);
    font-size: 1.85cqw;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  & .place__icon {
    color: var(--bright);
  }

  & .place__icon::before {
    inset: 10%;
    border: 0.35cqw solid var(--wash);
    border-radius: 50%;
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--wash) 24%, var(--chart)),
      var(--chart) 72%
    );
    box-shadow:
      0 0 2cqw -0.3cqw var(--wash),
      inset 0 0 1.2cqw -0.4cqw var(--wash);
  }

  & .place__icon svg {
    width: 54%;
    height: 54%;
    stroke-width: 2.6;
  }

  & .place--focus .place__icon {
    --wash: var(--focus);
  }

  /* A landmark: an unlit node in a dashed ring. */
  & .place--static .place__icon::before {
    display: block;
    border-style: dashed;
    border-color: rgba(62, 232, 255, 0.4);
    background: var(--chart);
    box-shadow: none;
  }

  /* You are here: a ring of light goes out from it, again and again. */
  & .place--here .place__icon::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    pointer-events: none;
    animation: holo-ping 2.4s ease-out infinite;
  }

  /* Oxanium sets wider than Caveat: the notebook's sizes, scaled. */
  & .place__label {
    font-size: calc(var(--label) * 0.68);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.03em;
    color: var(--bright);
  }

  & .place__label small {
    margin-top: 0.15em;
    font-size: calc(var(--note) * 0.76);
    letter-spacing: 0.06em;
  }

  & .place--here .place__label {
    color: var(--glow-2);
    text-shadow: 0 0 1.5cqw rgba(255, 79, 216, 0.7);
  }

  & .place a:hover .place__icon,
  & .place a:focus-visible .place__icon {
    transform: scale(1.1);
  }

  /* 7. Page turning and controls ========================================== */

  & .leaf > .page {
    box-shadow: 0 0 26px -6px rgba(62, 232, 255, 0.55);
  }

  & .leaf > .page::after {
    background: linear-gradient(
      90deg,
      rgba(62, 232, 255, 0.24),
      transparent 60%
    );
  }

  & .turn {
    border: 1px solid rgba(62, 232, 255, 0.6);
    color: var(--glow);
    background: rgba(5, 11, 23, 0.92);
    box-shadow: 0 0 16px -4px rgba(62, 232, 255, 0.7);
  }

  & .turn:hover:not(:disabled) {
    box-shadow: 0 0 22px -2px rgba(62, 232, 255, 0.9);
  }

  & .corner--next::before {
    background: linear-gradient(
      315deg,
      transparent 50%,
      rgba(62, 232, 255, 0.55) 50%,
      rgba(62, 232, 255, 0.12) 85%
    );
    box-shadow: none;
  }

  & .corner--prev::before {
    background: linear-gradient(
      45deg,
      transparent 50%,
      rgba(62, 232, 255, 0.55) 50%,
      rgba(62, 232, 255, 0.12) 85%
    );
    box-shadow: none;
  }

  /* 8. Phone layout ======================================================= */

  @media (max-width: 59.99em) {
    & .page {
      padding-inline: 1.3rem;
    }

    & .page--map {
      padding-inline: 0.8rem;
    }

    & .page:not(.side-left) .page__num,
    & .page__note {
      right: 1.3rem;
    }

    & .page::before {
      inset: 0.45rem;
    }

    /* The tabs run along the top here, where the light bar would be. */
    & .book::after {
      display: none;
    }

    & .tab {
      border: 1px solid color-mix(in srgb, var(--tab) 45%, transparent);
      border-top: 0;
      border-radius: 0 0 8px 8px;
    }

    & .reader__controls {
      border: 1px solid var(--border);
    }
  }

  /* 9. Motion ============================================================= */

  @media (prefers-reduced-motion: reduce) {
    & .map__trail,
    & .map__here,
    & .place--here .place__icon::after,
    & .stamp {
      animation: none;
    }
  }
}

/* The map as a list, on a phone: the route runs down the side. */
@container map-page (max-width: 22rem) {
  :root[data-edition="futuristic"] {
    & .map__title p,
    & .map__title p:last-child {
      font-size: 0.7rem;
    }

    & .map__title h1 {
      font-size: 1.5rem;
    }

    & .map__paper {
      clip-path: none;
    }

    & .map__places::before {
      border-left: 2px solid var(--glow);
      box-shadow: 0 0 8px var(--glow);
      opacity: 0.8;
    }

    & .place__icon::before {
      border-width: 2px;
    }
  }
}

@keyframes holo-route {
  to {
    stroke-dashoffset: -36;
  }
}

@keyframes holo-blink {
  50% {
    opacity: 0.35;
  }
}

@keyframes holo-ping {
  from {
    box-shadow: 0 0 0 0 rgba(255, 79, 216, 0.75);
  }
  to {
    box-shadow: 0 0 0 3cqw rgba(255, 79, 216, 0);
  }
}

@keyframes holo-shimmer {
  to {
    background-position:
      0 0,
      -300% 0;
  }
}