/* ==========================================================================
   Font: Inter (SIL OFL 1.1, assets/fonts/OFL.txt), subset to Latin + Latin Extended-A
   ========================================================================== */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* display face for the Future Founders page (SIL OFL 1.1, assets/fonts/OFL-TitanOne.txt) */
@font-face {
  font-family: "Titan One";
  src: url("../assets/fonts/titan-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* metric-matched fallback so the swap to Inter doesn't move the layout */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

:root {
  --text: #0d0d0d;
  --muted: #737373;
  --soft: #52525b;
  --line: rgba(13, 13, 13, 0.1);
  --hover: #f1f1f1;
  --press: #e7e7e7;
  --stage: #f4f4f5;
  --blue: #0a7cff;
  --blue-text: #0062d1;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* how pictures move when you point at them (see the hover block at the end) */
  --lift: translate 0.5s var(--spring), rotate 0.5s var(--spring), scale 0.5s var(--spring), box-shadow 0.35s var(--ease);
  --font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --header-size: 20px;
  --tile: min(440px, calc(100svh - 188px));
  --slot: 14px;

  /* race canvas (read by js/race.js) */
  --grass: #f4f4f5;
  --asphalt: #ffffff;
  --kerb: #e1e1e4;
  --lane: rgba(13, 13, 13, 0.07);
  --accent: #0d0d0d;
  --amber: #0a7cff;
  --surface: #ffffff;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 400 15px/1.47 var(--font);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.js body { overflow: hidden; }

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* placeholders that still need real content: remove the class once filled in */
.todo { color: #a16207; background: #fef9c3; border-radius: 4px; padding: 0 3px; }

/* ==========================================================================
   Home: identity on the left, a rail of tiles on the right
   ========================================================================== */
.canvas { position: relative; isolation: isolate; }
.js .canvas { position: fixed; inset: 0; height: 100dvh; overflow: hidden; }

.header { display: flex; flex-direction: column; gap: 44px; padding: 32px 20px; }
.js .header {
  position: absolute;
  z-index: 3;
  top: 50svh;
  left: max(18px, 50% - 496px);
  width: 320px;
  padding: 0;
  transform: translateY(-50%);
  pointer-events: none;
}
.js .header > * { pointer-events: auto; }

.identity { display: grid; gap: 15px; font-size: var(--header-size); letter-spacing: -0.035em; line-height: 1.08; }
.identity h1 { font: inherit; }
.avatar-wrap { position: relative; justify-self: start; display: inline-flex; margin-bottom: 4px; }
.avatar-btn {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 22.5%;
  corner-shape: squircle;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.avatar {
  width: 52px;
  height: 52px;
  border-radius: 22.5%;
  corner-shape: squircle;
  object-fit: cover;
  background: var(--stage);
  box-shadow: 0 0 0 1px var(--line);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avatar-btn:hover .avatar, .avatar-btn:focus-visible .avatar { transform: rotate(-7deg) scale(1.06); }
.avatar-btn:active .avatar { transform: rotate(-4deg) scale(0.95); transition-duration: 0.12s; }
.avatar-bubble {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 13px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%) scale(0.6);
  transform-origin: left center;
  pointer-events: none;
}
.confetti { position: fixed; z-index: 30; width: 7px; height: 7px; border-radius: 30%; pointer-events: none; }
.intro { display: grid; gap: 1px; letter-spacing: -0.03em; line-height: 1.25; }
.intro p { white-space: nowrap; }

.contact { display: flex; gap: 14px; padding-bottom: 22px; }
.contact-link,
.contact-trigger {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22.5%;
  corner-shape: squircle;
  background: none;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.17s var(--ease);
}
.contact-link:hover, .contact-trigger:hover { background: var(--hover); }
.contact-link:active, .contact-trigger:active { background: var(--press); transform: scale(0.96); }
.contact-label {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.018em;
  white-space: nowrap;
  pointer-events: none;
}
.contact-trigger { display: none; }

/* rail */
.track { display: flex; flex-wrap: wrap; gap: 32px; padding: 0 20px 40px; }
.js .track {
  position: relative;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(64px, 7vw, 120px);
  width: max-content;
  padding: 0;
  transform: translate3d(var(--x, 0px), 0, 0);
  transition: transform 0.6s var(--ease);
  will-change: transform;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.js .track.dragging { transition: none; cursor: grabbing; }
.js .viewport {
  position: absolute;
  z-index: 2;
  top: 50svh;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  touch-action: pan-y;
  overscroll-behavior: none;
}

.item {
  position: relative;
  display: grid;
  justify-items: center;
  flex: none;
  transition: opacity 0.22s var(--ease), filter 0.26s var(--ease), transform 0.26s var(--ease);
}
.item[data-side="before"] { opacity: 0.04; filter: blur(10px); transform: scale(0.95); }
.item[data-side="before"][data-distance="1"] { opacity: 0.12; filter: blur(3px); transform: scale(0.97); }

.tile {
  position: relative;
  display: block;
  width: var(--tile);
  aspect-ratio: 1;
  border-radius: 22.5%;
  corner-shape: squircle;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
html:not(.js) .tile { width: 200px; }
.tile:focus-visible { outline-offset: 6px; }
.tile { transition: transform 0.45s var(--spring); }
.item[data-active="true"] .tile:hover { transform: translateY(-4px); }
.item[data-active="true"] .tile:active { transform: translateY(-1px) scale(0.99); transition-duration: 0.12s; }

.cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: size;
  border-radius: 22.5%;
  corner-shape: squircle;
  background: #fff;
  border: 1px solid var(--line);
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.cover[data-tone="skyro"] { background: radial-gradient(130% 100% at 25% 15%, #431794 0%, #2c0b5e 62%, #220846 100%); border-color: transparent; }
.cover[data-tone="paper"] { background: var(--stage); border-color: transparent; }
.cover[data-tone="night"] { background: radial-gradient(130% 100% at 25% 15%, #2b2f38 0%, #16181d 62%, #0e1013 100%); border-color: transparent; }
/* the cardboard backdrop of the Kamien Simulator trailer, darker toward the corners like its vignette */
.cover[data-tone="cardboard"] { background: radial-gradient(75% 75% at 50% 50%, #b48c61 0%, #b08960 55%, #94704b 100%); border-color: transparent; }
.cover[data-tone="ink"] { background: radial-gradient(130% 100% at 25% 15%, #222225 0%, #111113 62%, #0a0a0b 100%); border-color: transparent; }
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.tile:hover .cover[data-tone="white"] { background: var(--hover); border-color: transparent; }
.tile:hover .cover[data-tone="paper"] { background: #ececee; }
.tile:hover .cover:not([data-tone="white"], [data-tone="paper"])::after { opacity: 1; }
.tile:active .glyph, .tile:active .wordmark { transform: scale(0.97); transition-duration: 0.1s; }

.tile-label {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 4px);
  color: var(--muted);
  font-size: 12px;
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.16s var(--ease), transform 0.22s var(--ease);
}
.item[data-active="true"] .tile-label, html:not(.js) .tile-label { opacity: 1; transform: translateX(-50%); }

/* logos inside tiles */
.cover-logo { position: relative; height: auto; pointer-events: none; transition: transform 0.2s var(--ease); -webkit-user-drag: none; }
.cover-logo-skyro { width: 74%; }
.cover-logo-oryx { width: auto; height: 76%; transform: translateX(-2%); }
.cover-logo-kamien { width: 92%; }
.tile:active .cover-logo { transform: scale(0.97); transition-duration: 0.1s; }

/* glyphs */
.glyph { width: 100%; height: 100%; overflow: visible; transition: transform 0.2s var(--ease); }
.glyph-track { fill: none; stroke: #d6d6d6; stroke-width: 6.4; stroke-linejoin: round; }
.glyph-car rect { fill: #0d0d0d; }
.glyph-ghost rect { fill: var(--blue); opacity: 0.6; }
.glyph-paper rect { fill: #fff; stroke: rgba(13, 13, 13, 0.08); stroke-width: 1; }
.glyph-paper path { fill: none; stroke: #d6d6d6; stroke-width: 2.6; stroke-linecap: round; }
.glyph-paper .sheet { transform-origin: 50px 50px; transition: transform 0.35s var(--ease); }
.glyph-paper .sheet-back { transform: rotate(6deg); }
/* Patrac: a plate reading PATRAC inside a detection box, like the app draws it */
.glyph-plate text { font-family: var(--font); font-weight: 700; }
.glyph-plate .plate { fill: #fff; }
.glyph-plate .plate-eu { fill: #1d4fd8; }
.glyph-plate .plate-stars { fill: none; stroke: #ffd400; stroke-width: 0.7; stroke-dasharray: 0.5 0.9; }
.glyph-plate .plate-cc { fill: #fff; font-size: 4.2px; text-anchor: middle; }
.glyph-plate .plate-text { fill: #111; font-size: 13.5px; letter-spacing: 0.05em; text-anchor: middle; }
.glyph-plate .plate-box { fill: none; stroke: #4ade80; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.glyph-plate .plate-tag rect { fill: #4ade80; }
.glyph-plate .plate-tag path { fill: none; stroke: #0d0d0d; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.glyph-plate .plate-tag text { fill: #0d0d0d; font-size: 4.4px; }
.glyph-plate .plate-scan { fill: #4ade80; opacity: 0; filter: drop-shadow(0 0 1.4px #4ade80); }
/* Murmur: the app's logo. Dot, the red face, sits in the murmur, two rings of dots that are
   brightest where it looks. On its page Dot comes alive and jumps out of here (js/dot.js). */
.glyph-murmur .murmur-ring { fill: #f4f4f5; transform-box: fill-box; transform-origin: center; }
.glyph-murmur .murmur-face > circle { fill: #ff4632; }
.glyph-murmur .murmur-eyes { fill: #fff; transform-box: fill-box; transform-origin: center; }
.tile:hover .sheet-front { transform: translateY(-3px) rotate(-2deg); }
.tile:hover .sheet-back { transform: rotate(9deg); }
.wordmark { font-size: 21cqw; font-weight: 600; letter-spacing: -0.065em; line-height: 1; color: var(--text); transition: transform 0.2s var(--ease); }
.wordmark span { color: var(--blue); }
.wordmark-serif { font-family: Georgia, "Times New Roman", "Liberation Serif", serif; font-size: 15cqw; font-weight: 700; letter-spacing: -0.045em; }

/* "for future founders": pill in the bottom-left corner of the home screen */
.ff-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  margin: 0 20px 20px;
  padding: 0 8px 0 16px;
  border-radius: 999px;
  background: #2b00ff;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* a raised bottom edge so it reads as something to press */
  box-shadow: 0 4px 0 #1a009c, 0 14px 30px -12px rgba(43, 0, 255, 0.75);
  transition: transform 0.3s var(--spring), box-shadow 0.25s var(--ease), background-color 0.2s;
}
.js .ff-pill { position: absolute; z-index: 3; left: max(18px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); margin: 0; }
.ff-pill:hover { background: #3a12ff; transform: translateY(-2px); box-shadow: 0 6px 0 #1a009c, 0 20px 36px -12px rgba(43, 0, 255, 0.8); }
.ff-pill:active { transform: translateY(4px); box-shadow: 0 0 0 #1a009c, 0 6px 16px -10px rgba(43, 0, 255, 0.7); transition-duration: 0.08s; }
.ff-pill:focus-visible { outline: 3px solid #2b00ff; outline-offset: 4px; }
.ff-pill-logo { width: auto; height: 32px; }
.ff-pill-go { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #2b00ff; font-size: 18px; font-weight: 700; transition: transform 0.35s var(--spring); }
.ff-pill:hover .ff-pill-go { transform: translateX(3px); }

/* the blue panel that wipes across when the Future Founders page opens or closes */
.ff-wipe { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #2b00ff; transform: translateX(-100%); pointer-events: none; }
.ff-wipe img { width: auto; height: min(34vh, 250px); }

/* the little cars (js/playground.js): above the tiles, below the text, never clickable */
.playground { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* Dot, Murmur's mascot (js/dot.js): follows the cursor around the Murmur page; only its body takes clicks */
.mascot { position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none; }
.mascot-body { position: fixed; top: 0; left: 0; z-index: 1; border-radius: 50%; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* position markers under the active tile */
.position { display: none; }
.js .position {
  position: absolute;
  z-index: 4;
  top: calc(50svh + var(--tile) / 2 + 44px);
  left: calc(var(--anchor, 50%) + var(--tile) / 2);
  display: flex;
  height: 22px;
  transform: translateX(-50%);
}
.position button {
  display: grid;
  place-items: center;
  width: var(--slot);
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.position button::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 30%;
  background: #a9a9a7;
  opacity: 0.48;
  transition: opacity 0.15s;
}
.position button:hover::before { opacity: 0.9; }
.position-active {
  position: absolute;
  top: 50%;
  left: calc((var(--slot) - 10px) / 2);
  width: 10px;
  height: 10px;
  border-radius: 30%;
  background: var(--text);
  opacity: 0.94;
  pointer-events: none;
  transform: translate3d(calc(var(--pos, 0) * var(--slot)), -50%, 0);
  transition: transform 0.45s var(--ease);
}

.quote {
  padding: 0 20px 24px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: -0.01em;
  text-align: center;
}
.js .quote { position: absolute; z-index: 3; left: 0; right: 0; bottom: max(22px, env(safe-area-inset-bottom)); padding: 0 20px; pointer-events: none; }
.quote-btn {
  position: relative;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s var(--ease);
}
html:not(.js) .quote-btn, .quote-btn:disabled { cursor: default; pointer-events: none; }
/* the hint: a tiny car peeks out after the quote on hover */
.quote-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 14px;
  height: 7px;
  margin: -3px 0 0 8px;
  border-radius: 2.5px;
  background: var(--text);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.2s var(--ease), transform 0.45s var(--spring);
}
.quote-btn:hover, .quote-btn:focus-visible { color: var(--text); }
.quote-btn:hover::after, .quote-btn:focus-visible::after { opacity: 1; transform: translateX(0); }
.quote-btn[aria-pressed="true"]::after { background: var(--blue); }

/* ==========================================================================
   Project views
   ========================================================================== */
.detail { position: relative; padding: 24px 0 48px; border-top: 1px solid var(--line); }
.js .detail {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  padding: 0;
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
}
.js .detail.open { display: block; animation: rise 0.4s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 20px 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 1px var(--line), 0 4px 14px -6px rgba(13, 13, 13, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  transition: background-color 0.15s, transform 0.17s var(--ease);
}
.js .back { position: fixed; z-index: 2; top: max(24px, env(safe-area-inset-top)); left: max(18px, 50% - 600px); margin: 0; }
.back:hover { background: #fff; }
.back:active { transform: scale(0.96); }

.detail-inner {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4.5vw, 64px);
  min-height: 100svh;
  padding: 96px max(18px, 50% - 600px) 64px;
}
html:not(.js) .detail-inner { min-height: 0; padding-top: 0; }
.detail-tile { position: relative; flex: none; width: min(var(--tile), 34vw); aspect-ratio: 1; }

.detail-text { flex: 0 1 420px; min-width: 0; }
.detail-text h2 { margin-bottom: 18px; font-size: clamp(30px, 2.6vw, 40px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.05; }
.detail-sub { margin-bottom: 22px; color: var(--muted); font-size: 17px; letter-spacing: -0.02em; line-height: 1.4; }
.detail-key { margin-bottom: 26px; font-size: 14px; line-height: 1.5; }
.detail-meta { margin-bottom: 22px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.detail-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.detail-list li { padding: 5px 11px; border-radius: 999px; background: var(--stage); color: var(--soft); font-size: 13px; }
.detail-links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; }
.detail-links a {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  min-height: 32px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.15s;
}
.detail-links a:hover { border-bottom-color: var(--text); }
.detail-links .i { width: 16px; height: 16px; }

.detail-media { flex: 1 1 460px; max-width: 680px; min-width: 0; }
.detail-media img { width: 100%; height: auto; border-radius: 8px; background: #fafafa; box-shadow: 0 0 0 1px var(--line); }
.media-video { display: block; width: 100%; height: auto; border-radius: 8px; background: #fafafa; box-shadow: 0 0 0 1px var(--line); }
.media-link { display: block; border-radius: 8px; cursor: zoom-in; transition: transform 0.2s var(--ease); }
.media-link:hover { transform: translateY(-2px); }
/* a phone screenshot: kept phone-sized in a dark frame */
.detail-media-phone { flex: 0 1 300px; max-width: 300px; }
.media-phone { padding: 8px; border-radius: 38px; background: #0d0d0d; box-shadow: 0 30px 60px -32px rgba(13, 13, 13, 0.5); }
.media-phone img { display: block; width: 100%; height: auto; border-radius: 30px; }
.detail-inner:has(.detail-media) { gap: clamp(28px, 3.4vw, 48px); }
.detail-inner:has(.detail-media) .detail-tile { width: min(280px, 22vw); }
.detail-inner:has(.detail-media) .detail-text { flex-basis: 340px; }
.detail-media figcaption { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.detail-media figcaption strong { display: block; color: var(--soft); font-weight: 500; }

/* race view: a case-study rail (intro + game, then panels you scroll through) */
.case-track { margin: 0; padding: 92px 20px 48px; list-style: none; }
.case-item + .case-item { margin-top: 56px; }
.case-intro .detail-text { margin-bottom: 32px; }
.case-card { margin: 0; }
.case-media { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 4%; overflow: hidden; border-radius: 12px; background: var(--stage); }
.case-svg { width: 100%; height: 100%; }
.case-card figcaption, .case-shot figcaption { max-width: 64ch; margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.case-card figcaption strong, .case-shot figcaption strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 14px; font-weight: 500; }
/* Murmur: the logo opens the rail, then a phone screen per panel with its story beside it */
.case-intro .detail-tile { width: min(64vw, 280px); margin: 0 auto 32px; }
.case-shot { display: grid; justify-items: center; margin: 0; }
.case-shot .media-phone { width: min(300px, 76vw); }
.case-shot figcaption { max-width: min(300px, 76vw); }
.case-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.case-next:hover { color: var(--text); border-bottom-color: var(--text); }
.case-next span { transition: transform 0.25s var(--spring); }
.case-next:hover span { transform: translateX(3px); }
.js .case-position { display: none; }

@media (min-width: 961px) {
  .js .case { overflow: hidden; }
  .js .case-track {
    display: flex;
    align-items: center;
    gap: clamp(56px, 6vw, 110px);
    width: max-content;
    height: 100svh;
    padding: 0 max(18px, 50% - 600px);
    transform: translate3d(var(--cx, 0px), 0, 0);
    transition: transform 0.7s var(--ease);
    will-change: transform;
  }
  .js .case-item { flex: none; margin: 0; transition: opacity 0.35s var(--ease); }
  .js .case-item:not([data-active="true"]) { opacity: 0.36; }
  .js .case-intro { display: flex; align-items: center; gap: clamp(32px, 4.5vw, 64px); width: min(1200px, 100vw - 2 * max(18px, 50vw - 600px)); }
  .js .case-intro .detail-text { flex: 0 0 300px; margin: 0; }
  .js .case-intro .race { flex: 1 1 640px; min-width: 0; max-width: 860px; }
  .js .case-card { width: min(780px, 60vw, (100svh - 260px) * 1.6); }
  .js .case-intro:has(.detail-tile) { width: auto; }
  .js .case-intro .detail-tile { width: min(280px, 22vw); margin: 0; }
  .js .case-intro .detail-tile + .detail-text { flex-basis: 380px; }
  .js .case-shot { grid-template-columns: auto 260px; align-items: center; justify-items: start; gap: clamp(32px, 3.5vw, 56px); }
  .js .case-shot .media-phone { width: auto; }
  .js .case-shot .media-phone img { width: auto; height: min(660px, 100svh - 200px); }
  .js .case-shot figcaption { max-width: none; margin: 0; }
  .js .case-position { position: absolute; display: flex; top: auto; bottom: max(30px, env(safe-area-inset-bottom)); left: 50%; height: 22px; transform: translateX(-50%); }
}

/* ==========================================================================
   Future Founders application: a scroll experience styled after futurefounders.sk
   ========================================================================== */
.ff {
  --ff: #2b00ff;
  color: var(--text);
}
/* doodles down both edges (they scroll with the page) over a dot grid; .js .detail.ff
   because the plain .js .detail background would otherwise wipe them out */
.ff, .js .detail.ff {
  background-color: #f8f8f8;
  background-image: url("../assets/img/ff-doodles-l.svg"), url("../assets/img/ff-doodles-r.svg"), radial-gradient(rgba(13, 13, 13, 0.14) 1.1px, transparent 1.5px);
  background-position: left top, right top, 0 0;
  background-repeat: repeat-y, repeat-y, repeat;
  background-size: 360px auto, 360px auto, 26px 26px;
  background-attachment: local, local, scroll;
}
.js .detail.ff { overflow-x: hidden; }
.ff-back { background: #2b00ff; color: #fff; box-shadow: 0 0 0 2px #fff, 0 8px 22px -10px rgba(43, 0, 255, 0.7); }
.ff-back:hover { background: #2400d6; }
.ff-progress { position: sticky; top: 0; z-index: 3; height: 4px; margin-bottom: -4px; }
.ff-progress span { display: block; height: 100%; background: var(--ff); transform: scaleX(0); transform-origin: 0 50%; }
.ff-display { color: var(--ff); font-family: "Titan One", var(--font); font-weight: 400; letter-spacing: 0.015em; line-height: 0.95; text-transform: uppercase; }

.ff-scene { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: 110px max(20px, 7vw); }
.ff-hero { align-items: flex-start; }
.ff-logo { position: absolute; top: 30px; right: max(20px, 7vw); width: auto; height: 76px; }
.ff-tag { margin-bottom: 26px; color: #555; font-size: 14px; }
.ff-title { font-size: clamp(64px, 11vw, 170px); line-height: 0.9; }
.ff-line { display: block; overflow: hidden; padding-bottom: 0.05em; }
.ff-line > span { display: inline-block; }
.ff-arrow { display: block; width: 150px; height: 104px; margin: 10px 0 0 clamp(140px, 24vw, 380px); color: var(--ff); }
.ff-lead { max-width: 42ch; margin-top: 18px; color: #222; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; }
.ff-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: #555; font-size: 13px; letter-spacing: 0.04em; }
.ff-scroll span { display: inline-block; margin-left: 4px; }

.ff-marquee { overflow: hidden; margin: 10px -2vw; padding: 22px 0; background: var(--ff); color: #fff; transform: rotate(-2.2deg); }
.ff-marquee-track { display: flex; align-items: center; width: max-content; font-family: "Titan One", var(--font); font-size: clamp(28px, 4vw, 52px); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.ff-marquee-track > * { flex: none; margin-right: 30px; }
.ff-marquee-track svg { width: 0.62em; height: 0.62em; color: #fff; }

/* each question: the answer on one side, a picture on the other, swapping sides down the page */
.ff-q { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 56px clamp(40px, 7vw, 120px); }
.ff-q-flip { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.ff-q-flip .ff-q-art { order: -1; }
.ff-q h3 { font-size: clamp(42px, 5vw, 80px); }
.ff-answer { display: grid; gap: 16px; max-width: 56ch; margin-top: clamp(24px, 3vw, 40px); color: #222; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; }
.ff-q-art { justify-self: center; }

/* who I am: a polaroid taped to the page */
.ff-portrait { position: relative; width: min(100%, 340px); margin: 0; padding: 12px 12px 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.06), 0 40px 80px -34px rgba(43, 0, 255, 0.5); transform: rotate(-3deg); }
.ff-portrait::before { content: ""; position: absolute; top: -15px; left: 50%; width: 112px; height: 30px; background: rgba(43, 0, 255, 0.2); transform: translateX(-50%) rotate(4deg); }
.ff-portrait img { display: block; width: 100%; height: auto; border-radius: 10px; }
.ff-portrait figcaption { padding: 16px 0 18px; color: var(--ff); font-family: "Titan One", var(--font); font-size: 20px; line-height: 1; text-align: center; text-transform: uppercase; }

/* why: every layer of what I run, from the people using it down to Linux, with a request running through */
.ff-stack { --layer: 52px; --gap: 10px; position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) 24px auto; align-items: stretch; gap: 0 14px; width: min(100%, 480px); }
.ff-wire { position: relative; justify-self: center; width: 2px; background: repeating-linear-gradient(var(--ff) 0 6px, transparent 6px 12px); }
/* the request: a dot that runs the wire's length (the box is the wire minus the dot, so moving it 100% lands at the bottom however tall the stack gets) */
.ff-wire i { position: absolute; top: 0; bottom: 14px; left: -6px; width: 14px; }
.ff-wire i::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--ff); box-shadow: 0 0 0 3px #d9d9d9; }
.ff-layers { display: grid; gap: var(--gap); }
/* each layer opens on hover (or focus, or a tap) to say what I use there; the rest dim */
.ff-layer { display: grid; justify-items: center; align-content: center; min-height: var(--layer); padding: 0 14px; border-radius: 14px; background: var(--ff); color: #fff; font-family: "Titan One", var(--font); font-size: clamp(16px, 1.5vw, 21px); text-transform: uppercase; cursor: default; transition: opacity 0.25s var(--ease), scale 0.45s var(--spring), box-shadow 0.25s var(--ease); }
.ff-layer-name { display: flex; align-items: center; gap: 10px; line-height: 1; }
.ff-layer-more { max-height: 0; overflow: hidden; opacity: 0; font-family: var(--font); font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; text-transform: none; transition: max-height 0.4s var(--ease), opacity 0.25s var(--ease), margin 0.4s var(--ease); }
.ff-layer:hover, .ff-layer:focus { z-index: 1; scale: 1.05; }
.ff-layer:nth-child(odd):hover, .ff-layer:nth-child(odd):focus { box-shadow: 0 14px 30px -14px rgba(43, 0, 255, 0.8); }
.ff-layer:hover .ff-layer-more, .ff-layer:focus .ff-layer-more { max-height: 3em; margin: 6px 0 9px; opacity: 0.92; }
.ff-layers:hover .ff-layer:not(:hover), .js .ff .ff-stack.in .ff-layers:hover .ff-layer:not(:hover) { opacity: 0.4; }
.ff-layer:focus { outline: none; }
.ff-layer:focus-visible { outline: 3px solid var(--ff); outline-offset: 3px; }
.ff-stack-hint { grid-column: 2; margin-top: 14px; color: #555; font-size: 13px; text-align: center; }
.ff-hint-touch { display: none; }
@media (hover: none) { .ff-hint-mouse { display: none; } .ff-hint-touch { display: inline; } }
.ff-layer:nth-child(even) { background: #fff; color: var(--ff); box-shadow: inset 0 0 0 2px var(--ff); }
.ff-dots { display: flex; gap: 5px; }
.ff-dots i { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.ff-brace { width: 100%; height: 100%; overflow: visible; }
.ff-brace path { fill: none; stroke: var(--ff); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ff-note { align-self: center; color: var(--ff); font-family: "Titan One", var(--font); font-size: clamp(14px, 1.3vw, 18px); line-height: 1.05; text-transform: uppercase; transform: rotate(-8deg); }

/* outside the screen: scouting. The text up top, then the photos as big as the project shots */
.ff-scout-head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 32px clamp(40px, 6vw, 110px); width: min(1100px, 100%); margin: 0 auto; }
.ff-scout .ff-display { font-size: clamp(46px, 6.4vw, 104px); }
.ff-scout-lead, .ff-scout-web { max-width: 46ch; color: #222; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; }
.ff-scout-list { display: grid; gap: 12px; margin-top: 22px; }
.ff-scout-list li { display: flex; align-items: center; gap: 14px; color: var(--ff); font-family: "Titan One", var(--font); font-size: clamp(20px, 2vw, 28px); line-height: 1; text-transform: uppercase; }
.ff-scout-list svg { flex: none; width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: #fff; color: var(--ff); }
.ff-scout-web { margin-top: 30px; }
.ff-link { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; padding: 3px 14px 4px; border-radius: 999px; background: var(--ff); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform 0.3s var(--spring), background-color 0.2s; }
.ff-link:hover { background: #3a12ff; transform: translateY(-2px); }
.ff-link:focus-visible { outline: 3px solid var(--ff); outline-offset: 3px; }
/* column widths follow the photos' aspect ratios, so both come out the same height */
.ff-scout-photos { display: grid; grid-template-columns: minmax(0, 1.7778fr) minmax(0, 0.7484fr); align-items: start; gap: clamp(16px, 2vw, 28px); width: min(1100px, 100%); margin: clamp(56px, 7vw, 96px) auto 0; }
.ff-pic { position: relative; margin: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.08), 0 40px 90px -30px rgba(43, 0, 255, 0.45); }
.ff-pic img, .ff-pic video { display: block; width: 100%; height: auto; border-radius: 14px; }
.ff-sticker { position: absolute; top: -16px; left: 20px; padding: 9px 15px 8px; border-radius: 999px; background: #fff; color: var(--ff); font-family: "Titan One", var(--font); font-size: clamp(13px, 1.2vw, 17px); line-height: 1; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 0 2px var(--ff), 0 10px 22px -10px rgba(43, 0, 255, 0.6); rotate: -4deg; }
.ff-pic-tall .ff-sticker { left: auto; right: 16px; rotate: 3deg; }
/* Kamien Simulator: the trailer, labelled on its top edge (the controls stay clear at the bottom) */
.ff-kamien { width: min(1100px, 100%); }
.ff-sticker-end { left: auto; right: 20px; rotate: 4deg; }
/* the gray scenes get the doodles too, each from a different stretch of the strip */
.ff-q-gray, .ff-scout { background: url("../assets/img/ff-doodles-l.svg") left 0 top -900px / 360px auto repeat-y, url("../assets/img/ff-doodles-r.svg") right 0 top -1400px / 360px auto repeat-y, #d9d9d9; }
.ff-scout { background-position: left 0 top -1900px, right 0 top -500px, 0 0; }
.ff-quote { max-width: 26ch; margin-top: 34px; color: var(--ff); font-family: "Titan One", var(--font); font-size: clamp(20px, 2.1vw, 30px); line-height: 1.15; text-transform: uppercase; }
.ff-sparks { position: absolute; top: 14%; right: 9%; width: 60px; height: 70px; color: var(--ff); }

/* hackathon: a photo with a hand-drawn arrow pointing me out */
.ff-hack { display: grid; grid-template-columns: minmax(0, 1fr) min(460px, 40vw); align-items: center; gap: 48px clamp(40px, 7vw, 120px); }
.ff-hack .ff-display { font-size: clamp(44px, 5.6vw, 96px); }
.ff-hack-lead { max-width: 40ch; margin-top: 26px; color: #222; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; }
.ff-photo { position: relative; margin: 0; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.06), 0 40px 90px -30px rgba(43, 0, 255, 0.45); transform: rotate(2deg); container-type: inline-size; }
.ff-photo img { display: block; width: 100%; height: auto; border-radius: 10px; }
/* drawn in the photo's own pixel coordinates, so it stays on me at any size */
.ff-me { position: absolute; inset: 10px; pointer-events: none; }
.ff-me svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ff-me path { fill: none; stroke: var(--ff); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.ff-me-label { position: absolute; top: 7%; left: 4%; color: var(--ff); font-family: "Titan One", var(--font); font-size: 6.6cqw; line-height: 1; text-shadow: 0 0 10px #fff, 0 0 3px #fff; text-transform: uppercase; white-space: nowrap; transform: rotate(-7deg); }

.ff-built { background: var(--ff); color: #fff; }
.ff-built .ff-display { color: #fff; font-size: clamp(56px, 9.5vw, 150px); }
.ff-built-lead { max-width: 40ch; margin: 24px 0 50px; color: rgba(255, 255, 255, 0.85); font-size: clamp(17px, 1.45vw, 21px); }
.ff-rows { border-top: 1px solid rgba(255, 255, 255, 0.3); }
.ff-rows li { display: flex; align-items: center; gap: 24px; padding: 28px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.85); font-size: clamp(17px, 1.5vw, 21px); }
.ff-rows svg { flex: none; width: 36px; height: 36px; color: #fff; }
.ff-rows strong { display: block; margin-bottom: 6px; color: #fff; font-family: "Titan One", var(--font); font-size: clamp(28px, 3.2vw, 48px); font-weight: 400; line-height: 1; text-transform: uppercase; }

.ff-shot { align-items: center; }
.ff-window { width: min(1100px, 100%); margin: 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.08), 0 40px 90px -30px rgba(43, 0, 255, 0.45); }
.ff-window-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid rgba(13, 13, 13, 0.06); background: #f1f1f4; }
.ff-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d4d4d8; }
.ff-window-bar span { margin-left: 12px; padding: 3px 12px; border-radius: 999px; background: #fff; color: #666; font-size: 12px; }
.ff-window img, .ff-window video { display: block; width: 100%; height: auto; }
.ff-shot-caption { margin-top: 28px; color: #444; font-size: 15px; text-align: center; }
.ff-shot-caption strong { margin-right: 6px; color: var(--ff); }
.ff-show-head { min-height: 0; padding-bottom: 0; align-items: center; text-align: center; }
/* Patrac: the screenshot in a phone with a scan line sweeping the plate, next to how it works */
.ff-phone-wrap { position: relative; width: min(340px, 74vw); margin: 0 auto; }
.ff-phone { position: relative; margin: 0; padding: 10px; overflow: hidden; border-radius: 46px; background: #0d0d0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 50px 100px -34px rgba(43, 0, 255, 0.55); }
.ff-phone img { display: block; width: 100%; height: auto; border-radius: 36px; }
/* the box is where the plate sits in the screenshot; the line runs top to bottom of it */
.ff-phone-scan { position: absolute; top: 31.5%; left: 7%; right: 10%; height: 16.5%; pointer-events: none; }
.ff-phone-scan i { position: absolute; inset: 0 0 3px; }
.ff-phone-scan i::before { content: ""; display: block; height: 3px; border-radius: 2px; background: #4ade80; box-shadow: 0 0 14px 3px rgba(74, 222, 128, 0.65); opacity: 0; }
.ff-phone-grid { display: grid; grid-template-columns: auto minmax(0, 430px); align-items: center; justify-content: center; gap: 48px clamp(56px, 8vw, 130px); width: 100%; }
/* Murmur: the notes in front, the recorder peeking out from behind */
.ff-phone-back { position: absolute; top: 8%; left: -32%; width: 84%; rotate: -8deg; }
.ff-pipe { position: relative; }
/* the hero's hand-drawn arrow, flipped, pointing from the steps at the phone */
.ff-pipe-arrow { position: absolute; top: -6px; left: -128px; width: 110px; height: 76px; color: var(--ff); transform: scaleX(-1) rotate(-14deg); }
.ff-pipe-steps { position: relative; display: grid; gap: 4px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: step; }
/* the dashed line joining the numbers */
.ff-pipe-steps::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: 20px; width: 2px; background: repeating-linear-gradient(var(--ff) 0 6px, transparent 6px 12px); }
.ff-pipe-steps li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 2px 18px; padding: 10px 0; counter-increment: step; }
.ff-pipe-steps li::before { content: counter(step); position: relative; z-index: 1; grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ff); box-shadow: inset 0 0 0 2px var(--ff); font-family: "Titan One", var(--font); font-size: 18px; line-height: 1; }
.ff-pipe-steps b { color: var(--ff); font-family: "Titan One", var(--font); font-size: clamp(20px, 2vw, 28px); font-weight: 400; line-height: 1; text-transform: uppercase; }
.ff-pipe-steps span { color: #333; font-size: 15px; line-height: 1.4; }
.ff-pipe-time { margin-top: 26px; color: var(--ff); font-family: "Titan One", var(--font); font-size: clamp(54px, 6vw, 88px); line-height: 0.9; }
.ff-pipe-time small { display: block; margin-top: 10px; color: #444; font-family: var(--font); font-size: 15px; line-height: 1.4; }
.ff-show-head .ff-display { font-size: clamp(56px, 9.5vw, 150px); }
.ff-show-lead { max-width: 40ch; margin-top: 24px; color: #444; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; }

/* the race's ghost lap on a loop (js/lap.js reads the --lap-* colours) */
.ff-lap {
  --lap-bg: #2b00ff;
  --lap-road: #1d00b0;
  --lap-edge: #fff;
  --lap-lane: rgba(255, 255, 255, 0.3);
  --lap-car: #fff;
  position: relative;
  display: block;
  width: min(1100px, 100%);
  overflow: hidden;
  border-radius: 14px;
  background: var(--lap-bg);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.08), 0 40px 90px -30px rgba(43, 0, 255, 0.6);
  container-type: inline-size;
}
.ff-lap:focus-visible { outline: 3px solid var(--ff); outline-offset: 5px; }
.ff-lap-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1100 / 620; }
/* sits in the track's infield; sized with the stage so it fits there on a phone too */
.ff-lap-hud { position: absolute; top: 51%; left: 35.5%; display: flex; flex-direction: column; align-items: flex-start; transform: translate(-50%, -50%); }
/* Titan One has no tabular figures: a fixed-width, left-aligned timer keeps the block still */
.ff-lap-time { width: 2.7em; font-family: "Titan One", var(--font); font-size: clamp(22px, 6cqw, 66px); line-height: 1; }
.ff-lap-hud small { margin-top: clamp(3px, 0.6cqw, 8px); font-size: clamp(9px, 1.15cqw, 13px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.ff-lap-go { display: inline-flex; align-items: center; height: clamp(28px, 4cqw, 44px); margin-top: clamp(8px, 1.8cqw, 22px); padding: 0 clamp(12px, 1.8cqw, 20px); border-radius: 999px; background: #fff; color: var(--ff); font-size: clamp(11px, 1.3cqw, 14px); font-weight: 700; transition: transform 0.35s var(--spring); }
.ff-lap:hover .ff-lap-go { transform: translateY(-2px); }
.ff-lap:active .ff-lap-go { transform: scale(0.97); transition-duration: 0.12s; }

.ff-cta { align-items: center; background: var(--ff); text-align: center; }
.ff-cta .ff-display { color: #fff; font-size: clamp(64px, 11vw, 170px); }
.ff-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.ff-btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--ff);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.35s var(--spring), background-color 0.2s;
}
.ff-btn:hover { transform: translateY(-2px); }
.ff-btn:active { transform: scale(0.97); transition-duration: 0.12s; }
.ff-btn-line { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.ff-btn-line:hover { background: rgba(255, 255, 255, 0.12); }

/* the closing: springy letters (split up by main.js) and a paper plane that lands by "napíš mi"
   (main.js moves it along the trail and draws the trail behind it) */
.ff-jelly .ff-word { display: inline-block; white-space: nowrap; }
.ff-jelly .ff-letter { display: inline-block; transform-origin: 50% 90%; }
.ff-mail { position: relative; }
.ff-plane { display: none; }
.js .ff-plane { position: absolute; right: calc(100% + 6px); bottom: calc(50% - 10px); display: block; width: 300px; max-width: none; height: 130px; overflow: visible; pointer-events: none; }
.ff-trail { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.1 9; opacity: 0.7; }
.ff-trail-draw { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ff-craft { opacity: 0; }
.ff-plane.flying .ff-craft, .ff-plane.landed .ff-craft, .ff-plane.sent .ff-craft { opacity: 1; }
.ff-plane.landed .ff-trail-draw { stroke-dashoffset: 0; }

@media (max-width: 900px) {
  .ff-scene { min-height: 0; padding: 96px 20px; }
  .ff-hero { min-height: 100svh; }
  .ff-logo { height: 60px; }
  .ff-q, .ff-q-flip { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .ff-q-flip .ff-q-art { order: 0; }
  .ff-sparks { top: 40px; right: 24px; width: 44px; height: 52px; }
  .js .ff-plane { width: 170px; height: 74px; bottom: calc(50% - 6px); }
  .ff-stack { --layer: 42px; --gap: 8px; gap: 0 10px; }
  .ff-scout-head, .ff-scout-photos { grid-template-columns: minmax(0, 1fr); }
  /* smaller and further apart on a phone: the taller box leaves gaps between repeats */
  .ff, .js .detail.ff { background-size: 170px 2300px, 170px 2300px, 26px 26px; }
  .ff-q-gray, .ff-scout { background-size: 170px 2300px, 170px 2300px, auto; }
  .ff-scout-photos { gap: 40px; }
  .ff-phone-grid { grid-template-columns: minmax(0, 1fr); }
  .ff-phone-back { top: 6%; left: -16%; }
  .ff-pipe-arrow { display: none; }
  .ff-hack { grid-template-columns: minmax(0, 1fr); }
  .ff-photo { width: min(100%, 420px); justify-self: center; }
  .ff-rows li { gap: 16px; padding: 22px 0; }
  .ff-rows svg { width: 28px; height: 28px; }
}

@media (max-width: 960px) {
  .detail-inner { flex-direction: column; align-items: stretch; gap: 32px; min-height: 0; padding: 92px 20px 48px; }
  .detail-tile { width: min(64vw, 280px); align-self: center; }
  .detail-text, .detail-media, .race { flex: none; max-width: none; }
  .detail-media-phone { width: min(280px, 100%); align-self: center; }
  .js .back { left: 20px; }
}

/* ==========================================================================
   Race
   ========================================================================== */
.race-play { display: grid; gap: 16px; }
.race-stage { position: relative; overflow: hidden; border-radius: 14px; background: var(--grass); }
.race-canvas { width: 100%; height: auto; aspect-ratio: 16 / 10; touch-action: none; -webkit-user-select: none; user-select: none; }
@media (max-width: 640px) { .race-canvas { aspect-ratio: 1 / 1; } }

.race-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; pointer-events: none; }
.race-overlay:empty { display: none; }
.race-card {
  max-width: 320px;
  padding: 22px 26px 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(13, 13, 13, 0.08);
  pointer-events: auto;
}
.race-card h3 { margin-bottom: 6px; font-size: 17px; font-weight: 500; letter-spacing: -0.03em; }
.race-card p { margin-bottom: 16px; color: var(--muted); font-size: 13px; }
.race-card .result { color: var(--text); font-size: 14px; }
.race-card .win-text { color: #15803d; }
.race-card .lose-text { color: var(--text); }
.btn-primary {
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.17s var(--ease);
}
.btn-primary:hover { background: #2b2b2b; }
.btn-primary:active { transform: scale(0.97); }
.race-count { color: var(--text); font-size: clamp(48px, 9vw, 88px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.race-count.go { color: var(--blue-text); }
.race-toast {
  align-self: start;
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(13, 13, 13, 0.06);
  font-size: 13px;
}
.race-fs {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 22.5%;
  corner-shape: squircle;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  cursor: pointer;
}
.race-fs:hover { background: #fff; }

.race-hud { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; padding: 0 2px; }
.race-hud div { display: grid; gap: 2px; min-width: 52px; }
.race-hud dt { color: var(--muted); font-size: 12px; font-weight: 450; }
.race-hud dd { margin: 0; font-size: 17px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.race-hud dd[data-hud="ai"] { color: var(--blue-text); }
.race-hud dd.ahead { color: #15803d; }
.race-hud dd.behind { color: #dc2626; }

.race-touch { display: flex; justify-content: space-between; gap: 12px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.race-touch .pad { display: flex; gap: 10px; }
.race-touch button {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 22.5%;
  corner-shape: squircle;
  background: var(--stage);
  color: var(--text);
  font-size: 20px;
  touch-action: none;
}
.race-touch button.on { background: var(--text); color: #fff; }

.race-help { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; color: var(--muted); font-size: 12px; }
kbd { padding: 1px 5px; border-radius: 5px; background: var(--stage); color: var(--text); font: inherit; font-size: 11px; }
@media (pointer: coarse) { .race-help { display: none; } }

.race-play:fullscreen { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: #fff; }
.race-play:fullscreen .race-stage { display: flex; flex: 1; min-height: 0; }
.race-play:fullscreen .race-canvas { width: 100%; height: 100%; aspect-ratio: auto; }

/* ==========================================================================
   Enlarged screenshot: the image grows out of its thumbnail (see main.js)
   ========================================================================== */
.lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox-bg {
  position: fixed;
  inset: 0;
  background: rgba(250, 250, 250, 0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.lightbox.shown .lightbox-bg { opacity: 1; }
.lightbox-img {
  position: relative;
  width: auto;
  height: auto;
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(13, 13, 13, 0.16);
  transform-origin: 0 0;
  transition: transform 0.55s var(--ease);
  cursor: zoom-out;
}
.lightbox-close { position: fixed; top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); opacity: 0; transition: opacity 0.3s var(--ease); }
.lightbox.shown .lightbox-close { opacity: 1; }

/* ==========================================================================
   Resume: a document sheet over the blurred page
   ========================================================================== */
.resume { margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); }
html:not(.js) .resume { display: block; position: static; padding: 24px 16px 48px; }
.resume[open] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: max(40px, env(safe-area-inset-top)) 16px 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.resume::backdrop { background: rgba(246, 246, 247, 0.8); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

.paper {
  width: min(680px, 100%);
  margin: 0 auto;
  --pad-y: clamp(28px, 6vw, 56px);
  --pad-x: clamp(22px, 6vw, 60px);
  padding: var(--pad-y) var(--pad-x) clamp(32px, 6vw, 60px);
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.05), 0 1px 2px rgba(13, 13, 13, 0.04), 0 30px 80px -24px rgba(13, 13, 13, 0.2);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.cv-cover {
  height: clamp(96px, 16vw, 132px);
  margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) 0;
  background:
    radial-gradient(60% 120% at 12% 0%, #cbdcff 0%, transparent 62%),
    radial-gradient(50% 110% at 88% 10%, #e0ccff 0%, transparent 64%),
    radial-gradient(70% 90% at 55% 120%, #c9efdc 0%, transparent 62%),
    #f3f4f9;
}
.cv-head { margin-top: -44px; }
.cv-photo {
  position: relative;
  width: 88px;
  height: 88px;
  margin-bottom: 14px;
  border-radius: 22.5%;
  corner-shape: squircle;
  object-fit: cover;
  background: var(--stage);
  box-shadow: 0 0 0 4px #fff, 0 8px 24px -8px rgba(13, 13, 13, 0.3);
}
.cv-head h2 { margin-bottom: 4px; font-size: 26px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; }
.cv-role { font-size: 15px; }
.cv-dim { color: var(--muted); }
.cv-contact { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 16px; font-size: 13px; }
.cv-contact a { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--muted); text-decoration: none; transition: color 0.15s; }
.cv-contact a:hover { color: var(--text); }
.cv-contact .i { width: 15px; height: 15px; }

.cv-section { margin-top: 36px; }
.cv-section h3 { margin-bottom: 14px; color: var(--muted); font-size: 13px; font-weight: 450; letter-spacing: -0.01em; }
.cv-lead, .cv-entry p, .cv-entry li { color: #3f3f46; }

.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-chips li { padding: 4px 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.12); font-size: 12.5px; font-weight: 500; }
.cv-chips-soft li { background: var(--stage); box-shadow: none; color: var(--soft); font-weight: 400; }

.cv-entry { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 16px; align-items: start; }
.cv-entry + .cv-entry { margin-top: 22px; }
.cv-logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 22.5%;
  corner-shape: squircle;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.09);
}
.cv-logo img, .cv-logo svg { width: 68%; height: 68%; object-fit: contain; }
.cv-logo-skyro { background: radial-gradient(130% 100% at 25% 15%, #431794 0%, #2c0b5e 62%, #220846 100%); box-shadow: none; }
.cv-logo-skyro img { width: 78%; }
.cv-logo-oryx img { width: 88%; height: 88%; }
.cv-logo-race svg { width: 84%; height: 84%; }
.cv-logo-plate { background: #16181d; box-shadow: none; }
.cv-logo-plate svg { width: 100%; height: 100%; }
.cv-logo-kamien { background: #b48c61; box-shadow: none; }
.cv-logo-kamien img { width: 100%; height: auto; }
.cv-logo-murmur { background: #0a0a0b; box-shadow: none; }
.cv-logo-murmur img { width: 100%; height: 100%; }
.cv-word { font-size: 10.5px; font-weight: 700; letter-spacing: -0.05em; }
.cv-word span { color: var(--blue); }
.cv-word-serif { font-family: Georgia, "Times New Roman", "Liberation Serif", serif; font-size: 20px; letter-spacing: 0; }

.cv-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; }
.cv .cv-when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.cv-when time { font-variant-numeric: tabular-nums; }
.cv-now {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px 1px 7px;
  border-radius: 999px;
  background: #e7f8ee;
  color: #15803d;
  font-size: 12px;
  font-weight: 500;
}
.cv-now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.cv-entry h4 { color: var(--text); font-size: 14.5px; font-weight: 500; letter-spacing: -0.02em; }
.cv-entry h4 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.15s; }
.cv-entry h4 a:hover { border-bottom-color: var(--text); }
.cv .cv-where { margin: 1px 0 6px; color: var(--muted); font-size: 13px; }
.cv-entry ul { display: grid; gap: 3px; }
.cv-entry li { position: relative; padding-left: 14px; }
.cv-entry li::before { content: ""; position: absolute; top: 0.68em; left: 2px; width: 4px; height: 4px; border-radius: 30%; background: #c4c4c7; }

.cv-langs { display: grid; gap: 8px; }
.cv-langs li { display: grid; grid-template-columns: 5.5rem auto minmax(0, 1fr); align-items: center; gap: 4px 14px; font-weight: 500; }
.cv-langs .cv-dim { font-weight: 400; font-size: 13px; }
.cv-meter { display: flex; gap: 4px; }
.cv-meter i { width: 14px; height: 6px; border-radius: 3px; background: var(--text); }
.cv-meter[data-level="4"] i:nth-child(n + 5),
.cv-meter[data-level="3"] i:nth-child(n + 4) { background: #e4e4e7; }

.resume-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(22px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.resume-actions > * { pointer-events: auto; }
html:not(.js) .resume-actions { display: none; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(13, 13, 13, 0.35);
  transition: background-color 0.15s, transform 0.17s var(--ease);
}
.pill:hover { background: #262626; }
.pill:active { transform: scale(0.97); }
.round {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(13, 13, 13, 0.06);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.17s var(--ease);
}
.round:hover { background: #fafafa; }
.round:active { transform: scale(0.96); }

@media (max-width: 560px) {
  .cv-head h2 { font-size: 22px; }
  .cv-photo { width: 72px; height: 72px; }
  .cv-head { margin-top: -36px; }
  .cv-entry { grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; }
  .cv-logo { width: 34px; height: 34px; }
  .cv-langs li { grid-template-columns: 4.5rem auto; }
  .cv-langs .cv-dim { grid-column: 1 / -1; }
}

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 720px) {
  :root {
    --header-size: clamp(17px, 4.85vw, 19px);
    --tile: min(64vw, 280px);
    --slot: 44px;
  }
  .js .header {
    top: max(32px, env(safe-area-inset-top));
    left: max(20px, env(safe-area-inset-left));
    right: max(20px, env(safe-area-inset-right));
    width: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    transform: none;
  }
  .avatar { width: 44px; height: 44px; }
  .avatar-wrap { margin-bottom: 0; }
  .js .contact-trigger { display: grid; flex: none; }
  .js .contact {
    position: absolute;
    top: 52px;
    right: -8px;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--line), 0 18px 44px rgba(13, 13, 13, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.16s var(--ease), transform 0.2s var(--ease), visibility 0s 0.2s;
  }
  .js .contact.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .contact .contact-link { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 12px; width: auto; padding: 0 14px 0 18px; }
  .js .contact .contact-label { position: static; transform: none; color: var(--text); font-size: 14px; }
  .js .track { gap: 44px; }
  .js .position { top: calc(50svh + var(--tile) / 2 + 40px); height: 44px; }
  /* the markers narrow when there are too many to fit across the screen */
  [data-position] { --slot: min(44px, (100vw - 40px) / var(--count, 7)); }
  .position button { height: 44px; }
  .position button::before { width: 8px; height: 8px; }
  .position-active { width: 12px; height: 12px; left: calc((var(--slot) - 12px) / 2); }
  .js .ff-pill { left: 50%; width: max-content; translate: -50% 0; }
  .js .quote { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 56px); }
}

/* ==========================================================================
   Motion & print
   ========================================================================== */
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }
@keyframes enter-rail { from { opacity: 0; transform: translateX(56px); } }
@keyframes enter-tile { from { opacity: 0; transform: scale(0.94); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.94); } }
@keyframes count { 0% { opacity: 0; transform: scale(1.6); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(0.97); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(28px) scale(0.97); } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(18px) scale(0.98); } }

@media (prefers-reduced-motion: no-preference) {
  /* first load: identity rises in line by line, tiles slide in from the right */
  .js .avatar-wrap, .js .identity h1, .js .intro p, .js .contact-link, .js .contact-trigger { animation: enter 0.7s var(--ease) backwards; }
  .js .identity h1 { animation-delay: 0.05s; }
  .js .intro p:nth-child(1) { animation-delay: 0.1s; }
  .js .intro p:nth-child(2) { animation-delay: 0.15s; }
  .js .contact-link:nth-child(1), .js .contact-trigger { animation-delay: 0.22s; }
  .js .contact-link:nth-child(2) { animation-delay: 0.26s; }
  .js .contact-link:nth-child(3) { animation-delay: 0.3s; }
  .js .contact-link:nth-child(4) { animation-delay: 0.34s; }
  .js .contact-link:nth-child(5) { animation-delay: 0.38s; }
  .js .item .tile { animation: enter-rail 0.9s var(--ease) backwards; }
  .js .item:nth-child(1) .tile { animation-delay: 0.12s; }
  .js .item:nth-child(2) .tile { animation-delay: 0.19s; }
  .js .item:nth-child(3) .tile { animation-delay: 0.26s; }
  .js .item:nth-child(n + 4) .tile { animation-delay: 0.33s; }
  .js .position { animation: fade 0.6s 0.5s var(--ease) backwards; }
  .js .quote { animation: fade 0.8s 0.6s var(--ease) backwards; }

  /* project views: content follows the morphing tile in a short stagger */
  .js .detail.open .detail-text > *, .js .detail.open .detail-media, .js .detail.open .race { animation: enter 0.6s var(--ease) backwards; }
  .js .detail.open .detail-text > :nth-child(2) { animation-delay: 0.05s; }
  .js .detail.open .detail-text > :nth-child(3) { animation-delay: 0.1s; }
  .js .detail.open .detail-text > :nth-child(4) { animation-delay: 0.14s; }
  .js .detail.open .detail-text > :nth-child(n + 5) { animation-delay: 0.18s; }
  .js .detail.open .detail-media, .js .detail.open .race { animation-delay: 0.12s; }
  .js .detail.open .detail-tile { animation: enter-tile 0.6s var(--ease) backwards; }
  .js .detail.open .back { animation: fade 0.4s 0.1s var(--ease) backwards; }
  .js .detail.open[data-morphed], .js .detail.open[data-morphed] .detail-tile, .js .detail.open[data-morphed] .race { animation: none; }

  /* Future Founders: the hero arrives as the blue wipe passes, the rest reveals on scroll */
  .js .detail.ff.open .ff-line > span { animation: line-up 1s 0.34s var(--ease) both; }
  .js .detail.ff.open .ff-line + .ff-line > span { animation-delay: 0.44s; }
  .js .detail.ff.open .ff-tag, .js .detail.ff.open .ff-lead, .js .detail.ff.open .ff-logo { animation: enter 0.8s 0.62s var(--ease) backwards; }
  .js .detail.ff.open .ff-scroll { animation: fade 0.8s 1.2s var(--ease) backwards; }
  .ff-scroll span { animation: bob 1.6s ease-in-out infinite; }
  .js .ff .ff-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .detail.ff.open .ff-arrow { animation: draw-line 1.3s 0.75s var(--ease) forwards; }
  .js .ff .ff-sparks.in { stroke-dashoffset: 0; transition: stroke-dashoffset 1s 0.3s var(--ease); }
  .ff-marquee-track { animation: marquee 28s linear infinite; }
  .js .ff [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease), transform 1s var(--ease); }
  .js .ff .ff-sparks[data-reveal] { opacity: 1; transform: none; }
  .js .ff [data-reveal].in { opacity: 1; transform: none; }
  .js .ff .ff-photo[data-reveal] { transform: translateY(60px) rotate(-4deg) scale(0.92); transition: opacity 0.8s var(--ease), transform 1.2s var(--spring), var(--lift); }
  .js .ff .ff-photo[data-reveal].in { transform: rotate(2deg); }
  /* the label pops, the arrow draws towards me, then keeps nudging */
  .js .ff .ff-me path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .ff .ff-me-label { opacity: 0; transform: rotate(-7deg) scale(0.5); }
  .js .ff .ff-photo.in .ff-me-label { animation: me-pop 0.6s 0.7s var(--spring) forwards; }
  .js .ff .ff-photo.in .ff-me-line { animation: draw-line 0.7s 1s var(--ease) forwards; }
  .js .ff .ff-photo.in .ff-me-head { animation: draw-line 0.3s 1.65s var(--ease) forwards; }
  .js .ff .ff-photo.in .ff-me { animation: me-nudge 1.5s 2.1s ease-in-out infinite; }
  /* who I am: the polaroid lands, a bit crooked */
  .js .ff .ff-portrait[data-reveal] { transform: translateY(60px) rotate(7deg) scale(0.9); transition: opacity 0.8s var(--ease), transform 1.2s var(--spring), var(--lift); }
  .js .ff .ff-portrait[data-reveal].in { transform: rotate(-3deg); }
  /* why: the layers stack up from Linux, the brace draws, then a request runs down and back up */
  .js .ff .ff-stack[data-reveal] { opacity: 1; transform: none; }
  .js .ff .ff-layer { opacity: 0; translate: 0 -36px; }
  .js .ff .ff-stack.in .ff-layer { opacity: 1; translate: 0 0; animation: layer-in 0.6s var(--spring) backwards; }
  .js .ff .ff-stack.in .ff-layer:nth-child(6) { animation-delay: 0.08s; }
  .js .ff .ff-stack.in .ff-layer:nth-child(5) { animation-delay: 0.16s; }
  .js .ff .ff-stack.in .ff-layer:nth-child(4) { animation-delay: 0.24s; }
  .js .ff .ff-stack.in .ff-layer:nth-child(3) { animation-delay: 0.32s; }
  .js .ff .ff-stack.in .ff-layer:nth-child(2) { animation-delay: 0.4s; }
  .js .ff .ff-stack.in .ff-layer:nth-child(1) { animation-delay: 0.48s; }
  .js .ff .ff-brace path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .ff .ff-stack.in .ff-brace path { animation: draw-line 0.8s 0.9s var(--ease) forwards; }
  .js .ff .ff-note { opacity: 0; scale: 0.4; }
  .js .ff .ff-wire i { opacity: 0; }
  .js .ff .ff-stack.in .ff-note { animation: pop 0.6s 1.4s var(--spring) forwards; }
  .js .ff .ff-stack.in .ff-wire i { animation: packet 3.4s 1.9s ease-in-out infinite; }
  .js .ff .ff-stack.in .ff-dots i { animation: blink 1.5s 1.9s ease-in-out infinite; }
  .js .ff .ff-stack.in .ff-dots i:nth-child(2) { animation-delay: 2.15s; }
  .js .ff .ff-stack.in .ff-dots i:nth-child(3) { animation-delay: 2.4s; }
  /* scouting: the snapshots land on the page one after the other, the list follows */
  .js .ff .ff-pic[data-reveal] { transform: perspective(1400px) rotateX(16deg) rotateZ(-2deg) translateY(70px) scale(0.92); transform-origin: 50% 100%; transition: opacity 0.8s var(--ease), transform 1.4s var(--ease), var(--lift); }
  .js .ff .ff-pic-tall[data-reveal] { transform: perspective(1400px) rotateX(16deg) rotateZ(3deg) translateY(90px) scale(0.92); transition-delay: 0.15s, 0.15s, 0s, 0s, 0s, 0s; }
  .js .ff .ff-pic[data-reveal].in { transform: none; }
  .js .ff .ff-scout-list li:nth-child(2) { transition-delay: 0.08s; }
  .js .ff .ff-scout-list li:nth-child(3) { transition-delay: 0.16s; }
  .js .ff .ff-answer[data-reveal], .js .ff .ff-built-lead[data-reveal], .js .ff .ff-buttons[data-reveal] { transition-delay: 0.12s; }
  .js .ff .ff-quote[data-reveal], .js .ff .ff-shot-caption[data-reveal] { transition-delay: 0.24s; }
  .js .ff .ff-rows li:nth-child(2) { transition-delay: 0.08s; }
  .js .ff .ff-rows li:nth-child(3) { transition-delay: 0.16s; }
  .js .ff .ff-rows li:nth-child(4) { transition-delay: 0.24s; }
  .js .ff .ff-window[data-reveal] { transform: perspective(1400px) rotateX(22deg) translateY(70px) scale(0.9); transform-origin: 50% 100%; transition: opacity 0.8s var(--ease), transform 1.4s var(--ease), var(--lift); }
  .js .ff .ff-window-alt[data-reveal] { transform: perspective(1400px) rotateX(16deg) rotateZ(-2deg) translateY(70px) scale(0.9); }
  .js .ff .ff-window[data-reveal].in { transform: none; }
  .js .ff .ff-lap[data-reveal] { transform: perspective(1400px) rotateX(16deg) rotateZ(2deg) translateY(70px) scale(0.9); transform-origin: 50% 100%; transition: opacity 0.8s var(--ease), transform 1.4s var(--ease), var(--lift); }
  .js .ff .ff-lap[data-reveal].in { transform: none; }
  @keyframes line-up { from { transform: translateY(105%); } }
  @keyframes draw-line { to { stroke-dashoffset: 0; } }
  @keyframes me-pop { to { opacity: 1; transform: rotate(-7deg) scale(1); } }
  @keyframes me-nudge { 50% { transform: translate(1.1cqw, 0.9cqw); } }
  @keyframes pop { to { opacity: 1; scale: 1; } }
  /* Patrac: the tile's scan line sweeps the plate on hover (and on its page); on Future Founders
     the phone tilts in, the stickers pop on, and the scan line keeps running over the plate */
  .tile:hover .plate-scan, .detail.open .plate-scan { animation: plate-scan 1.6s ease-in-out infinite alternate; }
  /* Murmur: the rings swell one after the other, like it's listening, and Dot blinks at you.
     On its page Dot itself (js/dot.js) takes over the face, so only the rings move there. */
  .tile:hover .murmur-ring, .detail.open .murmur-ring { animation: murmur-ring 1.8s ease-in-out infinite; }
  .glyph-murmur .murmur-ring + .murmur-ring { animation-delay: 0.12s; }
  .tile:hover .murmur-eyes { animation: murmur-blink 3.6s ease-in-out infinite; }
  .js .ff .ff-phone-back[data-reveal] { transition-delay: 0.15s, 0.15s, 0s, 0s, 0s, 0s; }
  .js .ff .ff-phone[data-reveal] { transform: perspective(1400px) rotateX(16deg) rotateZ(-3deg) translateY(80px) scale(0.9); transform-origin: 50% 100%; transition: opacity 0.8s var(--ease), transform 1.4s var(--ease), var(--lift); }
  .js .ff .ff-phone[data-reveal].in { transform: none; }
  .js .ff .ff-phone.in .ff-phone-scan i { animation: phone-scan 1.7s 1.2s ease-in-out infinite alternate; }
  .js .ff .ff-phone.in .ff-phone-scan i::before { animation: phone-scan-glow 1.7s 1.2s ease-in-out infinite alternate; }
  /* the steps come in one by one, the arrow draws, then a frame keeps running through them */
  .js .ff .ff-pipe[data-reveal] { opacity: 1; transform: none; }
  .js .ff .ff-pipe > .ff-tag, .js .ff .ff-pipe-steps li, .js .ff .ff-pipe-time { opacity: 0; translate: 0 24px; transition: opacity 0.7s var(--ease), translate 0.9s var(--ease); }
  .js .ff .ff-pipe.in > .ff-tag, .js .ff .ff-pipe.in .ff-pipe-steps li, .js .ff .ff-pipe.in .ff-pipe-time { opacity: 1; translate: 0 0; }
  .js .ff .ff-pipe.in .ff-pipe-steps li:nth-child(1) { transition-delay: 0.1s; }
  .js .ff .ff-pipe.in .ff-pipe-steps li:nth-child(2) { transition-delay: 0.2s; }
  .js .ff .ff-pipe.in .ff-pipe-steps li:nth-child(3) { transition-delay: 0.3s; }
  .js .ff .ff-pipe.in .ff-pipe-steps li:nth-child(4) { transition-delay: 0.4s; }
  .js .ff .ff-pipe.in .ff-pipe-time { transition-delay: 0.55s; }
  .js .ff .ff-pipe.in .ff-pipe-arrow { stroke-dashoffset: 0; transition: stroke-dashoffset 1s 0.6s var(--ease); }
  .js .ff .ff-pipe.in .ff-pipe-steps li::before { animation: pipe-step 4.8s ease-in-out infinite; }
  .js .ff .ff-pipe.in .ff-pipe-steps li:nth-child(1)::before { animation-delay: 1.2s; }
  .js .ff .ff-pipe.in .ff-pipe-steps li:nth-child(2)::before { animation-delay: 2.4s; }
  .js .ff .ff-pipe.in .ff-pipe-steps li:nth-child(3)::before { animation-delay: 3.6s; }
  .js .ff .ff-pipe.in .ff-pipe-steps li:nth-child(4)::before { animation-delay: 4.8s; }
  @keyframes pipe-step { 0%, 4% { background: #fff; color: var(--ff); scale: 1; } 8%, 22% { background: var(--ff); color: #fff; scale: 1.15; } 28%, 100% { background: #fff; color: var(--ff); scale: 1; } }
  @keyframes murmur-ring { 0%, 45%, 100% { scale: 1; } 18% { scale: 1.06; } }
  @keyframes murmur-blink { 0%, 4%, 11%, 100% { scale: 1; } 7% { scale: 1 0.1; } }
  @keyframes plate-scan { from { opacity: 0.9; transform: translateY(0); } to { opacity: 0.9; transform: translateY(30px); } }
  @keyframes phone-scan { to { translate: 0 100%; } }
  @keyframes phone-scan-glow { 0%, 100% { opacity: 0.95; } }
  /* the closing: letters jump when pointed at, the plane flies its loop, waits, and takes off when you write */
  .js .ff .ff-letter.boing { animation: boing 0.7s var(--ease); }
  .js .ff .ff-plane.landed .ff-craft-bob { animation: plane-bob 1.8s ease-in-out infinite; }
  .js .ff .ff-mail:hover .ff-plane.landed .ff-craft-bob, .js .ff .ff-mail:focus-visible .ff-plane.landed .ff-craft-bob { animation: plane-wiggle 0.5s ease-in-out infinite; }
  .js .ff .ff-plane.sent .ff-craft-bob { animation: plane-off 0.7s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
  @keyframes boing {
    30% { transform: translateY(-0.26em) rotate(-7deg) scale(0.94, 1.1); color: #cfc6ff; }
    55% { transform: translateY(0.03em) scale(1.12, 0.86); }
    75% { transform: translateY(-0.05em) scale(0.97, 1.04); }
  }
  @keyframes plane-bob { 50% { transform: translate(0, -4px) rotate(-5deg); } }
  @keyframes plane-wiggle { 25% { transform: translate(3px, -2px) rotate(-10deg); } 75% { transform: translate(-1px, 1px) rotate(6deg); } }
  @keyframes plane-off { to { transform: translate(280px, -150px) rotate(-28deg) scale(0.5); opacity: 0; } }
  @keyframes layer-in { from { opacity: 0; translate: 0 -36px; } }
  @keyframes packet { 0% { opacity: 0; translate: 0 0; } 8% { opacity: 1; translate: 0 0; } 46%, 54% { translate: 0 100%; } 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
  @keyframes blink { 50% { opacity: 0.35; } }
  @keyframes bob { 50% { transform: translateY(4px); } }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* shared-element morph between a tile and its project view (View Transitions) */
  ::view-transition-group(hero) { animation-duration: 0.6s; animation-timing-function: var(--ease); }
  ::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; object-fit: cover; animation-duration: 0.45s; }
  ::view-transition-old(root) { animation-duration: 0.2s; }
  ::view-transition-new(root) { animation-duration: 0.36s; }

  /* resume: the sheet rises over a fading blur, and sinks away on close */
  .resume[open]::backdrop { animation: fade 0.35s var(--ease); }
  .resume[open] .paper { animation: sheet-in 0.55s var(--ease) both; }
  .resume[open] .resume-actions { animation: enter 0.5s 0.12s var(--ease) both; }
  .resume[open] .cv > * { animation: enter 0.55s var(--ease) backwards; }
  .resume[open] .cv > :nth-child(1) { animation-delay: 0.06s; }
  .resume[open] .cv > :nth-child(2) { animation-delay: 0.1s; }
  .resume[open] .cv > :nth-child(3) { animation-delay: 0.14s; }
  .resume[open] .cv > :nth-child(4) { animation-delay: 0.18s; }
  .resume[open] .cv > :nth-child(n + 5) { animation-delay: 0.22s; }
  .resume[open] .cv-cover { animation: fade 0.8s var(--ease) backwards; }
  .cv-now::before { animation: live 2.4s ease-in-out infinite; }
  @keyframes live { 50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); } }
  .resume.closing .paper { animation: sheet-out 0.24s cubic-bezier(0.4, 0, 1, 1) both; }
  .resume.closing .resume-actions, .resume.closing::backdrop { animation: fade-out 0.24s both; }

  /* race UI */
  .race-card { animation: pop 0.42s var(--spring) both; }
  .race-toast { animation: pop 0.32s var(--spring) both; }
  .race-count { animation: count 0.9s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@page { size: A4; margin: 16mm; }
@media print {
  .js body { overflow: visible; }
  .canvas, .detail, .lightbox, .resume-actions, .confetti { display: none !important; }
  .resume { display: block !important; position: static !important; width: auto !important; height: auto !important; padding: 0 !important; overflow: visible !important; }
  .paper { width: auto; padding: 0; border-radius: 0; box-shadow: none; font-size: 10pt; }
  .paper * { animation: none !important; }
  .cv-section { margin-top: 22px; }
  .cv-entry { break-inside: avoid; }
  .cv-entry + .cv-entry { margin-top: 12px; }
  .cv-contact a, .cv-entry h4 a { color: var(--text); border: 0; }
  .cv-cover { display: none; }
  .cv-head { margin-top: 0; }
  .cv-photo { width: 64px; height: 64px; box-shadow: 0 0 0 1px var(--line); }
}

/* 404 */
.notfound { display: grid; align-content: center; gap: 10px; min-height: 100svh; padding: 0 max(20px, 50% - 496px); font-size: 20px; letter-spacing: -0.035em; }
.notfound h1 { font: inherit; }
.notfound-code { color: var(--muted); font-size: 12px; font-weight: 450; letter-spacing: -0.015em; }
.notfound a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.notfound a:hover { color: var(--text); border-bottom-color: var(--text); }

/* ==========================================================================
   Pictures react when you point at them: photos get picked up and straighten,
   screens lift, logos give a little wiggle. Only with a mouse, only with motion on.
   ========================================================================== */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ff-portrait, .ff-photo, .ff-pic, .ff-window, .ff-lap, .ff-phone, .media-video, .ff-logo, .cv-photo, .cv-logo, .ff-sticker { transition: var(--lift); }
  .media-link { transition: transform 0.2s var(--ease), var(--lift); }
  .cover-logo, .wordmark, .glyph { transition: transform 0.2s var(--ease), var(--lift); }

  .ff-portrait:hover { translate: 0 -8px; rotate: 3deg; scale: 1.03; }
  .ff-photo:hover { translate: 0 -8px; rotate: -2deg; scale: 1.03; }
  .ff-portrait:hover, .ff-photo:hover { box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.06), 0 54px 100px -30px rgba(43, 0, 255, 0.6); }
  .ff-pic:hover, .ff-window:hover, .ff-lap:hover, .ff-phone:hover { translate: 0 -6px; scale: 1.015; box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.08), 0 56px 110px -30px rgba(43, 0, 255, 0.6); }
  .ff-pic:hover .ff-sticker { rotate: 2deg; scale: 1.08; }
  .ff-pic-tall:hover .ff-sticker { rotate: -3deg; }
  .ff-logo:hover { rotate: -6deg; scale: 1.06; }

  .media-video:hover { translate: 0 -3px; box-shadow: 0 0 0 1px var(--line), 0 28px 56px -30px rgba(13, 13, 13, 0.4); }
  .media-link:hover { scale: 1.01; box-shadow: 0 28px 56px -30px rgba(13, 13, 13, 0.4); }
  .tile:hover .cover-logo, .tile:hover .wordmark, .tile:hover .glyph,
  .detail-tile:hover .cover-logo, .detail-tile:hover .wordmark, .detail-tile:hover .glyph:not(.glyph-murmur) { scale: 1.06; }
  .tile:hover .cover-logo-kamien, .detail-tile:hover .cover-logo-kamien { rotate: -3deg; }
  .cv-photo:hover { rotate: -5deg; scale: 1.06; }
  .cv-entry:hover .cv-logo { rotate: -6deg; scale: 1.1; }
}