/* One line — page shell */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  font-weight: 420;
  color: var(--fg);
  background: var(--paper);
  transition: background-color var(--t-world) var(--ease), color var(--t-world) var(--ease);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
  caret-color: var(--accent);
  accent-color: var(--accent);
  scrollbar-color: var(--fg-3) var(--bg);
}

/* worlds: sections and the header own their surfaces; body[data-thread] only recolours the thread. It is not
   data-world on purpose: rules like `[data-world] > *` made every change of a body data-world restyle the whole page */
body, main [data-world="paper"], .top[data-world="paper"] { --bg: var(--paper); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --rule-c: var(--rule); --accent: var(--ink); --line: var(--ink); }
body[data-thread="mara"] .thread, body[data-thread="mara"] .thread__interaction, main [data-world="mara"], .top[data-world="mara"] { --bg: var(--mara-soft); --fg: #0c2733; --fg-2: #2f5566; --fg-3: #4a6977; --rule-c: rgba(12, 39, 51, .14); --accent: #0b7fb0; --line: var(--mara); }
body[data-thread="echo"] .thread, body[data-thread="echo"] .thread__interaction, main [data-world="echo"], .top[data-world="echo"] { --bg: var(--echo-deep); --fg: #fbeee6; --fg-2: #e2c3b4; --fg-3: #b9958a; --rule-c: rgba(251, 238, 230, .16); --accent: var(--echo); --line: var(--echo); }
body[data-thread="daleelk"] .thread, body[data-thread="daleelk"] .thread__interaction, main [data-world="daleelk"], .top[data-world="daleelk"] { --bg: var(--daleelk-soft); --fg: #2b210f; --fg-2: #5d4d2f; --fg-3: #6e5f3e; --rule-c: rgba(43, 33, 15, .14); --accent: #8a5f17; --line: var(--daleelk); }
body[data-thread="rassah"] .thread, body[data-thread="rassah"] .thread__interaction, main [data-world="rassah"], .top[data-world="rassah"] { --bg: var(--rassah); --fg: var(--rassah-ink); --fg-2: #b9d2ca; --fg-3: #a3c4b9; --rule-c: rgba(233, 241, 238, .16); --accent: var(--carton); --line: var(--rassah-ink); }
body[data-thread="asphalt"] .thread, body[data-thread="asphalt"] .thread__interaction, main [data-world="asphalt"], .top[data-world="asphalt"] { --bg: var(--asphalt); --fg: var(--kerb-white); --fg-2: #c3c6cc; --fg-3: #8d929b; --rule-c: rgba(244, 244, 242, .14); --accent: var(--kerb-red); --line: var(--kerb-white); }
body[data-thread="sleeve"] .thread, body[data-thread="sleeve"] .thread__interaction, main [data-world="sleeve"], .top[data-world="sleeve"] { --bg: var(--sleeve); --fg: var(--sleeve-ink); --fg-2: #47390f; --fg-3: #574616; --rule-c: rgba(28, 22, 8, .2); --accent: var(--sleeve-ink); --line: var(--sleeve-ink); }
body[data-thread="map"] .thread, body[data-thread="map"] .thread__interaction, main [data-world="map"], .top[data-world="map"] { --bg: var(--map); --fg: #17142a; --fg-2: #423d5c; --fg-3: #554f70; --rule-c: rgba(23, 20, 42, .14); --accent: #17142a; --line: #17142a; }
body[data-thread="night"] .thread, body[data-thread="night"] .thread__interaction, main [data-world="night"], .top[data-world="night"], html.is-night .top[data-world="paper"], html.is-night body, html.is-night main [data-world="paper"] { --bg: var(--night); --fg: #f3efe4; --fg-2: #c9c3b3; --fg-3: #8f8a7e; --rule-c: rgba(243, 239, 228, .14); --accent: var(--window-warm); --line: var(--zebra); }

::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; font-weight: 700; }
p, dd, li { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--fg); color: var(--bg); border-radius: 999px; text-decoration: none; transition: top var(--t-state) var(--ease); }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* links & buttons */
.link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent);
  transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  font-weight: 560;
}
.link:hover { text-decoration-color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.4rem;
  border-radius: 999px; border: 1px solid var(--fg);
  background: var(--fg); color: var(--bg);
  font: 620 var(--step-0)/1 var(--font); font-stretch: 105%;
  text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--small { min-height: 40px; padding: 0 1.1rem; font-size: var(--step--1); }
.btn--ghost { background: transparent; color: var(--fg); }
.btn--ghost[data-copied] { background: var(--fg); color: var(--bg); }
.btn__check { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: btn-check var(--t-state) var(--ease) 80ms forwards; }
@keyframes btn-check { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .btn__check { animation: none; stroke-dashoffset: 0; } }

/* header */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(.9rem, env(safe-area-inset-top)) var(--gutter) .9rem;
  color: var(--fg);
  transition: transform var(--t-layout) var(--ease), background-color var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); opacity: 0; transition: opacity var(--t-state) var(--ease); }
.top[data-scrolled]::before { opacity: 1; }
.top[data-hidden] { transform: translateY(-100%); }
.top__name { font-weight: 700; font-stretch: 112%; text-decoration: none; letter-spacing: -.01em; font-size: var(--step--1); }
.top__nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); font-size: var(--step--1); font-weight: 540; }
.top__nav a { text-decoration: none; color: var(--fg-2); transition: color var(--t-fast) var(--ease); padding-block: .5rem; }
.top__nav a:hover, .top__nav a[aria-current] { color: var(--fg); }
/* the bar stays one line from 761px (iPad portrait included) up */
.top > *, .top__nav a { white-space: nowrap; }
@media (max-width: 860px) { .top__nav { gap: .9rem; } }
.top__menu { display: none; }
/* phones: the sections fold into a panel under the bar, opened by Menu */
@media (max-width: 760px) {
  .top__name { font-size: .9rem; }
  /* first in the source so Tab goes from Menu into its links; drawn at the end of the bar */
  .top__menu { order: 5; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 0 .5rem; border: 0; background: none; color: var(--fg); font: inherit; font-size: var(--step--1); font-weight: 620; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .top__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 0 var(--gutter) 1rem;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    font-size: var(--step-2); font-weight: 640; font-stretch: 108%; letter-spacing: -.015em;
    visibility: hidden; opacity: 0; transform: translateY(-.4rem);
    transition: opacity var(--t-state) var(--ease), transform var(--t-state) var(--ease), visibility 0s linear var(--t-state);
  }
  .top.is-open .top__nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .top__nav a { padding-block: .6rem; border-top: 1px solid var(--rule-c); color: var(--fg); }
  .top.is-open::before { opacity: 1; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .top__nav { transform: none; transition: visibility 0s linear var(--t-state); } }

/* the global line */
.thread { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 0; overflow: visible; will-change: transform; } /* own layer: drawing the line repaints only the line, not the page under it */
.thread path { fill: none; stroke: var(--line); stroke-width: var(--line-w); stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t-world) var(--ease); }
.thread__interaction { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.thread__interaction path { fill: none; stroke: var(--line); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.thread__old { opacity: 1; transition: opacity var(--t-layout) var(--ease-in-out); }
.thread__old.is-fading { opacity: 0; }
.thread path.thread__new { opacity: 0; transition: stroke var(--t-world) var(--ease), opacity var(--t-layout) var(--ease-in-out); }
.thread path.thread__new.is-in { opacity: 1; }
.thread__interaction .thread__pulse {
  stroke: var(--line);
  stroke-width: calc(var(--line-w) * 2.2);
  stroke-opacity: .92;
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--line));
  transition: none;
}
.thread__interaction .thread__pull {
  stroke: var(--line);
  stroke-width: var(--line-w);
  opacity: 0;
  transition: none;
}
.thread__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.thread-near { cursor: grab; }
body.thread-pulling { cursor: grabbing; }
.thread__nib { r: calc(var(--line-w) * 1.6); fill: var(--line); opacity: 0; transition: opacity var(--t-focal) var(--ease), fill var(--t-world) var(--ease); }
.thread__nib.is-moving { opacity: 1; transition: opacity 0ms, fill var(--t-world) var(--ease); }
.thread__nib.is-away { opacity: 0; transition: opacity 0ms, fill var(--t-world) var(--ease); }
main, .foot { position: relative; }
main > *, .foot > * { position: relative; z-index: 1; }

/* hero */
/* z-index: auto keeps the hero out of its own stacking context, so the signature's difference blend
   reaches the page colour: ink on paper, paper where it crosses the black letters */
.hero { padding-top: clamp(7rem, 16vh, 11rem); padding-bottom: var(--s-5); z-index: auto; }
.hero__sign { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; mix-blend-mode: difference; }
.hero__sign-line { --sign-ink: #fff; /* white under difference = exact inverse of the backdrop */ fill: none; stroke: var(--sign-ink); stroke-width: var(--sign-w, var(--line-w)); stroke-linecap: round; stroke-linejoin: round; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "role proof" "name name" "foot foot"; column-gap: var(--s-4); align-items: end; }
.hero__name { grid-area: name; }
.hero__foot { grid-area: foot; }
.hero__role { grid-area: role; }
/* proof on the first screen: one live number and two facts, each a way into its project */
.hero__proof { grid-area: proof; display: flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); margin-bottom: clamp(.5rem, 1.5vw, 1.25rem); }
.hero__proof a { display: grid; grid-template-columns: 2.25rem auto; grid-template-rows: auto auto; column-gap: .7rem; align-items: center; text-decoration: none; color: var(--fg); }
.hero__proof img { grid-row: 1 / span 2; width: 2.25rem; height: 2.25rem; border-radius: 22.5%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent), 0 6px 14px -8px rgba(0, 0, 0, .35); }
.hero__proof strong { font-size: var(--step-0); line-height: 1.15; font-weight: 700; font-stretch: 108%; letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: transparent; transition: text-decoration-color var(--t-fast) var(--ease); }
.hero__proof span { max-width: 17ch; font-size: var(--step--1); line-height: 1.3; color: var(--fg-2); }
.hero__proof a:hover strong, .hero__proof a:focus-visible strong { text-decoration-color: currentColor; }
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "role" "name" "proof" "foot"; }
  .hero__proof { margin: clamp(1.25rem, 3vw, 2rem) 0 0; }
}
@media (max-width: 760px) {
  .hero__proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
  .hero__proof a { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
  .hero__proof img { margin-bottom: .3rem; }
  .hero__proof span { font-size: .78rem; }
  .hero__inner > .hero__proof { margin-bottom: 2.75rem; } /* room for the signature, which rises above its seat */
}
.hero__role { font-size: var(--step-1); font-weight: 600; font-stretch: 110%; color: var(--fg-2); margin-bottom: clamp(.5rem, 1.5vw, 1.25rem); letter-spacing: -.005em; }
.hero__name {
  font-weight: 800;
  font-size: min(calc((100vw - 2 * var(--gutter)) / 5.5), 15rem);
  line-height: .86;
  letter-spacing: -.035em;
  margin-left: -.04em;
}
.hero__line { display: block; font-stretch: 125%; white-space: nowrap; }
.js .hero__line { font-stretch: 75%; font-weight: 300; opacity: 0; }
.js .hero.is-in .hero__line { animation: stretch var(--t-draw) var(--ease) forwards; }
.js .hero.is-in .hero__line:nth-child(2) { animation-delay: 110ms; }
@keyframes stretch {
  0% { font-stretch: 75%; font-weight: 300; opacity: 0; transform: translateY(.12em); }
  35% { opacity: 1; }
  100% { font-stretch: 125%; font-weight: 800; opacity: 1; transform: none; }
}
/* foot: the signature's seat on the left, the statement and the details on the right */
.hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "seat statement" "seat meta"; column-gap: var(--s-4); row-gap: var(--s-3); align-items: start; margin-top: clamp(1.75rem, 4vw, 3.5rem); }
.hero__seat { grid-area: seat; --sign-fill: .94; aspect-ratio: 4.3; }
.hero__statement { grid-area: statement; }
.hero__meta { grid-area: meta; }
.hero__statement { font-size: var(--step-2); line-height: 1.22; font-weight: 520; letter-spacing: -.015em; max-width: 24ch; }
.hero__meta { display: grid; gap: var(--s-2); justify-items: start; color: var(--fg-2); font-size: var(--step--1); }
.now { max-width: 46ch; line-height: 1.55; }
.now__label { color: var(--fg-3); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
/* the statement stays visible from the first paint: it is the largest text on load */
.js .hero__role, .js .hero__meta, .js .hero__proof { opacity: 0; transform: translateY(14px); transition: opacity var(--t-focal) var(--ease), transform var(--t-focal) var(--ease); }
.js .hero.is-in .hero__role { opacity: 1; transform: none; transition-delay: 50ms; }
.js .hero.is-in .hero__proof { opacity: 1; transform: none; transition-delay: 350ms; }
.js .hero.is-in .hero__meta { opacity: 1; transform: none; transition-delay: 650ms; }
@media (max-width: 760px) {
  .hero { padding-top: 6.5rem; }
  .hero__name { letter-spacing: -.03em; }
  .hero__foot { grid-template-columns: 1fr; grid-template-areas: "seat" "statement" "meta"; gap: var(--s-3); }
  .hero__seat { --sign-fill: .86; aspect-ratio: 4.2; }
  .hero__statement { font-size: 1.45rem; }
}

/* scene slots */
.scene-slot { position: relative; width: 100%; }
.scene { position: relative; width: 100%; }

/* the year */
.year { padding-block: var(--s-6) var(--s-5); }
.year__title { font-size: var(--step-3); line-height: 1.04; letter-spacing: -.03em; font-stretch: 112%; max-width: 16ch; }
.num { font-variant-numeric: tabular-nums; }
.year__sub { margin-top: var(--s-2); max-width: 60ch; color: var(--fg-2); }
.year .scene-slot { margin-top: var(--s-4); }
.lab { --lab-0: var(--rule-c); --lab-1: #fdd6bd; --lab-2: #fca06a; --lab-3: #fc6d26; --lab-4: #d93f1f;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); max-width: calc(100% - 4rem); }
.lab__text { flex: 0 1 30ch; }
.lab__count { font-size: var(--step-2); font-weight: 650; line-height: 1.1; letter-spacing: -.02em; font-stretch: 108%; }
.lab__count .num { color: #d93f1f; }
.lab__sub { margin-top: var(--s-1); color: var(--fg-2); }
.lab__cal { flex: 0 1 auto; min-width: 0; }
.lab__cal:empty { display: none; }
.lab__cal svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.lab__day { rx: 3px; transition: opacity var(--t-layout) var(--ease), transform var(--t-layout) var(--ease); transform-box: fill-box; transform-origin: center; }
.lab__axis { font: 500 12px var(--font); fill: var(--fg-3); }
.lab:not(.is-on) .lab__day { opacity: 0; transform: scale(.4); }
@media (max-width: 760px) { .lab { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .lab__day { transition: none; } }

/* projects */
.project { padding-block: clamp(4.5rem, 10vh, 7.5rem); }
.project__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); align-items: center; }
.project__text { grid-column: 1 / span 5; position: relative; }
.project__scene { grid-column: 6 / span 7; }
.project--flip .project__text { grid-column: 8 / span 5; grid-row: 1; }
.project--flip .project__scene { grid-column: 1 / span 7; grid-row: 1; }
.project__grid--stack .project__text { grid-column: 1 / span 6; }
.project__grid--stack .project__scene { grid-column: 1 / -1; margin-top: clamp(2rem, 5vw, 4.5rem); }
/* Pit Lane's next and last race sit beside the text on wide screens */
.project__live { grid-column: 8 / span 5; grid-row: 1; align-self: end; }
.project__live > .race:first-child { margin-top: 0; }
.project__icon { width: 64px; height: 64px; border-radius: 22.5%; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .25); margin-bottom: var(--s-3); }
.project__name { font-size: var(--step-4); line-height: .95; letter-spacing: -.035em; font-stretch: 118%; font-weight: 800; }
.project__kind { margin-top: var(--s-2); font-size: var(--step-1); line-height: 1.3; color: var(--fg-2); max-width: 26ch; font-weight: 480; }
.project__facts { margin-top: var(--s-4); display: grid; }
.project__facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-2); padding-block: 1rem; border-top: 1px solid var(--rule-c); }
.project__facts dt { color: var(--fg-3); font-size: var(--step--1); font-weight: 560; padding-top: .15em; }
.project__facts dd { max-width: 44ch; }
.project__facts strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.project__links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: var(--s-3); }
.shot { --tilt: 0deg; width: min(100%, 980px); margin-top: var(--s-5); border-radius: var(--radius); overflow: hidden; background: color-mix(in srgb, var(--fg) 14%, var(--bg)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent), 0 40px 70px -34px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .12); }
/* a browser window, so the live product reads as a product and not as part of this page */
.shot__bar { display: flex; align-items: center; gap: .45rem; height: 2.4rem; padding: 0 1rem; }
.shot__bar i { width: .62rem; height: .62rem; border-radius: 50%; background: color-mix(in srgb, var(--fg) 26%, transparent); }
.shot__bar span { margin-inline: auto; padding: .22rem .9rem; border-radius: 999px; background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg-2); font-family: var(--mono); font-size: .68rem; letter-spacing: .01em; }
.shot__bar::after { content: ""; width: 2.2rem; }
.shot--rassah { --tilt: -3deg; margin-left: auto; }
.shot--pitlane { --tilt: 3deg; }
.shot picture { display: block; }
.shot img { width: 100%; }
/* it swings in on a slight tilt and lands flat, so the screenshot text stays sharp */
.js .shot { clip-path: inset(8% 6% 8% 6% round var(--radius)); transform: scale(.96); rotate: var(--tilt); transition: clip-path var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease), rotate var(--t-reveal) var(--ease); }
.js .shot.is-in { clip-path: inset(0 0 0 0 round var(--radius)); transform: none; rotate: 0deg; }
@media (max-width: 760px) { .shot, .js .shot, .js .shot.is-in { --tilt: 0deg; margin-top: var(--s-4); } .shot__bar span { font-size: .62rem; } }
@media (max-width: 900px) {
  .project__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .project__text, .project__scene,
  .project--flip .project__text, .project--flip .project__scene,
  .project__grid--stack .project__text, .project__grid--stack .project__scene, .project__live { grid-column: 1; grid-row: auto; }
  .project__facts > div { grid-template-columns: 1fr; gap: .25rem; }
  .project__name { font-size: clamp(3rem, 15vw, 4.5rem); }
}

/* section titles */
.section-title { font-size: var(--step-3); line-height: 1.02; letter-spacing: -.03em; font-stretch: 112%; font-weight: 800; }
.sub-title { font-size: var(--step-1); font-weight: 700; font-stretch: 108%; letter-spacing: -.01em; margin-bottom: var(--s-3); }

/* more work: the back of a record sleeve, the record tucked behind it */
.more { padding-block: var(--s-5) var(--s-5); }
.more__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-4); align-items: center; }
.more__record { grid-column: 1 / span 5; grid-row: 1; position: relative; z-index: 0; margin-right: -10%; }
.sleeve {
  grid-column: 5 / -1; grid-row: 1; position: relative; z-index: 1;
  padding: clamp(1.75rem, 3.6vw, 3.5rem);
  background: var(--paper-2);
  border-radius: 3px;
  box-shadow: 0 50px 80px -50px rgba(18, 20, 23, .5), 0 2px 8px rgba(18, 20, 23, .07);
}
.sleeve::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--rule-c); pointer-events: none; }
.sleeve__artist { font-family: var(--font); font-size: var(--step--1); font-weight: 600; font-stretch: 110%; letter-spacing: -.005em; color: var(--fg-2); }
.sleeve__title { margin-top: .5rem; }
.sleeve__sides { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.side__name { font-size: var(--step--1); font-weight: 700; font-stretch: 115%; letter-spacing: .06em; text-transform: uppercase; padding-bottom: .65rem; border-bottom: 2px solid var(--fg); }
.track {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; column-gap: .5rem; align-items: baseline;
  padding: .85rem 0 .95rem; border-bottom: 1px solid var(--rule-c); text-decoration: none;
}
.track__no, .track__year { font-family: var(--mono); font-size: .7rem; letter-spacing: .02em; color: var(--fg-3); transition: color var(--t-state) var(--ease); }
.track__name { font-size: 1.12rem; line-height: 1.25; font-weight: 700; font-stretch: 106%; letter-spacing: -.012em; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent); text-underline-offset: .2em; transition: font-stretch var(--t-layout) var(--ease), text-decoration-color var(--t-state) var(--ease); }
.track__icon { display: inline-block; width: 1.3em; height: 1.3em; margin-right: .45em; vertical-align: -.27em; border-radius: 23%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent); }
.track__desc { grid-column: 2 / -1; margin-top: .25rem; font-size: var(--step--1); line-height: 1.45; color: var(--fg-2); max-width: 46ch; }
.track:hover .track__name, .track:focus-visible .track__name { font-stretch: 122%; text-decoration-color: var(--accent); }
.track:hover .track__no, .track:focus-visible .track__no { color: var(--fg); }
.track:focus-visible { outline-offset: 4px; }
.more .track.is-current {
  --track-active: var(--accent);
  margin-inline: -.5rem;
  padding-inline: .5rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--track-active) 10%, transparent);
  box-shadow: inset 3px 0 var(--track-active);
}
.more .track[data-tone="mara"].is-current { --track-active: var(--mara); }
.more .track[data-tone="echo"].is-current { --track-active: var(--echo); }
.more .track[data-tone="daleelk"].is-current { --track-active: var(--daleelk); }
.more .track[data-tone="rassah"].is-current { --track-active: var(--rassah); }
.more .track[data-tone="pitlane"].is-current { --track-active: var(--kerb-red); }
.more .track.is-current .track__name { text-decoration-color: var(--track-active); }
@media (max-width: 1100px) { .sleeve__sides { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .more__grid { grid-template-columns: 1fr; }
  .more__record { grid-column: 1; grid-row: 1; margin: 0 auto; width: min(100%, 440px); }
  .sleeve { grid-column: 1; grid-row: 2; margin-top: var(--s-3); }
}

/* experience: a line map */
.experience { padding-block: var(--s-6); }
.exp__lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-3) var(--s-5); align-items: end; }
.exp__summary { color: var(--fg-2); max-width: 46ch; font-size: var(--step-1); line-height: 1.45; }
.experience .scene-slot { margin-top: var(--s-5); }
.tube__list { margin-top: var(--s-4); display: grid; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule-c); }
.tube__list time { font-family: var(--mono); font-size: .72rem; color: var(--fg-3); }
.tube__list h3 { font-size: var(--step-1); line-height: 1.25; margin-top: .15rem; letter-spacing: -.01em; }
.tube__list p { color: var(--fg-2); margin-top: .25rem; max-width: 60ch; }
.tube__list .tube__org { font-weight: 560; }
.experience:has(.scene--tube .tb-map) .tube__list { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
  .exp__lead { grid-template-columns: 1fr; }
  .experience .scene-slot { margin-top: var(--s-4); }
}

/* liner notes: the rest of the toolkit, beyond the tools that pair with a project */
.notes__also { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule-c); }
.notes__also dt { font-size: var(--step--1); font-weight: 650; font-stretch: 106%; color: var(--fg-2); }
.notes__also dd { margin-top: .3rem; font-size: var(--step--1); line-height: 1.5; max-width: 42ch; }
@media (min-width: 1100px) { .notes__also > div:first-child { grid-column: span 2; } }

/* experience: courses in progress under the map */
.experience .learn { margin-top: var(--s-5); display: block; }
.learn__now { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: var(--s-5); }
.learn__now .sub-title { grid-column: 1; }
.learn__now .progress { grid-column: 2; grid-row: 1 / span 2; }
/* the title and the roadmap link frame the list from its top to its last course, so the left column isn't left empty */
.learn__now .learn__link { grid-column: 1; grid-row: 2; align-self: end; margin-top: 0; padding-bottom: .85rem; }
@media (max-width: 900px) {
  .learn__now { grid-template-columns: 1fr; }
  .learn__now .sub-title, .learn__now .progress, .learn__now .learn__link { grid-column: 1; grid-row: auto; }
  .learn__now .learn__link { margin-top: var(--s-3); }
}

/* skills */
.skills { padding-block: var(--s-5) var(--s-6); }
.skills__grid { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-c); }
.skill { padding: 1.5rem 1.5rem 1.75rem 0; border-bottom: 1px solid var(--rule-c); }
.skill h3 { font-size: var(--step-0); font-weight: 700; font-stretch: 108%; }
.skill p { margin-top: .4rem; color: var(--fg-2); max-width: 36ch; }
@media (max-width: 900px) { .skills__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .skills__grid { grid-template-columns: 1fr; } }
.learn { margin-top: var(--s-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.certs li { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s-2); padding-block: .85rem; border-top: 1px solid var(--rule-c); color: var(--fg-2); }
.certs strong { display: block; color: var(--fg); font-weight: 620; }
.certs__year { color: var(--fg-3); font-variant-numeric: tabular-nums; font-size: var(--step--1); padding-top: .15em; }
.progress li { display: grid; grid-template-columns: 1fr auto; gap: .4rem var(--s-2); padding-block: .85rem; border-top: 1px solid var(--rule-c); }
.progress__val { font-variant-numeric: tabular-nums; color: var(--fg-2); font-size: var(--step--1); }
.progress__bar { grid-column: 1 / -1; position: relative; height: var(--line-w); background: var(--rule-c); border-radius: 2px; overflow: hidden; }
.progress__bar::after { content: ""; position: absolute; inset: 0; background: var(--line); transform-origin: left; transform: scaleX(var(--v)); transition: transform var(--t-draw) var(--ease); }
.js .progress:not(.is-in) .progress__bar::after { transform: scaleX(0); }
.learn__link { margin-top: var(--s-3); }
@media (max-width: 900px) { .learn { grid-template-columns: 1fr; } }

/* off the clock */
.offclock { padding-block: var(--s-6) var(--s-4); }
.offclock--night { padding-block: var(--s-5) var(--s-6); }
.off__item { margin-top: var(--s-4); }
.off__caption { font-size: var(--step-2); line-height: 1.2; font-weight: 520; letter-spacing: -.015em; max-width: 26ch; margin-bottom: var(--s-5); }
.off__link { margin-top: var(--s-3); }
.off__meta { margin-top: var(--s-4); }
.off__meta > :first-child { margin-top: 0; }

/* lately on X */
.posts { padding-block: var(--s-6) 0; }
.posts__list { margin-top: var(--s-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--s-3); align-items: start; }
.post { min-width: 0; }
/* the posts rise in as they scroll into view, driven by the scroll itself on the compositor; browsers without
   scroll timelines show them as they are */
@keyframes post-in { from { opacity: 0; transform: translateY(32px) scale(.98); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .post { animation: post-in cubic-bezier(.2, .7, .2, 1) both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .js .post:nth-child(3n+2) { animation-range: entry 8% entry 78%; }
    .js .post:nth-child(3n) { animation-range: entry 16% entry 86%; }
  }
}
.tweet {
  --tw-bg: #fff; --tw-hover: #f7f9f9; --tw-fg: #0f1419; --tw-2: #536471; --tw-line: #cfd9de; --tw-blue: #1d9bf0;
  position: relative; padding: 12px 16px 2px; border: 1px solid var(--tw-line); border-radius: 12px; background: var(--tw-bg); color: var(--tw-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 20px; transition: background-color var(--t-state) var(--ease);
}
html.is-night .tweet { --tw-bg: #000; --tw-hover: #080808; --tw-fg: #e7e9ea; --tw-2: #71767b; --tw-line: #2f3336; }
.tweet:hover { background: var(--tw-hover); }
.tweet a { position: relative; z-index: 1; color: inherit; text-decoration: none; }
.tweet__head { display: flex; align-items: center; gap: 8px; }
.tweet__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--tw-line); }
.tweet__who { display: flex; flex-direction: column; min-width: 0; }
.tweet__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tweet__handle { color: var(--tw-2); }
.tweet__logo { width: 23px; height: 23px; margin-left: auto; align-self: flex-start; color: var(--tw-fg); }
.tweet__text { margin-top: 12px; font-size: 17px; line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tweet a.tweet__ent { color: var(--tw-blue); }
.tweet a.tweet__ent:hover { text-decoration: underline; }
.tweet__media { margin-top: 12px; display: grid; gap: 2px; overflow: hidden; border: 1px solid var(--tw-line); border-radius: 16px; aspect-ratio: 16 / 9; }
.tweet__media--2, .tweet__media--4 { grid-template-columns: 1fr 1fr; }
.tweet__media--3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tweet__media--3 .tweet__m:first-child { grid-row: span 2; }
.tweet__m { position: relative; min-height: 0; background: var(--tw-line); }
.tweet__m img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tweet__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid #fff; border-radius: 50%; background: #1d9bf0; color: #fff; font-size: 13px; font-weight: 700; }
.tweet__play svg { width: 26px; height: 26px; }
.tweet__quote { display: block; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--tw-line); border-radius: 16px; }
.tweet__qwho { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tweet__qavatar { flex: none; width: 20px; height: 20px; border-radius: 50%; }
.tweet__qtext { display: -webkit-box; margin-top: 2px; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; white-space: pre-wrap; }
.tweet__time { display: block; margin-top: 12px; color: var(--tw-2); }
.tweet a.tweet__time { position: static; }
.tweet__time::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.tweet__time:hover time { text-decoration: underline; }
.tweet__time:focus-visible { outline: none; }
.tweet:has(.tweet__time:focus-visible) { outline: 2px solid var(--tw-blue); outline-offset: 2px; }
.tweet__stats { display: flex; gap: 28px; margin-top: 12px; padding-block: 4px 6px; border-top: 1px solid var(--tw-line); color: var(--tw-2); font-size: 13px; }
.tweet__stat { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.tweet__stat svg { width: 19px; height: 19px; }
.posts__more { margin-top: var(--s-4); }

/* contact */
.contact { padding-block: var(--s-7) var(--s-6); }
.contact__title { font-size: min(17vw, 14rem); line-height: .85; letter-spacing: -.04em; font-weight: 800; font-stretch: 125%; }
.contact__body { margin-top: var(--s-3); font-size: var(--step-1); color: var(--fg-2); }
.contact__mail { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.contact__email { position: relative; font-size: var(--step-2); font-weight: 650; letter-spacing: -.02em; text-decoration: none; padding-bottom: .35em; white-space: nowrap; }
@media (max-width: 760px) { .contact__email { font-size: min(var(--step-2), calc((100vw - 2 * var(--gutter)) / 15.5)); } }
.contact__sign { position: absolute; left: 0; bottom: -.25em; width: 100%; height: .6em; overflow: visible; }
.contact__sign path { fill: none; stroke: var(--line); stroke-width: var(--line-w); stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--sign, 0); }
.js .contact__sign path { --sign: 1; transition: stroke-dashoffset var(--t-draw) var(--ease); }
.js .contact.is-in .contact__sign path { --sign: 0; }
.contact__links { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: 1.6rem; }

.foot { padding-block: var(--s-4) max(var(--s-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--rule-c); color: var(--fg-3); font-size: var(--step--1); }
.foot__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); }
.foot__credits { max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

/* live data */
.race { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em .6em; font-size: var(--step-0); color: var(--fg-2); }
.race[hidden] { display: none; }
.race__label { color: var(--fg-3); }
.race__name { color: var(--fg); font-weight: 600; }
.race__clock { font-family: var(--mono); font-size: .86em; color: var(--fg); padding: .15em .5em; border: 1px solid var(--rule-c); border-radius: 4px; }
.race.is-live .race__clock { color: var(--bg); background: var(--kerb-red); border-color: var(--kerb-red); }

/* easter egg: the Konami code turns the paper sections to night */
html.is-switching body { transition: background-color var(--t-switch) var(--ease), color var(--t-switch) var(--ease); }

/* round 3: product work */
.pm-switch {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  padding: .5rem 0;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 540;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.pm-switch:hover { color: var(--fg); }
.pm-switch__track {
  position: relative;
  box-sizing: border-box;
  width: 2rem;
  height: 1.15rem;
  flex: none;
  border: 1px solid var(--rule-c);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, var(--fg) 18%);
  transition: background-color var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
}
.pm-switch__track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: .16rem;
  width: .68rem;
  height: .68rem;
  border-radius: 50%;
  background: var(--fg-2);
  transform: translateY(-50%);
  transition: background-color var(--t-state) var(--ease), transform var(--t-state) var(--ease);
}
html.is-pm .pm-switch__track { background: var(--line); border-color: var(--line); }
html.is-pm .pm-switch__track::after { background: var(--bg); transform: translate(1rem, -50%); }
.pm {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--t-state) var(--ease), opacity var(--t-state) var(--ease);
}
.pm[hidden] { display: none; }
.pm.is-open { grid-template-rows: 1fr; opacity: 1; }
.pm__inner { min-height: 0; overflow: hidden; }
.pm__facts { margin-top: 0; }
.pm__facts dd { min-width: 0; overflow-wrap: anywhere; }
.pm__why { display: block; margin-top: .35em; color: var(--fg-2); }
.pm__flow { margin: 0; padding: 0; list-style: none; }
.pm__flow li {
  position: relative;
  min-width: 0;
  padding: .3rem 0 .3rem 1.25rem;
  overflow-wrap: anywhere;
}
.pm__flow li::before {
  content: "";
  position: absolute;
  top: .58rem;
  bottom: -.58rem;
  left: .27rem;
  width: 2px;
  background: var(--line);
}
.pm__flow li::after {
  content: "";
  position: absolute;
  top: .3rem;
  left: 0;
  box-sizing: border-box;
  width: .56rem;
  height: .56rem;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
}
.pm__flow li:first-child::after,
.pm__flow li:last-child::after { background: var(--line); }
.pm__flow li:last-child::before { display: none; }
@media (max-width: 380px) {
  .top { gap: .25rem; }
  .top__name { font-size: .72rem; letter-spacing: -.03em; white-space: nowrap; }
  .pm-switch { gap: .25rem; font-size: .72rem; }
  .pm-switch__track { width: 1.55rem; height: .95rem; }
  .pm-switch__track::after { left: .14rem; width: .62rem; height: .62rem; }
  html.is-pm .pm-switch__track::after { transform: translate(.65rem, -50%); }
  .top .btn--small { min-height: 36px; padding-inline: .45rem; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-switch,
  .pm-switch__track,
  .pm-switch__track::after,
  .pm { transition: none; }
}
.toast { position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 50; margin: 0; padding: .6em 1em; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: var(--step--1, .875rem); font-weight: 560; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* round 3: race result, this week */
.race__follow { font-size: .88em; }
.last-race { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule-c); color: var(--fg-2); font-size: var(--step--1); }
.last-race[hidden] { display: none; }
.last-race__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .85rem; }
.last-race__label { color: var(--fg-3); font-size: var(--step--1); font-weight: 560; }
.last-race__event { color: var(--fg); font-weight: 560; }
.last-race__podium { margin-top: .65rem; border-top: 1px solid var(--rule-c); }
.last-race__row { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--rule-c); }
.last-race__position, .last-race__code, .last-race__time { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.last-race__position { color: var(--fg-3); font-size: .72em; }
.last-race__position.is-p1 { color: #ff5a4e; } /* kerb red lifted to 4.5:1 on asphalt */
.last-race__driver { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45rem; min-width: 0; }
.last-race__name { color: var(--fg); font-weight: 560; }
.last-race__code { color: var(--fg-3); font-size: .64em; letter-spacing: .04em; }
.last-race__team { flex-basis: 100%; color: var(--fg-3); font-size: .78em; line-height: 1.25; }
.last-race__time { color: var(--fg); font-size: .72em; white-space: nowrap; text-align: right; }
.last-race__fastest { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; margin-top: .65rem; color: var(--fg-2); font-size: .88em; }
.last-race__fastest[hidden] { display: none; }
.last-race__fastest-label { color: var(--fg-3); }
.year__week { max-width: 68ch; margin-top: var(--s-1); color: var(--fg-2); font-size: var(--step--1); line-height: 1.55; }
.year__week[hidden] { display: none; }
.year__week-label { color: var(--fg-3); white-space: nowrap; }
.year__week-count { color: var(--fg); font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* small phones: the switch takes the header button's place; email stays in the hero and contact */
@media (max-width: 479px) {
  .top > .btn--small { display: none; }
  .top__name { white-space: nowrap; }
}

/* round 4: line through flows, sign-off */
html.is-pm .pm.is-open .pm__flow li::before { display: none; }
html.is-pm .pm.is-open .pm__flow li::after { z-index: 2; background: var(--bg); }
html.is-pm .pm.is-open .pm__flow li:first-child::after,
html.is-pm .pm.is-open .pm__flow li:last-child::after { background: var(--line); }

.project__scene { transition: opacity 420ms var(--ease); }
html.is-pm .project__scene { opacity: .4; }

.foot__inner { align-items: flex-end; }
.foot__identity { display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: .5rem; }
.foot__identity > p { margin: 0; }
.foot__sign { display: block; width: clamp(180px, 24vw, 300px); height: auto; overflow: visible; pointer-events: none; }
.foot__sign-path {
  fill: none;
  stroke: var(--line);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.foot__sign-dot { fill: var(--line); opacity: 0; }

@media (max-width: 760px) {
  .foot__inner { flex-direction: column; align-items: flex-start; }
  .foot__identity { width: 100%; }
  .foot__credits { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .project__scene { transition: none; }
  html:not(.js) .foot__sign-path { stroke-dashoffset: 0 !important; }
  html:not(.js) .foot__sign-dot { opacity: 1; }
}

/* round 4: colour follows the line, moving titles */
main > *, .foot > * { z-index: auto; }
.thread { z-index: 1; }
main [data-world] { position: relative; z-index: auto; color: var(--fg); } /* text follows its own section, not the body's current world */
main [data-world]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--bg);
  clip-path: none;
  pointer-events: none;
}
/* the flood values change every frame while a world floods in; registered as non-inherited, a change restyles the
   section and its ::before only, instead of every element inside it (a 4-15ms style pass per frame on wide screens) */
@property --world-radius { syntax: "<length>"; inherits: false; initial-value: 9999px; }
@property --world-x { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --world-y { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }
@property --world-content-opacity { syntax: "<number>"; inherits: false; initial-value: 1; }
.js main [data-world]::before {
  --world-radius: inherit; --world-x: inherit; --world-y: inherit;
  clip-path: circle(var(--world-radius, 9999px) at var(--world-x, 50%) var(--world-y, 0px));
}
.js main [data-world].is-flooding::before { will-change: transform; }
main [data-world] > * { position: relative; z-index: 2; }
main [data-world] > .hero__sign { position: absolute; z-index: 1; }
/* opacity only: the content stays in the tab order and the accessibility tree while its world floods in */
.js main [data-world]:not([data-world="paper"]) > * {
  --world-content-opacity: inherit;
  opacity: var(--world-content-opacity, 1);
  transition: opacity 160ms var(--ease);
}
.js main [data-world]:not([data-world="paper"]):focus-within::before { clip-path: none; }
.js main [data-world]:not([data-world="paper"]):focus-within > * { opacity: 1; }
html.is-night main [data-world="paper"]::before { clip-path: none !important; }
html.is-night main [data-world="paper"] > * { opacity: 1 !important; }
html.is-night body, html.is-night main [data-world="paper"] { --line: #f3efe4; }
html.is-switching main [data-world]::before { transition: background-color var(--t-switch) var(--ease); }

.project__name {
  inline-size: 100%;
  block-size: 1em;
  contain: layout;
  white-space: nowrap;
  font-stretch: var(--name-width, 118%);
  font-weight: var(--name-weight, 800);
  letter-spacing: var(--name-tracking, -.035em);
}
#echo-title {
  text-shadow: var(--echo-shadow-a, 0 0 0 transparent), var(--echo-shadow-b, 0 0 0 transparent);
}
.project--pitlane .project__name {
  inline-size: calc(200% + var(--s-4));
  font-size: clamp(2.1rem, calc(10vw + 10px), var(--step-4));
}
@media (max-width: 900px) { .project--pitlane .project__name { inline-size: 100%; } }

@media (prefers-reduced-motion: reduce) {
  main [data-world]::before { clip-path: none !important; }
  main [data-world]:not([data-world="paper"]) > * { opacity: 1 !important; }
  /* no flood: each section's content simply fades in once it is on screen */
  .js main [data-world] > :not(.hero__sign) { opacity: 0 !important; transition: opacity 600ms ease !important; }
  .js main [data-world].is-seen > *, .js main [data-world]:focus-within > * { opacity: 1 !important; }
}