/* Page chrome only: the frame both routes sit in. It takes no route's face or colour, so neither route is favoured by the page around it. */

:root {
  color-scheme: light;

  /* Spacing scale: the values of space.1–10 in packages/tokens/tokens.json. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 80px;

  --chrome-face: system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: var(--s-4);
  --section-gap: var(--s-9);
  --page-max: 1312px;
  --measure: 62ch;
}

@media (min-width: 720px) {
  :root { --gutter: var(--s-7); --section-gap: var(--s-10); }
}

@media (min-width: 1100px) {
  :root { --gutter: var(--s-9); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: Canvas;
  color: CanvasText;
  font-family: var(--chrome-face);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }

main > section {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter);
}

/* Twelve columns from the first wide state; a phone keeps one. Later sections span what they need. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6) var(--s-4);
}
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.chrome-title { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; }
.chrome-heading { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.2; font-weight: 600; }
.chrome-label { font-size: 0.8125rem; line-height: 1.3; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.chrome-body { font-size: 1rem; line-height: 1.5; max-width: var(--measure); }
.chrome-caption { font-size: 0.8125rem; line-height: 1.4; }

/* A hairline between the page's parts: the frame marks where one part ends without adding a colour of its own. */
:root { --rule: color-mix(in srgb, CanvasText 18%, Canvas); }
main > section + section { border-top: 1px solid var(--rule); }

a { color: inherit; text-underline-offset: 0.2em; }
a:focus-visible { outline: 2px solid CanvasText; outline-offset: 3px; }

/* Cover: the top carries more space than the bottom, so the title sits high and the ask leads into the page. */
#cover { padding-top: calc(var(--section-gap) * 1.5); padding-bottom: var(--section-gap); }
#cover > * + * { margin-top: var(--s-4); }
#cover .chrome-title { margin-top: var(--s-2); }
#cover .cover__ask { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.25; font-weight: 400; margin-top: var(--s-7); }

/* Jump nav: three real destinations, each a full tap target; it wraps on a phone rather than squeezing. */
#cover .jump { margin-top: var(--s-7); }
.jump__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.jump__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-2) var(--s-4);
  border: 1px solid CanvasText; border-radius: 4px;
  text-decoration: none; font-weight: 500;
}
.jump__link:hover { background: color-mix(in srgb, CanvasText 6%, Canvas); }
.jump__num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* After each route's scenes, a plain way past its rules to the comparison: page chrome, a full tap target. */
.world__skip { margin-top: var(--s-7); }
.world__skip-link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: var(--s-2);
  font-family: var(--chrome-face); font-size: 1rem; font-weight: 500; color: CanvasText;
}

/* The brief: five numbered lines at reading measure, the number in the margin of the text. */
.brief__list { margin-top: var(--s-6); padding-left: 1.5em; max-width: var(--measure); display: grid; gap: var(--s-4); }
.brief__list li { font-size: 1.0625rem; line-height: 1.5; padding-left: var(--s-1); }
.brief__list li::marker { font-variant-numeric: tabular-nums; font-weight: 600; }
.brief__source { margin-top: var(--s-6); }

/* Route header: the number Massimo will say out loud, the name, and the idea in one line. Used by both routes unchanged. */
.route__head { font-family: var(--chrome-face); color: CanvasText; display: grid; gap: var(--s-2); margin-bottom: var(--s-8); }
.route__head__num { font-size: 0.8125rem; line-height: 1.3; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.route__head__name { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.015em; }
.route__head__idea { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.35; max-width: 40ch; }

/* Side by side: the same three scenes from each route, one pair per row. A copy is a route's own markup inside a
   [data-route] wrapper, so the route's skin applies without a second stylesheet. Two columns from 720, where both
   copies still hold a full phone; below that, 1 sits above 2 and each keeps its label. */
.versus__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-8); }
.versus__pair + .versus__pair { margin-top: var(--s-9); }
.versus__name { margin-bottom: var(--s-4); }
.versus__copies { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7) var(--s-5); }
@media (min-width: 720px) {
  .versus__copies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The copies sit outside .route, so they carry the scenes' type floor themselves. */
.versus__copy { --text-floor: 10px; display: flex; flex-direction: column; min-width: 0; }
.versus__copy > .scene { flex: 1; }
/* The label is the number Massimo says out loud, set like the cover's jump nav. */
.versus__label { display: flex; align-items: center; gap: var(--s-3); font-family: var(--chrome-face); font-size: 1.125rem; line-height: 1.2; font-weight: 600; color: CanvasText; }
.versus__num {
  display: inline-grid; place-items: center;
  min-width: 2rem; height: 2rem; padding-inline: var(--s-2);
  border: 1px solid CanvasText; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.versus__ask { margin-top: var(--s-9); max-width: var(--measure); font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.25; }