/* yuqi hou — desert sunset + offline-game pixels on grid paper */
:root {
  --bg: #f7f6f2;
  --grid: #ebe8e1;
  --block: #e6e1d7;
  --card: #fdfcf9;
  --ink: #2b2b2b;
  --ink-soft: #6b6862;
  --line: #e0dcd3;
  --red: #c8102e;
  /* the desert illustration (kept from v1) */
  --sun: #f08a4b;
  --sun-2: #f7b98a;
  --sun-glow: #fde3c8;
  --mesa1: #edc3a2;
  --mesa2: #e1a17f;
  --mesa3: #c9806a;
  --sage: #7e9a6c;
  --trunk: #8a6a58;
  --stars: 0;
  /* top-down car on the road page */
  --car: var(--red);
  --seat: #f4e2c8;
  --hair: #231a1c;
  --headlight: #fff1c4;
  --scarf: #f6c445;
  /* tag dots */
  --t-write: var(--red);
  --t-build: #6a8f58;
  --t-create: #c98a2b;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --pixel: "Silkscreen", "DM Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17161b; --grid: #211f27; --block: #0d0c10; --card: #1e1d23; --ink: #ecebe6; --ink-soft: #a7a39b; --line: #34313b; --red: #ff5a6e;
    --sun: #f3e6c4; --sun-2: #d9cba8; --sun-glow: #2c2a38; --mesa1: #43375a; --mesa2: #372d4c; --mesa3: #2b233d;
    --sage: #93b383; --trunk: #6e5a63; --stars: 1; --seat: #6d5f5a; --t-build: #93b383; --t-create: #e0a94a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17161b; --grid: #211f27; --block: #0d0c10; --card: #1e1d23; --ink: #ecebe6; --ink-soft: #a7a39b; --line: #34313b; --red: #ff5a6e;
  --sun: #f3e6c4; --sun-2: #d9cba8; --sun-glow: #2c2a38; --mesa1: #43375a; --mesa2: #372d4c; --mesa3: #2b233d;
  --sage: #93b383; --trunk: #6e5a63; --stars: 1; --seat: #6d5f5a; --t-build: #93b383; --t-create: #e0a94a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-color: var(--bg);
  padding-bottom: 80px;
  transition: background-color .4s, color .4s;
}
a { color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px dashed var(--red); outline-offset: 3px; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 0; max-width: 1120px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 500 14px var(--mono); letter-spacing: .16em; white-space: nowrap; }
.brand svg { width: 14px; height: 19px; fill: var(--ink); }
.nav { display: flex; gap: clamp(12px, 2.6vw, 28px); flex-wrap: wrap; justify-content: center; }
.nav a { color: var(--ink); text-decoration: none; font: 13px var(--pixel); letter-spacing: .08em; text-transform: uppercase; padding: 3px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--red); }
.nav a.on { border-bottom-color: var(--ink); }
.theme-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; line-height: 1; flex: none; }

main { max-width: 880px; margin: 0 auto; padding: 0 16px; outline: none; }
.page { animation: rise .45s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; }
h1 { font-size: clamp(48px, 9vw, 84px); line-height: 1; margin: 0 0 10px; }
h1 em, h2 em { color: var(--red); }
h2 { font-size: clamp(30px, 4.6vw, 40px); line-height: 1.1; margin: 64px 0 14px; }
h3 { font-size: 24px; line-height: 1.15; margin: 0 0 6px; }
.lede { font: 400 clamp(21px, 2.8vw, 27px)/1.3 var(--serif); color: var(--ink-soft); max-width: 30em; margin: 0 auto; }
.kicker, .pixel-note, .status {
  font: 12px/1.5 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0;
}
.kicker { margin-top: 44px; }
.status { margin-top: 18px; font-size: 13px; }
.hand { font: italic 400 1.15em var(--serif); color: var(--red); }

/* ---------- hero desert (v1 illustration) ---------- */
.scene { width: 100%; max-width: 760px; margin: 22px auto 0; display: block; overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.scene .sun { fill: url(#sunGrad); } .scene .glow { fill: var(--sun-glow); }
.scene .m1 { fill: var(--mesa1); } .scene .m2 { fill: var(--mesa2); } .scene .m3 { fill: var(--mesa3); }
.scene .star { fill: var(--ink); opacity: calc(var(--stars) * .8); animation: twinkle 3s ease-in-out infinite; }
.scene .star:nth-child(2n) { animation-delay: 1.2s; }
@keyframes twinkle { 50% { opacity: calc(var(--stars) * .25); } }
.scene .sunbody { animation: bob 7s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.scene .tree-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(1.6deg); } }

.hello { text-align: center; margin-top: 18px; }

/* ---------- runner game ---------- */
.runner { margin: 36px auto 0; max-width: 720px; }
.runner canvas { width: 100%; height: auto; display: block; cursor: pointer; touch-action: manipulation; }

/* ---------- dithered photos ---------- */
.trip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.dither-photo { margin: 0; cursor: pointer; outline-offset: 4px; }
.dither-photo .frame { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.dither-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dither-photo .dots { image-rendering: pixelated; transition: opacity .5s steps(6); }
.dither-photo:hover .dots, .dither-photo:focus-visible .dots, .dither-photo.real .dots { opacity: 0; }
.dither-photo figcaption { font: 12px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }
.pixel-note.center { margin-top: 10px; }

/* ---------- doors (home nav cards) ---------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
.door { position: relative; display: block; color: var(--ink); text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 20px; transition: transform .2s ease, border-color .2s; }
.door:hover { transform: translateY(-3px); border-color: var(--ink); }
.door h3 { margin-top: 10px; font-size: 28px; }
.door p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.door .go { position: absolute; top: 14px; right: 16px; font: 16px var(--pixel); color: var(--red); transition: transform .2s; }
.door:hover .go { transform: translateX(3px); }

/* ---------- subscribe ---------- */
.subscribe { margin: 56px auto 0; max-width: 560px; text-align: center; }
.subscribe .kicker { margin: 0; }
.subscribe iframe { width: 100%; height: 150px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }

/* ---------- writing ---------- */
.novel { margin-top: 28px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.novel h2 { margin: 6px 0 8px; }
.novel p { margin: 0; }
.odometer { text-align: center; }
.odo { display: inline-flex; gap: 3px; padding: 7px; border-radius: 8px; background: #1e1d1b; }
.odo span { width: 24px; height: 34px; display: grid; place-items: center; border-radius: 3px; background: #f3efe6; color: #1e1d1b; font: 18px var(--pixel); }
.odo span.tenth { background: var(--red); color: #fff; }
.odo.spin span { animation: flick .9s steps(2) infinite; }
.odo.spin span:nth-child(2n) { animation-duration: 1.3s; }
@keyframes flick { 50% { opacity: .55; } }
.odometer small { display: block; margin-top: 8px; font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.progress { height: 6px; border-radius: 99px; background: var(--line); margin-top: 12px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--red); }

.shelf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.piece { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; transition: transform .2s, border-color .2s; }
.piece:hover { transform: translateY(-2px); border-color: var(--ink); }
.piece .outlet { display: block; font: 11px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.piece b { display: block; font: 400 21px/1.2 var(--serif); }
.piece small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 14px; }

/* ---------- the road ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 8px; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 6px 14px; cursor: pointer; font: 12px var(--pixel); letter-spacing: .06em; text-transform: uppercase; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; }
.dot.learn { background: #5b7fb8; } .dot.write { background: var(--t-write); } .dot.build { background: var(--t-build); } .dot.create { background: var(--t-create); }

.road { position: relative; margin: 30px 0 40px; padding: 20px 0 60px; }
.road-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.road-svg .edge { fill: none; stroke: var(--line); stroke-width: 36; stroke-linecap: round; }
.road-svg .asphalt { fill: none; stroke: var(--card); stroke-width: 32; stroke-linecap: round; }
.road-svg .lane { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 8 12; }
.road-svg .marker circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
.road-svg .marker text { font: 10px var(--pixel); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.road-car { position: absolute; top: 0; left: 0; width: 26px; height: 46px; pointer-events: none; z-index: 3; will-change: transform; }
.stop { position: relative; width: calc(50% - 64px); margin-bottom: 34px; transition: opacity .3s; }
.stop:nth-child(odd) { margin-left: auto; }
.stop.dim { opacity: .22; }
.stop .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.stop .when { font: 12px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.stop h3 { margin-top: 6px; }
.stop p { margin: 6px 0 0; font-size: 15px; }
.stop img { border-radius: 8px; margin-top: 12px; max-height: 180px; width: 100%; object-fit: cover; object-position: top; border: 1px solid var(--line); }
.stop .tags { display: flex; gap: 12px; margin-top: 10px; font: 11px var(--pixel); text-transform: uppercase; color: var(--ink-soft); }
.stop .note { font: italic 16px var(--serif); color: var(--ink-soft); margin-top: 6px; }
.stop .anchor { position: absolute; top: 24px; width: 1px; height: 1px; }
.stop:nth-child(odd) .anchor { left: -64px; } .stop:nth-child(even) .anchor { right: -64px; }
.road-end { text-align: center; position: relative; padding-top: 30px; }
.road-end .sign { display: inline-block; background: var(--ink); color: var(--bg); border-radius: 10px; padding: 14px 22px; max-width: 420px; }
.road-end .sign h3 { margin: 0 0 4px; }
.road-end .sign p { margin: 0; font-size: 15px; opacity: .85; }

/* ---------- case studies ---------- */
.stops-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.stop-card { position: relative; display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 10px 18px; transition: transform .2s, border-color .2s; }
.stop-card:hover { transform: translateY(-3px); border-color: var(--ink); }
.stop-card img, .stop-ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; background: var(--grid); border: 1px solid var(--line); }
.badge { position: absolute; top: 20px; right: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; }
.badge::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--red); margin-right: 7px; vertical-align: 1px; }
.stop-card .meta { display: block; margin: 14px 8px 0; font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.stop-card h3 { margin: 4px 8px; font-size: 28px; font-style: italic; }
.stop-card p { margin: 0 8px; font-size: 15px; color: var(--ink-soft); }

.ticket { display: grid; grid-template-columns: repeat(4, 1fr); margin: 28px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ticket div { padding: 10px 14px; border-right: 1px dashed var(--line); }
.ticket div:last-child { border-right: 0; }
.ticket dt { font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ticket dd { margin: 2px 0 0; font: 20px/1.2 var(--serif); }
.case-hero { margin: 22px 0 0; }
.case-hero img { width: 100%; max-height: 440px; object-fit: cover; object-position: top; border-radius: 14px; border: 1px solid var(--line); }
.case-sec h2 { display: flex; align-items: center; gap: 12px; margin-top: 48px; }
.sec-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--ink); color: var(--bg); font: 14px var(--pixel); }
.case-sec > p { font-size: 18px; max-width: 40em; }
.route { list-style: none; counter-reset: mi; padding: 0; margin: 10px 0 0; border-left: 2px dashed var(--line); margin-left: 12px; }
.route li { counter-increment: mi; position: relative; padding: 6px 0 14px 30px; font-size: 17px; }
.route li::before { content: counter(mi); position: absolute; left: -14px; top: 6px; width: 26px; height: 26px; background: var(--bg); border: 1.5px solid var(--ink); display: grid; place-items: center; font: 11px var(--pixel); }
.stop-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 56px; border-top: 1px solid var(--line); padding-top: 18px; }
.stop-nav a { text-decoration: none; font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.stop-nav a b { display: block; font: italic 400 24px var(--serif); text-transform: none; letter-spacing: 0; color: var(--ink); margin-top: 4px; }
.stop-nav .next { text-align: right; }

/* stats + events (other lives) */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.stat b { display: block; font: 400 38px/1 var(--serif); }
.stat span { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 8px; line-height: 1.3; }
.events { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.event { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; }
.event .meta { grid-column: 1 / -1; font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.event h3 { font-size: 20px; margin: 0; }
.event .big { text-align: right; }
.event .big b { display: block; font: 400 30px/1 var(--serif); color: var(--red); }
.event .big small { font-size: 12px; color: var(--ink-soft); }
.event .detail { grid-column: 1 / -1; font-size: 14px; color: var(--ink-soft); }
details.log { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
details.log summary { cursor: pointer; font: 12px var(--pixel); letter-spacing: .08em; text-transform: uppercase; }
.log ol { list-style: none; padding: 0; margin: 12px 0 0; columns: 2; column-gap: 28px; font-size: 14px; }
.log li { break-inside: avoid; padding: 4px 0; border-bottom: 1px dashed var(--line); display: flex; gap: 10px; }
.log li .d { color: var(--ink-soft); min-width: 48px; font-family: var(--mono); font-size: 12px; padding-top: 2px; }
.log li .c { margin-left: auto; color: var(--ink-soft); white-space: nowrap; }
.gallery { columns: 3 200px; column-gap: 12px; margin-top: 18px; }
.gallery figure { margin: 0 0 12px; break-inside: avoid; }
.gallery img { border-radius: 10px; border: 1px solid var(--line); }
.gallery figcaption { font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.video { text-decoration: none; color: var(--ink); }
.video img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); width: 100%; }
.video span { display: block; font: italic 18px var(--serif); margin-top: 4px; }

/* say hi */
.hi-card { margin: 30px auto 0; max-width: 520px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.hi-card img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; }
.hi-card .email { font: 400 28px var(--serif); }
.hi-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; }

.px-K { fill: var(--ink); } .px-R { fill: var(--red); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
}

@media (max-width: 760px) {
  .top { flex-wrap: wrap; padding: 16px 16px 0; }
  .nav { order: 3; width: 100%; justify-content: flex-start; gap: 6px 16px; }
  .trip { gap: 8px; }
  .doors, .shelf, .events, .stops-grid { grid-template-columns: 1fr; }
  .novel { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .ticket { grid-template-columns: 1fr 1fr; }
  .ticket div:nth-child(2) { border-right: 0; } .ticket div:nth-child(-n+2) { border-bottom: 1px dashed var(--line); }
  .log ol { columns: 1; }
  .stop, .stop:nth-child(odd) { width: auto; margin-left: 56px; }
  .stop:nth-child(n) .anchor { left: -56px; right: auto; }
}

/* =========================================================
   v4: dithered
   ========================================================= */
.hero-art { width: min(860px, 100%); margin: 20px auto 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hero-art img { width: 100%; height: auto; image-rendering: pixelated; }
.hero-art .night { display: none; }
:root[data-theme="dark"] .hero-art .day { display: none; }
:root[data-theme="dark"] .hero-art .night { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-art .day { display: none; }
  :root:not([data-theme="light"]) .hero-art .night { display: block; }
}

/* flat offset shadows: solid, 1-bit, quiet */
.door, .stop-card, .piece, .stat, .event, .hi-card, .novel { box-shadow: 5px 5px 0 var(--block); }
.door:hover, .stop-card:hover, .piece:hover { box-shadow: 8px 8px 0 var(--block); }

/* ---------- the drive (timeline) ---------- */
.drive { margin-top: 30px; }
.drive-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bigyear {
  font: clamp(72px, 15vw, 150px)/0.9 var(--pixel); letter-spacing: .02em; margin-left: -4px;
  color: var(--red);
}
.drive-help { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: 8px; }
.track { position: relative; height: 92px; margin: 26px 18px 0; touch-action: none; cursor: pointer; }
.track-line { position: absolute; left: -18px; right: -18px; bottom: 22px; height: 2px; background: var(--ink); }
.track-line::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 8px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 19px, var(--ink) 19px 21px, transparent 21px 37px); opacity: .35; }
.track-deco { position: absolute; inset: 0; pointer-events: none; }
.track-cactus { position: absolute; bottom: 24px; width: 18px; height: 24px; opacity: .25; transform: translateX(-50%); }
.track-cactus svg { width: 100%; height: 100%; display: block; }
.track-car {
  position: absolute; bottom: 23px; left: 100%; width: 80px; height: 34px; transform: translateX(-50%); padding: 0; border: 0;
  background: none; cursor: grab; touch-action: none; z-index: 2;
}
.track-car:active { cursor: grabbing; }
.track-car svg { width: 100%; height: 100%; display: block; transition: transform .25s; }
.track-car.flip svg { transform: scaleX(-1); }
.track-car.moving svg { animation: rumble .14s steps(2) infinite; }
.track-car.flip.moving svg { animation-name: rumble-flip; }
@keyframes rumble { 50% { transform: translateY(-2px); } }
@keyframes rumble-flip { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-2px); } }
.track-car:focus-visible { outline: 2px dashed var(--red); outline-offset: 6px; }
.ticks { display: flex; justify-content: space-between; margin: 6px 0 0; }
.tick { background: none; border: 0; padding: 4px 2px; cursor: pointer; font: 13px var(--mono); color: var(--ink-soft); }
.tick:hover { color: var(--ink); }
.tick.on { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 5px; }
.drive .filters { justify-content: flex-start; margin: 26px 0 0; }
.entries { list-style: none; padding: 0; margin: 14px 0 0; border-top: 2px solid var(--ink); }
.entries.in .entry { animation: rise .35s ease both; }
.entries.in .entry:nth-child(2) { animation-delay: .04s; } .entries.in .entry:nth-child(3) { animation-delay: .08s; } .entries.in .entry:nth-child(4) { animation-delay: .12s; }
.entry { display: flex; justify-content: space-between; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.entry-org { font: 400 30px/1.1 var(--serif); color: var(--ink); text-decoration: none; margin-right: 10px; }
.entry-org:hover { color: var(--red); }
.entry-tag { display: inline-block; vertical-align: 6px; margin-right: 6px; border: 1px solid var(--line); padding: 2px 8px; font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: var(--card); }
.entry p { margin: 6px 0 0; color: var(--ink-soft); font-size: 16px; max-width: 36em; }
.entry-when { font: 15px var(--mono); color: var(--ink-soft); white-space: nowrap; padding-top: 8px; }
.entry.empty p { font: italic 20px var(--serif); }
@media (max-width: 760px) {
  .drive-help { align-items: flex-start; }
  .track { margin: 18px 22px 0; }
  .track-car { width: 64px; height: 27px; }
  .tick { font-size: 11px; }
  .entry { flex-direction: column; gap: 4px; }
  .entry-when { padding-top: 0; }
  .entry-org { font-size: 26px; }
}
.tick .short { display: none; }
@media (max-width: 760px) { .tick .full { display: none; } .tick .short { display: inline; } }

/* identity photos on the homepage */
.identity { display: block; text-decoration: none; color: var(--ink); }
.identity .pixel-note { display: block; margin-top: 12px; }
.identity h3 { margin: 2px 0 4px; font-size: 28px; }
.identity h3 .go { font: 14px var(--pixel); color: var(--red); display: inline-block; transition: transform .2s; vertical-align: 4px; }
.identity:hover h3 .go { transform: translateX(4px); }
.identity p { margin: 0; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 760px) { .trip { grid-template-columns: 1fr; gap: 26px; } .identity .frame { aspect-ratio: 4 / 3; } }

/* =========================================================
   v5: story intro, logo chips, pixel stickers, events grid
   ========================================================= */
.tagbox { display: inline-block; margin: 6px auto 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  font: 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.hello .lede { margin-top: 14px; }
.hello .lede em { font-style: italic; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.story { max-width: 640px; margin: 54px auto 0; }
.story h2 { margin: 0 0 10px; font-size: clamp(34px, 5vw, 44px); }
.story p { font-size: 19px; line-height: 2; color: var(--ink-soft); margin: 0 0 18px; }
.ink-link { color: var(--ink); text-decoration-color: var(--line); }
.ink-link:hover { color: var(--red); }
.chip-logo { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; vertical-align: baseline; }
.chip-logo:hover { color: var(--red); }
.mono-logo { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 7px; background: var(--c); color: var(--f);
  font: 11px var(--pixel); letter-spacing: 0; box-shadow: 0 0 0 1px var(--line), 0 2px 0 var(--block); transform: translateY(-1px); transition: transform .2s; }
.chip-logo:hover .mono-logo { transform: translateY(-3px) rotate(-4deg); }
.sticker { color: var(--ink); font-weight: 500; white-space: nowrap; cursor: default; transition: color .2s; }
.sticker i { display: inline-block; width: 30px; height: 22px; margin-left: 6px; vertical-align: -4px; transition: transform .25s; }
.sticker i svg { width: 100%; height: 100%; display: block; }
.sticker:hover { color: var(--hue); }
.sticker:hover i { transform: translateY(-4px) rotate(-8deg) scale(1.15); }

.evgrid { margin: 20px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 12px; box-shadow: 5px 5px 0 var(--block); }
.evgrid-scroll { overflow-x: auto; }
.evgrid-inner { --cell: 12px; --gap: 3px; width: max-content; }
.evgrid-months { display: grid; grid-template-columns: repeat(var(--weeks), var(--cell)); gap: var(--gap); font: 10px var(--pixel); text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.evgrid-months span { white-space: nowrap; }
.evgrid-cells { display: grid; grid-template-rows: repeat(7, var(--cell)); grid-auto-flow: column; grid-auto-columns: var(--cell); gap: var(--gap); }
.evgrid-cells i, .evgrid-key i { display: block; width: var(--cell, 12px); height: var(--cell, 12px); background: var(--grid); border-radius: 2px; }
.evgrid-cells i.pad { background: none; }
.evgrid-cells i.on, .evgrid-key i.on { background: var(--red); }
.evgrid-cells i.two { background: var(--ink); }
.evgrid-cells i[title]:hover { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.evgrid figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; font: 11px var(--pixel); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.evgrid-key { display: inline-flex; align-items: center; gap: 6px; }
.evgrid-key i { --cell: 10px; }
@media (max-width: 760px) { .story p { font-size: 17px; line-height: 1.95; } }
img.mono-logo { width: 26px; min-width: 26px; padding: 0; object-fit: cover; background: #fff; }
.evgrid-cells i.soon, .evgrid-key i.soon { background: none; box-shadow: inset 0 0 0 2px var(--red); }
.evgrid-key i.two { background: var(--ink); }
/* keep chip text on the same baseline as the sentence */
.chip-logo { display: inline; }
.chip-logo .mono-logo { display: inline-grid; vertical-align: -8px; margin-right: 6px; transform: none; }
img.mono-logo { display: inline-block; height: 26px; }
.chip-logo:hover .mono-logo { transform: translateY(-2px) rotate(-4deg); }
span.mono-logo { vertical-align: 1px !important; }

/* ---------- mobile polish ---------- */
.tagbox span { white-space: nowrap; }
.tagbox span + span::before { content: "·"; margin: 0 8px; }
.lede, .story p, h1 { text-wrap: balance; }
@media (max-width: 760px) {
  .top { row-gap: 12px; }
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 18px; padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; font-size: 12px; }
  .tagbox { font-size: 11px; padding: 7px 10px; line-height: 1.8; }
  .tagbox span + span::before { margin: 0 6px; }
}
.tagbox { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.nav .short { display: none; }
@media (max-width: 760px) { .nav .full { display: none; } .nav .short { display: inline; } .nav { -webkit-mask-image: none; mask-image: none; justify-content: space-between; gap: 10px; } }
.tagbox { gap: 2px 14px; }
.tagbox span + span::before { content: none; }
.tagbox span::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--red); margin-right: 7px; vertical-align: 2px; }
.story p { text-wrap: pretty; }
.tagbox span + span::before { content: ""; margin: 0 7px 0 0; }

/* =========================================================
   v6: mascot, case-study tabs, partners, videos, guestbook
   ========================================================= */
/* the mascot sits behind every page title, like a sticker */
h1.has-mascot { position: relative; isolation: isolate; }
.mascot { position: absolute; z-index: -1; width: clamp(110px, 18vw, 170px); right: 50%; top: -0.55em; transform: translateX(calc(50% + clamp(90px, 22vw, 230px))) rotate(-8deg); opacity: .9; pointer-events: none; }
.mascot .px-K { fill: color-mix(in srgb, var(--ink) 55%, transparent); }
.mascot .px-R { fill: color-mix(in srgb, var(--red) 75%, transparent); }

/* youtube thumbnails: quiet grayscale until you hover */
.yt-thumb { position: relative; display: block; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: var(--grid); aspect-ratio: 16 / 9; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .3s, transform .3s; }
a:hover .yt-thumb img, a:focus-visible .yt-thumb img, .yt-thumb:hover img { filter: none; transform: scale(1.03); }
.play { position: absolute; left: 10px; bottom: 10px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--red); color: #fff; font: 11px var(--pixel); border-radius: 6px; }
.videos .video img { aspect-ratio: auto; border: 0; border-radius: 0; }
.video > span:last-child { display: block; font: 400 17px/1.25 var(--serif); margin-top: 8px; }

.novel-video { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: center; margin: 18px 0 0; }
.novel-video figcaption b { display: block; font: italic 400 22px/1.2 var(--serif); margin-top: 4px; }

/* case studies, one at a time */
.cs-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-top: 14px; }
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tab { flex: none; display: grid; grid-template-columns: auto auto; column-gap: 8px; text-align: left; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px 12px; cursor: pointer; color: var(--ink-soft); }
.cs-tab .spark { grid-row: span 2; color: var(--line); font-size: 16px; padding-top: 2px; }
.cs-tab b { font: 400 19px/1.1 var(--serif); color: inherit; }
.cs-tab small { font: 10px var(--pixel); text-transform: uppercase; letter-spacing: .05em; }
.cs-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.cs-tab[aria-selected="true"] .spark { color: var(--red); }
.cs-view { margin-top: 22px; }
.cs-view.in { animation: rise .35s ease both; }
.window { position: relative; display: block; border: 1.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: 6px 6px 0 var(--block); transition: box-shadow .2s, transform .2s; }
.window:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--block); }
.window-bar { display: flex; justify-content: space-between; padding: 6px 12px; border-bottom: 1.5px solid var(--ink); font: 11px var(--mono); color: var(--ink); background: var(--bg); }
.window img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.window .badge { top: 44px; }
.cs-view h3 { font-size: 32px; font-style: italic; margin: 18px 0 4px; }
.cs-view > p { margin: 0 0 10px; color: var(--ink-soft); font-size: 17px; }
.cs-meta { display: flex; gap: 14px; flex-wrap: wrap; font: 11px var(--pixel) !important; text-transform: uppercase; letter-spacing: .05em; }

/* partners */
.partners { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 16px; }
.partner { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 14px; background: var(--card); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .2s, border-color .2s, box-shadow .2s; }
.partner img { width: 44%; height: 44%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; border-radius: 6px; }
.partner:hover, .partner[aria-pressed="true"] { transform: translateY(-3px); border-color: var(--ink); box-shadow: 4px 4px 0 var(--block); }
.partner:hover img, .partner[aria-pressed="true"] img { filter: none; opacity: 1; }
.partner-story { margin-top: 14px; min-height: 3.4em; font-size: 17px; color: var(--ink-soft); }
.partner-story b { color: var(--ink); font-weight: 500; margin-right: 4px; }

/* videos page */
.channel { display: flex; align-items: center; gap: 14px; max-width: 560px; margin: 26px auto 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 5px 5px 0 var(--block); }
.channel img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.channel div { flex: 1; display: grid; }
.channel b { font: 400 22px/1.1 var(--serif); }
.channel span { font: 11px var(--pixel); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-top: 4px; }
.chip.sub { text-decoration: none; color: #fff; background: var(--red); border-color: var(--red); }
.featured { margin: 30px 0 0; }
.frame16 { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--block); background: #000; }
.frame16 iframe { width: 100%; height: 100%; border: 0; display: block; }
.featured figcaption { margin-top: 14px; }
.featured figcaption b { display: block; font: italic 400 24px/1.2 var(--serif); margin-top: 4px; }
.shelf-row { margin-top: 48px; }
.shelf-head h2 { margin: 0; }
.shelf-head p { margin: 4px 0 0; }
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 14px; overflow-x: auto; padding: 14px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.reel .video { scroll-snap-align: start; text-decoration: none; color: var(--ink); }

@media (max-width: 760px) {
  .nav { gap: 8px; } .nav a { font-size: 11px; }
  .mascot { width: 92px; transform: translateX(calc(50% + 110px)) rotate(-8deg); top: -0.7em; }
  .partners { grid-template-columns: repeat(4, 1fr); }
  .novel-video { grid-template-columns: 1fr; }
  .channel { flex-wrap: wrap; }
  .reel { grid-auto-columns: 78%; }
}

/* videos woven into the story */
.watch-life { margin: 26px 0 0; }
.watch-life a { font: 12px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--red); padding-bottom: 2px; }
.watch-life a:hover { color: var(--red); }
.stop-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.watch { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-size: 14px; }
.watch:hover { color: var(--red); }
.play-s { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--red); color: #fff; font-size: 8px; }

/* =========================================================
   v7: quiet. one idea per page.
   ========================================================= */
.home { min-height: calc(100vh - 140px); display: flex; flex-direction: column; justify-content: center; padding-bottom: 20px; }
.home .hero-art { width: min(620px, 100%); }
.home .hello { margin-top: 10px; }
.day-job { margin: 10px auto 0; font-size: 16px; color: var(--ink-soft); max-width: 30em; }
.day-job a { color: var(--ink); text-decoration-color: var(--line); }
.home .runner { margin-top: 26px; max-width: 620px; }
.home-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; }
.home-links a { font: 12px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 4px 0; border-bottom: 1.5px solid transparent; }
.home-links a:hover { color: var(--red); border-bottom-color: var(--red); }

/* plain pages (writing, say hi): a simple reading column, nicolezhu.io-style */
.plain { max-width: 600px; margin: 0 auto; padding-top: 40px; }
.plain h1 { font-size: clamp(40px, 7vw, 56px); margin: 0 0 18px; }
.plain > p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 14px; }
.plain h2 { font-size: 26px; margin: 40px 0 10px; }
.pubs { list-style: none; padding: 0; margin: 0; }
.pubs li { font-size: 18px; line-height: 1.5; padding: 7px 0; color: var(--ink-soft); }
.pubs a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.pubs a:hover { color: var(--red); text-decoration-color: var(--red); }
.pubs .note { display: block; font-size: 14px; color: var(--ink-soft); font-style: italic; margin-top: 2px; }
.plain a { color: var(--ink); }

/* home story, quiet version: one reading column under the name */
.home .story { max-width: 560px; margin: 30px auto 0; }
.home .story p { font-size: 17px; line-height: 1.95; margin: 0 0 14px; }
.home { justify-content: flex-start; padding-top: 10px; }
.sticker-link { text-decoration: none; }
.sticker-link:hover .sticker { color: var(--hue); }

/* v8: identity row closes the homepage */
.home .trip { margin-top: 44px; }

/* events grid: a readable line instead of browser tooltips (works on phones too) */
.evgrid-tip { margin: 12px 0 0; min-height: 2.8em; font-size: 16px; color: var(--ink); }
.evgrid-tip .pixel-note { color: var(--red); margin-right: 8px; }
.evgrid-cells i[data-date] { cursor: pointer; }
.evgrid-cells i.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.evgrid-cells i:focus-visible { outline: 2px dashed var(--red); outline-offset: 2px; }

/* about page: the story in the reading column */
.about .story { margin: 0; max-width: none; }
.about .story p { font-size: 18px; line-height: 1.95; color: var(--ink-soft); margin: 0 0 16px; }
.home .runner { margin-top: 48px; }

/* polish: tight stickers, about header with photo, no forced full-height home */
.sticker i { width: 24px; height: 18px; margin-left: 0; vertical-align: -3px; }
.about-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.about-head img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.about-head h1 { margin: 0; }
.home { min-height: 0; padding-bottom: 0; }
.sticker i { width: auto; height: 18px; }
.sticker i svg { width: auto; height: 18px; }

/* =========================================================
   v9: one system. same column, same alignment, every page.
   (rules in DESIGN.md)
   ========================================================= */
:root { --col: 680px; --gutter: 20px; --ease-standard: cubic-bezier(0.23, 1, 0.32, 1); --motion-enter: 200ms; --motion-exit: 140ms; }
.top { max-width: calc(var(--col) + 2 * var(--gutter)); padding: 22px var(--gutter) 0; flex-wrap: wrap; row-gap: 10px; }
.nav { justify-content: flex-start; gap: 6px 18px; }
.nav a { font-size: 12px; }
main { max-width: calc(var(--col) + 2 * var(--gutter)); padding: 0 var(--gutter); }
.plain { max-width: none; }

/* one alignment: everything left-aligned in the column */
.center, .page .center, .hello, .lede, .lede.center, .station, .subscribe, .stop-nav .next { text-align: left; }
.lede, .lede.center, .plain > p { margin-left: 0; margin-right: 0; }
h1.center, .kicker.center { text-align: left; }

/* home */
.home .hero-art { width: 100%; margin: 26px 0 0;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.home .hello { margin-top: 18px; }
.home .hello h1 { font-size: clamp(48px, 9vw, 76px); }
.now { margin: 14px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 34em; }
.now a { color: var(--ink); text-decoration-color: var(--line); }
.home .trip { margin-top: 40px; gap: 14px; }
.identity h3 { font-size: 24px; }
.home .runner { margin-top: 56px; max-width: none; }
.signoff { margin: 10px 0 0; font: 11px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* titles: the mascot tucks into the column's right edge */
.mascot { right: 0; left: auto; transform: rotate(-8deg); top: -0.35em; width: clamp(90px, 16vw, 130px); }

/* about */
.about .story p { font-size: 18px; line-height: 1.85; }

/* road: the one place that breaks out of the column. a wider stage so the road can wind
   between cards on both sides. on phones it's one lane down the left. */
.road { width: min(920px, calc(100vw - 40px)); margin-left: calc(50% - min(460px, 50vw - 20px)); }
.stop { width: calc(50% - 56px); }
.stop:nth-child(odd) { margin-left: auto; }
.stop:nth-child(odd) .anchor { left: -56px; right: auto; }
.stop:nth-child(even) .anchor { right: -56px; left: auto; }

/* footer, every page */
.site-foot { max-width: calc(var(--col) + 2 * var(--gutter)); margin: 72px auto 0; padding: 18px var(--gutter) 40px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 11px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.site-foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-foot a { color: var(--ink); text-decoration: none; }
.site-foot a:hover { color: var(--red); }
body { padding-bottom: 0; }

/* motion + focus (open-design conventions): no ease-in, never grow from zero */
.page { animation: rise var(--motion-enter) var(--ease-standard) both; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, canvas:focus-visible { outline: 2px dashed var(--red); outline-offset: 3px; }

@media (max-width: 760px) {
  .home .trip { grid-template-columns: 1fr; }
  .road { width: auto; margin-left: 0; }
  .stop, .stop:nth-child(odd) { width: auto; margin-left: 52px; }
  .stop:nth-child(n) .anchor { left: -52px; right: auto; }
}
.filters, .drive .filters { justify-content: flex-start; }

/* v9.1: the whole site uses the road's width. paragraphs keep a readable measure inside it. */
:root { --col: 920px; --measure: 40em; }
.road { width: auto; margin-left: 0; }
.lede, .now, .plain > p, .about .story p, .case-sec > p, .pubs, .gb-list { max-width: var(--measure); }
.home .hero-art { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.home .runner { margin-left: 0; margin-right: 0; align-self: stretch; }

/* work page: v3's case-study grid, in the current system */
.stops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
.stop-card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 18px; box-shadow: 5px 5px 0 var(--block); transition: transform var(--motion-enter) var(--ease-standard), box-shadow var(--motion-enter) var(--ease-standard), border-color .2s; }
.stop-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--block); border-color: var(--ink); }
.stop-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 9px; border: 1px solid var(--line); background: var(--grid); }
.stop-card .badge { position: absolute; top: 20px; right: 20px; }
.stop-card .meta { margin: 14px 8px 0; font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.stop-card h3 { margin: 6px 8px 4px; font-size: 26px; font-style: italic; }
.stop-card p { margin: 0 8px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 760px) { .stops-grid { grid-template-columns: 1fr; } }
/* 7 case studies: the first runs full width as the feature, the other six fill three even rows */
.stops-grid .stop-card:first-child { grid-column: 1 / -1; }
.stops-grid .stop-card:first-child img { aspect-ratio: 21 / 9; }
.stops-grid .stop-card:first-child h3 { font-size: 32px; }

/* results on every case study card */
.card-results { list-style: none; margin: 14px 8px 0; padding: 12px 0 0; border-top: 1px dashed var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.stop-card p { margin-bottom: 14px; }
.card-results li { display: grid; gap: 2px; align-content: start; }
.card-results b { font: 400 24px/1 var(--serif); color: var(--red); }
.card-results span { font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
.stops-grid .stop-card:first-child .card-results b { font-size: 30px; }
/* results section */
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat b { color: var(--ink); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* about, cindyly-style: printed photos pinned with a paperclip, film date stamps, italic title */
.prints { position: relative; height: 330px; max-width: 520px; margin: 34px 0 10px; }
.print { position: absolute; margin: 0; padding: 10px 10px 34px; background: #fffdf8; border: 1px solid var(--line); box-shadow: 0 14px 28px -16px rgba(60, 40, 30, .45); }
.print img { width: 230px; height: 250px; object-fit: cover; display: block; }
.print-back { left: 190px; top: 12px; transform: rotate(5deg); }
.print-front { left: 10px; top: 0; transform: rotate(-4deg); z-index: 2; }
.print .stamp { position: absolute; right: 18px; bottom: 44px; font: 600 15px var(--mono); letter-spacing: .08em; color: #ff8a3d; text-shadow: 0 0 6px rgba(255, 138, 61, .7); }
.clip { position: absolute; left: 118px; top: -26px; width: 22px; height: 58px; z-index: 3; color: #9a9a9a; transform: rotate(8deg); }
.about-title { font-style: italic; font-size: clamp(44px, 7vw, 64px); margin: 12px 0 18px; }
@media (max-width: 760px) {
  .prints { height: 270px; }
  .print img { width: 170px; height: 190px; }
  .print-back { left: 140px; }
  .clip { left: 86px; }
}

/* about: side by side. prints on the left, the words on the right */
.about-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 40px; }
.about .prints { position: sticky; top: 30px; height: 470px; max-width: none; margin: 0; }
.about .print img { width: 230px; height: 250px; }
.about .print-front { left: 0; top: 0; transform: rotate(-4deg); }
.about .print-back { left: 70px; top: 190px; transform: rotate(4deg); }
.about .clip { left: 108px; top: -26px; }
.about .about-title { margin-top: 0; }
@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
  .about .prints { position: relative; top: 0; height: 280px; }
  .about .print img { width: 160px; height: 180px; }
  .about .print-back { left: 150px; top: 30px; }
  .about .clip { left: 76px; }
}

/* the game canvas: fixed height, full width; the script matches its drawing size to this */
.runner canvas { width: 100%; height: 160px; image-rendering: pixelated; }

/* homepage selected work, cindyly.design-style */
.selected { margin-top: 48px; display: grid; gap: 22px; }
.sel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sel-head h2 { margin: 0; }
.sel-head a { font: 11px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.sel-head a:hover { color: var(--red); }
.work-card { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 12px 18px; box-shadow: 5px 5px 0 var(--block); transition: transform var(--motion-enter) var(--ease-standard), box-shadow var(--motion-enter) var(--ease-standard); }
.work-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--block); }
.work-img { border-radius: 12px; overflow: hidden; aspect-ratio: 2.2 / 1; background: var(--grid); }
.work-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .5s var(--ease-standard); }
.work-card:hover .work-img img { transform: scale(1.03); }
.work-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 14px 6px 0; }
.work-co { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.work-co img { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); }
.work-badge { border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; background: var(--bg); }
.work-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--red); margin-right: 8px; vertical-align: 1px; }
.work-card h3 { margin: 8px 6px 0; font-size: clamp(26px, 3.6vw, 34px); font-style: italic; }
.home .trip { margin-top: 56px; }
@media (max-width: 760px) { .work-img { aspect-ratio: 16 / 10; } }

/* results under each identity photo */
.id-results { margin: 14px 0 0; padding-top: 12px; }
.id-results b { font-size: 26px; }
.home .trip { margin-top: 44px; }

/* =========================================================
   home, taste pass: one dominant image, a strong opener,
   one tone-step band for proof, editorial rows (no card grid,
   no index numbers, no tiny labels in the body).
   ========================================================= */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 99px; font-size: 14px; text-decoration: none; }
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); }

.home2 { display: block; }
.hero-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-top: 18px; line-height: 0; }
.hero-bleed img { width: 100%; height: auto; max-height: 520px; object-fit: cover; object-position: center 70%; image-rendering: pixelated; }
.hero-bleed .night { display: none; }
:root[data-theme="dark"] .hero-bleed .day { display: none; }
:root[data-theme="dark"] .hero-bleed .night { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-bleed .day { display: none; } :root:not([data-theme="light"]) .hero-bleed .night { display: block; } }

.opener { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-top: 44px; }
.opener h1 { font-size: clamp(64px, 10vw, 120px); line-height: .9; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.opener .lede { margin: 18px 0 0; font-size: clamp(22px, 2.4vw, 28px); color: var(--ink); max-width: 20em; }
.opener-now p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink); max-width: 26em; }
.actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 22px; }
.btn { display: inline-block; background: var(--ink); color: var(--bg); text-decoration: none; padding: 13px 22px; border-radius: 99px; font: 500 16px var(--sans); transition: background-color .2s, transform var(--motion-enter) var(--ease-standard); touch-action: manipulation; }
.btn:hover { background: var(--red); transform: translateY(-2px); }
.btn-link { color: var(--ink); font: 500 16px var(--sans); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
.btn-link:hover { color: var(--red); text-decoration-color: var(--red); }

.receipts { width: 100vw; margin-left: calc(50% - 50vw); margin-top: 96px; background: var(--grid); padding-block: 72px; }
.receipts-inner { max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.receipts h2, .ways > h2 { margin: 0 0 28px; font-size: clamp(32px, 4vw, 44px); }
.receipts ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.receipts b { display: block; font: 400 clamp(52px, 7vw, 84px)/0.9 var(--serif); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.receipts span { display: block; margin-top: 10px; font-size: 16px; color: var(--ink-soft); }

.ways { margin-top: 110px; }
.way { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-bottom: 88px; }
.way:nth-of-type(even) .way-photo { order: 2; }
.way-photo .frame { border-radius: 0; border: 0; aspect-ratio: 4 / 5; }
.way-text h3 { font-size: clamp(40px, 5vw, 60px); font-style: italic; line-height: 1; margin: 0 0 14px; }
.way-line { margin: 0; font-size: 20px; color: var(--ink); max-width: 26em; }
.way-proof { margin: 12px 0 20px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 30em; }

@media (max-width: 760px) {
  .opener { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
  .receipts { margin-top: 64px; padding-block: 48px; }
  .receipts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .ways { margin-top: 72px; }
  .way { grid-template-columns: 1fr; gap: 20px; margin-bottom: 64px; }
  .way:nth-of-type(even) .way-photo { order: 0; }
  .way-photo .frame { aspect-ratio: 4 / 3; }
}
.way:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 760px) { .way:nth-of-type(even) { grid-template-columns: 1fr; } }

/* =========================================================
   home, one screen (sarahli.ca-style): centered, a few words,
   one small moving thing, a row of links. no footer here.
   ========================================================= */
.home3 { min-height: calc(100svh - 150px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 24px 40px; }
.home3 h1 { font-size: clamp(54px, 9vw, 96px); line-height: .95; letter-spacing: -0.02em; margin: 0; }
.home3 .lede { margin: 14px auto 0; font-size: clamp(20px, 2.4vw, 26px); color: var(--ink-soft); max-width: 22em; text-align: center; }
.mini-desert { position: relative; width: min(440px, 100%); margin: 30px auto 0; line-height: 0; }
.mini-desert img { width: 100%; height: auto; image-rendering: pixelated; border-radius: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mini-desert .night { display: none; }
:root[data-theme="dark"] .mini-desert .day { display: none; }
:root[data-theme="dark"] .mini-desert .night { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mini-desert .day { display: none; } :root:not([data-theme="light"]) .mini-desert .night { display: block; } }
.desert-car { position: absolute; left: 0; bottom: 6%; width: 64px; height: 27px; padding: 0; border: 0; background: none; cursor: pointer; animation: cruise 11s linear infinite; touch-action: manipulation; }
.desert-car svg { width: 100%; height: 100%; display: block; }
@keyframes cruise { from { transform: translateX(-70px); } to { transform: translateX(470px); } }
.desert-car:hover, .desert-car:focus-visible { animation-play-state: paused; }
.desert-car.honk svg { animation: hop .45s steps(4); }
.honk-bubble { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--card); color: var(--ink); border: 1px solid var(--ink); padding: 3px 8px; font: 10px var(--pixel); text-transform: uppercase; line-height: 1.4; opacity: 0; transition: opacity .2s; pointer-events: none; }
.desert-car.honk .honk-bubble { opacity: 1; }
.desert-hint { margin: 10px 0 0; font: 10px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.home3 .home-links { justify-content: center; margin-top: 30px; gap: 8px 26px; }
body[data-page="home"] .site-foot { display: none; }
@media (prefers-reduced-motion: reduce) { .desert-car { animation: none; left: 40%; } }

/* keep the car inside the scene; its path scales with the scene width */
.mini-desert { overflow: hidden; border-radius: 10px; }
.car-track { position: absolute; inset: 0; pointer-events: none; animation: cruise2 11s linear infinite; }
.desert-car { left: 0; bottom: 6%; animation: none; pointer-events: auto; }
@keyframes cruise2 { from { transform: translateX(-16%); } to { transform: translateX(100%); } }
.car-track:has(.desert-car:hover), .car-track:has(.desert-car:focus-visible) { animation-play-state: paused; }
.honk-bubble { bottom: auto; top: -26px; }
.desert-car.honk .honk-bubble { opacity: 1; }
.mini-desert { padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .car-track { animation: none; transform: translateX(40%); } }

/* home: the desert, then one video under it, at every width */
.home-windows { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 26px; width: min(440px, 100%); margin-top: 30px; }
.home-windows .mini-desert { width: 100%; margin: 0; }
.win { display: grid; justify-items: center; gap: 10px; width: 100%; }
.win .desert-hint, .win .video-caption { margin: 0; }
.mini-video { position: relative; display: block; width: min(300px, 72%); margin: 0 auto; line-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; transition: transform var(--motion-enter) var(--ease-standard); }
.mini-video img { width: 100%; height: 100%; object-fit: cover; }
.mini-video .play { left: 8px; bottom: 8px; width: 26px; height: 26px; }
.mini-video:hover { transform: translateY(-3px) rotate(-1deg); }
.video-caption { font: 10px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.video-caption:hover { color: var(--red); }

/* the road doubles as a route: a little pixel pin with the city on each stop */
.stop .city { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font: 10px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.stop .city svg { width: 7px; height: 10px; fill: var(--red); }

/* the mascot drifts a little, like it's idling at a light (dithered sticker look kept) */
h1.has-mascot { position: relative; isolation: isolate; }
.mascot { animation: mascot-idle 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes mascot-idle { 0%, 100% { transform: rotate(-8deg) translate(0, 0); } 50% { transform: rotate(-6deg) translate(4px, -3px); } }
@media (prefers-reduced-motion: reduce) { .mascot { animation: none; } }

/* case-study ticket: room for a fifth "known as" stub */
.ticket { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ticket div { border-bottom: 0; }
@media (max-width: 760px) { .ticket { grid-template-columns: 1fr 1fr; } .ticket div { border-bottom: 1px dashed var(--line); } }

/* partner logos in dark mode: put each mark on a light tile so black logos stay visible */
:root[data-theme="dark"] .partner { background: #f3efe6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .partner { background: #f3efe6; } }

/* speaking: a strip of stage photos, then a plain list like the writing page */
.speak-photos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 16px; }
.speak-photos figure { margin: 0; }
.speak-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.speak-photos figcaption { font: 10px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }
.speak-list { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--line); }
.speak-list li { display: grid; grid-template-columns: 130px 1fr 110px 190px; gap: 4px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.speak-list .when, .speak-list .role { font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.speak-list .role { color: var(--ink); }
.speak-list .what { font-size: 17px; }
.speak-list .what small { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.speak-list .where { font-size: 14px; color: var(--ink-soft); text-align: right; }
@media (max-width: 760px) {
  .speak-photos { grid-template-columns: repeat(3, 1fr); }
  .speak-list li { grid-template-columns: 1fr auto; }
  .speak-list .what { grid-column: 1 / -1; order: 3; }
  .speak-list .where { grid-column: 1 / -1; order: 4; text-align: left; }
}

/* speaking, take two: talks first (like a speaker one-sheet), then proof */
.talks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.talks li { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: 4px 4px 0 var(--block); }
.talks .n { font: 12px var(--pixel); color: var(--red); padding-top: 6px; }
.talks h3 { margin: 0; font: 22px/1.15 var(--serif); }
.talks p { margin: 6px 0 8px; font-size: 16px; color: var(--ink-soft); }
.talks .proof { font: 10px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.talk-formats { margin: 14px 0 0; }
.past-stages { margin: 10px 0 0; font-size: 16px; color: var(--ink-soft); max-width: none; }
.past-stages b { font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin-right: 8px; font-weight: 400; }
.btn-ink { display: inline-block; margin-top: 4px; padding: 9px 14px; border: 1px solid var(--ink); border-radius: 999px; font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; box-shadow: 3px 3px 0 var(--block); }
.btn-ink:hover { color: var(--red); border-color: var(--red); }
.speak-all { margin-top: 16px; }
.speak-all summary { cursor: pointer; font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.speak-all summary:hover { color: var(--red); }
@media (max-width: 760px) { .talks { grid-template-columns: 1fr; } }

/* keep page titles clear of the mascot sticker */
h1.has-mascot { padding-right: clamp(96px, 15vw, 140px); }
@media (max-width: 340px) { .nav { gap: 6px; } }

/* a case study can carry one short video (the jellyx teaser) */
.case-video { margin: 18px 0 0; }
.case-video video { width: 100%; display: block; border-radius: 12px; border: 1px solid var(--line); background: #000; aspect-ratio: 16 / 9; }
.case-video figcaption { font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }

/* case-study galleries: an even grid of same-shape frames, captions in body type */
.gallery { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; align-items: start; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; display: block; background: var(--card); }
.gallery figcaption { font: 14px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin-top: 8px; }
.gallery figcaption::first-letter { text-transform: uppercase; }
.speak-photos figcaption { font: 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.speak-photos figcaption::first-letter { text-transform: uppercase; }
.gallery img { object-position: center 30%; }
.gallery img[src*="img/work/"] { object-position: top center; }
.gallery figcaption::first-letter, .speak-photos figcaption::first-letter { text-transform: none; }
.gallery img[src*="img/work/"] { object-fit: contain; padding: 8px; }

/* people photos as covers: keep the faces (front rows) in frame */
.case-hero img[src*="img/me/"], .stop-card img[src*="img/me/"] { object-position: center 65%; }

/* home: the day job, in one quiet line under the tagline */
.home3 .lede-2 { margin: 6px auto 0; font-size: clamp(15px, 1.6vw, 18px); color: var(--ink-soft); max-width: 40em; text-align: center; }

/* stage photos: equal columns that can't be pushed wider by captions */
.speak-photos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.speak-photos figure { min-width: 0; }
.speak-photos figcaption { overflow-wrap: anywhere; }
@media (max-width: 760px) { .speak-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.gallery { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.gallery figure { min-width: 0; }
@media (max-width: 420px) { .nav { gap: 12px; } .nav a { letter-spacing: .04em; } }
.case-hero img[src*="interview"], .stop-card img[src*="interview"] { object-position: center 35%; }

/* ===== visual QA pass (oct 21): grids, captions, crops, dark mode ===== */
@media (max-width: 340px) { .nav { gap: 0; justify-content: space-between; } .nav a { letter-spacing: .02em; } }
.evgrid-scroll { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.talks .proof, .case-video figcaption { font: 13px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.talk-formats { margin-top: 28px; }
.btn-ink .lc { text-transform: none; letter-spacing: .02em; }
.gallery { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); margin-top: 28px; }
.gallery img[src*="img/work/"] { object-fit: cover; object-position: top left; padding: 0; }
.stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat b { text-wrap: balance; }
.talks h3, .event h3, .stop h3, .stop-card h3, .case h1 { text-wrap: balance; }
.nowrap { white-space: nowrap; }
.chip-logo .mono-logo { height: 1.15em; width: auto; vertical-align: -.2em; }
@media (max-width: 760px) { .ticket > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.road-end { text-align: left; }
.site-foot > span { color: var(--ink-soft); }
.stop-card img[src*="hard_problems_night_stage"] { object-position: left 60%; }
.stop-card img[src="img/marquee.jpg"] { object-position: left top; }
.case-hero img[src*="interview"], .stop-card img[src*="interview"] { object-position: center 20%; }
@media (min-width: 761px) {
  .stop { width: calc(50% - 80px); }
  .stop:nth-child(odd) .anchor { left: -80px; right: auto; }
  .stop:nth-child(even) .anchor { right: -80px; left: auto; }
}
:root[data-theme="dark"] .partner { background: color-mix(in srgb, var(--card) 80%, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .partner { background: color-mix(in srgb, var(--card) 80%, #fff); } }
:root[data-theme="dark"] { --grid: #2e2b35; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grid: #2e2b35; } }

/* ===== QA manager pass (oct 21) ===== */
/* work screenshots: show the whole screen, no cropping, on a calm card */
.gallery img[src*="/img/work/"] { object-fit: contain; object-position: center; aspect-ratio: 16 / 10; padding: 0; background: var(--card); }
.stop-card img[src="/img/marquee.jpg"] { object-position: left top; }
.case-hero img[src*="interview"], .stop-card img[src*="interview"] { object-position: center top; }
/* paired case cards: keep the result numbers on one baseline */
@media (min-width: 761px) { .card-results span { min-height: 4.4em; } }
/* dark mode: the two darkest partner marks flip light so they stay visible */
:root[data-theme="dark"] .partner img[alt="AGI House"], :root[data-theme="dark"] .partner img[alt="Kilo Code"] { filter: grayscale(1) invert(1); opacity: .85; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .partner img[alt="AGI House"], :root:not([data-theme="light"]) .partner img[alt="Kilo Code"] { filter: grayscale(1) invert(1); opacity: .85; } }
.ticket dd { text-wrap: balance; }
.story p, .case-sec p { text-wrap: pretty; }