*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light;

  --accent: #1e3a5f;
  --accent-ink: #ffffff;
  --accent-tint: #eef1f5;
  --paper: #fcfcfb;
  --ink: #1a1a1a;
  --muted: #666666;
  --line: #e2e2df;
  --line-mid: rgba(0,0,0,.18);
  --line-strong: #333333;

  --person: color-mix(in srgb, var(--accent) 84%, var(--paper));
  --ai: color-mix(in srgb, var(--accent) 6%, var(--paper));
  --handover: color-mix(in srgb, var(--accent) 8%, var(--paper));
  --handover-rule: color-mix(in srgb, var(--accent) 16%, var(--paper));

  --font: 'Arial Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs-display: clamp(1.62rem, 1.2rem + 1.5vw, 2.25rem);
  --fs-text: 1.03125rem;
  --fs-label: .96875rem;
  --fs-sm: 0.85rem;
  --fs-cap: 0.75rem;
  --fs-say: clamp(1.625rem, 1.15rem + 1.3vw, 2.125rem);   /* the sentences a slide opens and closes on */

  --pad-x: clamp(18px, 4.2vw, 56px);
  --maxw: 1080px;
  --mast-h: 52px;
  --gap-title: clamp(24px, 4dvh, 48px);      /* bar to title */
  --gap-stage: clamp(32px, 6dvh, 72px);      /* title to container, and container to dots */
  --floor: 22px;                        /* under the dots */
  --step-w: 124px;                      /* a step's box, in the process and on every level */
  --step-h: 60px;
  --step-gap: 22px;

  --ease: cubic-bezier(.22, .8, .3, 1);
}

body { font-family: var(--font); font-size: var(--fs-text); line-height: 1.5; color: var(--ink); background: var(--paper); padding-top: var(--mast-h); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ── the bar ── */
.mast { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--mast-h); background: var(--paper); border-bottom: 1px solid var(--line-strong); }
.mast-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mast-eyebrow { font-size: var(--fs-cap); color: var(--muted); letter-spacing: .02em; }
/* the two exhibits, each opening full page in a new tab */
.mast-links { display: flex; gap: 8px; }
.mast-links a { padding: 7px 14px; border: 1px solid var(--line-mid); border-radius: 4px; font-size: var(--fs-cap); line-height: 1; color: var(--ink); text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.mast-links a:hover, .mast-links a:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ── the page: title, container, dots ── */
.page { display: grid; grid-template-rows: auto 1fr auto; row-gap: var(--gap-stage); min-height: calc(100dvh - var(--mast-h)); padding-top: var(--gap-title); padding-bottom: var(--floor); }
.title { grid-row: 1; font-size: var(--fs-display); font-weight: 400; letter-spacing: -.022em; line-height: 1.15; }
.stage { grid-row: 2; }
.nav { grid-row: 3; }
/* a slide with no page title takes the title's room as well, so its content sits higher; the dots stay where they are */
.page.untitled .title { display: none; }
.page.untitled .stage { grid-row: 1 / 3; }
.title .num { margin-right: .45em; }
.stage { display: grid; align-items: center; min-width: 0; }
.slide { min-width: 0; animation: slide-in .36s var(--ease); }
.slide[hidden] { display: none; }
.slide.fill { align-self: stretch; }   /* a slide whose content takes the container's full height */
.slide.fill > * { height: 100%; }
.stage[data-dir="back"] .slide { --from: -16px; }
@keyframes slide-in { from { opacity: 0; transform: translateX(var(--from, 16px)); } }
@media (prefers-reduced-motion: reduce) { .slide { animation: none; } }

.nav { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 24px); }
.arrow { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 1.375rem; line-height: 1; transition: background .2s var(--ease), color .2s var(--ease); }
.arrow:hover, .arrow:focus-visible { background: var(--accent-tint); color: var(--accent); }
.arrow:disabled { opacity: .25; pointer-events: none; }
.dots { display: flex; align-items: stretch; }
.dot { display: grid; justify-items: center; align-content: center; gap: 7px; min-width: 56px; min-height: 48px; padding: 4px 10px; color: var(--muted); font-size: var(--fs-cap); }
.dot .d { width: 8px; height: 8px; border-radius: 50%; background: var(--line-mid); transition: background .24s var(--ease), transform .24s var(--ease); }
.dot:hover, .dot:focus-visible, .dot[aria-current="true"] { color: var(--accent); }
.dot:hover .d, .dot:focus-visible .d, .dot[aria-current="true"] .d { background: var(--accent); }
.dot[aria-current="true"] .d { transform: scale(1.35); }

/* ── shared by the slides ── */
.num { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.key { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.key .k { width: 14px; height: 14px; border-radius: 3px; }
.key .k.h { background: var(--person); }
.key .k.a { background: var(--ai); box-shadow: inset 0 0 0 1px var(--handover-rule); margin-left: 20px; }

/* ── the matrix ── */
.mx { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.mx col.rail { width: 14.5%; }
/* the table takes the container's height and the browser shares it across the rows */
.mx th, .mx td { text-align: left; vertical-align: middle; line-height: 1.35; font-weight: 400; }
.mx thead th { vertical-align: bottom; padding: 0 12px 12px 20px; border-bottom: 1px solid var(--line-strong); }
.mx thead th:first-child { padding-left: 0; }
.mx .lv { display: block; position: relative; font-size: var(--fs-label); font-weight: 700; letter-spacing: -.011em; line-height: 1.25; }
.mx .lv .num { position: absolute; right: 100%; margin-right: 7px; }
.mx tbody th { padding: 15px 12px 15px 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: -.006em; border-bottom: 1px solid var(--line); }
.mx tbody td { padding: 15px 8px 15px 20px; border-bottom: 1px solid var(--line); }
.mx td.human { color: var(--muted); }
.mx td.ai { background: var(--handover); border-bottom-color: var(--handover-rule); color: var(--accent); font-weight: 700; letter-spacing: .01em; }
.mx tr.verbs-end > *, .mx tr.verbs-end > td.ai { border-bottom-color: var(--line-mid); }
.mx tr.nums td { font-variant-numeric: tabular-nums; }
.mx tbody tr:last-child > * { border-bottom: 1px solid var(--line-strong); }

/* ── the row of steps on its spine: the person's and the AI's colours on a level, the AI's tint throughout in the process ── */
.steps { position: relative; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, var(--step-w)); justify-content: center; gap: var(--step-gap); text-align: center; }
.steps .box { display: flex; align-items: center; justify-content: center; height: var(--step-h); border-radius: 4px; font-size: .9375rem; }
.steps .box.h { background: var(--person); color: var(--accent-ink); }
.steps .box.a { background: var(--ai); color: var(--accent); }
.steps .box.split { background: linear-gradient(to right, var(--ai) calc((1 - var(--share)) * 100%), var(--person) 0); color: var(--accent); }

/* ── the frame the process and the levels share: a sentence, the row, a closing piece. The sentence and the
      closing piece each have the room of two lines of the sentence, whatever they hold, so the row stands at
      the same height on all five slides. The container's spare height is shared between the four spaces, two
      parts above the sentence and three to each of the others. No space goes under 20px. A level's key rests
      on the container's floor, in the last of those spaces. ── */
.frame { --slot: calc(2 * 1.55 * var(--fs-say)); display: grid;
  grid-template-rows: minmax(20px, 2fr) minmax(var(--slot), auto) minmax(20px, 3fr) auto minmax(20px, 3fr) minmax(var(--slot), auto) minmax(20px, 3fr); }
.frame > :nth-child(1) { grid-row: 2; align-self: end; }
.frame > :nth-child(2) { grid-row: 4; }
.frame > :nth-child(3) { grid-row: 6; align-self: start; }
.frame > .key { grid-row: 7; align-self: end; }
.say { padding-inline: 8%; font-size: var(--fs-say); line-height: 1.55; letter-spacing: -.02em; text-align: center; text-wrap: balance; }   /* set in from the sides, so a sentence breaks over even lines */
.say b { color: var(--accent); white-space: nowrap; }

/* the spine: one line through the row from the page's left edge to its right, with a dot at each end. The boxes
   sit over the line, and arrive along it from left to right when the slide opens. */
.steps::before { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 2.5px); height: 5px; animation: spine-in .8s var(--ease) both;
  background: radial-gradient(circle at 2.5px 50%, var(--accent) 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 2.5px) 50%, var(--accent) 2.5px, transparent 3px),
    linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat; }
.steps li { position: relative; animation: step-in .55s var(--ease) both; animation-delay: calc(var(--i) * 80ms + 200ms); }
@keyframes spine-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes step-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .steps::before, .steps li { animation: none; } }

/* ── the loop: fleet.html, filling the container ── */
.loop { display: block; width: 100%; border: 0; }