/* Home on the taste picks (docs/website/DIRECTION.md, 2026-10-31): Snellenberg's first screen, Chiang's two-column
   document on a white ground, Kowalski's finish. One ink, UM orange on nothing you read, Gloock for names and
   headings, Hanken Grotesk for everything else. Pages move to this file one at a time. */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/hanken-grotesk-latin-wght.woff2") format("woff2"); }

:root {
  --ground: #ffffff;
  --wash: #f7f6f3;       /* open panels, the menu */
  --stone: #f1efea;      /* behind photographs while they load */
  --ink: #101114;
  --muted: #5b5e65;      /* 6.4:1 on white */
  --faint: #6e7178;      /* dates and meta: 4.9:1 on white */
  --rule: #e7e5df;
  --accent: #e5641b;     /* UM orange: underlines, focus, the drawn path, the spotlight; never text, never a fill */
  --serif: var(--sans);  /* 2026-10-31: Gloock retired on Jose's note that the page read clunky; the three picks each use one grotesque */
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 80rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --head-h: 4rem;
  --name: clamp(4.5rem, 1.25rem + 12vw, 12.5rem);           /* the gliding name: Snellenberg's 15vw */
  --deck: clamp(1.25rem, .75rem + 1.1vw, 1.875rem);       /* the first-screen title: Snellenberg's about 30px at 1440 */
  --ruler: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));  /* the content's left edge, the one ruler */
  --display: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);       /* the left-column name */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem;
  --row-x: min(var(--s3), var(--gutter));             /* a row's side inset, never wider than the page gutter */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --lift-bg: color-mix(in srgb, var(--ink) 3.5%, transparent);
  --lift-line: color-mix(in srgb, var(--ink) 7%, transparent);
  color-scheme: light;
  scrollbar-color: #c9c6bf transparent;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: var(--ease); }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 1rem); }
body { background: var(--ground); color: var(--ink); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01"; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: color-mix(in oklch, var(--accent) 55%, transparent); text-underline-offset: .26em; text-decoration-thickness: 1px;
  transition: text-decoration-color .15s var(--ease); }
a:hover { text-decoration-color: var(--accent); }
::selection { background: color-mix(in oklch, var(--accent) 22%, white); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
a, button, summary, input, textarea, select, [tabindex] { scroll-margin-block: 1.5rem 1.25rem; }  /* the focus ring stays inside the window when the browser scrolls a stop into view */
kbd { font: 500 .75rem/1 var(--sans); padding: .2rem .35rem; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 5px; color: var(--muted); background: var(--ground); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.skip-link { position: absolute; left: var(--gutter); top: -4rem; background: var(--ink); color: #fff; padding: .5rem 1rem; border-radius: 999px; z-index: 20; text-decoration: none; }
.skip-link:focus { top: .75rem; }

/* the spotlight: a 1200px disc of UM orange at 8 percent, moved by transform only; off on touch, still under reduced motion */
.spot { position: fixed; left: -800px; top: -800px; width: 1600px; height: 1600px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle closest-side, color-mix(in oklch, var(--accent) 5%, transparent), transparent 75%); will-change: transform; opacity: 0; transition: opacity .4s var(--ease); }
.spot[data-on] { opacity: 1; }
.head, .main, .foot { position: relative; z-index: 1; }

/* header: sticky, quiet, a hairline once the page has scrolled */
.head { position: sticky; top: 0; z-index: 5; height: var(--head-h); background: var(--ground); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.head[data-scrolled] { border-color: var(--rule); }
.head__in { max-width: var(--max); height: 100%; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--s3); }
.name { display: inline-block; padding: .25rem 0; font: 500 1.0625rem/1 var(--sans); letter-spacing: -.01em; text-decoration: none; margin-right: auto; }
.nav ul { display: flex; gap: var(--s3); list-style: none; padding: 0; font-size: .9375rem; }
.nav a { display: inline-block; padding: .3rem 0; text-decoration: none; color: var(--muted); transition: color .15s var(--ease); }  /* 24px tap height (WCAG 2.5.8) */
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
/* the résumé link is the header's one filled control from 48em up (an ink pill like .pill, last in the row; phones keep the plain link so the two-row phone header holds) */
@media (min-width: 48em) {
  .nav a[href$=".pdf"] { padding: .3rem .9rem; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; transition: background-color .15s var(--ease); }
  .nav a[href$=".pdf"]:hover { background: #2a2c31; color: #fff; }
}
.jump { display: inline-flex; align-items: center; gap: .5rem; font: 500 .875rem var(--sans); color: var(--muted); background: none; border: 1px solid var(--rule);
  border-radius: 999px; padding: .4rem .5rem .4rem .8rem; cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); }
.jump:hover { color: var(--ink); border-color: #cfccc5; }

/* the first screen: a stage (Snellenberg) */
.stage { position: relative; height: calc(100svh - var(--head-h)); min-height: 34rem; max-height: 62rem; overflow: hidden; background: var(--stone); }  /* Snellenberg's structure: a pale band for the first screen, white below */
.stage__photo { position: absolute; left: var(--ruler); top: 0; bottom: 0; width: min(44%, 46rem); }
.stage__photo img { width: 100%; height: 100%; object-fit: contain; object-position: 0 100%;  /* 2026-11-06, Jose: "It has to be displayed as waist up": the whole 4:5 window fits the band's height and stands on its bottom edge, flush to the ruler (cover at 50% 18% cut 144 px off the jacket at 1600x800) */
  -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); mask-image: linear-gradient(to right, #000 86%, transparent); }  /* softens a figure the frame cuts at the right edge */
.stage__title { position: absolute; left: calc(var(--ruler) + min(44%, 46rem) + clamp(3rem, 6vw, 7rem)); top: 38%; font: 400 var(--deck)/1.3 var(--sans); }
.stage__place { position: absolute; left: calc(var(--ruler) + min(44%, 46rem) + clamp(3rem, 6vw, 7rem)); top: calc(38% + 2.6 * var(--deck) + var(--s3)); white-space: nowrap; padding: .55rem 1.1rem; border-radius: 999px;
  background: var(--ground); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); font-size: .9375rem; line-height: 1.35; }  /* 2026-11-06, Jose: "the miami behind me blend in make that pop too": the ink pill sat against his black jacket; it moves into the open half, under the title on its left edge, as a white pill with ink text and a hairline (no new token) */
.glide { position: absolute; left: 0; right: 0; bottom: 1.5%; overflow: hidden; white-space: nowrap; line-height: 1; }
.stage__photo { z-index: 2; } .glide { z-index: 1; }  /* 2026-11-06, Jose: "the Jose is black and matches the jacket": the name glides behind him, so his figure stands in front of the letters instead of the ink letters vanishing into the black jacket */
.glide__track { display: inline-flex; gap: .32em; font: 600 var(--name)/1 var(--sans); letter-spacing: -.04em;  /* 2026-11-06, Jose: "I like the band just make it pop": the name at the face's heaviest weight (600, was 400), tracking -.04em */ color: var(--ink); will-change: transform; padding-bottom: .06em; }
.glide__track span { display: block; }

/* the document: fixed left column, scrolling right column (Chiang) */
.doc { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 7rem); }
.side { position: sticky; top: var(--head-h); height: calc(100svh - var(--head-h)); display: flex; flex-direction: column; justify-content: space-between; padding: var(--s7) 0 var(--s6); }
.side--page { padding: var(--s5) 0 var(--s1); overflow-y: auto; scrollbar-width: none; gap: var(--s3); }  /* fits 1600x800; scrolls inside itself under larger text spacing, so nothing is lost */
.side--page .snav { margin-top: var(--s3); }
.side--page .snav a { padding: .45rem 0; }
.side__h1 { font: 500 clamp(1.5rem, 1.1rem + 1.1vw, 2rem)/1.25 var(--sans); max-width: 22ch; text-wrap: balance; letter-spacing: -.02em; }
.snav { margin-top: var(--s6); }
.snav ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
.snav a { display: flex; align-items: center; gap: 1rem; padding: .55rem 0; text-decoration: none; color: var(--muted); font: 500 .8125rem/1 var(--sans); transition: color .2s var(--ease); }
.snav a::before { content: ""; width: 4rem; height: 1px; background: #cfccc5; transform: scaleX(.5); transform-origin: left; transition: transform .2s var(--ease), background-color .2s var(--ease); }
.snav a:hover, .snav a[aria-current] { color: var(--ink); }
.snav a:hover::before, .snav a[aria-current]::before { transform: none; background: var(--ink); }
.side__links { list-style: none; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); font-size: .9375rem; }
.side__links a:not(.pill) { display: inline-block; padding: .2rem 0; }
.pill { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 500;
  transition: background-color .15s var(--ease); }
.pill:hover { background: #2a2c31; }
.pill svg { width: .95rem; height: .95rem; fill: currentColor; }
/* 2026-11-03, Jose's OK of the Avi Parmar comparison: the résumé, a graded item, as an equal ask beside LinkedIn: an outlined
   pill of the same size, ink on white, a wash on hover. No new token. */
.side__asks { display: flex; flex-wrap: wrap; gap: var(--s1); }
.pill--line { background: var(--ground); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); transition: background-color .15s var(--ease), box-shadow .15s var(--ease); }
.pill--line:hover { background: var(--wash); box-shadow: inset 0 0 0 1px var(--ink); }

.body { padding: var(--s7) 0 var(--s7); display: grid; gap: var(--s7); align-content: start; }
.sec > h2 { font: 600 .9375rem/1.3 var(--sans); letter-spacing: -.005em; padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); }
.about p { max-width: 56ch; }
.about p + p { margin-top: var(--s2); }
.about__lede { font: 500 1.375rem/1.35 var(--sans); letter-spacing: -.015em; max-width: 30ch; margin-bottom: var(--s3) !important; }
.more { display: inline-block; margin-top: var(--s3); font-weight: 500; text-decoration: none; }
.more::after { content: "\2192"; margin-left: .3em; color: var(--accent); transition: transform .15s var(--ease); display: inline-block; }
.more:hover::after { transform: translateX(3px); }
.run__more { margin: 0; }   /* 2026-11-06: Home panel's Read more link to its Portfolio system */

/* rows that lift (Chiang): a wash, one light line on top, 2px up, the other rows step back */
.lift { position: relative; border-radius: 8px; transition: transform .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease), opacity .15s var(--ease); }
.lift:hover, .lift:focus-visible, .lift:active { background: var(--lift-bg); box-shadow: inset 0 1px 0 var(--lift-line); transform: translateY(-2px); }
.xp:hover .lift:not(:hover), .rows:hover .lift:not(:hover) { opacity: .65; }

.xp { list-style: none; padding: 0; display: grid; gap: .25rem; }
.xp__row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s3); padding: var(--s2) var(--row-x); margin: 0 calc(-1 * var(--row-x)); text-decoration: none; }
.xp__when { font-size: .8125rem; color: var(--faint); padding-top: .25rem; font-variant-numeric: tabular-nums; }
.xp__title { display: block; font-weight: 500; }
.xp__title::after { content: "\2192"; color: var(--accent); font-size: .85em; margin-left: .25em; position: relative; top: 0; left: 0; transition: top .15s var(--ease), left .15s var(--ease); }  /* 2026-11-06 phone pass: an inline glyph, so it never wraps alone under a long title (an inline-block broke like a word); the hover nudge moves by inset, since an inline takes no transform */
.xp__row:hover .xp__title::after { top: -2px; left: 2px; }
.xp__line { display: block; color: var(--muted); margin-top: .2rem; max-width: 52ch; }
.xp__tools { display: block; color: var(--faint); font-size: .8125rem; margin-top: .55rem; }

.rows { list-style: none; padding: 0; }

/* full-width sections after the document (Things I've built, Writing): the work gets the whole page, as on Snellenberg's */
.wide { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) var(--s7); }
.sec__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); border-bottom: 1px solid var(--rule); padding-bottom: var(--s2); }
.wide > h2, .sec__head h2 { font: 500 1.25rem/1.3 var(--sans); letter-spacing: -.01em; border: 0; padding: 0; }
.wide > h2 { padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); }
.sec__head .more { margin: 0; }

/* the live run (2026-11-01): the four strongest systems listed on the left; the chosen one on the right as a rail its work
   runs along. Work enters, pauses at each step, is sometimes held at a check and drops to the lane, waits at the person step
   for a tick, then leaves. The script drives it; without it, or under reduced motion, the rail is the still drawing. */
.run { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s5); align-items: start; margin-top: var(--s4); }
.run__list { list-style: none; padding: 0; margin: 0; display: grid; position: sticky; top: calc(var(--head-h) + var(--s3)); }
.run__tab { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: baseline; width: 100%; text-align: left; padding: var(--s2) 0; margin: 0; border: 0; border-top: 1px solid var(--rule); background: none; color: var(--muted); font: inherit; cursor: pointer; transition: color .2s var(--ease); }
.run__list li:first-child .run__tab { border-top: 0; }
.run__n { font-size: .8125rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.run__name { display: block; font: 500 1.375rem/1.2 var(--sans); letter-spacing: -.02em; }
.run__where { grid-column: 2; display: block; font-size: .8125rem; color: var(--faint); margin-top: .25rem; }
.run__tab:hover, .run__tab[aria-selected="true"] { color: var(--ink); }
.run__n { position: relative; }
.run__n::before { content: ""; position: absolute; left: -.9rem; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .2s var(--ease); }
.run__tab[aria-selected="true"] .run__n { color: var(--ink); }
.run__tab[aria-selected="true"] .run__n::before { opacity: 1; }  /* an orange mark beside the numeral, not orange text (3.4:1) */
.run__stage { position: relative; }
.run__panel { background: var(--stone); border: 1px solid var(--rule); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: var(--s4); }
.run[data-js] .run__panel:not(.is-on) { position: absolute; inset: 0; opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
.run:not([data-js]) .run__panel + .run__panel { margin-top: var(--s3); }
.run__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.run__title { font: 500 clamp(1.5rem, 1rem + 1.4vw, 2.25rem)/1.1 var(--sans); letter-spacing: -.025em; }
.run__label { color: var(--muted); font-size: .875rem; white-space: nowrap; }
.run__rail { position: relative; padding: var(--s4) 0 0; margin-bottom: calc(-1 * var(--s2)); }  /* room above the rail for the Run button, clear of the last label */.run__btn { position: absolute; right: 0; top: 0; font: 500 .8125rem var(--sans); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: 999px; padding: .35rem .9rem; cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.run__btn:hover { border-color: #c9c6bf; }
.run__btn:disabled { color: var(--muted); cursor: default; }  /* disabled until the script enables it (same text with and without JavaScript); colour, not opacity, so the motion gate sees nothing fade */
.rail { display: block; width: 100%; height: auto; overflow: visible; }
.rail--tall { display: none; }
.rail__line { stroke: #d6d3cc; stroke-width: 1; }
.rail__lane { stroke: transparent; stroke-width: 1; stroke-dasharray: 2 4; transition: stroke .4s var(--ease); }
.is-running .rail__lane { stroke: #d6d3cc; }  /* grade pass 97b: before a run the empty dotted lane read as a rendering gap; it appears once craft.js starts the run (a held piece drops to it), and stays hidden in the still drawing (reduced motion, no script), where nothing ever lands on it */
.rail__halo { fill: var(--stone); }
.rail__mark { fill: none; stroke: var(--muted); stroke-width: 1.25; }
.rail__mark--step { fill: var(--muted); stroke: none; }
.rail__node--accent .rail__mark { stroke: var(--ink); }
.rail__node--accent .rail__mark--step { fill: var(--ink); }
.rail__label { fill: var(--muted); font: 400 14px var(--sans); }
.rail--tall .rail__label { font-size: 15px; }
@media (max-width: 22.5em) { .rail--tall .rail__label { font-size: 18px; } }  /* the tall rail sits at .77 scale at 320: 18 units read as 13.8px */
.rail__node--accent .rail__label { fill: var(--ink); font-weight: 500; }
.rail__tick { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
.rail__tick.is-on { opacity: 1; }
.rail__chip circle { fill: var(--accent); stroke: var(--stone); stroke-width: 1.5; transition: fill .3s var(--ease); }
.rail__chip.is-held circle { fill: #b9b6af; }
.rail__chipname { fill: var(--muted); font: 400 12px var(--sans); opacity: 0; transition: opacity .2s var(--ease); }
.rail--tall .rail__chipname { font-size: 13px; }
.rail__chip.is-named .rail__chipname { opacity: 1; }
.rail__chip.is-held .rail__chipname { fill: var(--muted); }  /* no italic: the face ships upright only, and a synthesised slant is a fake */
.rail__node { cursor: default; }
.rail__node.is-hot .rail__label { fill: var(--ink); }
.rail__node.is-hot .rail__mark { stroke: var(--accent); }
.rail__node.is-hot .rail__mark--step { fill: var(--accent); stroke: none; }
.run__case .s { transition: background-color .2s var(--ease); border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.run__case .s.is-live { background: color-mix(in oklch, var(--accent) 8%, transparent); }   /* the sentence of the step the run's lead piece has reached */
.run__case .s.is-lit { background: color-mix(in oklch, var(--accent) 16%, transparent); }
.run__panel:has(.rail__node:hover) .run__case .s.is-live:not(.is-lit) { background: transparent; }  /* while a step is hovered, only its sentence is lit */
.rail__node.is-live .rail__label { fill: var(--ink); }
.run__specs { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s2) var(--s5); margin: calc(-1 * var(--s2)) 0 0; padding: 0; }
.run__spec { display: grid; gap: .1rem; align-content: start; }  /* a wrapped Status must not push the other cells' values down */
.run__spec dt { font-size: .8125rem; color: var(--muted); }  /* muted on the stone panel: 5.6:1 */
.run__spec dd { margin: 0; font-size: .9375rem; color: var(--ink); }
.run__case { max-width: 66ch; color: var(--ink); display: grid; gap: var(--s2); }

/* Portfolio: the same document, one run panel per system, stacked */
.doc--page { padding-top: 0;  /* the column's own top padding sets the start, so at scroll zero its box is the sticky box: the whole column shows in a 1600x800 window */ grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2.5rem, 5vw, 5rem); }
.run--single .rail--wide .rail__label { font-size: 20px; }  /* the wide rail sits at about .8 scale in Portfolio's column; 20 units read as 16px */
.run--single .rail--wide .rail__chipname { font-size: 16px; }
.side--page .side__h1 { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.4rem); }
.side__intro { margin-top: var(--s2); max-width: 30rem; color: var(--muted); display: grid; gap: var(--s2); }
.with__photo { display: block; margin: var(--s4) 0 var(--s5); background: var(--stone); border-radius: 6px; overflow: hidden; }
.with__photo--top { margin: 0; border-radius: 14px; }  /* the page opens on the photograph, above the first system, at the panels' radius */
.with__photo img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.v-m .with__photo img { object-position: 50% 60%; }  /* Portfolio, 2026-11-06 (photo editor's pass): the 2:1 laptop band of the desk picture keeps the whole notebook (its lower corner ended at row 905 of 1024; the band now runs 154 to 922) and the laptop lid still clears the top */
.snav--long { margin-top: var(--s2); }
.snav--long ul { gap: 0; }
.snav--long a { padding: .15rem 0; }  /* eleven entries (nine systems, Other builds, What I build with) and the column still fits 1600x800 */
/* Portfolio's column fits one screen (Jose, 2026-11-06: "Same thing with the portfolio page"): Student's sizes, plus the eight index rows at .35rem padding (between the shared .45rem and the long index's .15rem; 24.2 px rows, the axe target size). Natural height 736 to 616 px (fits 680 px or taller). */
.v-m .side--page { padding-top: var(--s4); }
.v-m .side__h1 { font-size: 2.25rem; line-height: 1.12; }
.v-m .side__intro { gap: .75rem; margin-top: .75rem; }
.v-m .side__intro p { font-size: .9375rem; line-height: 1.5; }
.v-m .side--page .snav { margin-top: var(--s2); }
.v-m .side--page .snav a { padding: .35rem 0; }  /* 24.2 px rows: axe target-size wants 24 (.3rem gave 22.6 and failed) */
.v-m .body--page { padding-top: var(--s4); }  /* the picture's top on the h1's line, as Student's judges set it (it floated 64px lower; Jose, 2026-11-06: "should portfolio pic look bigger") */
.body--page { gap: var(--s6); }
.sys { scroll-margin-top: calc(var(--head-h) + var(--s3)); }
.run--single { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.run--single .run__panel { border-radius: 14px; }
/* round 15: one lead, then a list. The lead keeps the stone panel and a title at display size; the rest sit open on the
   white ground under a hairline, so the page has a lead and a rhythm instead of seven equal cards */
.sys--lead .run--single .run__title { font-size: clamp(2.25rem, 1.5rem + 1.8vw, 3.25rem); letter-spacing: -.03em; line-height: 1.05; }
.sys--open .run__panel { background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: var(--s5) 0 0; }
.sys--open .run--single .run__title { font-size: clamp(1.375rem, 1.1rem + .6vw, 1.625rem); }
.sys--open .rail__halo { fill: var(--ground); }
.sys--open .rail__chip circle { stroke: var(--ground); }
.sys--open + .sys--open { margin-top: calc(-1 * var(--s3)); }
.run--single .run__title { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); }
.run__scope { max-width: 66ch; }
.run__scope summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--muted); font-size: .9375rem; cursor: pointer; list-style: none; border-radius: 6px; transition: color .15s var(--ease); }
.run__scope summary::-webkit-details-marker { display: none; }
.run__scope summary::after { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.run__scope[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.run__scope summary:hover { color: var(--ink); }
.run__scope ul { margin: 0 0 var(--s1); padding-left: 1.1rem; color: var(--muted); font-size: .9375rem; display: grid; gap: .25rem; }
.others { display: grid; gap: var(--s4); margin-top: var(--s3); }
.other { display: grid; gap: var(--s2); max-width: 66ch; padding-top: var(--s3); border-top: 1px solid var(--rule); }
.others .other:first-child { border-top: 0; padding-top: 0; }
.other h3 { font: 500 1.125rem/1.3 var(--sans); letter-spacing: -.01em; }
.other .run__specs { margin: 0; }
.prose { max-width: 66ch; display: grid; gap: var(--s2); margin-top: var(--s3); }

.rows a { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: baseline; padding: .9rem var(--row-x); margin: 0 calc(-1 * var(--row-x)); text-decoration: none; }
.rows li + li a { border-top: 0; }
.rows a span { font-weight: 500; }
.rows time { color: var(--faint); font-size: .875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* footer */
.foot { max-width: var(--max); margin: 0 auto; padding: var(--s5) var(--gutter) var(--s5); border-top: 1px solid var(--rule); display: grid; gap: var(--s2); font-size: .9375rem; }
.foot__line { font: 500 1.25rem/1.3 var(--sans); letter-spacing: -.015em; }
.foot ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); list-style: none; padding: 0; }
.foot ul a { display: inline-block; padding: .2rem 0; }
.foot__pages a { color: var(--muted); text-decoration: none; }
.foot__pages a:hover { color: var(--ink); }
.foot__made { color: var(--faint); font-size: .875rem; margin-top: var(--s2); }
.foot__made a { color: var(--muted); }

/* the command menu */
.jumpto { margin: 12vh auto auto; width: min(36rem, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 14px; background: var(--ground); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(16,17,20,.07), 0 1px 2px rgba(16,17,20,.06), 0 6px 14px -6px rgba(16,17,20,.14), 0 18px 32px -16px rgba(16,17,20,.18); }
.jumpto::backdrop { background: rgba(16,17,20,.18); backdrop-filter: blur(2px); }
.jumpto[open] { animation: rise .18s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.jumpto input { width: 100%; border: 0; border-bottom: 1px solid var(--rule); padding: 1rem 1.1rem; font: 400 1rem var(--sans); color: var(--ink); background: none; outline: none; }
.jumpto input::placeholder { color: var(--faint); }
.jumpto ul { list-style: none; padding: .4rem; margin: 0; max-height: min(50vh, 22rem); overflow: auto; }
.jumpto li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .7rem; border-radius: 8px; cursor: pointer; }
.jumpto li small { color: var(--faint); font-size: .8125rem; }
.jumpto li[aria-selected="true"] { background: var(--wash); }
.jumpto li[aria-selected="true"]::before { content: ""; width: 2px; margin: -.2rem .35rem -.2rem -.45rem; background: var(--accent); border-radius: 2px; }
.jumpto li span { margin-right: auto; }
.jumpto__empty { color: var(--muted); padding: .6rem .7rem; }
.jumpto__hint { display: flex; gap: .4rem; align-items: center; padding: .6rem 1.1rem; border-top: 1px solid var(--rule); color: var(--faint); font-size: .8125rem; }
.jumpto__hint kbd + kbd { margin-left: -.15rem; }

@media (max-width: 63.99em) {
  .stage { height: auto; min-height: 0; max-height: none; padding-bottom: var(--s3); }
  .stage__frame { position: relative; }
  .stage__photo { position: static; display: block; width: 100%; height: auto; max-height: none; aspect-ratio: auto; }
  .stage__photo img { height: auto; max-height: 72svh; object-position: 50% 100%; -webkit-mask-image: none; mask-image: none; }  /* 2026-11-06 phone pass: the image keeps its own 4:5 up to 72svh (a phone held sideways got a 1015px portrait: the box was capped, the image inside it was not); the fade is for the laptop frame that cuts him at the right; here he stands whole, and the fade only paled his shoulder */  /* 2026-11-06 phone pass: the fade is for the laptop frame that cuts him at the right; here he stands whole, and the fade only paled his shoulder */
  .glide { bottom: 3%; }
  .stage__title { position: static; padding: var(--s4) var(--gutter) 0; }
  .stage__place { position: static; display: inline-block; margin: var(--s3) 0 0 var(--gutter); }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .sec__head { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .run { grid-template-columns: 1fr; gap: var(--s3); }
  .run__list { position: static; display: flex; gap: var(--s3); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); }
  .run__list li { flex: none; }
  .run__list:not([data-end]) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent); }  /* 2026-11-06 phone pass: the tab row scrolls; its right edge fades while tabs wait beyond it (craft.js sets data-end at the end), so a cut name reads as more, not as broken */
  .run__tab { display: block; border-top: 0; padding: .6rem 0; white-space: nowrap; }
  .run__n, .run__where { display: none; }
  .run__name { font-size: 1rem; }
  .run__tab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--ink); }
  .side, .body { min-width: 0; }
  .side { position: static; height: auto; padding: var(--s4) 0 0; display: block; }
  .side__name { display: none; }
  .snav { margin-top: var(--s4); }
  .snav ul { display: flex; flex-wrap: wrap; gap: .35rem var(--s3); }  /* on a phone the index wraps (a scroller read as cut off to three graders) */
  .snav a { white-space: nowrap; }
  .snav a::before { display: none; }
  .snav a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .4em; }
  .side__links { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
  .body { padding: var(--s6) 0 var(--s6); gap: var(--s6); }
}
@media (max-width: 47.99em) {
  .head { height: auto; position: static; }
  .head__in { flex-wrap: wrap; padding-top: var(--s2); padding-bottom: var(--s2); row-gap: var(--s2); }
  .nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav ul { white-space: nowrap; gap: .8rem; font-size: .875rem; }  /* .8rem since round 49: "About" sets wider than "Roots", and at .9rem the row ran 3px past a 375 window, clipping Contact */
  .jump { display: none; }
  .xp__row { grid-template-columns: 1fr; gap: .2rem; }
  .run__specs { grid-template-columns: 1fr; gap: var(--s2); }
  .with__photo img { aspect-ratio: 3 / 2; }
  .rail--wide { display: none; }
  .rail--tall { display: block; max-width: 18rem; }
  .rows a { grid-template-columns: 1fr; gap: .15rem; }
}
@media (hover: none) { .spot { display: none; } .run__btn { min-height: 2.75rem; padding: .5rem 1.1rem; } .xp:hover .lift:not(:hover), .rows:hover .lift:not(:hover) { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .run__btn { display: none; }
  .rail__tick { transition: none; }
  .jumpto[open] { animation: none; }
  .spot { display: none; }
  .glide__track { transform: none !important; }
  .lift:hover, .lift:focus-visible, .lift:active { transform: none; }
  .more:hover::after { transform: none; }
  * { transition-duration: 0s !important; }
}

/* Layout lab (2026-11-02, DIRECTION.md round 16): versions B and C of Portfolio, the same markup and copy as A under a
   class on <body>, built to be judged blind against A. The winner becomes Portfolio; the loser's rules are deleted. */
.rail__done { display: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }

/* shared by B and C: the rail carries the page (the reviewer's change 1) */
:is(.v-b, .v-c) .rail__done { display: inline; }
:is(.v-b, .v-c) .rail__line { stroke: color-mix(in srgb, var(--ink) 20%, transparent); stroke-width: 2; }
:is(.v-b, .v-c) .rail__mark--step { r: 5px; }
:is(.v-b, .v-c) .rail__mark { stroke-width: 1.75; }
:is(.v-b, .v-c) circle.rail__mark:not(.rail__mark--step) { r: 6.5px; }
:is(.v-b, .v-c) path.rail__mark { transform-box: fill-box; transform-origin: center; transform: scale(1.3); }
:is(.v-b, .v-c) .rail__halo { r: 13px; }
:is(.v-b, .v-c) .run--single .rail--wide .rail__label { font-size: 22px; }
:is(.v-b, .v-c) .rail__node:not(.rail__node--accent):not(.is-live):not(.is-hot) .rail__label { fill: color-mix(in srgb, var(--ink) 55%, transparent); }
:is(.v-b, .v-c) .rail__chip circle { fill: var(--ink); r: 6px; }
:is(.v-b, .v-c) .rail__chip.is-held circle { fill: #b9b6af; }
:is(.v-b, .v-c) .rail--wide { margin: var(--s3) 0 var(--s2); }
:is(.v-b, .v-c) .rail--tall .rail__lane { stroke: transparent; }
/* the case reads as a lede and its detail (the reviewer's change 3) */
:is(.v-b, .v-c) .run__case p:first-child { font-size: 1.125rem; line-height: 1.55; color: var(--ink); max-width: 60ch; }
:is(.v-b, .v-c) .run__case p + p { color: var(--muted); max-width: 62ch; }
@media (min-width: 48em) { :is(.v-b, .v-c) .run__specs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 42rem; } }
:is(.v-b, .v-c) .run__spec dt { font-size: .75rem; letter-spacing: .02em; }
:is(.v-b, .v-c) .sys .run__panel { background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: var(--s5) 0 0; }
:is(.v-b, .v-c) .sys .rail__halo { fill: var(--ground); }
:is(.v-b, .v-c) .sys .rail__chip circle { stroke: var(--ground); }
:is(.v-b, .v-c) .body--page { gap: var(--s7); }
:is(.v-b, .v-c) .sys--open + .sys--open { margin-top: 0; }
:is(.v-b, .v-c) .sys--lead .run--single .run__title { font-size: clamp(2rem, 1.4rem + 1.2vw, 2.5rem); }
:is(.v-b, .v-c) .sys--open .run--single .run__title { font-size: clamp(1.5rem, 1.2rem + .7vw, 1.875rem); }
:is(.v-b, .v-c) .side__intro p:last-child { text-wrap: pretty; }
:is(.v-b, .v-c) #with-h { font-weight: 500; }

/* B: the two columns kept, the type hierarchy put right side up (the reviewer's change 2) */
.v-b .side--page .side__h1 { font-size: clamp(2.5rem, 1.7rem + 1.4vw, 3.125rem); letter-spacing: -.035em; line-height: 1.02; }
.v-b .side--page { padding-top: var(--s4); }
.v-b .side--page .snav { margin-top: var(--s2); }
.v-b .snav--long a { padding: .2rem 0; }
.v-b .side__intro { font-size: .9375rem; }
.v-b .side__intro { gap: var(--s1); }
:is(.v-b, .v-c) .rail--wide .rail__lane { stroke-opacity: .45; }
.v-b .with__photo--top { margin-top: calc(var(--s5) * -1 + .4rem); }

/* C: one column, the drawing leads (after ciechanow.ski): a header block, then each system with its rail at the full
   column and the text under it */
@media (min-width: 64em) {
  .v-c .doc--page { display: block; max-width: 54rem; }
  .v-c .side--page { position: static; height: auto; overflow: visible; padding: var(--s7) 0 var(--s5); display: block; }
  .v-c .side__h1 { font-size: clamp(3rem, 1.8rem + 3vw, 5.25rem); letter-spacing: -.04em; line-height: 1; max-width: 14ch; }
  .v-c .side__intro { max-width: 38rem; font-size: 1.125rem; margin-top: var(--s4); }
  .v-c .snav--long { margin-top: var(--s5); }
  .v-c .snav ul { display: flex; flex-wrap: wrap; gap: .4rem var(--s4); }
  .v-c .snav a::before { display: none; }
  .v-c .snav a { padding: .3rem 0; font-size: .875rem; }
  .v-c .snav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .4em; }
  .v-c .side__links { flex-direction: row; align-items: center; gap: var(--s3); margin-top: var(--s4); }
  .v-c .body--page { padding-top: var(--s3); }
  .v-c .with__photo--top img { aspect-ratio: 21 / 9; }
}

/* B, round 2 (three blind judges, 2026-11-02): a real type scale, the rail as the hero, an index with room */
.v-b .side--page { padding: var(--s5) 0 var(--s3); }
.v-b .side--page .side__h1 { font-size: clamp(2.75rem, 1.2rem + 3.2vw, 4.75rem); letter-spacing: -.04em; line-height: .98; max-width: 7ch; }
.v-b .side--page .snav { margin-top: var(--s5); }
.v-b .snav--long ul { gap: .15rem; }
.v-b .snav--long a { padding: .42rem 0; font-size: .875rem; }
.v-b .body__intro { margin: 0; max-width: 40rem; font-size: 1.1875rem; line-height: 1.55; color: var(--ink); gap: var(--s2); }
.v-b .body__intro p + p { color: var(--muted); font-size: 1.0625rem; }
.v-b .with__photo--top { margin-top: 0; }
.v-b .run__case { font-size: 1.0625rem; }
.v-b .run__case p:first-child { font-size: 1.1875rem; }
.v-b .run--single .rail--wide .rail__label { font-size: 23px; font-weight: 500; }
.v-b .rail__mark--step { r: 6px; }
.v-b circle.rail__mark:not(.rail__mark--step) { r: 8px; }
.v-b path.rail__mark { transform: scale(1.55); }
.v-b .rail__halo { r: 16px; }
.v-b .rail__done { stroke-width: 3; }
.v-b .rail__chip circle { r: 7px; }
.v-b .run--single .rail--wide .rail__chipname { font-size: 17px; }
.v-b .run__rail { padding-top: 0; }
.v-b .run__btn { position: static; display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 var(--s1); min-height: 2.5rem; padding: 0 1rem; }
.v-b .run__btn::before { content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.v-b .rail--wide { margin: 0; }
.v-b .sys .run__panel { gap: var(--s3); }
@media (max-width: 63.99em) {
  .v-b .side--page .side__h1 { max-width: none; font-size: clamp(2.5rem, 1.5rem + 5vw, 3.25rem); }
  .v-b .body__intro { margin-top: var(--s3); }
}
.v-b .rail--wide .rail__chipname { transform: translateY(12px); }  /* a waiting piece's name sits clear of the larger check marker */
@media (max-width: 63.99em) { .v-b .snav--long ul { gap: .35rem var(--s3); } .v-b .snav--long a { padding: .2rem 0; } }

/* Portfolio S (2026-11-02, DIRECTION.md round 17): the blank-page scroll-driven explainer. One wide grid; a hero with
   the headline at display size and the photo; a typographic index of the seven; then each system as a section whose
   drawing stays pinned while its four steps scroll past, the piece moving to the step being read. */
.sxp { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sxh { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: 'h photo' 'text photo'; gap: 0 clamp(2rem, 5vw, 6rem); align-items: start; padding: var(--s6) 0 var(--s6); }
.sxh__h1 { grid-area: h; } .sxh__text { grid-area: text; } .sxh__photo { grid-area: photo; align-self: start; margin-top: 1.4rem; }
.sxh__h1 { font: 500 clamp(3.25rem, 1.5rem + 5.6vw, 7.5rem)/.95 var(--sans); letter-spacing: -.045em; max-width: 9ch; }
.sxh__lede { margin-top: var(--s5); font: 500 clamp(1.25rem, 1rem + .6vw, 1.5rem)/1.4 var(--sans); letter-spacing: -.01em; max-width: 34ch; }
.sxh__more { margin-top: var(--s2); color: var(--muted); max-width: 52ch; font-size: 1.0625rem; }
.sxh__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s5); }
.sxh__photo { display: block; background: var(--stone); overflow: hidden; border-radius: 2px; }
.sxh__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }

.sxi { border-top: 1px solid var(--ink); margin-bottom: var(--s7); }
.sxi ol { list-style: none; padding: 0; margin: 0; }
.sxi__row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 22rem 1.5rem; align-items: baseline; gap: var(--s3); padding: 1.1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.sxi__n { font-size: .8125rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.sxi__name { font: 500 clamp(1.5rem, 1rem + 1.4vw, 2.5rem)/1.1 var(--sans); letter-spacing: -.025em; }
.sxi__meta { font-size: .9375rem; color: var(--muted); }
.sxi__arrow { color: var(--faint); text-align: right; transition: transform .2s var(--ease), color .2s var(--ease); }
.sxi__row:hover .sxi__arrow { color: var(--accent); transform: translateY(3px); }
.sxi__row:hover .sxi__name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .15em; }
.sxi__name { transition: transform .2s var(--ease); }
.sxi__row:hover .sxi__name { transform: translateX(.5rem); }  /* transform, not padding: no layout on hover */
.sxi__row:hover .sxi__n { color: var(--accent); }

.sx { padding: var(--s6) 0 10rem; border-top: 1px solid var(--rule); scroll-margin-top: var(--head-h); }
.sx__head { display: grid; gap: var(--s2); }
.sx__title { font: 500 clamp(2.25rem, 1.2rem + 3vw, 4.5rem)/1 var(--sans); letter-spacing: -.035em; }
.sx__where { color: var(--muted); font-size: 1rem; }
.sx__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 14rem)); gap: var(--s2) var(--s5); margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--rule); max-width: 48rem; }
.sx__spec { display: grid; gap: .2rem; align-content: start; }
.sx__spec dt { font-size: .8125rem; color: var(--muted); }
.sx__spec dd { margin: 0; font-size: 1rem; }
.sx__body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; column-gap: clamp(2rem, 5vw, 5rem); margin-top: var(--s5); }
.sx__body > :not(.sx__fig) { grid-column: 1; }
.sx__fig { grid-column: 2; grid-row: 1 / span 4; }
.sx--flip .sx__body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.sx--flip .sx__body > :not(.sx__fig) { grid-column: 2; }
.sx--flip .sx__fig { grid-column: 1; }
.sx__lede { font: 500 clamp(1.25rem, 1rem + .8vw, 1.75rem)/1.35 var(--sans); letter-spacing: -.015em; max-width: 30ch; }
.sx__steps { list-style: none; padding: 0; margin: var(--s5) 0 0; }
.sx__step { padding: var(--s4) 0 var(--s6) var(--s3); border-left: 2px solid var(--rule); transition: border-color .3s var(--ease); }
.sx__stepname { font: 500 1.375rem/1.25 var(--sans); letter-spacing: -.012em; color: var(--ink); }
.sx__step p { margin-top: .4rem; font-size: 1.0625rem; line-height: 1.6; max-width: 48ch; color: var(--muted); transition: color .3s var(--ease); }
.sx__step.is-on { border-left-color: var(--accent); }
.sx__step.is-hint { border-left-color: var(--ink); }
.sx__step.is-hint .sx__stepname, .sx__step.is-hint p { color: var(--ink); }
.sx__step.is-on p { color: var(--ink); }
.sxp:not([data-js]) .sx__step p, .sxp:not([data-js]) .sx__stepname { color: var(--ink); }  /* without the script every step reads at full strength */
.sx__step:last-child { padding-bottom: var(--s4); }
.sx__after { margin-top: var(--s4); font-size: 1.0625rem; line-height: 1.6; max-width: 52ch; }
.sx__more { margin-top: var(--s3); }
.sx__fig { position: sticky; top: calc(var(--head-h) + 8vh); align-self: start; margin: 0; }
.sx__strip { display: none; }

.sx__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sx__edge { fill: none; stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-width: 2; stroke-linecap: round; transition: stroke .5s var(--ease); }
.sx__edge.is-done { stroke: var(--accent); stroke-width: 3; }
.sx__deco { fill: none; stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.5; transition: stroke .4s var(--ease); }
.sx__decog.is-on .sx__deco { stroke: var(--ink); }
.sx__arrow { stroke-linecap: round; stroke-linejoin: round; }
.sx__gatebar { stroke-width: 2.5; stroke-linecap: round; }
.sx__halo { fill: var(--ground); }
.sx__mark { fill: var(--ground); stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 2; transition: stroke .3s var(--ease), fill .3s var(--ease); }
.sx__mark--dot { fill: color-mix(in srgb, var(--ink) 45%, transparent); stroke: none; }
.sx__label { font: 500 19px var(--sans); fill: var(--muted); transition: fill .3s var(--ease); }
.sx__svg--wide .sx__label { font-size: 14px; opacity: 0; transition: opacity .2s var(--ease); }
.sx__svg--wide .sx__node.is-on .sx__label { opacity: 1; }
.sxp:not([data-js]) .sx__svg--wide .sx__label { opacity: 1; }
.sx__node.is-past .sx__mark { stroke: var(--ink); }
.sx__node.is-past .sx__mark--dot { fill: var(--ink); }
.sx__node.is-on .sx__mark { stroke: var(--accent); }
.sx__node.is-on .sx__mark--dot { fill: var(--accent); }
.sx__node.is-on .sx__label, .sx__node.is-past .sx__label { fill: var(--ink); }
.sx__svg--tall .sx__node { cursor: pointer; outline: none; }
.sx__svg--tall .sx__node:hover .sx__halo, .sx__svg--tall .sx__node:focus-visible .sx__halo { fill: color-mix(in oklch, var(--accent) 14%, white); }
.sx__svg--tall .sx__node:focus-visible .sx__halo { stroke: var(--accent); stroke-width: 2; }
.sx__svg--tall .sx__node:hover .sx__label { fill: var(--ink); }
.sx__branch { fill: none; stroke: #b9b6af; stroke-width: 1.5; stroke-dasharray: 3 5; }
.sx__node.is-on .sx__branch { stroke: var(--accent); }
.sx__held { fill: #b9b6af; }
.sx__holdlabel { font: 400 15px var(--sans); fill: var(--muted); }
.sx__piece { transition: transform .6s var(--ease); }
.sx__ring { fill: none; stroke: var(--ink); stroke-width: 2; }
.sx__piecename { font: 500 15px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--ground); stroke-width: 6px; stroke-linejoin: round; }
.sxp:not([data-js]) .sx__piece { display: none; }
.sxw { padding: var(--s6) 0 var(--s7); border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); }
.sxw__h { font: 500 clamp(2.25rem, 1.4rem + 2.4vw, 4rem)/1 var(--sans); letter-spacing: -.035em; }
.sxw__text { display: grid; gap: var(--s2); font-size: 1.0625rem; line-height: 1.6; max-width: 52ch; }

@media (max-width: 63.99em) {
  .sxh { grid-template-columns: 1fr; grid-template-areas: 'h' 'photo' 'text'; padding-top: var(--s4); }
  .sxh__photo { margin: var(--s4) 0 0; }
  .sxh__photo img { aspect-ratio: 4 / 3; }
  .sxi__row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .sxi__meta, .sxi__arrow { display: none; }
  .sxi__row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .sx__body { grid-template-columns: 1fr; margin-top: var(--s4); }
  .sx__strip { display: block; position: sticky; top: 0; z-index: 3; background: var(--ground); padding: .6rem calc(var(--gutter) + 1rem) .3rem; margin: var(--s4) calc(-1 * var(--gutter)) 0; border-bottom: 1px solid var(--rule); }
  .sx__step { padding: var(--s3) 0 var(--s5) var(--s3); }
  .sx { padding-bottom: var(--s7); }
  .sx__specs { grid-template-columns: 1fr 1fr; }
  .sxw { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sx__piece, .sx__done { transition: none; } }

/* round 18: "More it does" as hairline rows */
.sx__more ul { list-style: none; padding: 0; margin: 0; max-width: 42rem; }
.sx__more li { padding: .75rem 0; border-top: 1px solid var(--rule); color: var(--ink); font-size: 1rem; }
.sx__more summary { color: var(--ink); font-size: 1rem; }

/* round 19: the drawings carry the mechanism */
.sx__fig { position: sticky; top: calc(var(--head-h) + 6vh); align-self: start; margin: 0; }
.sx__hit { fill: transparent; pointer-events: all; }
.sx__svg--tall .sx__node:hover:not(.is-on) .sx__halo { fill: color-mix(in oklch, var(--accent) 10%, white); }
.sx__svg--tall .sx__node:focus-visible .sx__halo { fill: var(--ground); stroke: var(--ink); stroke-width: 2; }
.sx__deco.sx__fill { fill: color-mix(in srgb, var(--ink) 30%, transparent); }
.sx__decog.is-on .sx__deco.sx__fill { fill: var(--ink); }
.sx__deco.sx__strong { stroke-width: 2.5; }
.sx__hub { stroke-width: 2; }
.sx__edge.sx__spoke { stroke-width: 1.25; stroke-dasharray: 2 4; }
.sx__edge.sx__spoke.is-done { stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 1.25; }
.sx__edge.sx__loop { stroke-width: 2.5; }
.sx__edge.sx__loop.is-done { stroke-width: 3.5; }
.sx__edge.sx__dash { stroke-dasharray: 4 5; }
.sx__piecename { font-size: 13px; }
.sx__more { max-width: 36rem; }
@media (max-width: 63.99em) {
  .sx__body, .sx--flip .sx__body { grid-template-columns: 1fr; }
  .sx__body > *, .sx--flip .sx__body > *, .sx__fig, .sx--flip .sx__fig { grid-column: 1; grid-row: auto; }
  .sx__fig { display: block; position: static; max-width: 26rem; margin: var(--s4) auto 0; }
  .sx__strip { margin-top: var(--s3); }
}

/* round 20: drawings in full ink and filling their column, focus ring, tighter rhythm, a lead system */
.sx__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sx--flip .sx__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sx__fig { top: calc(var(--head-h) + 1.5rem); }
.sx__svg--tall { max-height: calc(100svh - var(--head-h) - 3rem); }
.sx__edge { stroke: color-mix(in srgb, var(--ink) 26%, transparent); stroke-width: 2.5; }
.sx__ink { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s var(--ease); }
.sx__ink.is-done { stroke-dashoffset: 0; }
.sx__ink.sx__loop { stroke-width: 3.5; }
.sx__deco { stroke: color-mix(in srgb, var(--ink) 50%, transparent); stroke-width: 2; }
.sx__mark { stroke: color-mix(in srgb, var(--ink) 65%, transparent); stroke-width: 2.5; }
.sx__mark--dot { fill: color-mix(in srgb, var(--ink) 65%, transparent); }
.sx__label { fill: var(--ink); }
.sx__holdlabel { font-size: 16px; }
.sx__svg--tall .sx__node:focus-visible .sx__halo { fill: var(--ground); stroke: var(--accent); stroke-width: 3; }
.sx__svg--tall .sx__node:focus-visible .sx__label { text-decoration: underline; text-decoration-color: var(--accent); }
.sx__step { padding: var(--s3) 0 var(--s5) var(--s3); }
.sx { padding-bottom: 6rem; }
.sx__specs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.sx__spec dt { font-size: .875rem; }
.sxp[data-js] .sx__step:not(.is-on):not(.is-hint) .sx__stepname { color: var(--muted); }
.sx__more summary { font-weight: 500; }
@media (max-width: 63.99em) {
  .sx__body, .sx--flip .sx__body { grid-template-columns: 1fr; }
  .sx--flip .sx__body > :not(.sx__fig) { grid-column: 1; }  /* the flip rule above outranks the phone reset */
  .sx__fig { max-width: none; margin-inline: 0; }  /* auto side margins shrink a grid item to the 300px default of an svg */
  .sx__svg--tall { max-height: none; }
  .sx__svg--wide .sx__label { font-size: 16px; }
  .sx__svg--tall .sx__label { font-size: max(21px, calc(15px / var(--k, 1))); }  /* --k from craft.js: 15px and 13.5px on screen at any phone width */
  .sx__svg--tall .sx__holdlabel, .sx__svg--tall .sx__piecename { font-size: max(17px, calc(13.5px / var(--k, 1))); }
  .sx__svg--wide .sx__label { font-size: max(16px, calc(14px / var(--k, 1))); }
}
@media (prefers-reduced-motion: reduce) { .sx__ink { transition: none; } }

/* round 21: heavier drawings, one title size, hover matches focus, footer rule on the content edge */
.sx__edge { stroke: color-mix(in srgb, var(--ink) 34%, transparent); stroke-width: 3; }
.sx__ink, .sx__ink.sx__loop { stroke-width: 4; }
.sx__deco { stroke: color-mix(in srgb, var(--ink) 60%, transparent); }
.sx__mark { stroke-width: 3; }
.sx__label { font-size: 21px; }
.sx__holdlabel { font-size: 17px; fill: var(--muted); }
.sx__piecename { font-size: 15px; }
.sx__svg--tall .sx__node:hover .sx__label { text-decoration: underline; text-decoration-color: var(--accent); }
.sx { padding-bottom: 4.5rem; }
.sx__more ul { padding-left: var(--s3); }
.foot { border-top: 0; background: linear-gradient(var(--rule), var(--rule)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }  /* the rule spans the content column, not the gutters */
@media (max-width: 37.5em) {
  .sx__specs { grid-template-columns: 1fr; gap: var(--s2); }
  .sx__spec { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; }
}
.sxh__links li > a:not(.pill) { display: inline-flex; align-items: center; min-height: 44px; }  /* round 21: the email link gets a full touch target (WCAG 2.5.8) */

/* round 22: two systems run full width on laptops; the drawing and the four steps pin while four ticks scroll past */
.sx__bandfig, .sx__ticks { display: none; }
@media (min-width: 64em) {
  .sx--band .sx__body--band { display: block; }
  .sx--band .sx__fig { display: none; }
  .sx--band .sx__lede { max-width: 34ch; }
  .sx__band { display: grid; margin-top: var(--s5); }
  .sx__band > * { grid-area: 1 / 1; }
  .sx__pin { position: sticky; top: calc(var(--head-h) + 1rem); align-self: start; height: calc(100svh - var(--head-h) - 2rem); display: grid; align-content: center; gap: var(--s4); }
  .sx__bandfig { display: block; margin: 0; }
  .sx__svg--band { width: 100%; height: auto; max-height: 40svh; }
  .sx--band .sx__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
  .sx--band .sx__step { border-left: 0; border-top: 2px solid var(--rule); padding: var(--s3) var(--s4) 0 0; transition: border-color .3s var(--ease); }
  .sx--band .sx__step.is-on { border-top-color: var(--accent); }
  .sx--band .sx__step.is-hint { border-top-color: var(--ink); }
  .sx--band .sx__step p { max-width: 34ch; font-size: 1rem; }
  .sx__ticks { display: block; pointer-events: none; }
  .sx__tick { display: block; height: 55svh; }
  .sx--band .sx__rest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: var(--s4); }
  .sx--band .sx__after { margin-top: 0; }
  .sx--band .sx__more { margin-top: 0; }
  .sx__svg--band .sx__node { cursor: pointer; outline: none; }
  .sx__svg--band .sx__node:hover:not(.is-on) .sx__halo { fill: color-mix(in oklch, var(--accent) 10%, white); }
  .sx__svg--band .sx__node:focus-visible .sx__halo { fill: var(--ground); stroke: var(--accent); stroke-width: 3; }
}
@media (min-width: 64em) { .sx__tick:last-child { height: 90svh; } }  /* the last step holds while the pin is still in place */

/* round 23: the drawn objects: pages occlude what sits behind them, inner detail at a finer weight */
.sx__deco.sx__solid { fill: var(--ground); }
.sx__deco.sx__fine { stroke-width: 1.5; }
.sx__deco.sx__dashed { stroke-dasharray: 4 3; }

/* round 25: the schematic toolkit, three states only: waiting (hairline, faint text), done (ink at 60 percent), running (2px orange stroke on white; orange never fills) */
.sx__svg--sch { display: none; }
@media (min-width: 80em) { .sx__svg--sch { display: block; } .sx__svg--alt { display: none; } }
.sch__box { fill: var(--ground); stroke: var(--rule); stroke-width: 1.25; transition: stroke .3s var(--ease); }
.sch__core { stroke-width: 2; }
.sch__div { stroke: var(--rule); stroke-width: 1; }
.sch__t { font: 500 18px var(--sans); fill: var(--faint); transition: fill .3s var(--ease); }
.sch__key .sch__t { font-size: 19px; }
.sch__s, .sch__h { font: 400 16px var(--sans); fill: var(--faint); }
.sch__house { fill: none; stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.25; stroke-dasharray: 5 4; }
.sch__bin .sch__box, .sch__box.sch__bin { stroke-dasharray: 4 3; }
.sch__wire { fill: none; stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.5; transition: stroke .3s var(--ease); }
.sch__head { fill: none; stroke: context-stroke; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sch__flow { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 9; opacity: 0; transition: opacity .3s var(--ease); }
.sch__tap { fill: none; stroke: var(--rule); stroke-width: 1.25; transition: stroke .3s var(--ease); }
.sch__hold { stroke-dasharray: 4 4; }
.sch__part.is-on .sch__box, .sch__part[data-i="-1"] .sch__box { stroke: color-mix(in srgb, var(--ink) 60%, transparent); }
.sch__part.is-on .sch__t, .sch__part[data-i="-1"] .sch__t { fill: var(--ink); }
.sch__part.is-on .sch__s, .sch__part[data-i="-1"] .sch__s, .sch__part[data-i="-1"] .sch__h { fill: var(--muted); }
.sch__part.is-on .sch__wire { stroke: color-mix(in srgb, var(--ink) 55%, transparent); }
.sch__hot.is-now .sch__box { stroke: var(--accent); stroke-width: 2; }
.sch__hot.is-now .sch__flow { opacity: 1; }
.sch__hot.is-now .sch__tap { stroke: var(--accent); }
.sx__svg--sch .sx__piecename { font-size: 16px; }
@media (min-width: 80em) {
  .sx--sch .sx__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sx--sch.sx--flip .sx__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes sch-flow { to { stroke-dashoffset: -24; } }
  .sch__hot.is-now .sch__flow { animation: sch-flow 1s linear infinite; }
}

/* round 26: the system map; stations light as their step is read, feeds carry a small label */
.sch__station { stroke: var(--rule); stroke-dasharray: none; stroke-width: 1.5; transition: stroke .3s var(--ease); }
.sch__part.is-on .sch__station { stroke: color-mix(in srgb, var(--ink) 40%, transparent); }
.sch__part.is-now .sch__station { stroke: var(--ink); }
.sch__spoke { stroke-dasharray: 3 4; }
.sch__f { font: 500 16px var(--sans); fill: var(--faint); paint-order: stroke; stroke: var(--ground); stroke-width: 5px; }
.sch__part.is-on .sch__f { fill: var(--ink); }
.sch__hot.is-now .sch__f { fill: var(--accent); }

/* round 27: "More it does" always open (Jose: a fold hides the build); two columns of hairline rows on wide screens */
.sx__morehead { font: 500 1.0625rem/1.3 var(--sans); color: var(--ink); margin: 0 0 var(--s2); }
.sx__more--open { margin-top: var(--s4); max-width: none; }
.sx__more--open ul { max-width: none; }
@media (min-width: 64em) { .sx__more--open ul { columns: 2; column-gap: var(--s4); } .sx__more--open li { break-inside: avoid; } }

/* round 28: the full-width map; stations sit over their step columns; the whole machine shows until a step is pointed at */
.sx__widefig { display: none; margin: var(--s5) 0 0; }
@media (min-width: 80em) {
  .sx--wide .sx__body--wide { display: block; }
  .sx--wide .sx__fig { display: none; }
  .sx--wide .sx__lede { max-width: 40ch; }
  .sx__widefig { display: block; }
  .sx__svg--map { display: block; width: 100%; height: auto; overflow: visible; }
  .sx--wide .sx__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(100% * 40 / 1184); margin: var(--s4) 0 0; }
  .sx--wide .sx__step { border-left: 0; border-top: 2px solid var(--rule); padding: var(--s3) 0 0; }
  .sx--wide .sx__step.is-on { border-top-color: var(--accent); }
  .sx--wide .sx__step.is-hint { border-top-color: var(--ink); }
  .sx--wide .sx__step p { font-size: 1rem; max-width: none; color: var(--ink); }
  .sx--wide .sx__stepname { color: var(--ink); }
  .sx--wide .sx__rest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); margin-top: var(--s5); }
  .sx--wide .sx__more--open { margin-top: 0; }
  .sx--wide .sx__more--open ul { columns: 1; }
  .sx__svg--map .sx__node { cursor: pointer; outline: none; }
  .sx__svg--map .sx__node:focus-visible .sx__halo { fill: var(--ground); stroke: var(--accent); stroke-width: 3; }
}
.sch__t--sm { font-size: 16px; }
.sx__svg--map .sch__t { font-size: 16px; } .sx__svg--map .sch__s, .sx__svg--map .sch__f { font-size: 14px; }
.sx__svg--map .sx__label { font-size: 19px; }
.sx__svg--map .sx__piece { display: none; }  /* the lit station shows where the reader is */
.sx__more--open ul { padding-left: 0; }

/* round 30: maps as hairline rows; outlines only on the key part, the held bin and the full bars; the lit dot stays ink with an orange ring */
.sch__rule { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.5; }
.sch__row { stroke: var(--rule); stroke-width: 1; }
.sch__stationhit { fill: transparent; pointer-events: all; }
.sch__gate { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 2; stroke-linecap: round; }
.sch__hot.is-now .sch__gate { stroke: var(--accent); }
.sch__funnel { fill: none; stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1.25; stroke-dasharray: 2 5; }
.sch__lane { stroke-dasharray: none; }
.sch__ledger { stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 1.25; }
.sch__big { stroke-width: 2; }
.sx__svg--map .sch__t { fill: var(--muted); }
.sx__svg--map .sch__t--sm { font-size: 15px; }
.sx__svg--map .sch__s { font-size: 14px; fill: var(--muted); }
.sx__svg--map .sch__part.is-on .sch__t { fill: var(--ink); }
.sx__svg--map .sch__keybox { stroke: color-mix(in srgb, var(--ink) 60%, transparent); stroke-width: 1.5; }
.sx__svg--map .sch__hot.is-now .sch__keybox { stroke: var(--accent); stroke-width: 2; }
.sx__svg--map .sch__part:not(.is-on) .sch__rule { stroke: var(--rule); }
.sx__svg--map .sx__label { font-size: 18px; }
.sch__upkeep { letter-spacing: .01em; }
.sx__node.is-on .sx__mark--dot { fill: var(--ink); }   /* orange never fills: the ring around the lit step carries it */
.sx__node.is-on .sx__halo { stroke: var(--accent); stroke-width: 2; }
.sx__parts { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 0; }
.sx__parts li { font-size: .875rem; color: var(--muted); padding: .35rem 0; border-top: 1px solid var(--rule); }
@media (min-width: 80em) { .sx--wide .sx__lede { font-size: 1.5rem; line-height: 1.4; max-width: 52ch; } .sx--wide .sx__widefig { margin-top: var(--s4); } .sx--wide .sx__steps { margin-top: var(--s3); } }
@media (max-width: 63.99em) { .sx__strip { padding-bottom: .6rem; box-shadow: 0 6px 0 var(--ground); } }
.sx__parts li { line-height: 1.45; }
.sx__svg--map .sch__part { pointer-events: none; }  /* the station's hit area takes the pointer even over its text */
.sx__svg--map .sch__stationhit { pointer-events: all; }

/* round 31: a drawn object heads every station; phone parts read like the desktop rows */
.sch__glyph { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s var(--ease); }
.sch__glyphfill { fill: var(--ground); }
.sch__part.is-on .sch__glyph { stroke: var(--ink); }
.sch__hot.is-now .sch__glyph { stroke: var(--accent); }
.sx__parts { margin-top: var(--s3); gap: 6px; }
.sx__parts li { font-size: .9375rem; line-height: 1.4; color: var(--ink); padding: .55rem 0 .55rem; border-top: 1px solid var(--rule); }
.sx__parts .sx__partsub { display: block; font-size: .875rem; color: var(--muted); }
.sx__parts .sx__part--key { border: 1.5px solid color-mix(in srgb, var(--ink) 60%, transparent); border-radius: 3px; padding: .55rem .75rem; }
.sx__parts .sx__part--held { border: 1.5px dashed color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 3px; padding: .45rem .75rem; color: var(--muted); }
.sx__step.is-on .sx__part--key { border-color: var(--accent); }
@media (max-width: 63.99em) {
  .sx__strip { padding-bottom: 1rem; box-shadow: 0 10px 0 var(--ground); }
  .sx__step { padding: var(--s3) 0 var(--s4) var(--s3); scroll-margin-top: 5rem; }
}
@media (min-width: 80em) { .sx--wide .sx__rest { margin-top: var(--s4); } .sx--wide { padding-bottom: 3.5rem; } }

/* expert audit fixes (2026-11-02, docs/website/qa/expert-audit-2026-11-02/interaction.md) */
.sx__svg--map.is-pointing .sch__part:not(.is-now) { opacity: .3; transition: opacity .25s var(--ease); }
.sx__svg--map.is-pointing .sch__part[data-i="-1"] { opacity: .45; }
.sx__svg--map .sch__part { transition: opacity .25s var(--ease); }
.sx__svg .sx__node:focus-visible .sx__hit { stroke: var(--ink); stroke-width: 2; rx: 6px; }
.sx__svg .sx__node:hover:not(:focus-visible) .sx__halo { stroke-width: 2; }
.sxp:not([data-js]) .sx__svg--map .sch__rule, .sxp:not([data-js]) .sx__svg--map .sch__box, .sxp:not([data-js]) .sx__svg--map .sch__row { stroke: color-mix(in srgb, var(--ink) 55%, transparent); }
.sxp:not([data-js]) .sx__svg--map .sch__t { fill: var(--ink); }
.sxp:not([data-js]) .sx__strip { visibility: hidden; }  /* without the script the strip shows no state */
.sx__svg--tall .sx__hit { fill: transparent; pointer-events: all; }
@media (max-width: 63.99em) {
  .sx__strip { box-shadow: none; }
  .sx__strip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px; background: linear-gradient(var(--ground), color-mix(in srgb, var(--ground) 0%, transparent)); pointer-events: none; }
  .sxp[data-js] .sx__strip:not([data-show]) { visibility: hidden; }
  .sx__step { scroll-margin-top: calc(83px + 1rem); }
}
/* round 33: the short-screen height cap is off; the drawings now fit their content and run edge to edge on the grid */

/* round 32: the mechanism drawings (tools/mechanisms.py): main flow 2px, branch 1.25px, return dashed, trace dotted; orange strokes only on the read step's key parts */
.mx__main { fill: none; stroke: color-mix(in srgb, var(--ink) 70%, transparent); stroke-width: 2; stroke-linecap: round; }
.mx__branch { fill: none; stroke: color-mix(in srgb, var(--ink) 38%, transparent); stroke-width: 1.25; }
.mx__ret { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 6 4; }
.mx__trace { fill: none; stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1.25; stroke-dasharray: 1 4; stroke-linecap: round; }
.mx__store, .mx__line--store { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1.25; }
.mx__tick { stroke: color-mix(in srgb, var(--ink) 50%, transparent); stroke-width: 1.25; }
.mx__dot { fill: var(--ground); stroke: color-mix(in srgb, var(--ink) 60%, transparent); stroke-width: 1.5; }
.mx__gate { fill: none; stroke: color-mix(in srgb, var(--ink) 80%, transparent); stroke-width: 3; stroke-linecap: square; }
.mx__ring { fill: var(--ground); stroke: color-mix(in srgb, var(--ink) 80%, transparent); stroke-width: 2; }
.mx__held { fill: none; stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1.25; stroke-dasharray: 4 3; }
.mx__loop { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 2; }
.mx__wall { fill: none; stroke: color-mix(in srgb, var(--ink) 60%, transparent); stroke-width: 1.5; }
.mx__frame { fill: none; stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1; }
.mx__frame--dash { stroke-dasharray: 5 4; }
.mx__t { font: 400 15px var(--sans); fill: var(--muted); }
.mx__t--key { font-weight: 500; }
.mx__t--held { font-size: 14px; fill: var(--muted); }
.mx__s { font: 400 14px var(--sans); fill: var(--faint); }
.mx__step { font-size: 18px; }
.sch__part.is-on .mx__t { fill: var(--ink); }
.sch__part.is-on .mx__s { fill: var(--muted); }
.sch__hot.is-now .mx__gate, .sch__hot.is-now .mx__ring, .sch__hot.is-now .mx__dot--key, .sch__hot.is-now .mx__tick--key, .sch__hot.is-now .mx__main, .sch__hot.is-now .mx__loop { stroke: var(--accent); }
.sch__hot.is-now .mx__t--key { fill: var(--ink); }
.sxp:not([data-js]) .sx__svg--mech .mx__t { fill: var(--ink); }

/* round 33: the finishing pass from blind round 16 */
.sx__svg--mech .mx__t, .sx__svg--mech .mx__s, .sx__svg--mech .mx__t--held { paint-order: stroke; stroke: var(--ground); stroke-width: 5px; stroke-linejoin: round; }
.sx__svg--mech .mx__s { fill: var(--muted); }
.sch__hot.is-now .mx__branch { stroke: var(--accent); }
.sx__svg--map.is-pointing .sch__part:not(.is-now) { opacity: 1; }
.sx__svg--map.is-pointing .sch__part:not(.is-now) :is(path, line, circle, rect) { opacity: .3; }
.sx__svg--map.is-pointing .sch__part:not(.is-now) text { fill: var(--muted); }
.sx__svg .sx__node:focus-visible .sx__halo { stroke: none; }
.sxi__row:hover .sxi__name { transform: none; }
@media (min-width: 80em) {
  .sx--wide .sx__stepname, .sxp[data-js] .sx--wide .sx__step:not(.is-on):not(.is-hint) .sx__stepname { color: var(--ink); }
  .sx--wide .sx__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: end; }
  .sx--wide .sx__title, .sx--wide .sx__where { grid-column: 1; }
  .sx--wide .sx__specs { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr; gap: var(--s2); margin: 0; padding-top: 0; border-top: 0; align-self: end; }
  .sx--wide .sx__spec { grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; }
  .sx--wide .sx__body--wide { margin-top: var(--s4); }
}
.sx__parts .sx__part--key { font-weight: 500; }  /* the key part reads by weight, not by a side rule */
.sx__parts .sx__part--held { border: 0; border-left: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 0; padding: .45rem 0 .45rem .75rem; border-top: 1px solid var(--rule); }
@media (max-width: 63.99em) {
  .sx__step { border-left-color: var(--rule); position: relative; }
  .sx__step.is-on { border-left-color: var(--rule); }
  .sx__step.is-on::before { content: ""; position: absolute; left: -2px; top: var(--s3); width: 2px; height: 1.75rem; background: var(--accent); }
}
.sx__parts .sx__part--key, .sx__step.is-on .sx__part--key { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: .55rem 0; font-weight: 500; }  /* no box: the key part reads by weight */
.sx__parts .sx__part--held { border: 0; border-top: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 0; padding: .55rem 0; }

/* round 34: the clear version (head-to-head judges): parts in a compact two-column grid, tighter steps, no floating marker words, larger small text */
.sx__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; }
.sx__parts li { font-size: .9375rem; padding: .5rem 0; }
.sx__parts .sx__partsub { font-size: .8125rem; color: var(--muted); }
.sx__step { padding-bottom: var(--s4); }
.sx__svg--tall .sx__piecename { display: none; }
.sx__svg--tall .sx__label { font-weight: 500; }
@media (max-width: 37.5em) { .sx__parts { grid-template-columns: 1fr; } }

/* round 34b: each system numbered as in the index, the opening before the facts, a wider drawing column, a clear break between systems */
.sx__num { font: 500 .8125rem/1 var(--sans); letter-spacing: .08em; color: var(--faint); font-variant-numeric: tabular-nums; margin-bottom: var(--s2); }
.sx:not(.sx--wide) .sx__specs { margin-top: var(--s3); }
.sx:not(.sx--wide) { padding-top: var(--s7); }
@media (min-width: 80em) {
  .sx:not(.sx--wide) .sx__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sx:not(.sx--wide) .sx__fig { top: 96px; }
}

/* round 35: the combined page (Jose's two favourites): the two-column document with the boxed map in each system's panel */
.run__map { margin: var(--s4) 0 var(--s3); }
.sx__svg--grid { display: block; width: 100%; height: auto; overflow: visible; }
.sx__svg--grid .sch__t { font-size: 17px; fill: var(--ink); }
.sx__svg--grid .sch__s, .sx__svg--grid .sch__f, .sx__svg--grid .sch__h { font-size: 15px; }
.sx__svg--grid .sch__f { fill: var(--ink); }
.sx__svg--grid .sx__label { font-size: 20px; fill: var(--ink); }
.sx__svg--grid .sch__box { stroke: color-mix(in srgb, var(--ink) 55%, transparent); }
.sx__svg--grid .sch__station { stroke: color-mix(in srgb, var(--ink) 40%, transparent); }
.run__scope--open { margin-top: var(--s3); }
.run__scopehead { font: 500 1rem/1.3 var(--sans); color: var(--ink); margin: 0 0 var(--s1); }
.run__scope--open ul { color: var(--ink); }
.sx__svg--stack { display: none; }
.sch__fo { margin: 0; font: 400 15px/1.35 var(--sans); color: var(--muted); }
@media (max-width: 63.99em) { .run__map .sx__svg--grid:not(.sx__svg--stack) { display: none; } .run__map .sx__svg--stack { display: block; } }
.sx__svg--stack .sch__s, .sx__svg--stack .sch__f, .sx__svg--stack .sch__h { font-size: 16px; } .sx__svg--stack .sch__t { font-size: 17px; }  /* 13.5px or more on a phone */
.sx__svg--stack .sch__s, .sx__svg--stack .sch__f, .sx__svg--stack .sch__h { font-size: 17px; } .sx__svg--stack .sch__t { font-size: 18px; } .sx__svg--stack .sx__label { font-size: 20px; }
/* round 36b: no phone bleed; the first panel has no card now */
@media (max-width: 22.5em) { .sx__svg--stack .sch__s, .sx__svg--stack .sch__f, .sx__svg--stack .sch__h { font-size: 18px; } }  /* 13px or more at 320 wide */

/* round 36: the boxed map as an expert explanation: one main path, the steps in order, the person on the path, a key */
.grid__main { stroke: color-mix(in srgb, var(--ink) 85%, transparent); stroke-width: 2; }
.grid__spine { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.25; }
.grid__step { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.25; }
.sx__svg--grid .grid__key { stroke: var(--ink); stroke-width: 1.75; }
.sx__svg--grid .grid__person { stroke: var(--accent); stroke-width: 2; }
.grid__ring { fill: var(--ground); stroke: var(--accent); stroke-width: 2; }
.grid__ledger { stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 1.25; }
.grid__upkeep { margin: 0; font: 400 15px/1.45 var(--sans); color: var(--muted); }
.sx__svg--stack .grid__upkeep { font-size: 17px; }
.sx__svg--grid .sch__hold { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.75; }
.map__read { margin: 0 0 var(--s2); max-width: 62ch; font-size: .9375rem; line-height: 1.5; color: var(--ink); }   /* 2026-11-06: how to read a map, above its key */
.map__key { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin: 0 0 var(--s3); font-size: .875rem; color: var(--muted); }
.map__key svg { width: 16px; height: 16px; margin-right: .3rem; vertical-align: -3px; overflow: visible; }
.map__key svg[viewBox="0 0 24 16"] { width: 24px; }
.map__key .k-dot { fill: var(--ink); }
.map__key .k-line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.map__key .k-held { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sys { scroll-margin-top: 88px; }
.run__map { margin-top: var(--s5); }
/* every system on the same footing: no card or larger title for the first */
.sys--lead .run__panel { background: none; padding: 0; border: 0; box-shadow: none; }
.v-m .sys .run--single .run__title { font-size: clamp(1.75rem, 1.2rem + 1vw, 2.25rem); letter-spacing: -.025em; line-height: 1.1; }  /* one title size for all seven systems */

/* round 37: each system as its own boxed line */
.row__p { margin: 0; font: 400 13.5px/1.2 var(--sans); color: var(--muted); }
.row__p b { display: block; font-weight: 500; font-size: 14.5px; color: var(--ink); margin-bottom: 1px; }
.row__core { margin: 0; font: 400 13.5px/1.35 var(--sans); color: var(--muted); }
.row__core b { font-weight: 500; color: var(--ink); margin-right: .35em; }
.row__gate { fill: var(--ground); stroke: var(--ink); stroke-width: 1.5; }
.row__loop { stroke-width: 2; }
.sx__svg--row .sx__label { font-size: 16px; }
.sx__svg--row .sch__f { font-size: 13.5px; }
/* judges20: the key sits with its map; each marker stays with its word; one line on a phone */
.map__key { margin-bottom: .5rem; }
.map__key span { white-space: nowrap; }
.v-m .run__map { margin-top: var(--s4); }
@media (max-width: 30em) { .map__key { gap: .35rem .75rem; font-size: .8125rem; } .map__key svg { margin-right: .2rem; } }
/* judges20: the main path reads first; supporting parts quieter; a check's held branch leaves the path and stops */
.sx__svg--row .row__aux { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1; }
.row__p--run { line-height: 1.19; }
.row__p--run b { display: inline; font-size: 13.8px; margin: 0 .3em 0 0; }
.row__p--run span { font-size: 13.8px; }
.row__p span { display: block; }
.row__p--run span { display: inline; }
/* 2026-11-06 diagram pass: the row map sets its own lines (tools/gridmap.py measures Hanken Grotesk and wraps), one anatomy for every part */
.row__tt { font: 500 14.5px var(--sans); fill: var(--ink); }
.row__ts { font: 400 13.5px var(--sans); fill: var(--muted); }
.row__run, .row__up { font: 400 13.5px var(--sans); fill: var(--muted); }
.row__run .row__b { font-weight: 500; fill: var(--ink); }
.row__up .row__b { font-weight: 500; fill: var(--muted); }
.row__branch { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: 4 3; }
.sx__svg--row .grid__step.row__main { stroke: var(--ink); stroke-width: 1.75; }
/* the row map's text falls under 13.5px below 1280 wide; between 1024 and 1280 the stacked map shows instead, capped */
@media (min-width: 64em) and (max-width: 79.99em) {
  .run__map .sx__svg--row { display: none; }
  .run__map .sx__svg--stack { display: block; max-width: 20.5rem; }   /* 13.5px or more */
}
.map__key .k-main { fill: none; stroke: var(--ink); stroke-width: 2.5; }   /* judges21: the heavy box was not in the key */

/* Student (2026-11-03, evening restart on Jose's bar, "extremely professional and high quality"): the anatomy he
   approved on Portfolio. The two-column document; the right column opens on the photograph, then the record: the EG
   Capital entry as the lead in the stone panel with its title at display size, the three earlier entries as open ruled
   sections (one lead and a list, never a card kit: DIRECTION.md round 15); every entry carries a spec row (dates, place,
   tools) in the panel's cell style, then its lines. Then Certificates and tools and How I work as ruled sections.
   Tokens only; nothing new. The two earlier Student builds of the day (the Ledger candidate, the Appleton rebuild)
   are retired; their records stay in DIRECTION.md. */
.stu .side--page .side__h1 { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.4rem); max-width: 16ch; }
.stu .body--page { padding-top: var(--s5); }  /* the photograph's top on the h1's line (three judges: it floated 48px lower) */
.stu .side__intro { max-width: 30rem; color: var(--muted); }
.stu .side__intro p { text-wrap: pretty; }
.stu .side__now { color: var(--ink); font-weight: 500; }
/* Student's column fits one screen (Jose, 2026-11-06: "Should we make this a little smaller so it all fits in 1 frame"): the natural height was 690 to 716 px, fitting only a viewport 754 px or taller; this brings it to 603 px (fits 667 px or taller). Student only: About, Blog and Contact keep the shared sizes. */
body.stu:not(.blo):not(.roo):not(.con) .side--page { padding-top: var(--s4); }
body.stu:not(.blo):not(.roo):not(.con) .side__h1 { font-size: 2.25rem; line-height: 1.12; }
body.stu:not(.blo):not(.roo):not(.con) .side__intro { gap: .75rem; margin-top: .75rem; }
body.stu:not(.blo):not(.roo):not(.con) .side__intro p { font-size: .9375rem; line-height: 1.5; }
body.stu:not(.blo):not(.roo):not(.con) .snav { margin-top: var(--s2); }
body.stu:not(.blo):not(.roo):not(.con) .body--page { padding-top: var(--s4); }  /* the picture's top on the h1's line again (the h1 moved to 96 with the column's --s4 padding) */  /* round 47: what he is doing now, first, in ink (taken from parmarai.com's Now panel as one plain line) */
.certs__daily { color: var(--ink); }
body.stu:not(.blo):not(.roo):not(.con) .with__photo img { aspect-ratio: 5 / 4; object-position: 50% 50%; }  /* Student only, 2026-11-06: his photograph on the U is tall, so the frame takes its own 5:4 at every width and shows the whole sculpture with his head clear (Jose: the Accepted Students Day photo); the 2:1 and 3:2 crops before it cut the U's base or his head */
.stu .snav--long { margin-top: var(--s3); }
.stu .snav--long a { padding: .4rem 0; }
.stu .side__links { gap: var(--s2); }
.stu__sec { display: grid; gap: var(--s4); }
.ent { display: grid; gap: var(--s3); }
.ent--lead { background: var(--stone); border: 1px solid var(--rule); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.5rem); }
.ent--lead .ent__title { font-size: clamp(2.25rem, 1.5rem + 1.8vw, 3.25rem); letter-spacing: -.03em; line-height: 1.05; }
.ent--open { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.ent--lead + .ent--open { margin-top: var(--s2); }
.ent__title { font: 500 clamp(1.5rem, 1.1rem + 1.1vw, 2rem)/1.15 var(--sans); letter-spacing: -.025em; margin: 0; text-wrap: balance; }  /* Portfolio's system title size (35px at 1600), so the two pages share one scale (fresh review) */
.ent__specs { display: flex; flex-wrap: wrap; gap: .35rem var(--s4); margin: 0; font-size: .9375rem; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }
.ent__cell { position: relative; }
.ent__cell + .ent__cell::before { content: ""; position: absolute; left: calc(-1 * var(--s4) / 2); top: .2em; bottom: .2em; width: 1px; background: color-mix(in srgb, var(--ink) 18%, transparent); }  /* a hairline between cells, no glyph */
.ent__tools { color: var(--muted); font-size: .9375rem; line-height: 1.4; margin: calc(-1 * var(--s2)) 0 0; }  /* the tools on their own line under the dates, never wrapped into the cell row */
.ent__body { max-width: 62ch; display: grid; gap: var(--s2); }
.ent__body p { text-wrap: pretty; }
.stu__sec--ruled { border-top: 1px solid var(--rule); padding-top: var(--s4); gap: var(--s3); }
.stu__sec .stu__h2, .ab-sec .stu__h2 { font: 500 clamp(1.5rem, 1.1rem + 1.1vw, 2rem)/1.15 var(--sans); letter-spacing: -.025em; margin: 0; padding: 0; border: 0; }  /* the section's own rule above; the site's small ruled h2 does not apply here */
.stu__cols { display: grid; gap: var(--s2); max-width: 62ch; }
.certs, .how { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; max-width: 62ch; }
.certs li, .how li { text-wrap: pretty; }
.certs__tools { color: var(--muted); }
.how li { font-weight: 400; }  /* the body's weight, as every other line (fresh review) */
@media (max-width: 47.99em) {
  .ent__specs { flex-direction: column; gap: .25rem; }
  .ent__cell + .ent__cell::before { display: none; }
  .ent--lead { padding: var(--s3); border-radius: 10px; }
}

/* About (rounds 48 to 64, 2026-11-04; Roots until round 49): Student's anatomy (`<body class="stu roo">` takes the Student
   column rules), rebuilt from the gold-standard search (docs/website/references/about-2026-11-03/). The first screen: his
   name and his own lead line beside the 1-minute video frame, two equal columns so the headline sits level with the frame
   (the designer measured three lines against a 320px frame at 1600). Then the two-column document: the pinned index and the
   two asks on the left; on the right the story as numbered, dated chapter rows on hairlines, then Family and Outside work as ruled sections at the document's 64px gap, as on Student. Every value
   from the token record; nothing new. Consolidated in the round-63 expert pass (docs/website/qa/about-2026-11-04/). */
.roo .ab-hero { max-width: var(--max); margin: 0 auto; padding: var(--s5) var(--gutter) var(--s6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }
.roo .ab-h1 { font: 500 clamp(2.25rem, 1.4rem + 2.2vw, 3.5rem)/1.04 var(--sans); letter-spacing: -.035em; margin: 0 0 var(--s4); text-wrap: balance; }
.roo .ab-lead p { margin: 0 0 var(--s2); color: var(--ink); font-size: var(--deck); line-height: 1.3; letter-spacing: -.01em; max-width: 34rem; text-wrap: pretty; }  /* round 55: his line is the lead, at the first-screen title size */
.roo .ab-lead .ab-sub { font-size: 1.0625rem; line-height: 1.5; letter-spacing: 0; max-width: 30rem; }  /* round 67: his opinion under the lead at body size, so the lead keeps three lines and the asks stay inside the first screen */
.roo .ab-video { margin: 0; }
.roo .ab-frame { position: relative; aspect-ratio: 16 / 9; background: var(--stone); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }  /* the video's frame (round 81: his recording is in) */
.roo .ab-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--stone); }
.roo .ab-cap { margin: var(--s2) 0 0; display: flex; justify-content: space-between; gap: var(--s2); font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }  /* round 81: under the frame, so it never sits over the player's controls */
.roo .ab-tx { margin-top: var(--s1); }  /* the transcript: Portfolio's fold, one face for every fold on the site */
.roo .ab-tx .run__howbody p { margin: 0; color: var(--ink); line-height: 1.6; }
@media (min-width: 64em) {
  :is(.roo, .blo) .side--page { justify-content: flex-start; height: auto; max-height: calc(100svh - var(--head-h)); align-self: start; }  /* About and Blog: as tall as its content, so it stays pinned to the page's end (round 62); capped so its links stay reachable under large text */
  :is(.roo, .blo) .side__links { margin-top: var(--s3); }
  .roo .ab-hero { padding-bottom: var(--s5); }
  .roo .side--page, .roo .body--page { padding-top: var(--s4); }  /* round 67: with his opinion under the lead the first screen grew; the asks stay inside 800px (measured 746 to 786 at 1600) */
}
.roo .ab-sec { display: grid; gap: var(--s3); }
.roo .ab-sec + .ab-sec { border-top: 1px solid var(--rule); padding-top: var(--s4); }
/* the chapters: plain rows (a click on a details row closed the story), the title a real heading */
.roo .chs { position: relative; }
.roo .ch { border-top: 1px solid var(--rule); }
.roo .ch__head { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--s3); padding: var(--s3) 0 var(--s2); }
.roo .ch__n { color: var(--faint); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.roo .ch__t { font: 500 clamp(1.25rem, 1rem + .7vw, 1.625rem)/1.2 var(--sans); letter-spacing: -.02em; margin: 0; }
.roo .ch__d { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.roo .ch__body { padding: 0 0 var(--s4) calc(3rem + var(--s3)); display: grid; gap: var(--s2); max-width: calc(62ch + 4rem); }
.roo .ch__body p { margin: 0; text-wrap: pretty; }
.roo .ch.is-on .ch__t { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.roo .ch.is-on .ch__n { color: var(--ink); }
/* the story line (round 52): a hairline in the column gap beside the chapters, the orange stroke drawn to the chapter being
   read (by scroll, or by the video once it plays), a ring at its end; the stroke and ring are the drawn-path budget, never
   text or a fill. Reduced motion: no stroke, the underline alone marks the chapter. */
.roo .story { position: absolute; left: calc(-1 * clamp(1.25rem, 2.5vw, 2.5rem)); top: 0; bottom: 0; width: 1px; background: var(--rule); pointer-events: none; }
.roo .story__fill { position: absolute; top: 0; bottom: 0; left: -.5px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.roo .story__dot { position: absolute; top: -5px; left: -4.5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ground); border: 1.5px solid var(--accent); }
@media (prefers-reduced-motion: reduce) { .roo .story__fill, .roo .story__dot { display: none; } }
@media (max-width: 63.99em) {
  .roo .ab-hero { grid-template-columns: 1fr; gap: var(--s4); padding-bottom: var(--s3); }
  .roo .chs { padding-left: 1rem; }  /* the line moves inside the text column (the gutter clipped its ring) */
  .roo .story { left: 0; }
  .roo .ch { margin-left: -1rem; padding-left: 1rem; }  /* the hairlines run from the page's left edge; the text keeps its ruler */
}
@media (max-width: 47.99em) {
  .roo .snav--long ul { flex-wrap: wrap; gap: .25rem 1.25rem; }
  .roo .ch__head { grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--s2); row-gap: var(--s1); }  /* the date 8px under its title, a 40-character measure */
  .roo .ch__d { grid-column: 2; }
  .roo .ch__body { padding-left: calc(2rem + var(--s2)); }
}

/* Blog (2026-11-04, rounds 69 to 72): Student's anatomy (`<body class="stu blo">` takes the Student column rules), then the
   gold-standard search (docs/website/references/blog-2026-11-04/search/RESEARCH.md: 70 blogs, three blind judges; nan.fyi,
   iamrob.in and matthewstrom.com first). The index, after nan.fyi: the h1, lead, asks and email pinned on the left; on the
   right the posts are the first screen, each one band between hairlines in three columns (the title with the date and word
   count under it, the description beside it, an arrow at the right edge), the whole band the link. A post, after iamrob.in:
   the title, description, date and a "Contents" list in ink pinned on the left (no asks: the footer carries them); the
   article on the right at 18px and 56ch; one "Next post" line under a hairline. Every value from the token record. */
.blo .side--page .side__h1 { max-width: none; }  /* a post's title takes the column's width */
.blo__date { color: var(--faint); font-size: .9375rem; font-variant-numeric: tabular-nums; }
/* the index: bands */
.blo__rows { border-top: 1px solid var(--rule); }
.blo__row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 1.5rem; grid-template-areas: "title desc arrow" "meta desc arrow"; column-gap: var(--s4); row-gap: var(--s1); align-items: start; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.blo__title { grid-area: title; margin: 0; font: 500 clamp(1.25rem, 1rem + .7vw, 1.625rem)/1.2 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.blo__title a { text-decoration: none; }
.blo__title a::after { content: ""; position: absolute; inset: 0; }  /* the whole band opens the post; one Tab stop, the ring on the title */
.blo__meta { grid-area: meta; color: var(--faint); }
.blo__row:last-child { border-bottom: 0; }  /* the list ends open above the footer rule (two hairlines read as a double rule) */
.blo__desc { grid-area: desc; margin: 0; text-wrap: pretty; padding-top: .15rem; }
.blo__arrow { grid-area: arrow; align-self: center; justify-self: end; color: var(--muted); transition: transform .15s var(--ease), color .15s var(--ease); }
.blo__arrow::before { content: "\2192"; }
.blo__row:hover .blo__title a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.blo__row:hover .blo__arrow { transform: translateX(3px); color: var(--ink); }
/* the index's left column as a panel (2026-11-05, Jose: "Does it look empty?"; nan.fyi, the judges' first, holds its masthead in
   a full-height column on a wash with a hairline on its right edge): with three posts the white under the asks read as a gap;
   as a panel it reads as the page's sidebar. The titles at Student's entry-title size in a wider title column, so the three
   posts carry the right side. Laptop widths only; on a phone the index is one column as before. */
@media (min-width: 64em) {
  .blo--index .doc--page { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); min-height: calc(100svh - var(--head-h)); }
  .blo.blo--index .side--page { position: relative; top: 0; height: auto; max-height: none; align-self: stretch; overflow: visible; margin: 0; padding: var(--s5) var(--s4) var(--s5) 0; background: var(--wash); border-right: 1px solid var(--rule); }
  .blo.blo--index .side--page::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: var(--wash); }  /* the wash runs to the window's left edge, a sidebar rather than a box; the text keeps the site's one ruler */
  .blo--index .body--page { padding-bottom: var(--s6); }
  .blo--index .side__pin { position: sticky; top: calc(var(--head-h) + var(--s5)); display: grid; gap: var(--s3); }  /* the asks stay in view down a long list */
  .blo--index .side__pin .side__links { margin-top: var(--s3); }
  .blo--index .blo__row { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) 1.5rem; }
  .blo--index .blo__title { font: 500 clamp(1.5rem, 1.1rem + 1.1vw, 2rem)/1.15 var(--sans); letter-spacing: -.025em; }
}
/* a post */
.blo__toclabel { margin: 0 0 var(--s1); color: var(--faint); font-size: .8125rem; }
.blo .blo__toc a { color: var(--ink); font: 400 .9375rem/1.35 var(--sans); padding: .3rem 0; }
.blo .blo__toc a::before { display: none; }  /* no dash markers (the judges read them as faint); the current section takes the accent underline */
.blo .blo__toc a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .3em; }
.blo__post { display: grid; gap: var(--s2); font-size: 1.125rem; line-height: 1.65; }  /* 18px reading size (iamrob.in measured 20.8px; the site's body is 16px) */
.blo__post > p, .blo__sec > p, .blo__h2 { max-width: 56ch; }  /* about 72 characters a line at any size */
.blo__post > p:not(.blo__next), .blo__sec > p { text-wrap: pretty; }
.blo__post strong { font-weight: 500; }
.blo__sec { display: grid; gap: var(--s2); margin-top: var(--s4); }  /* with the article's gap, 48px (--s5) above a subheading */
.blo__h2 { font: 500 clamp(1.25rem, 1rem + .7vw, 1.625rem)/1.2 var(--sans); letter-spacing: -.02em; margin: 0; }
.blo__next { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); display: grid; gap: var(--s1); justify-items: start; }
.blo__src { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); max-width: 56ch; font-size: .9375rem; line-height: 1.45; }  /* BL9 Sources: the pages' own titles as plain links, 15px like the contents */
.blo__src a { display: inline-block; padding: .2rem 0; }
.blo__next span { color: var(--muted); font-size: .9375rem; }
.blo__next a { font: 500 clamp(1.25rem, 1rem + .7vw, 1.625rem)/1.2 var(--sans); letter-spacing: -.02em; text-wrap: balance; text-decoration: none; }
.blo__next a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.blo__next .blo__all { font: 400 .9375rem/1.4 var(--sans); letter-spacing: 0; margin-top: var(--s1); padding: .2rem 0; text-decoration-line: underline; }  /* the way back at body size; a 27px target */
@media (min-width: 64em) {
  .blo .side--page { margin-bottom: var(--s7); }  /* the pinned column stops 96px above the footer rule, as the article does */
}
@media (min-width: 64em) and (max-height: 49.99em) {
  .blo .side--page { padding-top: var(--s4); gap: var(--s2); }  /* short laptops: the seven-item column fits without scrolling inside itself */
}
@media (max-width: 63.99em) {
  .run__map .sx__svg--stack { max-width: 20.5rem; }  /* every stacked map (a post's and Portfolio's) at the 1024 cap: uncapped at 768 a map was 3903px tall with 30px text (Portfolio's 3976px, 36px), measured 2026-11-04 */
}
@media (max-width: 47.99em) {
  .blo__row { grid-template-columns: minmax(0, 1fr) 1.5rem; grid-template-areas: "title arrow" "meta arrow" "desc arrow"; row-gap: var(--s1); padding: var(--s3) 0; }
  .blo__desc { padding-top: var(--s1); }
  .blo .blo__meta { flex-direction: row; gap: .35rem var(--s4); }  /* date and word count on one line, the hairline between them kept */
  .blo .blo__meta .ent__cell + .ent__cell::before { display: block; }
  .blo .snav--long ul { display: grid; gap: 0; }  /* the contents as one column */
  .blo__post { font-size: 1.0625rem; }  /* 17px on a phone: about 44 characters a line at 375 */
}

/* Contact, the thank-you page and 404 (round 75, 2026-11-06): Student's anatomy (`<body class="stu con">` takes the Student
   column rules), then the gold-standard search (docs/website/references/contact-2026-11-06/RESEARCH.md: 180 sites, 68
   contact pages, three blind judges; anatoly.design, joshuabaker.com and dennissnellenberg.com first, this Contact fourth).
   The pinned left column holds the h1 and the lead; the right column opens on the email as the page's one object, then the
   routes as ruled rows (joshuabaker.com), then the form as numbered rows on hairlines (dennissnellenberg.com) with the
   GOV.UK error pattern on the site's tokens. The thank-you page and 404 are the same document's left column alone.
   One new type size, the email (DIRECTION.md, Contact); no new colour token. */
.con .side--page { padding-bottom: var(--s5); }
.con__reach { display: grid; gap: var(--s4); }
.con__email { margin: 0; }
.con__email a { display: inline-block; padding: .5rem 0; margin: -.5rem 0; font: 500 min(clamp(1.75rem, .5rem + 3.4vw, 3.5rem), calc((100vw - 2 * var(--gutter)) / 12.4))/1.1 var(--sans); letter-spacing: -.025em; overflow-wrap: anywhere; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .16em; }  /* expert pass: 56px at 1600 (1.46x the h1), 51.5 at 1280, 34 at 768, 27 at 375, one line at 320 (the address is 12.16em wide); the underline at the full accent so the object reads as a link; the padding gives a 42px tap target without moving the rhythm */
.con__routes { list-style: none; padding: 0; margin: 0; }
.con .con__reach + .stu__sec--ruled { border-top: 0; padding-top: 0; }  /* expert pass: the routes' last hairline is the section's rule; two rules 64px apart read as an empty route row */
.con__route { border-top: 1px solid var(--rule); }
.con__route:last-child { border-bottom: 1px solid var(--rule); }
.con__route a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); min-height: 4rem; padding: 0 var(--row-x); margin: 0 calc(-1 * var(--row-x)); text-decoration: none; }  /* one row per route, 64px tall; the whole row is the link, lifted as Home's rows are */
.con__name { font-weight: 500; }
.con__val { color: var(--muted); font-size: .9375rem; text-align: right; }
.con__route a:hover .con__name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
/* the form: numbered rows on hairlines, the label a real heading-size line, the field a bare line under it */
.con__form { display: grid; }  /* expert pass: the rows end on the column's right ruler, as the route rows do */
.con__summary { margin: 0 0 var(--s3); padding: var(--s3); background: var(--stone); border: 1px solid var(--rule); border-radius: 14px; display: grid; gap: var(--s2); }
.con__summary[hidden] { display: none; }
.con__summary h3 { font: 500 clamp(1.25rem, 1rem + .7vw, 1.625rem)/1.2 var(--sans); letter-spacing: -.02em; margin: 0; }
.con__summary ul { margin: 0; padding-left: calc(3rem - var(--s3) - 1px); display: grid; gap: .35rem; }  /* the links start on the label column */
.con__summary a { display: inline-block; padding: .15rem 0; font-weight: 500; }
.con__row { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "n label" ". err" ". field"; row-gap: 0; padding: var(--s3) 0; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--head-h) + var(--s2)); }
.con__row:last-of-type { border-bottom: 1px solid var(--rule); }
.con__n { grid-area: n; align-self: baseline; color: var(--faint); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.con__row label { grid-area: label; align-self: baseline; font: 500 clamp(1.25rem, 1rem + .4vw, 1.375rem)/1.2 var(--sans); letter-spacing: -.02em; }  /* 22px at 1600: the scale runs email 56, h1 38, h2 32, label 22, field 17, body 16 */
.con__err { grid-area: err; margin: 0; font-weight: 600; }
.con__err:not([hidden]) { margin-top: var(--s1); }
.con__row input, .con__row textarea { grid-area: field; width: 100%; margin-top: var(--s3); padding: .5rem 0; font: 400 1.0625rem/1.5 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--faint);  /* expert pass: the resting line at 4.9:1 (the hairline token was 1.26:1, under WCAG 1.4.11's 3:1) */ border-radius: 0; transition: border-color .15s var(--ease); }
.con__row input:focus, .con__row textarea:focus { border-bottom-color: var(--ink); }
.con__row input:focus-visible, .con__row textarea:focus-visible { outline-offset: 4px; }
.con__row textarea { resize: vertical; min-height: 9.5rem; }
.con__row.is-error::before { content: ""; position: absolute; left: calc(-1 * var(--s2)); top: 0; bottom: 0; width: 2px; background: var(--ink); }  /* GOV.UK's rule beside a row in error, in ink: the accent is never a signal */
.con__row input[aria-invalid="true"], .con__row textarea[aria-invalid="true"] { border-bottom: 2px solid var(--ink); }
.con__btn { justify-self: start; margin: var(--s4) 0 0 3rem; border: 0; cursor: pointer; font: 500 1rem/1 var(--sans); }  /* on the fields' ruler, as GOV.UK sets it */
/* the thank-you page and 404: the document's left column alone, the right column empty by design */
.con--note .doc--page { padding-bottom: var(--s7); }
.con--note .side--page { position: static; height: auto; overflow: visible; padding-bottom: 0; justify-content: flex-start; }  /* the h1 at the sister pages' height: the column's own top padding */
.con--note .side__intro a { color: var(--ink); }
.con--note .side--page .side__h1 { max-width: 22ch; }  /* the thank-you heading on two lines */
.con--note .side__intro, .con--note .con__routes { max-width: 23rem; }
.con--note .con__routes { margin-top: var(--s4); max-width: 30rem; }
@media (min-width: 64em) {
  .con .side--page { justify-content: flex-start; height: auto; max-height: calc(100svh - var(--head-h)); align-self: start; }  /* as tall as its content, as About and Blog */
  .con--note .side--page { grid-column: 1 / -1; }  /* the heading may use the column and the gap; the lines and the row keep the column's width */
  body.con--note { min-height: 100svh; display: flex; flex-direction: column; }  /* the footer at the window's foot, the space above it placed */
  .con--note .main { flex: 1 0 auto; }
  .con--note .foot { width: 100%; }
}
@media (max-width: 63.99em) {
  .con .body--page { padding-top: var(--s4); }
  .con--note .side--page { padding-top: var(--s4); }  /* on a phone the email follows the lead at one step, not the document's 96px */
  .con .side--page { padding-bottom: 0; }
}
@media (max-width: 47.99em) {
  .con__row { grid-template-columns: 2rem minmax(0, 1fr); }
  .con__row.is-error::before { left: calc(-1 * var(--s1)); }  /* inside the phone's gutter */
  .con__summary ul { padding-left: calc(2rem - var(--s3) - 1px); }
  .con__btn { margin-left: 2rem; }
  .con__route a { min-height: 3.5rem; }
  .con__val { font-size: .875rem; }
}


/* 2026-11-06 final audit (the professor's rule: a page counts with text and images; DIRECTION.md token record, "aside
   portrait" and "map files"). About and Contact: his portrait in the left column, under the links (About) or the lead
   (Contact), on the site's 6px photo radius and stone ground; on a phone the column comes first, so it sits above the
   page's first section. Blog: each post's system map as an image file after the opening paragraphs, and the same file
   small at the head of each index row, in a hairline frame (the row bands and columns stay; the thumbnail takes a column). */
.side__photo { width: 100%; max-width: 17.5rem; margin-top: var(--s4); }
.side__photo--sm { max-width: 14rem; margin-top: var(--s3); }
.side__photo--face { max-width: 10rem; }  /* 2026-11-06 night: Contact's face-only headshot; the source face is 200px wide, so it never shows wider than 10rem */
.side__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 6px; background: var(--stone); }
.blo__map { margin: var(--s2) 0 var(--s1); }
.blo__map img { display: block; width: 100%; max-width: 46rem; height: auto; }
/* 2026-11-06 polish (the grading pass: five identical minis): each row's thumbnail is its own post's map, cropped around the
   part the post is about at the drawing's scale, so three or four box titles read at about 12px */
.blo__thumb { grid-area: thumb; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--stone); border: 0; border-radius: 6px; }  /* 2026-11-06, Jose: no frame around the drawing; a stone tile like the site's photos */
.blo__row { grid-template-columns: 13rem minmax(0, 5fr) minmax(0, 6fr) 1.5rem; grid-template-areas: "thumb title desc arrow" "thumb meta desc arrow"; }
@media (min-width: 64em) {
  .blo--index .blo__row { grid-template-columns: 13rem minmax(0, 6fr) minmax(0, 5fr) 1.5rem; column-gap: var(--s3); }
}
/* a post's map: the part of the system the post is about, drawn larger than Portfolio's row map (mapfile.write_focus) */
.sx__svg--focus .row__p { font-size: 15px; line-height: 1.27; }
.sx__svg--focus .row__p b { font-size: 17px; line-height: 1.24; margin-bottom: 2px; }
.sx__svg--focus .sx__label { font-size: 19px; }
.sx__svg--focus .sch__f { font-size: 15px; }
.sx__svg--focus .sch__box.grid__person { stroke: var(--accent); stroke-width: 2.5; }  /* the post's focus part: the accent as a stroke only */
@media (max-width: 47.99em) {
  .blo__row { grid-template-columns: 7.5rem minmax(0, 1fr) 1.5rem; grid-template-areas: "thumb title arrow" "meta meta arrow" "desc desc arrow"; column-gap: var(--s2); }
  .blo__row .blo__title { align-self: center; }  /* the title beside its thumbnail; the date, count and description run the row's width below */
  .blo__map img { max-width: 22.125rem; }  /* the phone file at its own 354px: 15px text or more */
  .side__photo, .side__photo--sm { max-width: none; }  /* 2026-11-06 phone pass: the portrait takes the column's width as the Student photograph does; at 17.5rem or 14rem it stood left in a 335px column and read as a stray */
  .con .side__photo--face { max-width: 10rem; }  /* 2026-11-06 night: on phones the headshot keeps its 10rem 4:5 (the 3:2 full-width band suited a waist-up portrait, not a face crop); the email still lands in the first screen */
}
/* 2026-11-06 grade pass (a strict grader: 13 to 15px grey text read as hard to read): every style under 15px that carries
   content is set at 15px, and content in the faint grey moves to muted; numerals, map keys, kbd keys and the stage stay
   as they were. Labels stay muted under ink body text, so the hierarchy holds (DIRECTION.md token record). */
:is(.snav, .v-b .snav--long, .v-c .snav) a, :is(.v-b, .v-c) .run__spec dt, .run__spec dt, .run__label, .xp__when, .xp__tools, .run__where,
.rows time, .foot__made, .blo__toclabel, .jumpto li small { font-size: .9375rem; }
.xp__when, .xp__tools, .run__where, .rows time, .foot__made, .blo__toclabel, .blo__date, .blo__meta, .jumpto li small { color: var(--muted); }
@media (max-width: 47.99em) {
  .nav { overflow: visible; }
  .nav ul { font-size: .9375rem; flex-wrap: wrap; white-space: normal; gap: .2rem 1.25rem; max-width: 14.5rem; }  /* at 15px, with "Résumé (PDF)", the six links take two lines on a phone rather than a hidden scroll; since the 2026-11-06 phone pass the list is held to 14.5rem so it breaks after About (Portfolio, Student, About / Blog, Résumé, Contact) and the second row is never one orphaned word; a grid of three aligned columns left uneven gaps (the 320 wrap rule, round 33, retired with it) */
  .nav a { white-space: nowrap; padding: .4rem 0; }  /* 34px tap height */
  .con__val { font-size: .9375rem; }
}
/* 2026-11-06, Jose's "plain line + fold" (Portfolio): each system leads with one plain line in ink, one step above body,
   then the map; the approved paragraphs and the parts list fold under a native details, styled as a link: one face, the
   orange underline on hover and focus as every link, a chevron that turns. No card, no fill. */
.run__plain { max-width: 60ch; margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.run__plain + .run__map, .v-m .run__plain + .run__map { margin-top: 0; }
.run__why { max-width: 62ch; margin: calc(var(--s2) - var(--s4)) 0 0; font-size: 1rem; line-height: 1.6; color: var(--ink); text-wrap: pretty; }  /* round 80 (2026-11-06), Jose's "explain these like an expert": why it is built this way (PW rows), body text under the plain line, which stays the lead; pulled to 16px under it so the two read as one block */
.run__why + .run__map, .v-m .run__why + .run__map { margin-top: 0; }
.run__how { max-width: 66ch; }
.run__how > summary { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; font: 500 1rem/1.3 var(--sans); color: var(--ink); cursor: pointer; list-style: none; border-radius: 3px;
  text-decoration-line: underline; text-decoration-color: color-mix(in oklch, var(--accent) 55%, transparent); text-underline-offset: .26em; text-decoration-thickness: 1px; transition: text-decoration-color .15s var(--ease); }
.run__how > summary::-webkit-details-marker { display: none; }
.run__how > summary::after { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.run__how[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.run__how > summary:hover, .run__how > summary:focus-visible { text-decoration-color: var(--accent); }
.run__howbody { display: grid; gap: var(--s3); padding-top: var(--s2); }
.run__howbody .run__scope--open { margin-top: 0; }

/* 2026-11-06 grade pass: no stranded short word at a line end, site-wide (headings balanced, running text pretty); page rules above stay more specific */
:where(h1, h2, h3, h4, summary, figcaption, .about__lede) { text-wrap: balance; }
:where(p, li, dd) { text-wrap: pretty; }

/* 2026-11-06, Jose: "make the left side the same vertical of the box so there is less weird movement when scrolling".
   Laptop and up: every panel shares one grid cell, so the stage is always the tallest panel (no height jump between tabs),
   and the list stretches to that height with its four rows sharing it evenly (no sticky drift). Phones keep their tab strip. */
@media (min-width: 64em) {
  .run:not(.run--single) { align-items: stretch; }
  .run:not(.run--single) .run__list { position: static; grid-template-rows: repeat(4, 1fr); align-content: stretch; }
  .run:not(.run--single) .run__list .run__tab { height: 100%; align-content: start; }
  .run[data-js]:not(.run--single) .run__stage { display: grid; }
  .run[data-js]:not(.run--single) .run__panel { grid-area: 1 / 1; }
  .run[data-js]:not(.run--single) .run__panel:not(.is-on) { position: static; inset: auto; }
}

/* 2026-11-06: About, Family: three photos in one row (the Patriots game as kids, a family trip, Paco); two across on phones with Paco below */
.ab-fams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); max-width: 62ch; }  /* 2026-11-06: held to the paragraph's 62ch measure; at 46rem the row ran ~180px past the text and the three 4:5 frames read as blocks */
.ab-fams .cap { font-size: .8125rem; }
.ab-fams .side__photo.ab-fam { max-width: none; margin: 0; }
@media (max-width: 40em) { .ab-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); } }

/* 2026-11-06 grade pass 97: Home's experience rows open Student, an internal page, so they take the internal arrow (\2192, as .more and the blog rows), not the external \2197 */
/* captions under photos (About's family photos, Student's photograph on the U): small, muted, under the image, no box */
.side__photo:is(figure), .with__fig { margin: 0; }
.cap { margin-top: var(--s1); font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.with__fig .cap { margin-top: var(--s2); }
/* Home ends on the call to action: CL1c at heading size, then the dark pill to Contact (Home's footer omits the line) */
.cta { display: grid; justify-items: start; gap: var(--s3); }
.cta .cta__line { font: 500 clamp(1.625rem, 1.1rem + 1.5vw, 2.5rem)/1.15 var(--sans); letter-spacing: -.025em; border: 0; padding: 0; max-width: 24ch; }

/* grade pass 97b (2026-11-06, Jose): Portfolio keeps Home's four systems in full; the other three fold under "More systems",
   the same summary as each system's "How it works" (run__how), at the measure of the page, ruled above like a system */
.run__howbody .run__why { margin: 0 0 var(--s3); }  /* round 82: the why paragraph opens the fold */
/* 2026-11-06 visual review: About's worksheet lines as a list (one line per paragraph, label in ink weight 600, tighter rhythm) */
#bring .ent__body p, #headed .ent__body p { margin-block: 0 var(--s2); }
.lab { font-weight: 600; color: var(--ink); }
/* Contact: air between the intro and the headshot */
.con .side__photo--face { margin-top: var(--s4); }
/* About's family row stays three across on phones (two left Paco alone on a third row) */
@media (max-width: 40em) { .ab-fams { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); } .ab-fams .cap { font-size: .75rem; } }
/* headings never leave one word alone */
h1, h2, h3, .blo__title { text-wrap: balance; }
/* 2026-11-06: About's video poster carries one play button in its lower-left corner (white disc, ink triangle; centred it sat on his mouth); craft.js removes the button and
   hands back the browser's controls on first play */
.roo .ab-play { position: absolute; left: var(--s3); bottom: var(--s3); width: 3.75rem; height: 3.75rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 24px rgb(16 17 20 / .18); transition: scale .2s ease, background-color .2s ease; }
.roo .ab-play svg { width: 1.5rem; height: 1.5rem; fill: currentColor; margin-left: .2rem; }
.roo .ab-play:hover { scale: 1.06; background: #fff; }
.roo .ab-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 40em) { .roo .ab-play { left: var(--s2); bottom: var(--s2); width: 3rem; height: 3rem; } .roo .ab-play svg { width: 1.25rem; height: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .roo .ab-play { transition: none; } }
/* 2026-11-06, Jose's GSAP pass (motion.js, mo-intro.js): the first screen's reveal is CSS, so it never waits for a script.
   The page's main heading, and Home's role and place lines, wipe in from their bottom edge; the end state clips nothing.
   mo-intro.js replaces the two Home lines' wipe with a decode when it runs in time. Reduced motion: no animation at all. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mo-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-.2em -.2em -.35em -.2em); } }
  .side__h1, .ab-h1 { animation: mo-wipe 1.2s cubic-bezier(.16, 1, .3, 1) .05s both; }
  .stage__title { animation: mo-wipe 1s cubic-bezier(.16, 1, .3, 1) .3s both; }
  .stage__place { animation: mo-wipe 1s cubic-bezier(.16, 1, .3, 1) .5s both; }
}
/* mo-intro.js: one line of the decode, its own box, never wider than the line it replaces */
.mo-seg { display: block; white-space: nowrap; overflow: clip; }
/* the reading line on blog posts: says where you are in the post */
.mo-progress { position: fixed; inset: 0 0 auto; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }
/* 2026-11-06, phone pass 2 (Jose: "make sure mobile is also optimized and perfect"): since the header résumé pill, the row no longer fit from 48em to ~53em
   (phones held sideways, small tablets): the name, the pill and "Jump to" each broke onto two lines. Header items never wrap; Jump to steps aside below 60em,
   where every page is already one tap away in the row; touch screens have no keyboard, so the Cmd K key is not shown on them. Family captions read at 13px on phones. */
.name, .nav a, .jump span { white-space: nowrap; }
@media (min-width: 48em) and (max-width: 59.99em) { .jump { display: none; } }
@media (hover: none) and (pointer: coarse) { .jump kbd { display: none; } .jump { padding-right: .8rem; } }
@media (max-width: 40em) { .ab-fams .cap { font-size: .8125rem; } }