/* alisher.ataev.net mockups. Tokens mirror brief/tokens.json. Monochrome only.
   Motion: transform, opacity and clip-path only (icon draw-on uses stroke-dashoffset on 24 px icons). */
:root {
  --ink: #000000;
  --ground: #ffffff;
  --grey-1: #e6e6e6;
  --grey-2: #6b6b6b;
  --accent-tvbet: #ffab00;   /* owner's amber (2026-11-04); the only colour, on the TV of TVBET on Notes */

  --fg: var(--ink);
  --bg: var(--ground);
  --muted: var(--grey-2);

  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Five type steps */
  --t-small: 14px;
  --t-body: 17px;
  --t-lead: clamp(21px, 1.9vw, 27px);
  --t-head: clamp(36px, 4.4vw, 64px);
  --t-mon: clamp(96px, 17.6vw, 340px);

  --m: 16px;
  --gap: 16px;
  --section: 128px;
  --cut: 67deg;
  --skew: -23deg;                 /* 90 - 67: the leg angle as a skew */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);   /* overshoot, then settle */
  color-scheme: light;
}
@media (min-width: 768px) { :root { --m: 24px; --gap: 24px; --section: 160px; } }
@media (min-width: 1200px) { :root { --m: 32px; --gap: 32px; --section: 192px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.55;
  font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; text-wrap: pretty; }
dd, li, figcaption, summary { text-wrap: pretty; }
/* No orphan or widow lines: short copy (under five lines) is balanced; long body stays pretty. */
.lead, .caption, figcaption, .small, dd, summary, .meta, .case-meta, .hero-facts li, .other, .ac-line { text-wrap: balance; }
.para p, .answer p, .ow p { text-wrap: pretty; }
.blocks p, .blocks li, .ow p.small { text-wrap: balance; }
.nowrap { white-space: nowrap; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible, iframe:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
::selection { background: var(--fg); color: var(--bg); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a.vh:focus { position: fixed; top: 8px; left: 8px; z-index: 2000; width: auto; height: auto; clip-path: none; padding: 12px 16px; background: var(--ink); color: var(--ground); }
.inv { --fg: var(--ground); --bg: var(--ink); --muted: var(--grey-1); background: var(--bg); color: var(--fg); }
.wrap { padding-left: var(--m); padding-right: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

.small { font-size: var(--t-small); line-height: 1.45; }
.muted { color: var(--muted); }
.lead { font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.01em; }
.head { font-size: var(--t-head); line-height: 0.98; letter-spacing: -0.03em; font-weight: 700; }
.mon {
  font-size: var(--t-mon); line-height: 0.8; letter-spacing: -0.055em; font-weight: 800;
  text-transform: uppercase; white-space: nowrap;
}

/* ---------- Icons: Lucide 1.67.0, 24 px, 1.5 px stroke, currentColor ---------- */
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon * { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 250ms var(--ease-out); }
html.js .draw:not(.in) .icon * { stroke-dashoffset: 1; }
.arrow { width: 16px; height: 16px; stroke-width: 1.75; transition: transform 200ms var(--ease-out); }

.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px;
  background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 600; font-size: var(--t-body);
  border: 0; font-family: inherit; cursor: pointer;
  transition: transform 120ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; padding-top: 8px; padding-bottom: 8px; }
.tlink > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* AA brand mark: static, header, footer and favicon only */
.mark { display: block; flex: none; width: 32px; height: 32px; }
.mark circle { fill: var(--fg); }
.mark path { fill: var(--bg); stroke: var(--fg); stroke-width: 8; stroke-linejoin: round; }

/* Navigation */
.nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; min-height: 44px; }
.nav ul { display: flex; gap: 24px; }
.nav ul a { display: inline-block; padding-top: 10px; padding-bottom: 10px; text-decoration: none; }
.nav ul a[aria-current="page"], .nav ul a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (max-width: 599px) { .brand-name { display: none; } .nav ul { gap: 14px; } }

/* Section marks: big bold numerals in solid circles (white on black; black on white inside black blocks) */
.num { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--fg); color: var(--bg); transition: transform 250ms var(--ease-out); }
.num b { font-size: var(--t-lead); line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: opacity 250ms var(--ease-out); }
html.js .draw:not(.in) .num { transform: scale(0.6); }
html.js .draw:not(.in) .num b { opacity: 0; }
.num.big { width: 120px; height: 120px; }
.num.big b { font-size: var(--t-head); }

/* Section scaffolding */
.section { padding-top: var(--section); }
.sect-head { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }
.sect-head .num { transition: transform 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sect-head:hover .num { transform: scale(1.08); } }

/* Headings wipe in along the 67 degree leg angle */
.head.wipe-h { transition: clip-path 500ms var(--ease-in-out); clip-path: polygon(-0.6em -10%, calc(100% + 0.6em) -10%, 100% 110%, -0.6em 110%); }
html.js .draw:not(.in) .head.wipe-h { clip-path: polygon(-0.6em -10%, -0.6em -10%, -1.2em 110%, -1.2em 110%); }

/* Cut letters: a word clipped by its own hairline, rising from behind it */
.cut { display: block; overflow: hidden; border-bottom: 1px solid var(--fg); } /* taste-skill-ignore: owner art direction, letters cut by hairlines */
.cut-in { display: block; transition: transform 520ms var(--ease-out); }
html.js .cut:not(.in) .cut-in { transform: translateY(102%); }

/* Entrances */
[data-rise] { transition: opacity 480ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: var(--d, 0ms); }
html.js [data-rise]:not(.in) { opacity: 0; transform: translateY(24px); }

/* Inverted blocks flip from white to black on entry: a white difference layer sweeps off at 67 degrees */
.flip { position: relative; overflow: clip; }
html.js .flip::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; right: -45%; z-index: 6; pointer-events: none;
  background: #fff; mix-blend-mode: difference;
  transform: skewX(var(--skew)); transition: transform 400ms var(--ease-in-out);
}
html.js .flip.in::after { transform: skewX(var(--skew)) translateX(105%); }

/* ---------- Home hero ---------- */
.hero { position: relative; --nav-h: 88px; --stage-h: max(100svh, 860px); --col-w: min(0.53 * (var(--stage-h) - var(--nav-h)), 1079px); }
.hero .nav { position: absolute; top: 0; left: 0; right: 0; }
/* The links sit on the black portrait column, spread across its width. site.js adds .is-neg from the
   glitch frame loop while the photo is negative; no transition, so the flip is as hard as the photo's. */
.hero .nav ul { --fg: var(--ground); --bg: var(--ink); flex: none; gap: 8px; justify-content: space-between; width: var(--col-w); padding-left: var(--m); padding-right: var(--m); color: var(--fg); }
.hero .nav ul.is-neg { --fg: var(--ink); --bg: var(--ground); }
@media (min-width: 900px) {
  .hero .nav { display: grid; grid-template-columns: calc(50vw - var(--m)) min(var(--col-w), 50vw - var(--m)); justify-content: start; gap: 0; }
  .hero .brand { justify-self: start; }
  .hero .nav ul { width: auto; }
}
.stage { position: relative; isolation: isolate; overflow: hidden; height: var(--stage-h); background: var(--bg); }
.stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fg); transform-origin: 0 50%; animation: line-draw 520ms var(--ease-out) 1040ms both; } /* taste-skill-ignore: owner art direction, letters cut by hairlines; dialog header rule on a real overlay */
/* The padding carries the black ground up behind the links; the photo keeps its size and place in the content box. */
.portrait { position: absolute; z-index: 0; box-sizing: content-box; top: 0; padding-top: var(--nav-h); height: calc(100% - var(--nav-h)); left: 50vw; aspect-ratio: 0.53; max-width: 1079px; background: var(--ink); overflow: hidden; }
.portrait img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; animation: portrait-up 640ms var(--ease-out) 820ms both; }
.portrait .ph { position: absolute; left: 50%; bottom: 0; width: 94%; transform: translateX(-50%); }
.portrait .ph path { fill: #1a1a1a; }
.portrait img + .ph { display: none; }
.name { position: absolute; inset: 0; z-index: 1; color: var(--ground); mix-blend-mode: difference; font-size: min(var(--t-mon), calc((100vw - 2 * var(--m)) / 3.9)); }
.name .n1, .name .n2 { position: absolute; display: block; }
.name .n1 { top: max(300px, 33%); left: var(--m); animation: from-left 900ms var(--ease-spring) both; }
.name .n2 { left: var(--m); bottom: 24px; animation: from-right 900ms var(--ease-spring) 120ms both; }
.name .n1::after { content: ""; position: absolute; left: -0.1em; right: -60vw; bottom: 0.06em; height: 1px; background: currentColor; transform-origin: 0 50%; animation: line-draw 520ms var(--ease-out) 960ms both; } /* taste-skill-ignore: owner art direction, letters cut by hairlines; dialog header rule on a real overlay */
@keyframes from-left { from { transform: translateX(-75vw); } to { transform: none; } }
@keyframes from-right { from { transform: translateX(75vw); } to { transform: none; } }
@keyframes line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes portrait-up { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.hero-copy { position: absolute; z-index: 2; left: var(--m); top: 104px; width: min(44vw, 520px); }
.hero-copy .lead { margin-bottom: 32px; }
.hero-facts { position: absolute; z-index: 2; left: var(--m); top: 58%; width: min(44vw, 620px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px var(--gap); }
.hero-facts b { display: block; font-weight: 600; }
.hero-facts li a { display: block; width: fit-content; padding-top: 2px; padding-bottom: 2px; }
@media (max-width: 899px) {
  :root { --t-mon: 26vw; }
  .hero { --col-w: 72vw; }
  .stage { height: auto; padding-top: calc(150vw + var(--nav-h)); padding-bottom: 48px; }
  .stage::after { display: none; }
  .portrait { height: auto; left: auto; right: var(--m); width: var(--col-w); }
  .name { top: var(--nav-h); }
  .name .n1 { top: 40vw; }
  .name .n2 { top: 100vw; bottom: auto; }
  .hero-copy, .hero-facts { position: static; width: auto; }
  .hero-copy { padding-left: var(--m); padding-right: var(--m); }
  .hero-facts { margin-top: 48px; padding-left: var(--m); padding-right: var(--m); gap: 16px; }
  .foot .mon { font-size: var(--t-mon); }
}
@media (min-width: 600px) and (max-width: 899px) {
  :root { --t-mon: 20vw; }
  .hero { --col-w: 50vw; }
  .stage { padding-top: calc(100vw + var(--nav-h)); }
  .name .n1 { top: 24vw; }
  .name .n2 { top: 74vw; }
  .hero-copy { max-width: 560px; }
}
@media (max-width: 599px) { .hero .nav ul { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 374px) { .hero .nav ul { font-size: var(--t-small); } }

/* ---------- Proof ---------- */
.proof { padding-bottom: var(--section); }
.proof .figure { margin-left: -0.05em; }
.proof .caption { grid-column: 1 / span 6; margin-top: 32px; }
.figlines { grid-column: 1 / -1; margin-top: 96px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap); }
.figlines > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
.figlines dt, .case-figs dt { font-size: var(--t-lead); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.figlines dd { max-width: 44ch; }
@media (max-width: 899px) {
  .proof .caption, .figlines { grid-column: 1 / -1; }
  .figlines { margin-top: 64px; grid-template-columns: 1fr; }
  .figlines > div, .case-figs > div { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; }
  .figlines dt, .case-figs dt { font-size: var(--t-lead); }
}

/* ---------- Story: pinned icon rail beside track record and selected work ---------- */
.story { padding-top: var(--section); }
.rail { grid-column: 1 / span 4; background: var(--ink); color: var(--ground); --fg: var(--ground); --bg: var(--ink); margin-left: calc(-1 * var(--m)); padding: 48px var(--m); }
.rail-in { position: sticky; top: 112px; }
.rail-nums { position: relative; width: 120px; height: 120px; }
.rail-nums .num { position: absolute; inset: 0; opacity: 0; transform: scale(0.6); transition: opacity 200ms var(--ease-out), transform 250ms var(--ease-out); }
.rail-nums .num.on { opacity: 1; transform: none; }
.rail-label { margin-top: 24px; }
.story-body { grid-column: 5 / -1; }
.story-body > section + section { padding-top: var(--section); }
@media (max-width: 899px) { .rail { display: none; } .story-body { grid-column: 1 / -1; } }

/* Experience: career in numbers, then one straight line per role: company, role, dates, bar */
.exp { padding-top: var(--section); }
.career { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--gap); margin-bottom: 48px; }
.career dt { font-size: var(--t-head); line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.career dd { margin-top: 8px; font-size: var(--t-small); line-height: 1.45; }
/* Experience Gantt: one row per job on a shared 2015 to 2027 scale, own ventures first. A hatched zone and a rule
   at mid-2020 split the career into International Shipping and IT & Product. */
.gt { --x: 45.83%; --rh: 32px; }
.gt-years { position: relative; height: 22px; border-bottom: 1px solid var(--ink); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.gt-years span { position: absolute; left: var(--l); transform: translateX(-50%); }
.gt-years span:first-child { transform: none; }
.gt-years span:last-child { transform: translateX(-100%); }
.gt-body { position: relative; }
.gt-body::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--x); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--grey-1) 6px 7px); pointer-events: none; }
.gt-body::after { content: ""; position: absolute; left: var(--x); top: 0; bottom: 0; border-left: 2px solid var(--ink); pointer-events: none; }
.gt-zones { position: relative; height: var(--rh); border-bottom: 1px solid var(--ink); font-size: var(--t-small); z-index: 1; }
.gt-zones span { position: absolute; top: 50%; transform: translateY(-50%); background: var(--ground); padding: 2px 6px; white-space: nowrap; font-weight: 700; }
.gt-zones .z1 { left: 0; padding-left: 0; color: var(--muted); font-weight: 400; }
.gt-zones .z2 { left: calc(var(--x) + 8px); }
.gt-rows { list-style: none; position: relative; }
.gt-row { position: relative; z-index: 1; height: var(--rh); border-bottom: 1px solid var(--grey-1); transition: opacity 420ms var(--ease-out), transform 480ms var(--ease-out); transition-delay: var(--d, 0ms); }
.gt-row.is-last-own { border-bottom: 1px solid var(--ink); }
.gt-bar { position: absolute; top: 9px; height: 14px; left: var(--l); width: max(var(--w), 6px); border: 1px solid var(--ink); background: var(--ground); transform-origin: 0 50%; transition: transform 520ms var(--ease-out); transition-delay: var(--d, 0ms); }
.gt-row.is-now .gt-bar { background: var(--ink); }
.gt-lab { position: absolute; top: 5px; left: calc(var(--l) + var(--w) + 8px); white-space: nowrap; font-size: var(--t-small); line-height: 1.5; background: var(--ground); padding: 0 4px; }
.gt-row.lab-left .gt-lab { left: auto; right: calc(100% - var(--l) + 4px); }
.gt-lab b { margin-right: 6px; }
.gt-lab span { font-variant-numeric: tabular-nums; }
html.js .draw:not(.in) .gt-row { opacity: 0; transform: translateY(12px); }
html.js .draw:not(.in) .gt-bar { transform: scaleX(0); }
@media (max-width: 599px) { .gt-lab span { display: none; } .gt-lab { font-size: 12px; padding: 0 2px; } .gt-lab b { margin-right: 4px; } .gt-zones { font-size: 12px; } }
@media (max-width: 899px) {
  .career { grid-template-columns: 1fr 1fr; }
}

/* Record table (kept for reference; not on Home) */
.record { width: 100%; border-collapse: collapse; }
.record th { text-align: left; font-weight: 400; font-size: var(--t-small); color: var(--muted); padding: 0 16px 12px 0; border-bottom: 1px solid var(--fg); }
.record td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--fg); vertical-align: top; }
.record td.co { font-weight: 600; width: 22%; }
.record td.ro { width: 22%; }
.record td.pe { width: 17%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.record tr.earlier td { color: var(--muted); }
.record tbody tr { transition: opacity 420ms var(--ease-out), transform 480ms var(--ease-out); transition-delay: var(--d, 0ms); }
html.js .draw:not(.in) .record tbody tr { opacity: 0; transform: translateY(16px); }
.record-foot { margin-top: 32px; }
@media (max-width: 767px) {
  .record thead { display: none; }
  .record, .record tbody, .record tr, .record td { display: block; width: auto !important; }
  .record tr { border-bottom: 1px solid var(--fg); padding-top: 16px; padding-bottom: 16px; }
  .record td { border: 0; padding: 0 0 4px; white-space: normal !important; }
  .record td.co { font-size: var(--t-lead); }
  .record td.ro, .record td.pe { color: var(--muted); font-size: var(--t-small); }
}

/* Selected work: names that split along their cut line on hover */
.worklist li + li { margin-top: 8px; }
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; text-decoration: none; padding-top: 16px; }
.wrow .cut { grid-column: 1 / -1; font-size: var(--t-head); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; padding-top: 4px; }
.wrow .meta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; }
.wrow .meta b { font-weight: 600; font-variant-numeric: tabular-nums; }
.split { position: relative; }
.split::after { content: attr(data-text); position: absolute; left: 0; top: 0; clip-path: inset(0 0 52% 0); opacity: 0; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .wrow:hover .split { clip-path: inset(48% -20% -20% -20%); }
  .wrow:hover .split::after { opacity: 1; transform: translate(10px, -3px); }
}
.workpics { display: grid; grid-template-columns: 7fr 3fr; gap: var(--gap); align-items: end; margin-top: 64px; }
.workpics img { width: 100%; }
.workpics figcaption { margin-top: 12px; }
.ac-line { margin-top: 16px; }
.ac-label { margin-top: 40px; }
.ac-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--gap); margin-top: 12px; }
.ac-nums dt { font-size: var(--t-head); line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ac-nums dd { margin-top: 8px; font-size: var(--t-small); }
@media (max-width: 599px) { .ac-nums { grid-template-columns: 1fr; } }
.other { margin-top: 40px; }
.other .tlink { margin-left: 8px; }

/* How I work: the full-length portrait sits half under the heading */
.how-sec { padding-top: var(--section); }
.how-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); isolation: isolate; background: var(--bg); }
.how-head { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2; --fg: var(--ground); --bg: var(--ink); color: var(--ground); mix-blend-mode: difference; }
.how-head .mon { margin-left: -0.05em; }
.how-pic { grid-column: 9 / -1; grid-row: 1 / span 2; position: relative; z-index: 0; justify-self: end; width: 100%; max-width: 460px; margin-top: 7vw; }
.how { grid-column: 1 / span 7; grid-row: 2; position: relative; z-index: 1; margin-top: 64px; display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: var(--gap); align-content: start; }
.how .facts div + div { margin-top: 20px; }
.how .facts dt { color: var(--muted); font-size: var(--t-small); }
.how .facts dd { font-size: var(--t-small); font-weight: 600; }
.how .para { font-size: var(--t-lead); line-height: 1.4; }
.how .para p + p { margin-top: 24px; }
.how .lists { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 64px; }
.how .lists h3 { font-size: var(--t-body); font-weight: 600; margin-bottom: 12px; }
.how .lists li { font-size: var(--t-small); line-height: 1.45; padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 899px) {
  .how-pic { grid-column: 1 / -1; grid-row: 2; width: 70%; margin-top: -0.4em; }
  .how { grid-column: 1 / -1; grid-row: 3; grid-template-columns: 1fr; }
  .how .facts { order: 2; margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .how .facts div + div { margin-top: 0; }
  .how .lists { grid-column: 1; grid-template-columns: 1fr; gap: 32px; order: 3; }
}
.place { margin-top: 96px; }
.place img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.place figcaption { margin-top: 12px; }
@media (max-width: 899px) {
  .how-pic { position: relative; top: auto; right: auto; width: 70%; margin-left: auto; margin-top: -0.4em; }
  .how { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .how .facts { order: 2; margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .how .facts div + div { margin-top: 0; }
  .how .lists { grid-column: 1; grid-template-columns: 1fr; gap: 32px; order: 3; }
  .how-spacer { display: none; }
}

/* FAQ */
.faq { padding-top: var(--section); }
.faq .grid { row-gap: 0; }
.faq-list { grid-column: 5 / -1; }
.faq-side { grid-column: 1 / span 4; }
.faq details { border-top: 1px solid var(--fg); } /* taste-skill-ignore: owner art direction, lists cut by hairlines */
.faq details:last-child { border-bottom: 1px solid var(--fg); } /* taste-skill-ignore: owner art direction, lists cut by hairlines */
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; padding-bottom: 20px; font-size: var(--t-lead); line-height: 1.3; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform 240ms var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .answer { padding-bottom: 24px; max-width: 64ch; }
.faq details[open] .answer { animation: answer-in 260ms var(--ease-out); }
@keyframes answer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) { .faq-list, .faq-side { grid-column: 1 / -1; } }

/* Meet call to action */
.meet-cta { position: relative; overflow: hidden; padding-bottom: var(--section); }
.meet-cta .mon { text-align: right; margin-right: calc(-1 * var(--m)); }
.meet-cta .mon .cut-in { margin-right: -0.16em; }
.meet-cta .grid { margin-top: 48px; align-items: end; }
.meet-cta .ask { grid-column: 1 / span 5; }
.meet-cta .ask .num { margin-bottom: 24px; }
.meet-cta .ask .lead { margin-bottom: 32px; }
.meet-cta .alt { grid-column: 8 / -1; }
@media (max-width: 899px) { .meet-cta .ask, .meet-cta .alt { grid-column: 1 / -1; } .meet-cta .alt { margin-top: 40px; } }

.morph { position: fixed; z-index: 1000; background: var(--ink); transform-origin: 0 0; pointer-events: none; }

/* Footer */
.foot { overflow: hidden; padding-top: 64px; padding-bottom: 32px; }
.foot .mon { font-size: clamp(120px, 36vw, 700px); margin-left: -0.06em; line-height: 0.78; }
.foot .cut { height: 0.86em; margin-left: calc(-1 * var(--m)); margin-right: calc(-1 * var(--m)); padding-left: var(--m); }
.foot-row { margin-top: 72px; }
.foot-places { grid-column: 1 / span 6; }
.foot-places li + li { margin-top: 8px; }
.foot-places a { font-size: var(--t-lead); text-decoration: none; display: inline-block; padding-top: 4px; padding-bottom: 4px; }
.foot-places a:hover { text-decoration: underline; }
.foot-links { grid-column: 8 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; font-size: var(--t-body); }
.foot-links a { display: inline-block; padding-top: 6px; padding-bottom: 6px; }
.foot-legal { margin-top: 96px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; font-size: var(--t-body); line-height: 1.5; }
.foot-legal p { max-width: 64ch; }
.foot-legal .brandline { display: flex; align-items: center; gap: 12px; }
@media (max-width: 899px) { .foot-places, .foot-links { grid-column: 1 / -1; } .foot-links { margin-top: 40px; } .foot .mon { letter-spacing: -0.09em; } }

/* ---------- Inner page hero (work, meet) ---------- */
.page-hero { position: relative; overflow: hidden; padding-bottom: 64px; }
.page-hero .mon { margin-top: 48px; }
.page-hero .intro { margin-top: 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.page-hero .intro .lead-col { grid-column: 1 / span 5; }
.page-hero .intro .lead-col .lead { margin-bottom: 32px; }
.page-hero .intro .jump { grid-column: 8 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.page-hero .intro .jump a { display: inline-block; padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 899px) { .page-hero .intro .lead-col, .page-hero .intro .jump { grid-column: 1 / -1; } .page-hero .intro .jump { margin-top: 24px; } }

/* ---------- Case studies ---------- */
.case { padding-top: var(--section); }
.case.inv { padding-bottom: var(--section); margin-top: var(--section); }
.case + .case.inv, .case.inv + .case { margin-top: 0; }
.case:has(+ .case.inv), .case:has(+ .otherwork) { padding-bottom: var(--section); }
.case-name { font-size: var(--t-mon); text-transform: none; letter-spacing: -0.06em; }
.case-name.cut { height: 1.02em; line-height: 0.92; }
.case-name.right { text-align: right; margin-right: calc(-1 * var(--m)); }
.case-name.right .cut-in { margin-right: -0.16em; }
.case-name.left { margin-left: -0.06em; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 24px; }
.case-meta .use { font-weight: 600; }
.case-body { margin-top: 64px; row-gap: 48px; }
.case-body .blocks { display: grid; gap: 32px; align-content: start; }
.case-body h3 { font-size: var(--t-body); font-weight: 600; margin-bottom: 8px; }
.case-body ul li + li { margin-top: 8px; }
.case-figs > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
.case-figs > div + div { margin-top: 28px; }
.case-big { font-size: var(--t-mon); line-height: 0.8; letter-spacing: -0.055em; font-weight: 800; white-space: nowrap; }
.todo { border-left: 1px solid var(--fg); padding-left: 16px; } /* taste-skill-ignore: honest placeholder note */

/* AllCars: a device-free stack of real phone screens */
.c-allcars .blocks { grid-column: 1 / span 5; }
.c-allcars .stack { grid-column: 6 / -1; position: relative; height: clamp(520px, 52vw, 760px); }
.stack img { position: absolute; width: clamp(180px, 17vw, 300px); height: auto; border: 1px solid var(--ink); background: var(--ground); transition: transform 300ms var(--ease-out); } /* taste-skill-ignore: 1px frame keeps white phone screens legible on white */
.stack img:nth-child(1) { left: 0; top: 40px; transform: rotate(-4deg); z-index: 1; }
.stack img:nth-child(2) { left: 30%; top: 0; transform: rotate(1.5deg); z-index: 3; }
.stack img:nth-child(3) { left: 60%; top: 72px; transform: rotate(5deg); z-index: 2; }
@media (hover: hover) and (pointer: fine) { .stack img:hover { transform: rotate(0deg) translateY(-12px); z-index: 4; } }
.metrics { grid-column: 1 / -1; margin-top: 32px; }
.metrics-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); } /* taste-skill-ignore: a real data strip */
.metrics-strip > div { padding: 20px 16px 20px 0; }
.metrics-strip > div + div { padding-left: 16px; border-left: 1px solid var(--fg); } /* taste-skill-ignore: a real data strip */
.metrics-strip b { display: block; font-size: var(--t-head); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.metrics-label { margin-bottom: 12px; font-weight: 600; }
.metrics-more { margin-top: 16px; display: grid; gap: 4px; }
.evidence { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); align-items: start; margin-top: 16px; }
.evidence img { width: 100%; border: 1px solid var(--ink); } /* taste-skill-ignore: screenshot frame */
.evidence .ops img { max-width: 480px; }
.evidence figcaption { margin-top: 12px; }
.downloads { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 16px; }
@media (max-width: 899px) {
  .case-body > * { grid-column: 1 / -1 !important; }
  .c-allcars .stack { height: 128vw; }
  .stack img { width: 46vw; }
  .stack img:nth-child(2) { left: 26%; }
  .stack img:nth-child(3) { left: 52%; }
  .metrics-strip { grid-template-columns: 1fr 1fr; }
  .metrics-strip > div:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--fg); } /* taste-skill-ignore: a real data strip */
  .metrics-strip > div:nth-child(4) { border-top: 1px solid var(--fg); } /* taste-skill-ignore: a real data strip */
  .evidence { grid-template-columns: 1fr; }
}

.c-mygarage .pics { grid-column: 1 / span 5; position: relative; padding-bottom: 120px; }
.c-mygarage .pics img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.c-mygarage .pics img.site { position: absolute; right: -40%; bottom: 0; width: 70%; aspect-ratio: 16 / 10; object-position: 0 0; border: 8px solid var(--bg); }
.c-mygarage .blocks { grid-column: 7 / -1; align-self: center; }
.c-zeon .big { grid-column: 1 / span 7; }
.c-zeon .blocks { grid-column: 8 / -1; }
.c-zeon .cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 32px; }
.c-sol .blocks { grid-column: 1 / span 6; }
.c-sol .case-figs { grid-column: 8 / -1; align-self: start; }
.c-tvbet .case-figs { grid-column: 1 / span 6; }
.c-tvbet .blocks { grid-column: 8 / -1; }
@media (max-width: 899px) {
  .c-mygarage .pics { width: 72%; }
  .c-mygarage .pics img.site { right: -36%; width: 80%; }
  .c-zeon .cols { grid-template-columns: 1fr; }
  .c-zeon .blocks { order: -1; }
  .c-zeon .big { margin-top: 56px; }
  .c-zeon .todo { order: 5; }
}

/* Other work: cards invert on hover */
.otherwork { padding-top: var(--section); padding-bottom: var(--section); }
.otherwork .grid { row-gap: 32px; }
.ow { grid-column: span 6; position: relative; isolation: isolate; border-top: 1px solid var(--fg); padding: 20px 16px 24px; } /* taste-skill-ignore: owner art direction, lists cut by hairlines */
.ow::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #fff; mix-blend-mode: difference; pointer-events: none; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ow:hover::before { transform: scaleY(1); } }
.ow h3 { font-size: var(--t-lead); letter-spacing: -0.01em; margin-bottom: 4px; }
.ow p + p { margin-top: 12px; }
@media (max-width: 767px) { .ow { grid-column: 1 / -1; } }

/* ---------- Meet page: native booking widget on a black page ---------- */
.meet-hero { padding-bottom: 32px; }
.booker { padding-top: 48px; padding-bottom: var(--section); }
.book-sec { max-width: 1376px; }
.book-steps { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.book-steps li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.book-steps .num { width: 40px; height: 40px; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); } /* taste-skill-ignore: an outlined numeral marks a step not reached yet */
.book-steps .num b { font-size: var(--t-body); }
.book-steps li.is-current .num, .book-steps li.is-done .num { background: var(--fg); color: var(--bg); }
.book-tools { display: flex; justify-content: flex-end; padding-bottom: 16px; }
.month-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: end; gap: 16px; padding-bottom: 24px; }
.month { font-size: var(--t-mon); line-height: 0.82; font-weight: 800; letter-spacing: -0.055em; text-transform: uppercase; white-space: nowrap; height: 0.8em; margin: 0; }
.month-row .sq[disabled] { visibility: visible; cursor: default; }
.week-nav { display: flex; align-items: center; gap: 16px; }
.week-label { min-width: 15ch; text-align: center; }
.sq { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--fg); background: transparent; color: var(--fg); font: inherit; cursor: pointer; transition: transform 120ms var(--ease-out); } /* taste-skill-ignore: square controls drawn with a hairline, the widget's own language */
.sq:active { transform: scale(0.97); }
.sq[disabled] { visibility: hidden; }
.sq.txt { font-weight: 600; }
.sq[aria-checked="true"] { background: var(--fg); color: var(--bg); }
.dur { display: flex; }
.dur .sq + .sq { border-left: 0; }
.tz-line { padding-top: 16px; }
.meet-facts { grid-column: 8 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap); }
.meet-facts dt { font-size: var(--t-small); }
.meet-facts dd { font-size: var(--t-lead); line-height: 1.3; font-weight: 600; }
@media (max-width: 899px) { .meet-facts { grid-column: 1 / -1; margin-top: 40px; } }
.book-title { margin-bottom: 32px; }
select.tz { font: inherit; font-size: var(--t-small); color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--fg); padding: 6px 0; min-height: 44px; cursor: pointer; max-width: 60vw; }
select.tz option { color: #000; background: #fff; }
.sq.nudge { background: var(--fg); color: var(--bg); }
.gap { display: block; height: 44px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--fg); border-left: 1px solid var(--fg); } /* taste-skill-ignore: the week is a real grid */
.day { border-right: 1px solid var(--fg); border-bottom: 1px solid var(--fg); display: flex; flex-direction: column; min-width: 0; } /* taste-skill-ignore: the week is a real grid */
.day-head { padding: 12px 12px 0; display: block; width: 100%; text-align: left; background: transparent; color: inherit; border: 0; font: inherit; cursor: default; }
.day-head .wd { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-small); font-weight: 600; }
.day-head .dn { display: block; overflow: hidden; height: 0.74em; font-size: var(--t-head); font-weight: 800; line-height: 0.92; letter-spacing: -0.05em; border-bottom: 1px solid var(--fg); margin-top: 8px; } /* taste-skill-ignore: day numerals cut by their hairline */
.day.today .day-head { border-top: 4px solid var(--fg); padding-top: 8px; }
.slots { display: grid; gap: 0; padding: 12px; gap: 8px; align-content: start; }
.slot { position: relative; height: 44px; border: 1px solid var(--fg); background: transparent; color: var(--fg); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: transform 120ms var(--ease-out); } /* taste-skill-ignore: square slots drawn with a hairline */
.slot:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .slot:not([aria-disabled="true"]):hover { text-decoration: underline; text-underline-offset: 4px; } }
.slot[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.slot[aria-disabled="true"] { cursor: not-allowed; border-style: solid; border-color: transparent; }
.slot[aria-disabled="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1px; background: currentColor; } /* taste-skill-ignore: a hairline strikes through taken slots */
.slot:focus-visible, .sq:focus-visible, .day-head:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.day-empty { padding: 12px; font-size: var(--t-small); }
.skel { height: 44px; border: 1px solid var(--fg); } /* taste-skill-ignore: skeleton hairlines while loading */
.week-msg { grid-column: 1 / -1; padding: 32px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-right: 1px solid var(--fg); border-bottom: 1px solid var(--fg); } /* taste-skill-ignore: the week is a real grid */
.book-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 24px; }
.btn[disabled] { cursor: not-allowed; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); } /* taste-skill-ignore: a disabled button is outlined, never grey */
.book-form .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 32px var(--gap); margin-top: 48px; }
.book-form label { display: grid; gap: 8px; font-weight: 600; }
.book-form .wide { grid-column: 1 / -1; }
.book-form input, .book-form textarea { font: inherit; font-size: var(--t-lead); font-weight: 400; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--fg); padding: 8px 0; border-radius: 0; resize: vertical; } /* taste-skill-ignore: form fields */
.book-form input:focus, .book-form textarea:focus { outline: none; border-bottom-width: 2px; }
.book-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: a hairline strikes through taken slots */
.form-error { margin-top: 24px; font-weight: 600; }
.back { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding-left: 0; }
.book-done { --fg: var(--ink); --bg: var(--ground); background: var(--ground); color: var(--ink); padding: 40px var(--m) 40px; margin-left: calc(-1 * var(--m)); margin-right: calc(-1 * var(--m)); outline: none; }
.book-done .done-word { margin-left: -0.05em; height: 0.82em; }
.done-times { margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap); }
.done-times dt { font-size: var(--t-small); }
.done-times dd { font-size: var(--t-lead); font-weight: 600; line-height: 1.3; }
.done-mail { margin-top: 32px; margin-bottom: 8px; }
.book-panel { animation: panel-in 240ms var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.book-done { animation: done-flip 400ms var(--ease-in-out); }
@keyframes done-flip { from { clip-path: polygon(0 0, 0 0, -50% 100%, -50% 100%); } to { clip-path: polygon(0 0, 150% 0, 100% 100%, -50% 100%); } }
.book-fallback { margin-top: 32px; }
.book-fallback a { overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .week .day .slots, .week .day .day-empty { display: none; }
  .day-head { padding: 8px 4px 0; cursor: pointer; }
  .day-head .wd { flex-direction: column; font-size: var(--t-small); gap: 0; }
  .day.active .day-head { background: var(--fg); color: var(--bg); }
  .day.active .day-head .dn { border-bottom-color: var(--bg); }
  .day-slots { grid-column: 1 / -1; border-right: 1px solid var(--fg); border-bottom: 1px solid var(--fg); } /* taste-skill-ignore: the week is a real grid */
  .day-slots .slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day-slots .day-empty { display: block; }
  .book-form .fields { grid-template-columns: 1fr; }
  .done-times { grid-template-columns: 1fr; }
}

/* ---------- Contact page ---------- */
.contact-hero { padding-bottom: 32px; }
.contact-hero .nav { padding-left: 0; padding-right: 0; }
.contact-ask { margin-top: 96px; max-width: 30ch; display: flex; gap: 16px; align-items: center; }
.email-title { margin-top: 48px; font-weight: 600; }
.contact-hero .email { display: block; font-size: clamp(36px, 8.6vw, 168px); line-height: 0.9; letter-spacing: -0.05em; font-weight: 600; text-decoration: none; padding-top: 8px; padding-bottom: 8px; overflow-wrap: anywhere; }
.contact-hero .email:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.contact-hero .corners { margin-top: 64px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.contact-hero .corners ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.contact-hero .corners li { padding-top: 6px; padding-bottom: 6px; }
.details { padding-top: var(--section); padding-bottom: var(--section); row-gap: 48px; }
.details .sect-head { grid-column: 1 / span 4; align-self: start; }
.details dl { grid-column: 5 / -1; }
.details dl > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--gap); padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--fg); } /* taste-skill-ignore: owner art direction, lists cut by hairlines */
.details dl > div:first-child { border-top: 1px solid var(--fg); } /* taste-skill-ignore: owner art direction, lists cut by hairlines */
.details dt { color: var(--muted); display: flex; align-items: center; gap: 12px; }
.details dt .icon { color: var(--fg); }
.details dd { font-size: var(--t-lead); line-height: 1.4; }
.details .place { grid-column: 1 / -1; margin-top: 0; }
.place.pair { display: grid; grid-template-columns: 3fr 2fr; gap: var(--gap); align-items: end; }
.place.pair img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 767px) { .place.pair { grid-template-columns: 1fr; } }
@media (max-width: 899px) { .details .sect-head, .details dl { grid-column: 1 / -1; } .details dl > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Life ---------- */
.life { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; position: relative; overflow: hidden; padding-bottom: var(--section); }
.life .nav { padding-left: 0; padding-right: 0; }
.life-stage { position: relative; isolation: isolate; background: var(--bg); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; padding-bottom: 32px; }
.life-pic { grid-column: 5 / -1; grid-row: 1; align-self: stretch; position: relative; min-height: 64vh; }
.life-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.life-copy { grid-column: 1 / span 6; grid-row: 1; padding-bottom: 32px; }
.life-copy .icon { width: 32px; height: 32px; margin-bottom: 24px; }
.life-copy .lead { margin-top: 56px; margin-bottom: 8px; max-width: 26ch; }
.life-copy .small { margin-bottom: 32px; }
.life h1.mon { color: var(--ground); mix-blend-mode: difference; text-align: left; margin-left: -0.05em; font-size: clamp(200px, 41vw, 760px); line-height: 0.76; white-space: nowrap; position: relative; z-index: 2; animation: from-left 900ms var(--ease-spring) both; }
@media (max-width: 899px) {
  .life-pic { grid-column: 1 / -1; grid-row: 1; min-height: 56vh; }
  .life-copy { grid-column: 1 / -1; grid-row: 2; padding-top: 24px; }
  .life h1.mon { margin-top: -0.62em; margin-left: -0.06em; font-size: clamp(140px, 46vw, 400px); }
}

/* ---------- Notes list ---------- */
.notes-list { padding-top: 48px; padding-bottom: var(--section); }
.note-item { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); row-gap: 16px; align-items: start; }
.note-item + .note-item { margin-top: var(--section); }
.note-item > :not(.note-thumb) { grid-column: 1; }
.note-thumb { grid-column: 2; grid-row: 2 / span 4; display: block; }
.note-thumb .thumb-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.note-item .btn { justify-self: start; }
@media (max-width: 899px) { .note-item { grid-template-columns: 1fr; } .note-thumb { grid-column: 1; grid-row: auto; } }
.note-word { display: block; text-decoration: none; }
.note-word .cut { font-size: var(--t-mon); line-height: 0.92; letter-spacing: -0.06em; font-weight: 800; height: 0.86em; margin-right: calc(-1 * var(--m)); }
/* Split hover with real markup, so the coloured TV survives (a data-text pseudo-element would paint it black) */
.split-dup { position: relative; display: block; }
.split-base { display: block; }
.split-top { position: absolute; left: 0; top: 0; clip-path: inset(0 0 52% 0); opacity: 0; visibility: hidden; transition: transform 220ms var(--ease-out); pointer-events: none; }
.note-word .tv { color: var(--accent-tvbet); mix-blend-mode: normal; }
@media (hover: hover) and (pointer: fine) {
  .note-word:not(.word-swap):hover .split-base { clip-path: inset(48% -20% -20% -20%); }
  .note-word:not(.word-swap):hover .split-top { opacity: 1; visibility: visible; transform: translate(10px, -3px); }
}
/* Saifuro glitches to SCAM and back (initWordSwap in site.js). SCAM is generated content with empty alt text, so it is in
   no text node, stacked in the same grid cell as the word, so its width moves nothing. This word has no split hover: hover plays the swap. */
.notes-list .word-swap .split-base { display: grid; justify-items: start; }
.notes-list .word-swap .split-base > span, .notes-list .word-swap .split-base::after { grid-area: 1 / 1; }
.notes-list .word-swap .split-base::after { content: "SCAM"; content: "SCAM" / ""; visibility: hidden; }
.notes-list .word-swap.is-swapped .split-base > span { visibility: hidden; }
.notes-list .word-swap.is-swapped .split-base::after { visibility: inherit; }
/* During a tear only: the word is drawn by slices of itself, each cut with clip-path and moved with transform */
.notes-list .word-swap.is-tearing .split-dup > .split-base { visibility: hidden; }
.notes-list .word-swap.is-tearing .cut { overflow-x: visible; overflow-y: clip; }   /* slices may cross the left edge; the cut at the hairline stays */
.word-tear { position: absolute; inset: 0; pointer-events: none; }
.word-tear .split-base { position: absolute; left: 0; top: 0; width: 100%; }
.note-item h2 a { text-decoration: none; }
.note-item h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.note-item-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.note-item .lead { max-width: 52ch; }

/* ---------- Note article: editorial reading layout ---------- */
.img-ph { display: block; width: 100%; aspect-ratio: var(--r); background: var(--ink); }
.note-hero { position: relative; isolation: isolate; background: var(--bg); }
.note-cover { margin: 0; }
.note-cover .cover-img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.note-title { margin-top: -0.9em; max-width: 18ch; font-size: var(--t-head); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; color: var(--ground); mix-blend-mode: difference; text-wrap: balance; }
.note-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 32px; }
.note-desc { margin-top: 24px; max-width: 48ch; }
.note-head { max-width: none; }
.note-body { padding-bottom: var(--section); }
.chapter { padding-top: 112px; }
.ch-fig { margin: 0 auto 40px; padding-top: 24px; border-top: 1px solid var(--fg); max-width: 1120px; } /* taste-skill-ignore: hairline above each chapter illustration */
.ch-fig .ch-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.chapter .sect-head { margin: 0 auto 32px; max-width: 68ch; }
.prose { max-width: 68ch; margin-inline: auto; }
.prose p { font-size: var(--t-body); line-height: 1.65; }
.prose p + p { margin-top: 1em; }
.prose ul, .prose ol { margin: 1em 0 0 1.2em; list-style: revert; }
.pull { margin: 56px 0 48px; font-size: var(--t-head); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; text-wrap: balance; max-width: 22ch; }
.pull.cut { padding-bottom: 8px; }
.note-end { padding-top: 96px; padding-bottom: 96px; }
.note-end-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
@media (max-width: 767px) {
  .note-cover .cover-img, .note-cover .img-ph { aspect-ratio: 4 / 5; max-height: none; }
  .note-title { margin-top: -0.1em; max-width: none; }   /* phones: the 4:5 crop centres the figure, so the title only touches the cover edge */
  .chapter { padding-top: 80px; }
  .prose { max-width: 100%; }
  .pull { margin: 40px 0 32px; }
}

/* ---------- Page transitions: the new page wipes in along the 67 degree edge ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-wipe 520ms var(--ease-in-out) both; }
@keyframes vt-wipe {
  from { clip-path: polygon(0 0, 0 0, -43vh 100%, -43vh 100%); }
  to { clip-path: polygon(0 0, calc(100% + 43vh) 0, 100% 100%, -43vh 100%); }
}
@supports not (view-transition-name: none) {
  body { animation: page-fade 240ms var(--ease-out) both; }
  @keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Reduced motion: everything is simply present ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-rise]:not(.in), html.js .cut:not(.in) .cut-in, html.js .draw:not(.in) .record tbody tr { opacity: 1; transform: none; }
  html.js .draw:not(.in) .icon *, .rail-icons .icon:not(.on) * { stroke-dashoffset: 0; }
  html.js .draw:not(.in) .head.wipe-h { clip-path: none; }
  html.js .flip::after { display: none; }
  html.js .draw:not(.in) .num { transform: none; }
  html.js .draw:not(.in) .num b { opacity: 1; }
  .rail-nums .num { transform: none; }
  .stage::after, .name .n1::after { transform: none; }
}

/* Reading pages */
.legal-prose { padding-top: 64px; }
.legal-prose h2 { margin: 1.2em 0 0.4em; font-size: var(--t-lead); }
.legal-prose h2 + p { margin-top: 0; }