/* ==========================================================================
   Başak Uğur Önem · portfolio · design system
   Sections 1 to 10 are the static system and are the reduced-motion state.
   Section 11 holds all motion, scoped to html.motion (set only when the
   visitor has not asked for reduced motion).
   Rule: pure white is never used. Light page is warm paper #F4EFE6, dark page is warm ink #1A1816.
   ========================================================================== */

/* 1 · TOKENS --------------------------------------------------------------- */
:root {
  /* surfaces */
  --bg: #F4EFE6;          /* page: warm paper */
  --tile: #ECE5D8;        /* bento tiles, media placeholders */
  --card: #FAF6EE;        /* raised cards, pills, diagram nodes */
  --lane: #EEE8DC;        /* diagram lane bands */
  /* lines */
  --line: #E2D9C9;
  --line-strong: #CFC4B1;
  /* text */
  --ink: #1C1915;
  --muted: #675F53;
  --strike: rgba(150, 138, 120, .6);
  --red: #D64545;
  --red-text: #BF3434;
  --dg-line: rgba(22, 23, 28, .6);

  /* accent palette */
  --orange: #FF730F;  --orange-text: #AD4800;   /* passes 4.5:1 on --tile and --lane too */
  --green:  #54F77C;  --green-text:  #0E7A2E;
  --violet: #E68CFF;  --violet-text: #9A2FBF;
  --blue:   #4D7AFF;  --blue-text:   #2F5BE0;   /* #4D7AFF keeps ink on a blue fill above 4.5:1 */
  --yellow: #FFE74B;  --yellow-text: #776700;

  /* current accent (site default is blue; a project scope overrides it) */
  --accent: var(--blue);
  --accent-text: var(--blue-text);
  --on-accent: #16171C;   /* text on an accent fill is always ink */
  --wash: 24%;
  --wash-hover: 42%;

  /* type */
  --sans: "Inter", system-ui, sans-serif;
  --tight: "Inter Tight", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", "Cormorant", Georgia, serif;

  /* motion tokens (section 11) */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 200ms;
  --t-mid: 400ms;
  --t-base: 300ms;
  --t-enter: 500ms;
  --t-slow: 600ms;

  /* layout */
  --col-home: 560px;
  --col-read: 720px;
  --col-text: 560px;
  --col-wide: 1040px;
  --col-max: 1120px;
  --section: 120px;
  /* grid (session 8): one 12-column system for every case page */
  --grid-cols: 12;
  --grid-gutter: 24px;
  --grid-max: var(--col-wide);
  --grid-margin: 32px;
  --shadow-float: 0 12px 32px rgba(22, 23, 28, .12);

  /* shape */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* mono caps labels: three sizes, one tracking */
  --mono-xs: 10px; --mono-s: 11px; --mono-m: 12px;
  --caps: .06em;

  /* spacing for one-off gaps between blocks (replaces inline margins) */
  --sp-xs: 12px; --sp-s: 16px; --sp-m: 24px; --sp-l: 40px; --sp-xl: 56px; --sp-2xl: 72px;

  /* night: dark cards that stay dark in both themes (hero mock, story book, banner) */
  --night: #16171C;
  --night-2: #1F1F21;
  --night-line: #2C2C31;
  --night-line-2: #3B3B42;
  --night-ink: #EDEDF2;
  --night-muted: #A3A5B3;

  /* funnel tier tints (lighter in dark mode so ink text keeps 4.5:1) */
  --tier-2: 26%; --tier-3: 44%;
}

:root[data-theme="dark"] {
  --bg: #1A1816;
  --tile: #23201C;
  --card: #211E1A;
  --lane: #1F1C18;
  --line: #322D27;
  --line-strong: #443D35;
  --ink: #EFEAE1;
  --muted: #ADA597;
  --red-text: #F08080;
  --dg-line: rgba(237, 237, 242, .6);
  --orange-text: #FF8A3A;
  --green-text: #54F77C;
  --violet-text: #E68CFF;
  --blue-text: #7F9DFF;
  --yellow-text: #FFE74B;
  --wash: 30%;
  --wash-hover: 34%;
  --tier-2: 22%; --tier-3: 34%;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, .45);
}

/* Project scopes: put data-project on <html>, <body> or any element. */
[data-project="quote-to-cash"] { --accent: var(--blue);   --accent-text: var(--blue-text); }
[data-project="navispay"]      { --accent: #00D8B5; --accent-text: #00747C; }   /* NavisPay teal; the dark teal carries small text on the light page */
[data-theme="dark"] [data-project="navispay"], [data-theme="dark"][data-project="navispay"] { --accent-text: #00D8B5; }
[data-project="invnex"]        { --accent: var(--green);  --accent-text: var(--green-text); }
[data-project="multract"]      { --accent: var(--violet); --accent-text: var(--violet-text); }
[data-project="whitepaper-iq"] { --accent: var(--yellow); --accent-text: var(--yellow-text); }

/* 2 · BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.case { font-size: 16px; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--tight); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
table { border-collapse: collapse; width: 100%; }
:focus { outline: none; }
:focus-visible, .is-focus { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-xs); }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* 3 · TYPE HELPERS --------------------------------------------------------- */
.mono, .label {
  font: 400 var(--mono-m)/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: var(--caps);
}
.label { color: var(--muted); display: block; }
.label .n { color: var(--accent-text); }
.muted { color: var(--muted); }
.ink { color: var(--ink); }
.accent-text { color: var(--accent-text); }
.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); vertical-align: middle; margin-right: 8px;
}
.key { font-family: var(--mono); font-size: .86em; color: var(--muted); }
.placeholder { font-family: var(--mono); font-size: .86em; letter-spacing: .02em; color: var(--muted); }
.pullquote { font: italic 400 28px/1.3 var(--serif); letter-spacing: 0; margin: 0; }
.mock-label { font: 400 var(--mono-xs)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); display: block; margin-top: 10px; }

/* icons (Lucide paths injected by site.js, 1.5px stroke) */
.icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; flex: none; }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 13px; height: 13px; vertical-align: -2px; }

/* wash: a highlighter mark behind a word */
.wash {
  background: color-mix(in srgb, var(--accent) var(--wash), transparent);
  color: var(--ink);
  border-radius: 2px;
  padding: 0 3px;
}
a.wash { text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* links in running text need more than colour */
a.wash:hover, a.wash.is-hover { background: color-mix(in srgb, var(--accent) var(--wash-hover), transparent); }

/* pills, chips, plain links */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 4px 10px;
  font-size: 12px; line-height: 1.4;
}
.chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 2px 9px;
  font: 400 var(--mono-s)/1.5 var(--mono); text-transform: uppercase; letter-spacing: var(--caps);
  color: var(--muted); background: transparent;
  position: relative;
}
.chip:hover, .chip.is-hover { color: var(--ink); border-color: var(--ink); }
.chip-id { border-radius: var(--r-sm); padding: 1px 6px; color: var(--ink); }
.chip-accent { border-color: var(--accent); background: color-mix(in srgb, var(--accent) var(--wash), transparent); color: var(--ink); }
.chip-stop { border-color: var(--red-text); color: var(--red-text); }
.chip.is-target { outline: 2px solid var(--accent); outline-offset: 2px; }
/* active filter chip: a hand-drawn circle in the accent */
.chip[aria-pressed="true"] { color: var(--ink); border-color: transparent; }
.chip .ring { display: none; position: absolute; inset: -5px -7px; width: calc(100% + 14px); height: calc(100% + 10px); overflow: visible; pointer-events: none; }
.chip[aria-pressed="true"] .ring { display: block; }
.chip .ring path { fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; }

.link { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.link:hover, .link.is-hover { text-decoration-color: var(--ink); }

.hr-dashed { border: 0; border-top: 1px dashed var(--line-strong); margin: 0; }
.hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* media placeholder: shows the file name it is waiting for */
.ph {
  background: var(--tile);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px;
  font: 400 var(--mono-xs)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps);
  color: var(--muted);
  overflow: hidden;
}
.ph::before { content: attr(data-file); overflow-wrap: anywhere; }

/* buttons */
.btn-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.btn-back:hover, .btn-back.is-hover { color: var(--ink); }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 6px 14px; font-size: 13px; background: var(--card);
}
.btn:hover, .btn.is-hover { border-color: var(--ink); }
.btn[disabled] { color: var(--muted); cursor: default; border-color: var(--line); }
.btn-text { font: 400 var(--mono-m)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.btn-text:hover { color: var(--ink); }

.theme-toggle {           /* two options side by side, a thumb slides under the active one */
  position: relative; width: 62px; height: 32px; padding: 2px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--muted);
}
.theme-toggle::before { content: ""; position: absolute; left: 2px; top: 2px; width: 28px; height: 26px; border-radius: 999px; background: var(--ink); transition: translate 280ms var(--ease); }
[data-theme="dark"] .theme-toggle::before { translate: 28px 0; }
.theme-toggle .icon { position: relative; z-index: 1; width: 28px; height: 15px; display: inline-flex; justify-content: center; transition: color 200ms var(--ease); }
.theme-toggle .icon svg { width: 15px; height: 15px; }
.theme-toggle .i-sun, [data-theme="dark"] .theme-toggle .i-moon { color: var(--bg); }
[data-theme="dark"] .theme-toggle .i-sun { color: var(--muted); }
.theme-toggle:hover { border-color: var(--ink); }

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 2px; background: var(--card); }
.seg button { padding: 4px 12px; border-radius: var(--r-pill); font-size: 13px; color: var(--muted); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ink); color: var(--bg); }

/* 4 · HOME ----------------------------------------------------------------- */
.home { max-width: var(--col-home); margin: 0 auto; padding: 160px 20px 72px; }
.home-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
.portrait { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.intro p { margin: 0; }
.intro .hello { color: var(--ink); }
.cities s { text-decoration: none; position: relative; color: var(--muted); }
.cities s::after { content: ""; position: absolute; left: -1px; right: -1px; top: 54%; height: 1px; background: var(--strike); transform-origin: left center; }
.cities .now { color: var(--ink); }
.bio { margin-top: 24px; color: var(--muted); }
.bio .draft { margin-bottom: 8px; }

/* hover media trigger: italic word with a dotted underline */
.hm {
  font-style: italic; color: inherit;
  text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: 3px;
  cursor: default;
}
a.hm { cursor: pointer; }
.hm:hover, .hm.is-hover, .hm[aria-expanded="true"] { color: var(--ink); }
.hm-card {
  width: 160px; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-float);   /* the one allowed shadow */
}
.hm-card .ph, .hm-card img, .hm-card video { display: flex; width: 100%; height: 100%; object-fit: cover; }
.hm-card.is-floating { position: fixed; z-index: 50; pointer-events: none; left: 0; top: 0; transform-origin: 0 0; }
.hm-card.is-specimen { display: block; }
.hm-card.is-inline { display: block; margin: 10px 0 4px; box-shadow: none; }

.home .hr-dashed { margin: 40px 0 48px; }

/* bento */
.bento {
  display: grid; gap: 12px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 300px 220px 168px auto;
  grid-template-areas:
    "w w w w w w"
    "o o o o a a"
    "r r r b b b"
    "c c c c c c";
}
.bento .tile { aspect-ratio: auto; }
.tile-w { grid-area: w; } .tile-o { grid-area: o; } .tile-a { grid-area: a; }
.tile-r { grid-area: r; } .tile-b { grid-area: b; } .tile-c { grid-area: c; }
.tile-a .tile-body { padding: 14px; }
.tile-a .stack { width: 88%; aspect-ratio: 1; }
.tile-a .stack .paper { padding: 10px; }
.tile-r .spines { left: 16px; right: 44px; height: 58%; }
.tile-r .spines i { width: 8%; }
.tile-c .tile-body { position: static; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 44px 20px 16px; }
.tile-c .tile-links { margin: 0; padding: 0; flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
.tile {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--ink);
}
.tile:hover, .tile.is-hover { border-color: var(--line-strong); }
.tile:focus-visible, .tile.is-focus { border-radius: var(--r-lg); }
.tile-key { position: absolute; right: 12px; bottom: 10px; font: 400 var(--mono-s)/1 var(--mono); color: var(--muted); z-index: 3; }
.tile-pill { position: absolute; left: 12px; bottom: 12px; z-index: 3; }
.tile-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-body { position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; }
.tile-title { font-size: 15px; }
.tile-sub { font-size: 13px; color: var(--muted); }
.tile-w .slide { opacity: 0; }
.tile-w .slide.is-current { opacity: 1; }
.tile--media .tile-key { color: var(--ink); background: var(--card); border-radius: var(--r-xs); padding: 3px 4px; right: 10px; bottom: 12px; }

/* A · paper stack */
.stack { position: relative; margin: auto; width: 72%; aspect-ratio: 4 / 3; }
.stack .paper {
  position: absolute; inset: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px;
}
.stack .paper:nth-child(1) { translate: 8px 8px; }
.stack .paper:nth-child(2) { translate: 4px 4px; }
.stack .paper .label { font-size: var(--mono-xs); margin-bottom: 6px; }
.stack .paper p { font-size: 13px; line-height: 1.4; }

/* R · book spines */
.spines { position: absolute; left: 16px; right: 40px; bottom: 0; height: 46%; display: flex; align-items: flex-end; gap: 3px; }
.spines i { display: block; margin-bottom: -6px; width: 11%; border-radius: 2px 2px 0 0; border: 1px solid var(--line-strong); border-bottom: 0; background: var(--card); }
.spines i:nth-child(1) { height: 86%; background: color-mix(in srgb, var(--blue) 55%, var(--card)); }
.spines i:nth-child(2) { height: 100%; }
.spines i:nth-child(3) { height: 74%; background: color-mix(in srgb, var(--orange) 55%, var(--card)); }
.spines i:nth-child(4) { height: 92%; background: var(--ink); border-color: var(--ink); }
.spines i:nth-child(5) { height: 80%; background: color-mix(in srgb, var(--violet) 55%, var(--card)); }
.spines i:nth-child(6) { height: 96%; }
.spines i:nth-child(7) { height: 70%; background: color-mix(in srgb, var(--yellow) 60%, var(--card)); }

/* B · writing: two sheets wait below the edge and peek out on hover */
.sheets i { position: absolute; right: 44px; bottom: -64px; width: 58px; height: 74px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line-strong); rotate: -7deg; }
.sheets i + i { right: 30px; rotate: 5deg; }
.tile-b:hover .sheets i, .tile-b:focus-visible .sheets i, .tile-b.is-hover .sheets i { translate: 0 -34px; }
.tile-b:hover .sheets i + i, .tile-b:focus-visible .sheets i + i, .tile-b.is-hover .sheets i + i { translate: 0 -26px; }
.tile-b:hover .arrow, .tile-b:focus-visible .arrow, .tile-b.is-hover .arrow { translate: 2px -2px; }
/* A · the stack fans out slightly on hover */
.tile-a:hover .paper:nth-child(1), .tile-a:focus-visible .paper:nth-child(1) { rotate: 5deg; translate: 13px 8px; }
.tile-a:hover .paper:nth-child(2), .tile-a:focus-visible .paper:nth-child(2) { rotate: 2.5deg; translate: 7px 4px; }
.tile-a:hover .paper:nth-child(3), .tile-a:focus-visible .paper:nth-child(3) { rotate: -1.5deg; }
.tile .arrow { display: inline-block; }
/* C · contact */
.tile-links { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 13px; padding-right: 24px; }

.footer { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--muted); }
.footer a:hover { color: var(--ink); }

/* 5 · INDEX PAGES (work, reading) ------------------------------------------ */
.split { max-width: var(--col-max); margin: 0 auto; padding: 72px 32px 96px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.side { position: sticky; top: 72px; }
.side .btn-back { margin-bottom: 28px; }
.mini-tile { width: 88px; height: 88px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--tile); overflow: hidden; position: relative; }
.mini-tile .ph, .mini-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini-tile .spines { left: 10px; right: 10px; height: 60%; }
.side-title { margin: 16px 0 6px; font: 400 15px/1.4 var(--sans); letter-spacing: 0; }
.side-intro { font-size: 14px; color: var(--muted); max-width: 26ch; }
.side-row { display: flex; justify-content: space-between; align-items: flex-start; }

.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.work-card { display: block; }
.work-card-img { aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.work-card-img .ph, .work-card-img img { width: 100%; height: 100%; object-fit: cover; }
.work-card:hover .work-card-img, .work-card.is-hover .work-card-img { border-color: var(--line-strong); }
.work-card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; }
.work-card-title { font: 500 15px/1.4 var(--sans); letter-spacing: 0; }
.work-card-title .icon { color: var(--muted); margin-left: 4px; }
.work-card-year { font: 400 var(--mono-m)/1.4 var(--mono); color: var(--muted); }
.work-card-line { font-size: 14px; color: var(--muted); margin: 2px 0 0; }

/* reading */
.group { margin-bottom: 72px; }
.group > .label { margin-bottom: 20px; }
.book-wide { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.book-wide:last-child { border-bottom: 1px solid var(--line); }
.cover { aspect-ratio: 2 / 3; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.cover .ph, .cover img { width: 100%; height: 100%; object-fit: cover; }
.book-title { font: 500 15px/1.4 var(--sans); letter-spacing: 0; }
.book-author { font-size: 14px; color: var(--muted); margin: 0; }
.book-note { font-size: 14px; margin: 8px 0 0; }
.progress { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.progress-bar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--accent); }
.progress .mono { color: var(--accent-text); white-space: nowrap; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.book-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 20px; }
.book-card[hidden] { display: none; }
.book-card .cover { margin-bottom: 12px; }
.book-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.next-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.next-list li:last-child { border-bottom: 1px solid var(--line); }
.next-list .mono { color: var(--muted); }

/* how I work: colour-card accordion in the brand palette (solid fills).
   Static (no JS, reduced motion): five open cards in a list. Live: one open card, slim bars for the rest.
   Text on every card is ink (#16171C) in both themes: 4.5:1 on blue, 6.6:1 on orange, higher on the rest. */
.hw { display: flex; flex-direction: column; gap: 8px; max-width: var(--col-read); }
.hw-card { display: flex; flex-direction: column; padding: 0 22px; border: 1px solid rgba(22, 23, 28, .12); border-radius: var(--r-lg); background: var(--hw, var(--card)); color: var(--on-accent); overflow: hidden; }
.hw-h { margin: 0; }
.hw-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 56px; padding: 14px 0; text-align: left; color: inherit; }
.hw-head:focus-visible, .hw-card a:focus-visible { outline-color: var(--on-accent); }
.hw-t { min-width: 0; font: 700 30px/1.1 var(--tight); letter-spacing: -.03em; }
.hw-n { flex: none; font: 500 var(--mono-m)/1 var(--mono); letter-spacing: var(--caps); }
.hw-body { padding: 4px 0 22px; display: flex; flex-direction: column; gap: 16px; }
.hw-body p { margin: 0; max-width: 52ch; }
.hw-link { padding-top: 14px; border-top: 1px solid rgba(22, 23, 28, .2); font-size: 14px; }
.hw-link .dot { background: var(--on-accent); }
.hw-link .link { text-decoration-color: rgba(22, 23, 28, .45); }
.hw-link .link:hover { text-decoration-color: var(--on-accent); }
/* live accordion */
.hw.is-live .hw-card { position: relative; }
.hw.is-live .hw-card:not(.is-open) .hw-t { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw.is-live .hw-card .hw-body { margin-top: auto; }
.hw.is-live .hw-card:not(.is-open) .hw-body { opacity: 0; }
.motion .hw.is-live .hw-card { transition: height 650ms cubic-bezier(.7, 0, .2, 1), opacity var(--t-base) var(--ease); }
.motion .hw.is-live .hw-t { transition: font-size 650ms cubic-bezier(.7, 0, .2, 1); }
.motion .hw.is-live .hw-body { transition: opacity var(--t-base) var(--ease); }
.motion .hw.is-live .is-open .hw-body { transition-delay: 350ms; }
.hw.is-live .hw-card.is-pre { opacity: 0; }
.hw.is-measuring .hw-card, .hw.is-measuring .hw-card * { transition: none !important; }
.mini-tile .stack { position: absolute; inset: 16px 22px 22px 14px; width: auto; margin: 0; aspect-ratio: auto; }
.mini-tile .stack .paper { padding: 6px 7px; }
.mini-tile .stack .label { font-size: 8px; margin: 0; }

/* 6 · CASE STUDY SHELL ----------------------------------------------------- */
.strip { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); font: 400 var(--mono-s)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); }
.strip b { font-weight: 400; color: var(--ink); }
.case-back { display: flex; align-items: center; gap: 14px; }
.case-back .mini-tile { width: 40px; height: 40px; border-radius: var(--r-md); }
.read { max-width: var(--col-read); margin-inline: auto; }
.text-col { max-width: var(--col-text); }
.wide { max-width: var(--col-wide); margin-inline: auto; }
.section { margin-block: var(--section); }

/* M13 · hero, meta strip, chapter index, rail */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-weight: 600; font-size: clamp(40px, 6vw, 72px); line-height: 1; margin: 16px 0 20px; }
.hero h1 span { display: block; }
.hero h1 .l2 { color: var(--accent-text); }
.hero .sub { color: var(--muted); margin-bottom: 8px; }
.hero-mock { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.hero-mock .ph { width: 100%; height: 100%; }
.meta { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); margin-top: 48px; font: 400 var(--mono-s)/1.5 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); }
.meta > div { padding: 14px 16px; border-left: 1px solid var(--line); }
.meta > div:first-child { border-left: 0; padding-left: 0; }
.meta dt { color: var(--muted); }
.meta dd { margin: 2px 0 0; }
.cindex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.cindex h3 { font: 400 var(--mono-m)/1.4 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); }
.cindex a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cindex a .num { font: 400 var(--mono-m)/1.8 var(--mono); color: var(--muted); }
.cindex a .id { font: 400 var(--mono-m)/1 var(--mono); color: var(--muted); margin-right: 6px; }
.cindex a .arr { display: inline-block; opacity: 0; margin-left: 2px; }
.cindex a:hover .arr, .cindex a:focus-visible .arr, .cindex a.is-hover .arr { opacity: 1; translate: 4px 0; }
.cindex a:hover .num, .cindex a.is-hover .num { color: var(--accent-text); }
.rail { display: inline-flex; flex-direction: column; gap: 14px; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); }
.rail.is-fixed { position: fixed; right: 16px; top: 50%; translate: 0 -50%; z-index: 20; opacity: 0; visibility: hidden; }
.rail.is-fixed.is-on { opacity: 1; visibility: visible; }
.rail-top { position: fixed; top: 10px; left: 50%; translate: -50% 0; z-index: 20; display: none; flex-direction: column; align-items: center; gap: 6px; max-width: calc(100vw - 24px); }
.rail-top .rail-pill { white-space: nowrap; max-width: 100%; overflow: hidden; }
.rail-menu { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px; min-width: 220px; }
.rail-menu[hidden] { display: none; }
.rail-menu a { display: block; padding: 7px 10px; font-size: 13px; border-radius: var(--r-sm); }
.rail-menu a[aria-current="true"] { background: color-mix(in srgb, var(--accent) var(--wash), transparent); }
[id] { scroll-margin-top: 56px; }
.rail-group { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.rail-group .mono { font-size: var(--mono-xs); color: var(--muted); }
.rail a { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--muted); display: block; }
.rail a[aria-current="true"] { background: var(--accent); border-color: var(--ink); width: 9px; height: 9px; }
.rail-pill { display: inline-flex; align-items: center; gap: 8px; }
.rail-pill .dot { margin: 0; }

/* M14 · opening and TL;DR */
.opening { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
.opening-lede { font: 600 clamp(28px, 3.4vw, 38px)/1.2 var(--tight); letter-spacing: -.03em; margin: 16px 0 28px; }
.opening-lede span { color: var(--muted); }
.tldr { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; font-size: 14px; }
.tldr .label { margin-bottom: 10px; }
.tldr .hr { margin: 20px 0; }
.tldr-results li { display: flex; gap: 8px; padding: 3px 0; }
.tldr-results li::before { content: "▸"; color: var(--accent-text); }
.status { margin-top: 20px; }
.status .live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); }

/* M15 · strategy map */
.block-head { margin-bottom: 32px; }
.block-head h2 { font-size: 32px; margin-top: 12px; }
.block-head p { color: var(--muted); margin-top: 10px; max-width: var(--col-text); }
.smap-head, .smap-row { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; align-items: start; }
.smap-head { padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); }
.smap-row { padding: 20px 8px; margin-inline: -8px; border-bottom: 1px solid var(--line); border-radius: var(--r-sm); }
.smap-row:hover, .smap-row.is-hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.smap-gutter { position: relative; height: 1.65em; }
.smap-gutter::before { content: ""; position: absolute; left: 4px; right: 6px; top: 50%; height: 1px; background: var(--accent-text); transform-origin: left center; }
.smap-gutter::after { content: ""; position: absolute; right: 6px; top: 50%; width: 5px; height: 5px; border-top: 1px solid var(--accent-text); border-right: 1px solid var(--accent-text); translate: 0 -50%; rotate: 45deg; }
.smap-ev { color: var(--muted); }
.smap-ev .mono { display: block; margin-top: 8px; font-size: var(--mono-xs); }
.smap-in { font-weight: 600; }
.smap-row .chip { margin-right: 6px; vertical-align: 2px; }

/* M16 · decision cards */
.dcards { display: flex; flex-direction: column; gap: 16px; }
.dcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; }
.dcard h3 { font-size: 22px; margin: 10px 0 16px; }
.dcard .label .chip { margin-left: 6px; }
.dcard-toggle { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; gap: 16px; }
.dcard-toggle .icon { margin-top: 4px; color: var(--muted); }
.dcard.is-open .dcard-toggle .icon { rotate: 180deg; }
.dcard .label { margin-bottom: 6px; }
.dcard-more { margin-top: 20px; border-top: 1px solid var(--line); }
.dcard-more[hidden] { display: none; }
.dcard-more > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dcard-more > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dcard-more dt { font: 400 var(--mono-s)/1.5 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }
.dcard-more dd { margin: 0; }
.dcard-crop { align-self: start; }
.dcard-crop .ph { aspect-ratio: 4 / 3; border-radius: var(--r-md); border: 1px solid var(--line); }
.dcard.is-open .dcard-crop .ph { outline: 1.5px solid var(--accent); outline-offset: -8px; }
.tip { position: relative; }
.tip[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5;
  width: 220px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--bg);
  font: 400 12px/1.4 var(--sans); text-transform: none; letter-spacing: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after, .tip.is-hover::after { opacity: 1; visibility: visible; }

/* M3 · broken-process log */
.log { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 14px; overflow: hidden; }
.log-head { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.log li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.log li:last-child { border-bottom: 0; }
.log .n { font: 400 var(--mono-m)/1 var(--mono); color: var(--muted); }
.log .fail { font: 400 var(--mono-m)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--red-text); text-align: right; }

/* M4 · evidence cards */
.ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ev { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; font-size: 14px; }
.ev:hover, .ev.is-hover { border-color: var(--line-strong); }
.ev:hover .src, .ev.is-hover .src { text-decoration: underline; text-underline-offset: 3px; }
.ev-num { font: 700 44px/1.1 var(--tight); letter-spacing: -.03em; margin: 14px 0 10px; }
.ev p { color: var(--muted); margin-bottom: 6px; }
.ev .src { font: 400 var(--mono-xs)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }
.ev .so { color: var(--ink); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* M6 · choices funnel */
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.funnel { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 24px; }
.funnel button { height: 48px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; border: 1px solid transparent; }
.funnel button:nth-child(1) { width: 100%; background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.funnel button:nth-child(2) { width: 68%;  background: color-mix(in srgb, var(--accent) var(--tier-2), var(--card)); }
.funnel button:nth-child(3) { width: 40%;  background: color-mix(in srgb, var(--accent) var(--tier-3), var(--card)); }
.funnel button[aria-pressed="true"] { border-color: var(--ink); }
.acc { margin-top: 20px; border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item[hidden] { display: none; }
.acc-btn { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; width: 100%; padding: 14px 0; align-items: baseline; }
.acc-btn .n { font: 400 var(--mono-m)/1 var(--mono); color: var(--accent-text); }
.acc-btn .icon { color: var(--muted); align-self: center; }
.acc-btn[aria-expanded="true"] .icon { rotate: 180deg; }
.acc-panel { padding: 0 0 16px 40px; color: var(--muted); font-size: 14px; max-width: 60ch; }
.acc-panel[hidden] { display: none; }

/* M7 · zoom ladder */
.ladder { position: relative; padding-left: 28px; display: flex; flex-direction: column; gap: 12px; }
.ladder::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.ladder-dot { position: absolute; left: 3px; top: 24px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); }
.ladder-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; font-size: 14px; }
.ladder-card:nth-of-type(2) { margin-left: 40px; }
.ladder-card:nth-of-type(3) { margin-left: 80px; }
.ladder-card.is-active { border-color: var(--accent-text); outline: 1px solid var(--accent-text); outline-offset: -2px; }
.ladder-card p { margin-top: 6px; color: var(--muted); }

/* M8 · decision story stepper */
.stepper-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.stepper-chips button { border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 4px 12px; font-size: 13px; color: var(--muted); }
.stepper-chips button[aria-selected="true"] { border-color: var(--ink); color: var(--ink); }
.stepper-main { display: grid; grid-template-columns: 180px 1fr; gap: 24px; }
.stepper-steps { display: flex; flex-direction: column; gap: 4px; }
.stepper-steps button { display: flex; gap: 10px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 14px; color: var(--muted); width: 100%; }
.stepper-steps button .n { font: 400 var(--mono-m)/1.8 var(--mono); }
.stepper-steps button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.stepper-panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; min-height: 200px; font-size: 14px; }
.stepper-panel[hidden] { display: none; }
.stepper-panel h4 { font-size: 20px; margin: 8px 0 10px; }
.stepper-panel .ph { aspect-ratio: 16 / 9; border-radius: var(--r-sm); border: 1px solid var(--line); margin-top: 12px; }
.stepper-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 16px; }
.stepper-dots { display: flex; gap: 6px; }
.stepper-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); }
.stepper-dots i.is-active { width: 20px; background: var(--accent); outline: 1px solid var(--ink); }
.stepper-nav { display: flex; gap: 8px; }

/* M10 · object model table */
.om th { text-align: left; font: 400 var(--mono-m)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); padding: 0 16px 10px 0; border-bottom: 1px solid var(--line-strong); }
.om td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
.om td:first-child { font-weight: 600; white-space: nowrap; }
.om .chain { font: 400 var(--mono-m)/1.7 var(--mono); }
.om tr:hover td, .om tr.is-hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* 7 · DIAGRAM KIT (inline SVG) --------------------------------------------- */
.fig { margin: 0; }
.fig > .label { margin-bottom: 12px; }
.fig figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); max-width: var(--col-text); }
.dg.is-tree { max-width: 620px; }
.dg { width: 100%; max-width: 720px; height: auto; overflow: visible; }  /* 1 viewBox unit = 1px at most, so labels stay at 13px */
.dg text { font: 400 13px var(--sans); fill: var(--ink); }
.dg .dg-sub { font: 400 var(--mono-xs) var(--mono); letter-spacing: var(--caps); text-transform: uppercase; fill: var(--muted); }
.dg .dg-lane-label { font: 400 var(--mono-xs) var(--mono); letter-spacing: var(--caps); text-transform: uppercase; fill: var(--muted); }
.dg .dg-edge-label { font: 400 var(--mono-xs) var(--mono); letter-spacing: var(--caps); text-transform: uppercase; fill: var(--muted); }
.dg .dg-lane { fill: var(--lane); }
.dg .dg-node { fill: var(--card); stroke: var(--line-strong); stroke-width: 1; }
.dg .dg-system { stroke-dasharray: 4 3; stroke: var(--muted); }
.dg .dg-accent { fill: var(--accent); stroke: var(--ink); }
.dg .dg-accent + text, .dg text.on-accent { fill: var(--on-accent); font-weight: 500; }
.dg .dg-gate { fill: color-mix(in srgb, var(--accent) 22%, var(--card)); stroke: var(--accent-text); }
.dg .dg-safe { fill: color-mix(in srgb, var(--green) 22%, var(--card)); stroke: var(--green-text); }
.dg .dg-stop { stroke: var(--red-text); stroke-width: 1.5; }
.dg .dg-line { fill: none; stroke: var(--dg-line); stroke-width: 1; }
.dg .dg-line.is-main { stroke: var(--accent-text); stroke-width: 1.5; }
.dg .dg-dot { fill: var(--ink); }
.dg .dg-end { fill: none; stroke: var(--ink); }
.dg .dg-track { fill: none; stroke: none; }
.dg .dg-runner { fill: var(--accent); stroke: var(--ink); stroke-width: 1; opacity: 0; }
.dg [data-node] { outline: none; }
.dg [data-node]:focus-visible > :is(rect, polygon, circle) { stroke: var(--ink); stroke-width: 2.5; }   /* keyboard focus on a diagram node */
.dg.is-hovering [data-node], .dg.is-hovering [data-edge] { opacity: .3; }
.dg.is-hovering .is-lit { opacity: 1; }
.dg .dg-line.is-drawing { marker-end: none; }
.dg-defs { position: absolute; width: 0; height: 0; }
.dg-defs path { fill: none; stroke: var(--dg-line); stroke-width: 1.2; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--line-strong); background: var(--card); }
.legend .l-gate { background: color-mix(in srgb, var(--accent) 22%, var(--card)); border-color: var(--accent-text); }
.legend .l-safe { background: color-mix(in srgb, var(--green) 22%, var(--card)); border-color: var(--green-text); }
.legend .l-stop { border: 1.5px solid var(--red-text); }
.legend .l-system { border-style: dashed; }
.legend .l-decision { rotate: 45deg; width: 11px; height: 11px; border-radius: 1px; }
.lane-tools { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* mobile forms of the diagrams: the same content as nested or ordered lists */
.dg-list { display: none; }
.dg-list.sr-on-desktop { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ia-list details { border-left: 1px solid var(--line-strong); margin-left: 8px; padding-left: 14px; }
.ia-list summary { cursor: pointer; padding: 6px 0; font-weight: 500; }
.ia-list li { padding: 5px 0; }
.ia-list .root { display: inline-block; background: var(--accent); color: var(--on-accent); border: 1px solid var(--ink); border-radius: var(--r-sm); padding: 4px 10px; font-weight: 500; margin-bottom: 8px; }
.flow-list li { position: relative; margin: 0 0 22px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--card); font-size: 14px; }
.flow-list li:not(:last-child)::after { content: "↓"; position: absolute; left: 20px; bottom: -23px; color: var(--muted); font-family: var(--mono); }
.flow-list li.is-decision { border-style: solid; border-radius: 2px; }
.flow-list li.is-system { border-style: dashed; }
.flow-list li.is-safe { background: color-mix(in srgb, var(--green) 22%, var(--card)); border-color: var(--green-text); }
.flow-list li.is-stop { border: 1.5px solid var(--red-text); }
.flow-list li .mono { display: block; font-size: var(--mono-xs); color: var(--muted); }

/* 8 · MOTION PATTERNS P1 to P9 (static final states) ----------------------- */
/* P1 blueprint wordmark */
.blueprint text { font: 700 96px var(--tight); letter-spacing: -.03em; }
.blueprint .bp-outline { fill: none; stroke: var(--ink); stroke-width: 1; }
.blueprint .bp-solid { fill: var(--ink); }
.blueprint .guide { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.blueprint .anchor { fill: var(--card); stroke: var(--accent-text); stroke-width: 1.5; }
.blueprint .guide-label { font: 400 var(--mono-xs) var(--mono); letter-spacing: var(--caps); fill: var(--muted); stroke: none; }

/* P2 live system diagram */
.sysd { display: grid; grid-template-columns: 1fr 48px 1.4fr 48px 1fr; align-items: center; }
.sysd-link { border-top: 1px dashed var(--muted); height: 0; position: relative; }
.sysd-link::after { content: ""; position: absolute; right: -1px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); }
.sysd-device { border: 1px solid var(--line-strong); border-radius: var(--r-xl); padding: 10px; background: var(--card); max-width: 150px; justify-self: end; width: 100%; }
.sysd-device .ph { aspect-ratio: 9 / 14; border-radius: var(--r-md); }
.sysd-panel { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--card); }
.sysd-panel li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); font: 400 var(--mono-s)/1.5 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); }
.sysd-panel li:last-child { border-bottom: 0; }
.sysd-panel .no { color: var(--red-text); }
.sysd-out { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sysd-out .pill.is-lit { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent) var(--wash), var(--card)); }

/* P3 try-it toggle */
.tryit-stage { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; background: var(--bg); display: grid; gap: 8px; }
.tryit-stage[data-mode="chosen"] { grid-template-columns: 1fr; }
.tryit-stage[data-mode="default"] { grid-template-columns: repeat(3, 1fr); }
.tryit-stage > div { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px 12px; background: var(--card); font-size: 13px; }
.tryit-stage[data-mode="chosen"] > div:first-child { border-color: var(--accent-text); }
.tryit .mono { color: var(--muted); display: block; margin-top: 12px; }

/* P4 before and after bars */
.bars { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px 16px; align-items: center; }
.bars .mono { color: var(--muted); }
.bars .val { color: var(--ink); }
.bar { height: 6px; border-radius: 3px; background: var(--line-strong); }
.bar.is-after { background: var(--accent); outline: 1px solid var(--ink); }

/* P5 timeline */
.tl { display: grid; grid-template-columns: 90px 1fr; row-gap: 0; font-size: 13px; }
.tl-axis { grid-column: 2; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; color: var(--muted); }
.tl-actor { padding: 14px 0; color: var(--muted); border-bottom: 1px solid var(--line); }
.tl-lane { position: relative; border-bottom: 1px solid var(--line); background-image: none; }
.tl-lane i { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; translate: -50% -50%; background: var(--ink); }
.tl-lane i.is-accent { background: var(--accent); border: 1px solid var(--ink); }
.tl-lane i::after { content: attr(data-label); position: absolute; left: 14px; top: -5px; white-space: nowrap; font: 400 var(--mono-xs)/1.8 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); font-style: normal; }

/* P6 product in frame */
.stage { position: relative; border-radius: var(--r-xl); overflow: hidden; padding: 56px 32px 0; border: 1px solid var(--line); }
.stripes { position: absolute; inset: -40px; display: flex; gap: 6%; filter: blur(28px) saturate(.6); opacity: .5; }
.stripes i { flex: 1; background: var(--accent); }
.stripes i:nth-child(even) { flex: .6; opacity: .45; }
.frame { position: relative; max-width: 640px; margin: 0 auto; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--card); overflow: hidden; }
.frame-bar { display: flex; gap: 5px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.frame-bar i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-strong); }
.frame .ph { aspect-ratio: 16 / 9; }
.frame--phone { max-width: 220px; border-radius: 28px 28px 0 0; padding: 10px 10px 0; }
.frame--phone .ph { aspect-ratio: 9 / 15; border-radius: var(--r-xl) var(--r-xl) 0 0; }

/* P7 dot-matrix ticker */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding: 14px 0; }
.ticker-line {
  white-space: nowrap; display: inline-block;
  font: 700 20px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Ccircle cx='1.5' cy='1.5' r='1.05'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Ccircle cx='1.5' cy='1.5' r='1.05'/%3E%3C/svg%3E");   /* a dot pattern, not a gradient */
  -webkit-mask-size: 3px 3px; mask-size: 3px 3px;
}

/* P8 meta grid */
.metagrid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); max-width: var(--col-text); }
.metagrid > div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.metagrid dt { font: 400 var(--mono-s)/1.5 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }
.metagrid dd { margin: 2px 0 0; }

/* P9 tools I used */
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tools > div { padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.tools .tool-icon { width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; color: var(--muted); }
.tools b { font-weight: 500; display: block; }
.tools p { color: var(--muted); margin: 2px 0 0; }
.tools .is-note { grid-column: 1 / -1; }

/* cursor tag (live version is built by site.js) */
.cursor-tag { display: inline-block; width: 10px; height: 10px; background: var(--ink); }
.cursor-tag.is-live { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; width: auto; min-width: 10px; max-width: 10px; overflow: hidden; white-space: nowrap; color: transparent; font: 400 var(--mono-s)/14px var(--mono); text-transform: uppercase; letter-spacing: var(--caps); opacity: 0; }
.cursor-tag.is-live.is-on { opacity: 1; }
[data-project] .cursor-tag.is-live { background: var(--accent); }   /* case pages: the square takes the page accent */
.cursor-tag.is-live.is-label { max-width: 280px; height: 20px; }
.cursor-tag.is-label { width: auto; height: auto; padding: 3px 6px; background: var(--accent); color: var(--on-accent); font: 400 var(--mono-s)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); }

/* 9 · STYLE GUIDE PAGE ----------------------------------------------------- */
.guide { max-width: var(--col-max); margin: 0 auto; padding: 72px 32px 120px; }
.guide-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.guide-head h1 { font-size: 40px; margin: 12px 0; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 16px 0; border-block: 1px solid var(--line); }
.guide-toc a { font: 400 var(--mono-s)/1.6 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }
.guide-toc a:hover { color: var(--ink); }
.spec { padding: 72px 0 0; }
.spec-head { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px dashed var(--line-strong); align-items: baseline; }
.spec-head h2 { font: 400 var(--mono-m)/1.4 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; }
.spec-head h2 .n { color: var(--accent-text); }
.spec-head p { color: var(--muted); font-size: 13px; max-width: 70ch; }
.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px; align-items: start; }
.state > .label { margin-bottom: 10px; font-size: var(--mono-xs); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.swatch i { display: block; height: 48px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); margin-bottom: 6px; }
.swatch .mono { font-size: var(--mono-xs); color: var(--muted); display: block; }
.type-row { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.frame-note { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 24px; }
.row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }

/* SPACING UTILITIES (after the components so they win): the only way to add a gap the components don't already have */
.mt-xs { margin-top: var(--sp-xs); } .mt-s { margin-top: var(--sp-s); } .mt-m { margin-top: var(--sp-m); }
.mt-l { margin-top: var(--sp-l); } .mt-xl { margin-top: var(--sp-xl); } .mt-2xl { margin-top: var(--sp-2xl); }
.mb-xs { margin-bottom: var(--sp-xs); } .mb-s { margin-bottom: var(--sp-s); } .mb-0 { margin-bottom: 0; } .m-0 { margin: 0; }
.source { margin-top: var(--sp-xs); font: 400 var(--mono-xs)/1.4 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }

/* 10 · RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --section: 72px; }
  .home { padding-top: 72px; }
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "w w" "o o" "a r" "b b" "c c";
  }
  .tile-w, .tile-o { aspect-ratio: 16 / 10 !important; }
  .tile-a, .tile-r { aspect-ratio: 1 !important; }
  .tile-b { min-height: 120px; }
  .tile-c .tile-body { flex-direction: column; align-items: flex-start; }
  .split { grid-template-columns: 1fr; gap: 40px; padding: 32px 20px 72px; }
  .side { position: static; }
  .side-intro { max-width: none; }
  .work-grid { grid-template-columns: 1fr; }
  .book-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 14px; }
  .guide { padding: 40px 20px 72px; }
  .guide-head { flex-wrap: wrap; }
  .seg { flex-wrap: wrap; border-radius: var(--r-xl); max-width: 100%; }
  .spec-head, .type-row { grid-template-columns: 1fr; gap: 8px; }
  .hero, .opening { grid-template-columns: 1fr; gap: 32px; }
  .meta { grid-template-columns: 1fr 1fr; }
  .meta > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .meta > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cindex { grid-template-columns: 1fr; }
  .ev-grid { grid-template-columns: 1fr; }
  .dcard { grid-template-columns: 1fr; }
  .dcard-crop { display: none; }
  .tip[data-tip]::after { display: none; }   /* no hover on touch, the chip still links to its row */
  .rail.is-fixed { display: none; }
  .rail-top.is-on { display: flex; }
  .dcard-more > div { grid-template-columns: 1fr; gap: 4px; }
  .stepper-main { grid-template-columns: 1fr; }
  .stepper-steps { flex-direction: row; flex-wrap: wrap; }
  .stepper-steps button { width: auto; }
  .tools { grid-template-columns: 1fr; }
  .ladder-card:nth-of-type(2) { margin-left: 16px; }
  .ladder-card:nth-of-type(3) { margin-left: 32px; }
  /* strategy map rows become stacked cards */
  .smap-head { display: none; }
  .smap-row { grid-template-columns: 1fr; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; margin: 0 0 12px; background: var(--card); }
  .smap-gutter { rotate: 90deg; width: 24px; height: 16px; }
  /* diagrams swap to their list form, nothing scrolls sideways */
  .dg-swap > .dg { display: none; }
  .dg-swap > .dg-list, .dg-swap > .dg-list.sr-on-desktop { display: block; position: static; width: auto; height: auto; clip-path: none; overflow: visible; }
  .sysd { grid-template-columns: 1fr; gap: 0; justify-items: start; }
  .sysd-device { justify-self: start; }
  .sysd-link { border-top: 0; border-left: 1px dashed var(--muted); height: 28px; margin-left: 24px; }
  .sysd-link::after { right: auto; left: -4px; top: auto; bottom: -1px; }
  .sysd-panel { width: 100%; }
  .bars { grid-template-columns: 90px 1fr auto; }
  .tl { grid-template-columns: 64px 1fr; }
  .tl-lane i::after { display: none; }
  .stage { padding: 32px 16px 0; }
  /* tables stack into one card per row; site.js copies each header into data-th */
  .om thead { display: none; }
  .om, .om tbody, .om tr, .om td { display: block; width: 100%; }
  .om tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .om td { border: 0; padding: 2px 0; }
  .om td:first-child { white-space: normal; font-size: 15px; margin-bottom: 4px; }
  .om td[data-th]:not(:first-child)::before { content: attr(data-th); display: block; margin-top: 8px; font: 400 var(--mono-xs)/1.5 var(--mono); text-transform: uppercase; letter-spacing: var(--caps); color: var(--muted); }
  .tryit-stage[data-mode="default"] { grid-template-columns: minmax(0, 1fr); }
  .stepper-foot { flex-wrap: wrap; }
  .stepper-nav .btn { white-space: nowrap; }
}
@media (min-width: 861px) {
  .only-mobile { display: none !important; }
}

/* 11 · MOTION ----------------------------------------------------------------
   Everything here needs html.motion. Without it (reduced motion, or no JS) the
   rules above already show each component's final state.
   Durations 200 to var(--t-slow) on the shared ease. Longer only where the brief asks:
   count-up 900ms, blueprint 900ms, and the linear ticker.
   -------------------------------------------------------------------------- */
@keyframes fade-up { from { opacity: 0; translate: 0 12px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes draw-x { from { scale: 0 1; } }
@keyframes pulse { 50% { scale: 1.9; opacity: .35; } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes ring-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes travel { from { translate: -48px 0; opacity: 0; } }
@keyframes travel-y { from { translate: 0 -28px; opacity: 0; } }
@keyframes ticker { to { translate: -50% 0; } }

html.motion { scroll-behavior: smooth; }

/* page-to-page: the W tile shrinks into the mini tile (View Transitions API).
   Browsers without it get the default plain crossfade or a normal load. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .tile-w, .mini-tile[data-vt="w"] { view-transition-name: tile-w; }
  .tile-r, .mini-tile[data-vt="r"] { view-transition-name: tile-r; }
  .tile-a, .mini-tile[data-vt="a"] { view-transition-name: tile-a; }
  ::view-transition-group(*) { animation-duration: 450ms; animation-timing-function: var(--ease); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-base); }
}

/* hover and state changes: color only, 200ms */
.motion :is(.tile, .work-card-img, .chip, .btn, .wash, .btn-back, .theme-toggle, .ev, .smap-row, .hm, .ladder-card, .cover,
  .seg button, .stepper-steps button, .stepper-chips button, .footer a, .link, .funnel button, .rail a, .om td, .cindex .num) {
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), outline-color var(--t-fast) var(--ease), translate var(--t-fast) var(--ease), rotate var(--t-base) var(--ease);
}
.motion .ev:hover { translate: 0 -2px; }
.motion .cindex .arr, .motion .tile .arrow { transition: translate var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.motion .tip[data-tip]::after { transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast); }
.motion :is(.dcard-toggle, .acc-btn) .icon { transition: rotate 250ms var(--ease); }
.motion .rail.is-fixed { transition: opacity var(--t-base) var(--ease), visibility var(--t-base); }
.motion .rail a { transition: background-color var(--t-fast) var(--ease), width var(--t-fast) var(--ease), height var(--t-fast) var(--ease); }

/* H1 · home: column fades up, tiles stagger by 60ms */
.motion .home { animation: fade-up var(--t-enter) var(--ease) backwards; }
.motion .bento .tile { animation: fade-up var(--t-enter) var(--ease) backwards; animation-delay: calc(250ms + var(--i, 0) * 60ms); }
.bento .tile:nth-child(2) { --i: 1; } .bento .tile:nth-child(3) { --i: 2; } .bento .tile:nth-child(4) { --i: 3; }
.bento .tile:nth-child(5) { --i: 4; } .bento .tile:nth-child(6) { --i: 5; }
/* strike lines draw one city at a time (180ms each, 120ms apart), then Nice fades in */
.motion .cities s::after { animation: draw-x 180ms var(--ease) backwards; animation-delay: var(--t-enter); }
.motion .cities s:nth-of-type(2)::after { animation-delay: 800ms; }
.motion .cities s:nth-of-type(3)::after { animation-delay: 1100ms; }
.motion .cities .now { animation: fade var(--t-mid) var(--ease) 1400ms backwards; }
/* W · crossfade between product shots */
.motion .tile-w .slide { transition: opacity var(--t-slow) var(--ease); }
/* A · stack, R · spines, B · sheets */
.motion .stack .paper { transition: rotate var(--t-base) var(--ease), translate var(--t-base) var(--ease); }
.motion .spines i { transition: translate 250ms var(--ease); }
.motion .tile-r:hover .spines i, .motion .tile-r:focus-visible .spines i { translate: 0 -4px; transition-delay: calc(var(--s, 0) * 45ms); }
.spines i:nth-child(2) { --s: 1; } .spines i:nth-child(3) { --s: 2; } .spines i:nth-child(4) { --s: 3; }
.spines i:nth-child(5) { --s: 4; } .spines i:nth-child(6) { --s: 5; } .spines i:nth-child(7) { --s: 6; }
.motion .sheets i { transition: translate var(--t-base) var(--ease); }
.motion .sheets i + i { transition-delay: 60ms; }

/* H3 · cursor tag and hover media */
.motion .cursor-tag.is-live { transition: max-width var(--t-base) var(--ease), height var(--t-fast) var(--ease), padding var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.motion .hm-card.is-floating { opacity: 0; scale: .94; transition: opacity 180ms var(--ease), scale 180ms var(--ease); }
.motion .hm-card.is-floating.is-shown { opacity: 1; scale: 1; }
.motion .hm-card.is-inline { animation: fade-up 180ms var(--ease) backwards; }

/* H2 · work index */
.motion .side { animation: fade var(--t-mid) var(--ease) backwards; }
.motion .work-grid .work-card { animation: fade-up var(--t-enter) var(--ease) backwards; animation-delay: calc(100ms + var(--i, 0) * 60ms); }
.work-card:nth-child(2) { --i: 1; } .work-card:nth-child(3) { --i: 2; } .work-card:nth-child(4) { --i: 3; } .work-card:nth-child(5) { --i: 4; }
.motion .work-card-img > * { transition: scale var(--t-mid) var(--ease); }
.motion .work-card:hover .work-card-img > * { scale: 1.02; }

/* H4 · reading: covers tilt 2 degrees and lift 4px */
.motion :is(.book-card, .book-wide):hover .cover { rotate: 2deg; translate: 0 -4px; }
.motion .chip[aria-pressed="true"] .ring path { stroke-dasharray: 1; animation: ring-draw 350ms var(--ease) backwards; }

/* generic in-view reveal. site.js tags children with .rv and an index --i,
   adds .is-in to the root at 40% in view, then removes .rv when it is done. */
.motion .rv-root:not(.is-in) .rv { opacity: 0; translate: 0 var(--rv-y, 12px); }
.motion .rv-root .rv { transition: opacity var(--t-enter) var(--ease), translate var(--t-enter) var(--ease); }
.motion .rv-root.is-in .rv { transition-delay: calc(var(--rv-base, 0ms) + var(--i, 0) * var(--rv-step, 60ms)); }

/* M13 · headline lines rise 24px, line 2 starts 120ms later */
.hero { --rv-y: 24px; --rv-step: 120ms; }
.motion .hero .rv { transition-duration: var(--t-slow); }
.meta, .cindex { --rv-step: 40ms; --rv-y: 8px; }
.cindex { --rv-base: 160ms; }

/* M14 · card rises 16px after the text, result lines tick in, badge dot pulses twice */
.opening { --rv-step: 90ms; }
.opening .tldr { --rv-y: 16px; }
.motion .opening:not(.is-in) .tldr-results li { color: transparent; }
.motion .opening:not(.is-in) .tldr-results li::before { opacity: 0; }
.motion .tldr-results li { transition: color var(--t-base) var(--ease); transition-delay: calc(700ms + var(--i, 0) * 80ms); }
.motion .tldr-results li::before { transition: opacity var(--t-fast) var(--ease); transition-delay: calc(580ms + var(--i, 0) * 80ms); }
.motion .opening.is-in .status .live { animation: pulse var(--t-slow) var(--ease) 1300ms 2; }

/* M15 · each row plays evidence, line, insight, line, decision. Rows queue in site.js. */
.motion .smap-row:not(.is-in) > div { opacity: 0; translate: 0 8px; }
.motion .smap-row:not(.is-in) .smap-gutter::before { scale: 0 1; }
.motion .smap-row:not(.is-in) .smap-gutter::after { opacity: 0; }
.motion .smap-row > div { transition: opacity var(--t-mid) var(--ease), translate var(--t-mid) var(--ease), background-color var(--t-fast) var(--ease); }
.motion .smap-row .smap-gutter::before { transition: scale var(--t-base) var(--ease) var(--t-fast); }
.motion .smap-row .smap-gutter::after { transition: opacity var(--t-fast) var(--ease) 450ms; }
.motion .smap-row > .smap-in { transition-delay: var(--t-enter); }
.motion .smap-row > .smap-in ~ .smap-gutter::before { transition-delay: 700ms; }
.motion .smap-row > .smap-in ~ .smap-gutter::after { transition-delay: 950ms; }
.motion .smap-row > div:last-child { transition-delay: 1000ms; }

/* M16 · the crop scales from 0.96 and its accent outline appears as the card opens */
.dcards { --rv-step: 70ms; }
.motion .dcard.rv-root .rv { transition-duration: 320ms; }
.dcard { --rv-y: 10px; }
.motion .dcard-crop .ph { outline: 1.5px solid transparent; outline-offset: -8px; transition: scale var(--t-mid) var(--ease), outline-color var(--t-mid) var(--ease) 150ms; }
.motion .dcard:not(.is-open) .dcard-crop .ph { scale: .96; }
.motion .dcard.is-open .dcard-crop .ph { outline-color: var(--accent); }

/* M3 · rows type in 90ms apart, each failure note slides in 200ms after its text, the last one pulses once */
.motion .log:not(.is-in) li > span:nth-child(-n+2) { clip-path: inset(0 100% 0 0); }
.motion .log:not(.is-in) .fail { opacity: 0; translate: 16px 0; }
.motion .log li > span:nth-child(-n+2) { clip-path: inset(0 0 0 0); transition: clip-path 360ms steps(18, end); transition-delay: calc(var(--i, 0) * 90ms); }
.motion .log .fail { transition: opacity var(--t-base) var(--ease), translate var(--t-base) var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 560ms); }
.motion .log.is-in li:last-child .fail { animation: blink var(--t-enter) var(--ease) 1; animation-delay: calc(var(--i, 0) * 90ms + 1000ms); }

/* M4 · cards stagger by 90ms. Numbers count up in site.js (900ms). */
.ev-grid { --rv-step: 90ms; }
/* M6 · tiers draw in from top to bottom */
.motion .funnel:not(.is-in) button { clip-path: inset(0 0 100% 0); opacity: 0; }
.motion .funnel button { clip-path: inset(0 0 0 0); transition: clip-path var(--t-mid) var(--ease), opacity var(--t-base) var(--ease), border-color var(--t-fast) var(--ease); }
.motion .funnel.is-in:not(.is-done) button { transition-delay: calc(var(--i, 0) * 160ms); }
/* M7 · the dot travels down the line as you scroll */
.motion .ladder-dot { transition: top var(--t-mid) var(--ease); }
/* M8 · active dot stretches */
.motion .stepper-dots i { transition: width var(--t-base) var(--ease), background-color var(--t-base) var(--ease); }
/* M10 */
.om { --rv-step: 60ms; --rv-y: 6px; }
/* diagrams: hover dims the rest to 30% */
.motion .dg [data-node], .motion .dg [data-edge] { transition: opacity var(--t-fast) var(--ease); }
.motion .dg[data-draw]:not(.is-in) :is([data-s], [data-branch]), .motion .dg[data-flow]:not(.is-in) :is([data-s], [data-branch]) { opacity: 0; }

/* P1 · blueprint: guides, then outlines draw letter by letter (900ms, 60ms apart), then the solid fades in */
.motion .blueprint:not(.is-in) .bp-guides { opacity: 0; }
.motion .blueprint:not(.is-in) .bp-outline tspan { stroke-dashoffset: 420; }
.motion .blueprint:not(.is-in) .bp-solid { opacity: 0; }
.motion .blueprint .bp-guides { transition: opacity var(--t-mid) var(--ease); }
.motion .blueprint .bp-outline tspan { stroke-dasharray: 420; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease); transition-delay: calc(var(--t-fast) + var(--i, 0) * 60ms); }
.motion .blueprint .bp-solid { transition: opacity var(--t-enter) var(--ease) 1300ms; }

/* P2 · dot travels the dashed link, checks tick 250ms apart, then outcomes light up */
.motion .sysd:not(.is-run) .sysd-panel li span:last-child { opacity: 0; }
.motion .sysd:not(.is-run) .sysd-link::after { opacity: 0; }
.motion .sysd:not(.is-run) .pill.is-lit { border-color: var(--line); background: var(--card); }
.motion .sysd.is-run .sysd-panel li span:last-child { transition: opacity var(--t-fast) var(--ease); transition-delay: calc(var(--t-enter) + var(--i, 0) * 250ms); }
.motion .sysd.is-run .sysd-link::after { animation: travel var(--t-enter) var(--ease) backwards; }
.motion .sysd.is-run .sysd-panel + .sysd-link::after { animation-delay: 1500ms; }
.motion .sysd.is-run .pill { transition: border-color var(--t-base) var(--ease) 2000ms, background-color var(--t-base) var(--ease) 2000ms; }
@media (max-width: 860px) { .motion .sysd.is-run .sysd-link::after { animation-name: travel-y; } }

/* P4 · bars grow from 0 (600ms, 80ms stagger) */
.bar { transform-origin: left center; }
.motion .bars:not(.is-in) .bar { scale: 0 1; }
.motion .bars .bar { transition: scale var(--t-slow) var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
/* P5 · events drop in from left to right */
.motion .tl:not(.is-in) .tl-lane i { opacity: 0; translate: -50% calc(-50% - 10px); }
.motion .tl .tl-lane i { transition: opacity var(--t-base) var(--ease), translate var(--t-base) var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
/* P6 · frames rise 16px */
.motion .stage:not(.is-in) .frame { opacity: 0; translate: 0 16px; }
.motion .stage .frame { transition: opacity var(--t-slow) var(--ease), translate var(--t-slow) var(--ease); }
/* P7 · ticker, 40px per second. Duration is set in site.js from the line width. */
.motion .ticker.is-live .ticker-line { animation: ticker var(--ticker-dur, 30s) linear infinite; }
.motion .ticker.is-live:hover .ticker-line, .motion .ticker.is-paused .ticker-line { animation-play-state: paused; }
/* P8, P9 */
.metagrid, .tools { --rv-step: 60ms; }

/* belt and braces: if the preference flips while the page is open */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* home · city skylines: small ink sketches with one watercolour wash, drawn one after another
   while the old city is struck out. Sits to the right of the intro, under it on narrow screens. */
.intro { position: relative; }
.skyline { position: absolute; right: 0; bottom: -4px; width: 260px; color: var(--ink); pointer-events: none; }
.skyline svg { display: block; width: 100%; height: auto; overflow: visible; }
.sky { opacity: 0; transition: opacity 450ms var(--ease); }
.sky-ink path { fill: none; stroke: currentColor; stroke-width: .95; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sky-ghost { opacity: .22; }
.sky-wash { fill: var(--wash); opacity: 0; transition: opacity 600ms var(--ease); }
.sky.is-drawn { opacity: 1; }
.sky.is-drawn .sky-ink path { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ease) calc(var(--i, 0) * 18ms); }
.sky.is-drawn .sky-ghost path { transition-delay: calc(160ms + var(--i, 0) * 18ms); }
.sky.is-drawn .sky-wash { opacity: .3; transition-delay: 700ms; }
[data-theme="dark"] .sky.is-drawn .sky-wash { opacity: .22; }
.no-anim .sky, .no-anim .sky path, .no-anim .sky-wash { transition: none !important; }
@media (max-width: 600px) { .skyline { position: static; width: 220px; margin-top: 16px; } }
.cities.js-seq s::after { scale: 0 1; transition: scale 260ms var(--ease); }
.cities.js-seq s.is-struck::after { scale: 1 1; }
.motion .cities.js-seq s::after, .motion .cities.js-seq .now { animation: none; }
.cities [data-city] { cursor: default; }

/* hover media · memes and wide images keep their own shape */
.hm-card.is-wide { width: 260px; aspect-ratio: auto; }
.hm-card.is-wide img { height: auto; }

/* hover media · travel: a passport stamp that keeps changing country */
.hm-travel { position: relative; display: grid; place-items: center; width: 180px; background: var(--card); }
.hm-travel .tv-stamp { width: 84%; height: auto; aspect-ratio: 1; object-fit: contain; display: block; }
.tv-n { position: absolute; right: 10px; bottom: 7px; font: 500 9px/1 var(--mono); letter-spacing: .12em; color: var(--muted); }
.motion .tv-stamp.is-in { animation: tv-stamp 300ms var(--ease); }
@keyframes tv-stamp { from { scale: 1.4; opacity: 0; } 60% { scale: .96; opacity: 1; } }

/* R · the books photo, cut out, standing on the tile floor */
.tile-books { position: absolute; left: 14px; bottom: 0; height: 74%; width: auto; max-width: calc(100% - 52px); object-fit: contain; object-position: left bottom; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
.mini-tile .tile-books { left: 50%; translate: -50% 0; height: 78%; max-width: 86%; filter: none; }
.motion .tile-r .tile-books { transition: translate 250ms var(--ease), scale 250ms var(--ease); transform-origin: left bottom; }
.motion .tile-r:hover .tile-books, .motion .tile-r:focus-visible .tile-books { translate: 0 -4px; scale: 1.03; }

/* A · typewriter: "Question everything." types itself on the top sheet, then a pencil underline */
.tw { position: relative; margin-top: 4px; font: 400 19px/1.25 "Special Elite", "Courier New", var(--mono); color: var(--ink); letter-spacing: .01em; }
.tw-text { display: block; }
.tw .ch { display: inline-block; white-space: pre; }
.tw-caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--ink); opacity: 0; }
.tw.is-typing .tw-caret { opacity: .8; }
.tw.is-done .tw-caret { opacity: .8; animation: tw-blink 1s steps(1) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
.tw-under { display: block; width: 78%; height: 10px; margin-top: 2px; overflow: visible; }
.tw-under path { fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tw.is-done .tw-under path { stroke-dashoffset: 0; transition: stroke-dashoffset 650ms var(--ease) 150ms; }
.tw.is-static .tw-under path { stroke-dashoffset: 0; transition: none; }

/* PAPER · a little grain on the page background, every page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .18  0 0 0 0 .15  0 0 0 .9 -.32'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .36;
}
[data-theme="dark"] body::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .2;
}

/* OPENING · home, first visit in a tab: an empty page, the portrait arrives big and settles into
   place, the intro and bio type themselves, then everything else comes in. Any key, click or
   scroll skips to the end. */
html.intro-play .home { animation: none; }
html.intro-play:not(.intro-typing) :is(.intro, .bio) { visibility: hidden; }
html.intro-play:not(.intro-rest) :is(.theme-toggle, .home .hr-dashed, .footer) { opacity: 0; }
html.intro-play:not(.intro-rest) .bento .tile { opacity: 0; animation: none; pointer-events: none; }
html.intro-play:not(.intro-rest) :is(.theme-toggle, .footer) { pointer-events: none; }
html.intro-play:not(.intro-portrait) .portrait { opacity: 0; }
html.intro-play .is-pending { visibility: hidden !important; }
.intro-caret { display: inline-block; width: 1.5px; height: 1.05em; margin: 0 1px; vertical-align: -.16em; background: var(--ink); animation: tw-blink .9s steps(1) infinite; }
html.intro-rest .theme-toggle, html.intro-rest .footer { animation: fade 600ms var(--ease) backwards; }
html.intro-rest .footer { animation-delay: 700ms; }
html.intro-rest .home .hr-dashed { transform-origin: left center; animation: draw-x 700ms var(--ease) backwards; }

/* PAPER · shared paper texture: fine tooth plus faint horizontal fibres */
:root { --paper-tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .19  0 0 0 0 .1  0 0 0 .55 -.18'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.02 .9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .32 -.17'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"); }
[data-theme="dark"] { --paper-tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 .4 -.16'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.02 .9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 .22 -.13'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"); }

/* PAPER · home tiles: matte card stock lying on the page, no gloss */
.bento { position: relative; isolation: isolate; }
.bento .tile {
  background-color: #FBF6EC;
  border: 1px solid rgba(60, 44, 20, .12); border-radius: 10px;
  box-shadow: 0 1px 1px rgba(60, 44, 20, .08), 0 3px 6px -2px rgba(60, 44, 20, .1), 0 12px 22px -14px rgba(60, 44, 20, .28);
}
.bento .tile:hover, .bento .tile.is-hover { border-color: rgba(60, 44, 20, .2); box-shadow: 0 1px 1px rgba(60, 44, 20, .08), 0 5px 10px -3px rgba(60, 44, 20, .14), 0 18px 28px -16px rgba(60, 44, 20, .34); }
[data-theme="dark"] .bento .tile { background-color: #2A2621; border-color: rgba(0, 0, 0, .45); box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 12px 22px -14px rgba(0, 0, 0, .7); }
[data-theme="dark"] .bento .tile:hover { border-color: rgba(255, 240, 215, .14); }
/* photo and video tiles: printed on the same stock, a thin paper border around the picture */
.bento .tile--media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(60, 44, 20, .14); }
.motion .bento .tile { transition: color var(--t-fast) var(--ease), border-color 250ms var(--ease), box-shadow 250ms var(--ease), outline-color var(--t-fast) var(--ease), translate var(--t-fast) var(--ease), rotate var(--t-base) var(--ease); }
.tile-a .stack .paper, .tile-c .tile-links a { background-image: none; }

/* W · work tile: each cover is a short looping video; covers crossfade, bars at the top show timing */
.tile-w { --w-dur: 6000ms; }
.w-progress { position: absolute; left: 14px; right: 14px; top: 12px; z-index: 3; display: flex; gap: 5px; pointer-events: none; }
.w-progress i { position: relative; flex: 1; height: 2.5px; border-radius: 2px; overflow: hidden; background: rgba(255, 253, 248, .28); box-shadow: 0 0 4px rgba(0, 0, 0, .2); }
.w-progress i::after { content: ""; position: absolute; inset: 0; background: rgba(255, 253, 248, .95); transform-origin: left center; scale: 0 1; }
.w-progress i.is-done::after { scale: 1 1; }
.w-progress i.is-run::after { animation: w-fill var(--w-dur) linear forwards; }
@keyframes w-fill { to { scale: 1 1; } }
.tile-w.is-held .w-progress i.is-run::after { animation-play-state: paused; }

/* SKILLS · a small tag beside the bio opens a panel of skills, tools and languages.
   Wide screens: the tag shows on bio hover in the left margin, the panel sits further left with its
   top level with the portrait. Narrow screens: the tag is always shown and the panel opens under the bio. */
.home { position: relative; }
.bio { position: relative; }
.sk-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; margin-bottom: 8px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; font: inherit; font-family: var(--mono); font-size: var(--mono-xs); letter-spacing: var(--caps); text-transform: uppercase; }
.sk-tag span { display: none; }
.sk-tag:hover, .sk-tag[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }
.skills-panel { margin: 16px 0 0; padding: 18px 18px 6px; border-radius: var(--r-lg);
  background: radial-gradient(130% 70% at 0% 0%, rgba(255, 253, 248, .7), transparent 55%), linear-gradient(160deg, rgba(252, 248, 240, .7), rgba(246, 240, 230, .45));
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 252, 245, .8);
  box-shadow: inset 0 1px 0 rgba(255, 253, 248, .95), 0 18px 40px -20px rgba(70, 50, 25, .3); }
[data-theme="dark"] .skills-panel { background: linear-gradient(160deg, rgba(255, 245, 228, .07), rgba(255, 245, 228, .03)); border-color: rgba(255, 240, 215, .12); box-shadow: inset 0 1px 0 rgba(255, 240, 215, .14), 0 18px 40px -20px rgba(0, 0, 0, .6); }
.skills-panel section + section { margin-top: 18px; }
.skills-panel .label { margin: 0 0 10px; font-size: var(--mono-xs); }
.sk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sk-list li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 10px; font-size: 13px; line-height: 1.3; }
.sk-n { color: var(--ink); }
.sk-v { font: 400 var(--mono-xs)/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: var(--caps); text-transform: uppercase; }
.sk-bar { grid-column: 1 / -1; position: relative; display: block; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sk-bar::after { content: ""; position: absolute; inset: 0; width: var(--v); border-radius: inherit; background: var(--ink); transform-origin: left center; scale: 0 1; }
.skills-panel section:nth-of-type(1) .sk-bar::after { background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--orange) 70%, var(--ink))); }
.skills-panel section:nth-of-type(2) .sk-bar::after { background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--blue) 70%, var(--ink))); }
.skills-panel section:nth-of-type(3) .sk-bar::after { background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--green-text) 75%, var(--ink))); }
.skills-panel.is-filled .sk-bar::after { scale: 1 1; }
.motion .skills-panel.is-filled .sk-bar::after { transition: scale 900ms cubic-bezier(.2, .8, .2, 1) calc(120ms + var(--k, 0) * 55ms); }
.motion .skills-panel { animation: sk-in 320ms var(--ease); }
@keyframes sk-in { from { opacity: 0; translate: 0 8px; } }
@media (min-width: 1240px) {
  .sk-tag { position: absolute; right: calc(100% + 18px); top: 2px; margin: 0; white-space: nowrap; transition: color 150ms, border-color 150ms, background-color 150ms; }
  .sk-tag span { display: inline; }
  .skills-panel { position: absolute; right: calc(100% + 108px); top: var(--sk-top, 160px); width: 248px; margin: 0; z-index: 20; }
  @keyframes sk-in { from { opacity: 0; translate: 10px 0; } }
}


/* skills button waits until the bio has finished typing, then fades in */
html.intro-play:not(.intro-rest) .sk-tag { opacity: 0; pointer-events: none; }
html.intro-rest .sk-tag { animation: fade 500ms var(--ease) backwards; }

/* CURSOR · on fine pointers with motion on, the square is the cursor */
@media (hover: hover) and (pointer: fine) {
  html.has-tag, html.has-tag * { cursor: none !important; }
}

/* RAIL · hovering the chapter rail opens a list of section titles beside the dots */
.rail.is-fixed { --rail-w: 250px; }
.rail.is-fixed::before { content: ""; position: absolute; top: -10px; bottom: -10px; right: calc(100% - 6px); width: var(--rail-w); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line); box-shadow: var(--shadow-float); opacity: 0; translate: 10px 0; pointer-events: none; transition: opacity 200ms var(--ease), translate 200ms var(--ease); }
.rail-group, .rail a { position: relative; }
.rail .rail-lbl { position: absolute; right: calc(100% + 16px); top: 50%; translate: 8px -50%; white-space: nowrap; font: 400 13px/1.2 var(--sans); color: var(--muted); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease), translate 200ms var(--ease), color 150ms; }
.rail .rail-group > .mono .rail-lbl { font: 400 var(--mono-xs)/1 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink); }
.rail.is-fixed:hover::before, .rail.is-fixed:focus-within::before { opacity: 1; translate: 0 0; pointer-events: auto; }
.rail.is-fixed:hover .rail-lbl, .rail.is-fixed:focus-within .rail-lbl { opacity: 1; translate: 0 -50%; pointer-events: auto; }
.rail a:hover .rail-lbl, .rail a[aria-current="true"] .rail-lbl { color: var(--ink); }
.rail a[aria-current="true"] .rail-lbl { font-weight: 500; }
.rail-group > .mono { position: relative; }

/* PAPER · how I work cards: sheets of coloured paper in each card's colour, matte with fibres */
.hw-card {
  position: relative;
  background-color: color-mix(in srgb, var(--hw, var(--card)) 80%, #EDE3D0);
  border: 1px solid rgba(60, 44, 20, .16); border-radius: 10px;
  box-shadow: 0 1px 1px rgba(60, 44, 20, .1), 0 3px 6px -2px rgba(60, 44, 20, .12), 0 12px 22px -14px rgba(60, 44, 20, .3);
}
[data-theme="dark"] .hw-card { border-color: rgba(0, 0, 0, .5); box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 12px 22px -14px rgba(0, 0, 0, .7); }
.hw-card:hover { box-shadow: 0 1px 1px rgba(60, 44, 20, .1), 0 5px 10px -3px rgba(60, 44, 20, .16), 0 18px 28px -16px rgba(60, 44, 20, .36); }
.motion .hw.is-live .hw-card { transition: height 650ms cubic-bezier(.7, 0, .2, 1), opacity var(--t-base) var(--ease), box-shadow 250ms var(--ease); }

/* GRAIN · tiles and How I work cards carry the same grain as the page background */
.bento .tile:not(.tile--media), .hw-card { isolation: isolate; }
.bento .tile:not(.tile--media)::before, .hw-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .18  0 0 0 0 .15  0 0 0 .9 -.32'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); opacity: .36;
}
[data-theme="dark"] .bento .tile:not(.tile--media)::before, [data-theme="dark"] .hw-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); opacity: .2;
}

/* work page: the small tile cycles through the five covers, cropped to their headlines */
.mini-tile .mt-cover { opacity: 0; object-position: 6% 50%; }
.mini-tile .mt-cover.is-on { opacity: 1; }
.motion .mini-tile .mt-cover { transition: opacity 600ms var(--ease); }

@media (max-width: 520px) {
  .book-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
}


/* READING SHELF (session: shelf) ----------------------------------------------
   Books are CSS boxes: cover, spine, page block, top edge and back.
   --w/--h size the book, --d is its thickness, --spine/--spine-ink colour the
   spine, --ry is the turn set by shelf.js. Static state (no motion, phones)
   is a swipe row with books at a fixed slight turn. */
.shelf { position: relative; --w: 148px; --h: 222px; --stage: 268px; }
.shelf-pin { position: relative; }
.shelf.is-pinned .shelf-pin { position: sticky; top: max(32px, calc(50vh - 300px)); }
.shelf-view {
  position: relative; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -8px; padding: 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 48px), transparent);
}
.shelf-view::-webkit-scrollbar { display: none; }
.shelf.is-pinned .shelf-view { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.shelf.is-pinned .shelf-item { transition: opacity 200ms linear; }
.shelf-track { position: relative; z-index: 1; display: flex; gap: 44px; width: max-content; padding: 0 40px 4px 20px; will-change: transform; }
.shelf-item { width: 184px; flex: none; scroll-snap-align: start; }
.shelf-item[hidden] { display: none; }

/* the wooden ledge the books stand on, fixed while the books slide over it */
.shelf-ledge {
  position: absolute; left: -8px; right: -8px; top: var(--stage); height: 14px; z-index: 0; pointer-events: none;
  border-radius: 2px 2px 3px 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%),
    repeating-linear-gradient(90deg, rgba(120,84,48,.05) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #C9A77E, #A9845A 55%, #8C6A44);
  box-shadow: 0 1px 0 rgba(28,25,21,.15), 0 18px 26px -14px rgba(28,25,21,.55);
}
.shelf-ledge::before { /* the top plane of the board, seen in perspective */
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px;
  background: linear-gradient(180deg, rgba(160,124,84,0), rgba(176,138,96,.55));
  clip-path: polygon(1% 0, 99% 0, 100% 100%, 0 100%);
}
[data-theme="dark"] .shelf-ledge {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 30%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #6B5038, #533C28 55%, #3E2C1D);
  box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 18px 28px -12px rgba(0,0,0,.8);
}

/* the stage holds one book in 3D and its contact shadow */
.book-stage {
  position: relative; height: var(--stage); display: flex; align-items: flex-end; justify-content: center;
  perspective: 1100px; perspective-origin: 50% 20%;
}
.book-stage::after { /* soft contact shadow on the ledge */
  content: ""; position: absolute; bottom: -4px; left: 50%; width: calc(var(--w) * 1.05); height: 14px;
  translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(28,25,21,.38), rgba(28,25,21,0));
  filter: blur(2px); z-index: 0;
}
[data-theme="dark"] .book-stage::after { background: radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,0)); }

.book3d {
  position: relative; z-index: 1; width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--d) * -.5)) rotateY(var(--ry, 18deg));
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.shelf.is-pinned .book3d { transition-duration: 260ms; }
.book3d > * { position: absolute; backface-visibility: hidden; }

/* front cover: the image, a hinge crease near the spine, and a soft sheen */
.b-front {
  inset: 0; transform: translateZ(calc(var(--d) / 2));
  border-radius: 1px 3px 3px 1px; overflow: hidden; background: var(--spine);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12);
}
.b-front img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.06) 2.5%, rgba(255,255,255,.22) 4%, rgba(0,0,0,.08) 5.5%, transparent 9%),
    linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 70%, rgba(0,0,0,.08) 100%);
  mix-blend-mode: normal;
}

/* back cover */
.b-back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: var(--spine); border-radius: 3px 1px 1px 3px; }

/* spine, on the left edge, rounded with light across the middle */
.b-spine {
  top: 0; height: 100%; width: var(--d); left: calc(50% - var(--d) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background:
    linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,.05) 22%, rgba(255,255,255,.16) 48%, rgba(0,0,0,.04) 74%, rgba(0,0,0,.3)),
    var(--spine);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.b-spine span {
  writing-mode: vertical-rl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-height: calc(var(--h) - 28px);
  font: 600 clamp(7px, calc(var(--d) * .42), 10px)/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--spine-ink);
}

/* page block on the right edge: fine page lines, inset where the covers overhang */
.b-pages {
  top: 3px; height: calc(100% - 6px); width: calc(var(--d) - 2px); left: calc(50% - var(--d) / 2 + 1px);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px));
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.14)),
    repeating-linear-gradient(90deg, #F3EDE1 0 1px, #E4DCCB 1px 2px, #EFE8DA 2px 3px);
}
/* top edge of the pages, visible because we look down at the shelf a little */
.b-top {
  left: 0; width: calc(100% - 3px); height: calc(var(--d) - 2px); top: calc(50% - var(--d) / 2 + 1px);
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 2px));
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.12)),
    repeating-linear-gradient(180deg, #F3EDE1 0 1px, #E2D9C7 1px 2px);
}
[data-theme="dark"] .b-pages, [data-theme="dark"] .b-top { filter: brightness(.82); }

/* hover or focus: pull the book a little off the shelf and turn it to face you */
.shelf-item:hover .book3d, .shelf-item:focus-within .book3d {
  transform: translateZ(calc(var(--d) * -.5 + 26px)) translateY(-10px) rotateY(calc(var(--ry, 18deg) * .2));
  transition-duration: 500ms;
}
.shelf-item:hover .book-stage::after { opacity: .6; width: calc(var(--w) * .95); transition: opacity 500ms, width 500ms; }

/* caption under the ledge */
.shelf-caption { padding-top: 30px; }
.shelf-caption .book-title { margin: 0; }
.shelf-caption .tags { display: flex; gap: 6px; margin-top: 10px; }

.shelf-hint { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font: 400 var(--mono-s)/1 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; }
.shelf-hint .h-swipe, .shelf.is-pinned .shelf-hint .h-scroll { display: inline; }
.shelf-hint .h-scroll, .shelf.is-pinned .shelf-hint .h-swipe { display: none; }
.shelf-hint i { display: block; width: 40px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.shelf-hint i::after { content: ""; position: absolute; inset: 0; width: 14px; background: var(--ink); animation: shelf-hint 1.8s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes shelf-hint { from { translate: -14px 0; } to { translate: 40px 0; } }
@media (prefers-reduced-motion: reduce) { .shelf-hint i::after { animation: none; } .book3d { transition: none; } }

@media (max-width: 860px) {
  .shelf { --w: 128px; --h: 192px; --stage: 236px; }
  .shelf-item { width: 160px; }
  .shelf-track { gap: 28px; padding-left: 12px; }
}
.shelf .label { margin-bottom: 20px; }
.shelf { contain: inline-size; width: 100%; }


/* HOME · ONE SCREEN (session: one-screen) -------------------------------------
   Wide screens: portrait and theme switch share a top row, the intro, bio and toolkit card
   stack in a column on the left, the six tiles fill the right. It all fits the viewport.
   Narrow screens keep the single stacked column, with the toolkit card under the bio. */

/* toolkit card: same matte card stock and grain as the tiles */
.skills-card {
  position: relative; isolation: isolate; margin-top: 24px; padding: 14px 16px 16px;
  background-color: #FBF6EC; border: 1px solid rgba(60, 44, 20, .12); border-radius: 10px;
  box-shadow: 0 1px 1px rgba(60, 44, 20, .08), 0 3px 6px -2px rgba(60, 44, 20, .1), 0 12px 22px -14px rgba(60, 44, 20, .28);
}
[data-theme="dark"] .skills-card { background-color: #2A2621; border-color: rgba(0, 0, 0, .45); box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 12px 22px -14px rgba(0, 0, 0, .7); }
.skills-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .18  0 0 0 0 .15  0 0 0 .9 -.32'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); opacity: .36;
}
[data-theme="dark"] .skills-card::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); opacity: .2;
}
.sk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sk-head .label { margin: 0; font-size: var(--mono-xs); color: var(--muted); }
.sk-tabs { background: transparent; }
.sk-tabs button { padding: 3px 11px; font-size: 12px; line-height: 1.5; }
.sk-tabs button:hover { color: var(--ink); }
.sk-tabs button[aria-selected="true"]:hover { color: var(--bg); }
.skills-card .sk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 24px; }
/* all three lists share one cell, so the card keeps the height of the longest and never jumps */
.skills-card { display: grid; grid-template-areas: "head" "list"; }
.sk-head { grid-area: head; }
.skills-card .sk-list { grid-area: list; align-content: start; }
.skills-card .sk-list[hidden] { display: grid; visibility: hidden; }
.skills-card .sk-list li { gap: 5px 8px; }
.skills-card .sk-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-list[data-tone="1"] .sk-bar::after { background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--orange) 70%, var(--ink))); }
.sk-list[data-tone="2"] .sk-bar::after { background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--blue) 70%, var(--ink))); }
.sk-list[data-tone="3"] .sk-bar::after { background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--green-text) 75%, var(--ink))); }
/* bars show full without motion; with motion they fill each time a list is shown */
.skills-card .sk-bar::after { scale: 1 1; }
.motion .skills-card .sk-list:not(.is-filled) .sk-bar::after { scale: 0 1; }
.motion .skills-card .sk-list.is-filled .sk-bar::after { transition: scale 900ms cubic-bezier(.2, .8, .2, 1) calc(120ms + var(--k, 0) * 55ms); }
.motion .skills-card .sk-list.is-filled { animation: fade 300ms var(--ease); }
/* opening: the card arrives with the tiles */
html.intro-play:not(.intro-rest) .skills-card { opacity: 0; pointer-events: none; }
html.intro-rest .skills-card { animation: fade-up var(--t-enter) var(--ease) 200ms backwards; }

@media (min-width: 1180px) {
  .home {
    max-width: 1520px; height: max(100dvh, 660px); margin: 0 auto; padding: 28px 40px;
    display: grid; grid-template-columns: minmax(400px, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "top top" "left bento"; column-gap: 48px; row-gap: 20px;
  }
  .home-top { grid-area: top; margin: 0; align-items: center; }
  .home-left { grid-area: left; display: flex; flex-direction: column; min-height: 0; }
  .home .hr-dashed { display: none; }
  .skyline { width: min(260px, 50%); }
  .bio { margin-bottom: 20px; }
  .bio > p:last-child { margin-bottom: 0; }
  .skills-card { margin-top: auto; }
  .bento {
    grid-area: bento; min-height: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "w w w a" "o o r b" "c c c c";
  }
  .tile-a .stack { width: min(88%, 220px); }
  .tile-c .tile-body { padding: 18px 44px 18px 16px; }
  /* the work tile keeps a wide crop at every screen size: the cover is pinned to its top, so the
     headline always shows and the cover's own name label falls off the bottom, under the pill.
     Its row takes that height; the second row takes whatever is left. */
  .bento .tile-w { aspect-ratio: 1.85; }
  .tile-w .tile-media { object-position: 0 0; }
}
/* shorter laptop screens: tighten type and spacing so the left column still fits */
@media (min-width: 1180px) and (max-height: 820px) {
  .home { padding: 20px 32px; row-gap: 14px; column-gap: 40px; }
  .home-left { font-size: 14px; line-height: 1.55; }
  .bio p { margin-bottom: .8em; }
  .bio > p:last-child { margin-bottom: 0; }
  .bio { margin-top: 16px; }
  .skills-card { padding: 12px 14px 14px; }
  .sk-head { margin-bottom: 10px; }
  .skills-card .sk-list { gap: 8px 20px; }
  .skills-card .sk-list li { font-size: 12.5px; }
}
@media (max-width: 520px) {
  .skills-card .sk-list { grid-template-columns: 1fr; gap: 10px; }
}

/* bio v2: the opening line reads as the lead, in ink */
.bio .lead { color: var(--ink); }
/* bio v2 is longer: on the shortest laptop screens tighten a touch more so the left column still fits */
@media (min-width: 1180px) and (max-height: 760px) {
  .home-left { font-size: 13.5px; line-height: 1.5; }
  .bio { margin-top: 12px; }
  .bio p { margin-bottom: .65em; }
  .skills-card .sk-list { gap: 7px 20px; }
}
/* bio v2 plus the Off the clock line: tighter paragraph rhythm so the toolkit card still fits */
@media (min-width: 1180px) {
  .bio { margin-bottom: 16px; }
  .bio p { margin-bottom: .7em; }
}
@media (min-width: 1180px) and (max-height: 820px) {
  .bio p { margin-bottom: .55em; }
}
@media (min-width: 1180px) and (max-height: 760px) {
  .home { row-gap: 10px; }
  .bio { margin-top: 10px; margin-bottom: 12px; }
  .bio p { margin-bottom: .45em; }
  .skills-card { padding: 10px 14px 12px; }
  .sk-head { margin-bottom: 8px; }
  .skills-card .sk-list { gap: 6px 20px; }
}

/* OVERSHARE · a small pill at the end of the second bio paragraph; it types two more paragraphs in */
.overshare {
  display: inline-flex; align-items: center; margin-left: 4px; padding: 2px 9px 1px; vertical-align: 1px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--muted);
  font: 400 var(--mono-xs)/1.5 var(--mono); letter-spacing: var(--caps); text-transform: uppercase; white-space: nowrap;
}
.overshare:hover, .overshare[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }
.motion .overshare { transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.bio-more[hidden] { display: none; }
/* opening: the pill waits for the typing to finish, then fades in */
html.intro-play:not(.intro-rest) .overshare { opacity: 0; pointer-events: none; }
html.intro-rest .overshare { animation: fade 500ms var(--ease) backwards; }

/* OVERSHARE v2: plain underlined text, no pill */
.overshare {
  display: inline; margin-left: 2px; padding: 0; vertical-align: baseline; border: 0; border-radius: 0; background: none;
  font: inherit; letter-spacing: normal; text-transform: none; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.overshare:hover, .overshare[aria-expanded="true"] { text-decoration-color: var(--ink); }
.motion .overshare { transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }


/* WORK GALLERY (session: works gallery) -----------------------------------------
   The work page's right column is a vertical gallery: the active project opens up to a large
   looping cover with its title, year and line under it; the other four fold into thin strips with
   their 01 to 05 index. Scroll, drag, the arrow keys or a click on a strip move it, and it loops.
   Clicking the open project goes to its case study. Without JS every item is a plain link. */
.work-gallery {
  --strip: 56px; --gap: 10px; --det: 62px; --idx: 40px;
  --colw: min(752px, calc(100vw - 368px));
  --mw: calc(var(--colw) - var(--idx));
  --ah: max(200px, min(calc(var(--mw) / 1.6), calc(100dvh - 168px - 4 * (var(--strip) + var(--gap)) - var(--det))));
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap);
  outline: none; user-select: none; -webkit-user-select: none;
}
.wg-item { position: relative; }
.wg-link { display: grid; grid-template-columns: var(--idx) minmax(0, 1fr); color: var(--ink); -webkit-user-drag: none; }
.wg-link:focus-visible { outline: none; }
.wg-link:focus-visible .wg-media { outline: 2px solid var(--ink); outline-offset: 3px; }
.wg-index { grid-column: 1; grid-row: 1 / span 2; padding-top: 2px; font: 400 var(--mono-s)/1.4 var(--mono); letter-spacing: var(--caps); color: var(--muted); }
.wg-item.is-active .wg-index { color: var(--ink); }
.wg-media {
  grid-column: 2; position: relative; display: block; height: var(--strip); overflow: hidden;
  border-radius: 10px; background: var(--night); border: 1px solid var(--line);
  box-shadow: 0 1px 1px rgba(60, 44, 20, .08), 0 3px 6px -2px rgba(60, 44, 20, .1);
}
[data-theme="dark"] .wg-media { border-color: rgba(0, 0, 0, .45); box-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
.wg-item.is-active .wg-media { height: var(--ah); box-shadow: 0 1px 1px rgba(60, 44, 20, .08), 0 3px 6px -2px rgba(60, 44, 20, .1), 0 18px 30px -18px rgba(60, 44, 20, .4); }
[data-theme="dark"] .wg-item.is-active .wg-media { box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 18px 30px -16px rgba(0, 0, 0, .75); }
.wg-video { position: absolute; left: 0; top: 0; width: 100%; height: var(--ah); min-height: 100%; object-fit: cover; object-position: 0 0; pointer-events: none; }
/* strips show a calm slice from the middle of the cover */
.wg-item:not(.is-active) .wg-video { top: 50%; translate: 0 -50%; height: calc(var(--mw) / 1.6); opacity: .55; filter: saturate(.7); }
.wg-item:not(.is-active) .wg-link:hover .wg-video, .wg-item:not(.is-active) .wg-link:focus-visible .wg-video { opacity: .85; filter: none; }
.wg-details { grid-column: 2; display: grid; grid-template-rows: 0fr; }
.wg-details-in { overflow: hidden; min-height: 0; }
.wg-item.is-active .wg-details { grid-template-rows: 1fr; }
.wg-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; }
.wg-title { font: 500 15px/1.4 var(--sans); }
.wg-title .icon { color: var(--muted); margin-left: 4px; }
.wg-year { font: 400 var(--mono-m)/1.4 var(--mono); color: var(--muted); }
.wg-line { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.wg-item:not(.is-active) .wg-details-in { opacity: 0; }
.is-dragging .wg-link { cursor: grabbing; }

/* motion: strips open and fold together; the new cover settles in from a slight push */
.motion .wg-media { transition: height 620ms cubic-bezier(.7, 0, .2, 1), box-shadow 400ms var(--ease), border-color 200ms var(--ease); }
.motion .wg-video { transition: opacity 400ms var(--ease), filter 400ms var(--ease), top 620ms cubic-bezier(.7, 0, .2, 1), translate 620ms cubic-bezier(.7, 0, .2, 1); }
.motion .wg-item.is-active .wg-video { animation: wg-settle 1100ms var(--ease); }
@keyframes wg-settle { from { scale: 1.06; } }
.motion .wg-details { transition: grid-template-rows 620ms cubic-bezier(.7, 0, .2, 1); }
.motion .wg-details-in { transition: opacity 300ms var(--ease); }
.motion .wg-item.is-active .wg-details-in { transition-delay: 300ms; }
.motion .wg-index { transition: color 200ms var(--ease); }
.motion .work-gallery .wg-item { animation: fade-up var(--t-enter) var(--ease) backwards; animation-delay: calc(100ms + var(--i, 0) * 60ms); }
.wg-item:nth-child(2) { --i: 1; } .wg-item:nth-child(3) { --i: 2; } .wg-item:nth-child(4) { --i: 3; } .wg-item:nth-child(5) { --i: 4; }

@media (max-height: 820px) { .work-gallery { --strip: 44px; --gap: 8px; } }
@media (max-width: 860px) {
  .work-gallery { --colw: calc(100vw - 40px); --ah: calc(var(--mw) / 1.6); --idx: 32px; }
}
/* wide screens: the open cover is cropped a little wider (as on the home tile) so the cover's own name
   label stays off the bottom; strips are too thin to show a clean slice, so they show a soft blur of
   the cover's colours and sharpen a little on hover */
@media (min-width: 861px) {
  .work-gallery { --ah: max(200px, min(calc(var(--mw) / 1.85), calc(100dvh - 168px - 4 * (var(--strip) + var(--gap)) - var(--det)))); }
  .wg-item:not(.is-active) .wg-video { filter: blur(6px) saturate(.85); opacity: .75; scale: 1.08; }
  .wg-item:not(.is-active) .wg-link:hover .wg-video, .wg-item:not(.is-active) .wg-link:focus-visible .wg-video { filter: blur(2px) saturate(1); opacity: .95; }
}
.motion .wg-video { transition: opacity 400ms var(--ease), filter 400ms var(--ease), scale 620ms var(--ease), top 620ms cubic-bezier(.7, 0, .2, 1), translate 620ms cubic-bezier(.7, 0, .2, 1); }