/* Home (2026-10-29): the ArtCraft résumé spread (identity | portrait | compartment cells on hairlines, Oct 25 layout)
   set in the Material 3 type scale (Google Sans, sentence case, M3 sizes / line heights / tracking) and the ECS dark
   monochrome palette (ecs-mono.css). Only type and color change here; the layout rules are the page's own <style>.
   Pre-change home (the one-page profile): _archive/index-pre-acmaterial-2026-10-29.html */

/* M3 type scale */
:root {
  --m3: "Google Sans", Roboto, Arial, sans-serif;
  --m3-text: "Google Sans", Roboto, Arial, sans-serif;
}
body[data-hm] {
  --bg: #151618; --bg-raised: #1f2022; --bg-sunken: #1f2022; --paper: #151618; --paper-2: #1f2022;
  --ink: #e1e3e4; --ink-2: #c4c7c8; --muted: #9aa0a6; --line: #3c3e41; --line-soft: #2a2b2e;
  --accent: #ffffff; --signal: #9aa0a6;
  --sans: var(--m3-text); --display: var(--m3); --mono: var(--m3); --serif: var(--m3); --hand: var(--m3);
  background: var(--bg); color: var(--ink); font-family: var(--m3-text);
  font-size: 14px; line-height: 20px; letter-spacing: .25px;            /* body-medium */
}
html:has(body[data-hm]) { background: #151618; color-scheme: dark; }
body[data-hm] .spread { margin-top: 10px; }
@media (min-width: 1181px) and (min-height: 700px) {
  body[data-hm] .spread { height: calc(100vh - 74px); height: calc(100dvh - 74px); }   /* under the floating 54px bar + 10px gaps */
}
body[data-hm] .ruler { top: 74px; }

/* labels: M3 label-medium / label-large, sentence case (no mono caps) */
body[data-hm] .mono { font-family: var(--m3); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .5px; text-transform: none; }
body[data-hm] .cpt > .hd { font-size: 14px; line-height: 20px; letter-spacing: .1px; color: var(--ink-2); }   /* label-large */
body[data-hm] .spread .tag { font-family: var(--m3); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .5px; text-transform: none;
  background: var(--ink); color: var(--bg); padding: 4px 8px; }                                                 /* label-small */
body[data-hm] .spread .tag b { color: #5f6368; font-weight: 500; }

/* identity column */
body[data-hm] .id .name { font-family: var(--m3); font-weight: 400; font-size: clamp(45px, 3.6vw, 57px); line-height: 1.123; letter-spacing: -.25px; }  /* display-large / -medium */
body[data-hm] .id .intro { margin-top: 20px; font-size: 16px; line-height: 24px; letter-spacing: .5px; color: var(--ink-2); }                          /* body-large */
body[data-hm] .id .where { line-height: 20px; color: var(--muted); }
body[data-hm] .id .reach h2 { font-size: 14px; line-height: 20px; letter-spacing: .1px; color: var(--ink); }                                          /* title-small */
body[data-hm] .id .links { font-size: 14px; line-height: 20px; letter-spacing: .25px; }
body[data-hm] .id .links li span:first-child { color: var(--muted); }
body[data-hm] .id .usmap .st { fill: #2a2b2e; stroke: var(--bg); }
body[data-hm] .id .usmap .tx { fill: #5f6368; stroke: var(--bg); }
body[data-hm] .id .usmap .pin path { fill: #e1e3e4; }
body[data-hm] .id .usmap .pin circle { fill: #151618; }
body[data-hm] .id .usmap .chip rect { fill: #2a2b2e; }
body[data-hm] .id .usmap .chip text { font-family: var(--m3); font-weight: 500; fill: #e1e3e4; }

/* buttons: M3 label-large on the light-gray fill used in the top bar */
body[data-hm] .ac-btn { min-height: 40px; border: 0; border-radius: 0; background: #e1e3e4; color: #151618;
  font-family: var(--m3); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .1px; text-transform: none; }
body[data-hm] .ac-btn:hover { background: #fff; color: #151618; }

/* portrait caption */
body[data-hm] .portrait figcaption { background: rgba(21, 22, 24, .9); color: var(--ink-2); border-top-color: var(--line); }

/* ECS card */
body[data-hm] .pm-ti h3 { font-family: var(--m3); font-weight: 400; font-variation-settings: normal; font-size: clamp(22px, 1.7vw, 28px); line-height: 1.29; letter-spacing: 0; }  /* headline-small / -medium */
body[data-hm] .pm-cap { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .1px; color: var(--ink); }                       /* title-small */
body[data-hm] .pm-cap span { margin-bottom: 2px; font-family: var(--m3); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .5px; color: var(--muted); }
body[data-hm] .pm-read { font-family: var(--m3); font-size: 12px; font-weight: 500; letter-spacing: .5px; text-transform: none; color: var(--ink); }
body[data-hm] .pc-k b { font-family: var(--m3); font-weight: 400; font-variation-settings: normal; font-size: 32px; line-height: 40px; letter-spacing: 0; color: var(--ink); }  /* headline-large */
body[data-hm] .pc-k span { font-family: var(--m3); font-size: 12px; line-height: 16px; letter-spacing: .4px; color: var(--ink-2); }            /* body-small */
body[data-hm] .pm-ft p { font-size: 14px; line-height: 20px; letter-spacing: .25px; color: var(--ink-2); }                                       /* body-medium */
body[data-hm] .cap .go, body[data-hm] .pm-ft .go { font-family: var(--m3); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .1px; text-transform: none; color: var(--ink); }
body[data-hm] .ecsf .bz { fill: #0c0d0e; }
body[data-hm] .ecsf .ln { stroke: #9aa0a6; }
body[data-hm] .ecsf .via { fill: #9aa0a6; } body[data-hm] .ecsf .via.end { fill: var(--bg); stroke: #9aa0a6; }
body[data-hm] .ecsf .dt { fill: #c4c7c8; } body[data-hm] .ecsf .dt.on, body[data-hm] .ecsf .ln.on { fill: #fff; stroke: #fff; }
body[data-hm] .ecsf .ln.on { fill: none; }
body[data-hm] .cv text { font-family: var(--m3); fill: var(--muted); } body[data-hm] .cv text.b { fill: var(--ink); }
body[data-hm] .cv .before { stroke: #5f6368; } body[data-hm] .cv .after { stroke: #fff; }
body[data-hm] .cv .ar-b { fill: #9aa0a6; opacity: .08; } body[data-hm] .cv .ar-a { fill: #fff; opacity: .1; }
body[data-hm] .cv .avg { stroke: #9aa0a6; } body[data-hm] .cv .launch { stroke: #c4c7c8; } body[data-hm] .cv .end { fill: var(--bg); stroke: #fff; }

/* project cards */
body[data-hm] .vibe .cap { font-size: 14px; line-height: 20px; letter-spacing: .25px; }
body[data-hm] .vibe .cap b { margin-bottom: 2px; font-family: var(--m3); font-weight: 500; font-variation-settings: normal; font-size: 16px; line-height: 24px; letter-spacing: .15px; color: var(--ink); }  /* title-medium */
body[data-hm] .vibe .cap span:first-child { font-size: 14px; line-height: 20px; color: var(--ink-2); }
body[data-hm] .vibe.all .box { border-color: var(--ink); }
body[data-hm] .card:hover { background: #1b1c1e; }
/* the agent chip keeps its light Material surface, with dark accents on it */
body[data-hm] .agent { --accent: #3c4043; font-family: var(--m3); }
body[data-hm] .agent .ag-k { font-family: var(--m3); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .5px; text-transform: none; }
body[data-hm] .agent .ag-t { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .1px; }

/* impact row */
body[data-hm] .impact .num.q blockquote { font-family: var(--m3); font-size: clamp(16px, 1.25vw, 22px); line-height: 1.35; letter-spacing: 0; color: var(--ink); }  /* title-large */
body[data-hm] .impact .num.q figcaption { font-size: 12px; line-height: 16px; letter-spacing: .4px; color: var(--muted); }                       /* body-small */
body[data-hm] .impact .num.q .ring circle { fill: var(--ink); }
body[data-hm] .impact .num.q .ring circle.on { fill: #fff; }
body[data-hm] .ph figcaption, body[data-hm] .ph .pcap { font-size: 14px; line-height: 20px; letter-spacing: .25px; color: var(--ink-2); }
body[data-hm] .ph.opens figcaption span::after { color: var(--ink); }

/* dialogs */
body[data-hm] .mdl { background: #1f2022; color: var(--ink); box-shadow: 0 30px 90px -20px rgba(0,0,0,.7); }
body[data-hm] .mdl::backdrop { background: rgba(0,0,0,.6); }
body[data-hm] .mdl-im.dev { background: #2a2b2e; }
body[data-hm] .mdl-k { font-family: var(--m3); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .5px; text-transform: none; color: var(--muted); }
body[data-hm] .mdl h2 { margin-top: 6px; font-family: var(--m3); font-weight: 400; font-variation-settings: normal; font-size: 28px; line-height: 36px; letter-spacing: 0; }   /* headline-medium */
body[data-hm] .mdl p { font-size: 16px; line-height: 24px; letter-spacing: .5px; color: var(--ink-2); }                                           /* body-large */
body[data-hm] .mdl ul { font-size: 14px; line-height: 20px; letter-spacing: .25px; color: var(--ink-2); }
body[data-hm] .mdl ul b { color: var(--ink); font-weight: 500; }
body[data-hm] .mdl-x { background: #2a2b2e; color: var(--ink); }
body[data-hm] .mdl-x:hover, body[data-hm] .mdl-x:focus-visible { background: var(--ink); color: #151618; }
body[data-hm] :focus-visible { outline-color: #e1e3e4; }

/* ECS cell refit (2026-10-30): the footer's second column only held the paragraph removed earlier today, leaving the chart in a
   42% corner beside a lone link. Footer is now one column: −45% stat, the chart at full width, then the link. The diagram keeps
   the middle, with less dead space above and below. */
body[data-hm] .pm-ft { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 0; padding-top: 8px; }
body[data-hm] .pm-chart { gap: 10px; }
body[data-hm] .pc-k { align-items: center; gap: 12px; }
body[data-hm] .pc-k b { font-size: 45px; line-height: 52px; }                                                                       /* display-small */
body[data-hm] .pc-k span { font-size: 14px; line-height: 20px; letter-spacing: .25px; max-width: 12em; }                      /* body-medium */
body[data-hm] .pm-ft p { margin: 0; }
body[data-hm] .pm-ft .go { margin-top: 0; }
body[data-hm] .pm-mid { padding: 0; }
body[data-hm] .pm-hero { min-height: 0; }
body[data-hm] .pm-hero { flex: none; width: 100%; aspect-ratio: 440 / 226; }                     /* diagram at full card width */
body[data-hm] .pm-mid { justify-content: center; }
body[data-hm] .pm-hero { width: 92%; margin: 14px auto 6px; }
body[data-hm] .pc-k b { font-size: 36px; line-height: 44px; }                                                                      /* headline-large+ */

/* Design programs dialog (2026-10-30): three figures at the top (250+ students, 6+ years, full-time roles) */
body[data-hm] .mdl-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; margin: 16px 0 4px; padding: 0; list-style: none; }
body[data-hm] .mdl-stats li { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px 16px; border-radius: 16px; background: #2a2b2e; }
body[data-hm] .mdl-stats li::before { content: none; }
body[data-hm] .mdl-stats b { font-family: var(--m3); font-weight: 400; font-size: 28px; line-height: 36px; white-space: nowrap; color: #e1e3e4; }
body[data-hm] .mdl-stats span { font-size: 13px; line-height: 18px; color: #9aa0a6; }
body[data-hm] .mdl-invite { margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: #2a2b2e; font-size: 15px; line-height: 22px; color: #e1e3e4; }
/* no top bar on Home (2026-10-30): the spread fills the screen */
body[data-hm] .spread { margin-top: 0; }
@media (min-width: 1181px) and (min-height: 700px) { body[data-hm] .spread { height: 100vh; height: 100dvh; } }
body[data-hm] .ruler { top: 0; }
/* project captions as one sentence (2026-10-30): the project name keeps the title weight, the rest is body copy, same line */
body[data-hm] .vibe .cap.line span:first-child { font-size: 16px; line-height: 24px; letter-spacing: .15px; color: var(--ink-2); }
body[data-hm] .vibe .cap.line b { display: inline; margin: 0; color: var(--ink); }
body[data-hm] .mdl-stats:has(> li:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* two figures (design programs) */

/* Aggressive Pickup dialog rows (2026-10-30): label over value with hairlines, like the Work page detail rows (.gs-tdl) */
.mdl-rows { display: flex; flex-direction: column; margin: 16px 0 4px; }
.mdl-rows > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid #3c3e41; }
.mdl-rows > div:last-child { border-bottom: 1px solid #3c3e41; }
.mdl-rows .k { font-size: 13px; line-height: 18px; font-weight: 500; color: #9aa0a6; }
.mdl-rows .v { font-size: 16px; line-height: 24px; color: #e1e3e4; }
/* New York → Dallas route on the map (2026-10-30) */
body[data-hm] .id .usmap .route { fill: none; stroke: #9aa0a6; stroke-width: .9; stroke-dasharray: 2.2 2.2; stroke-linecap: round; animation: hmRoute 1.4s linear infinite; }
@keyframes hmRoute { to { stroke-dashoffset: -8.8; } }
body[data-hm] .id .usmap .trav { fill: #fff; filter: drop-shadow(0 0 2px rgba(255,255,255,.8)); }
body[data-hm] .id .usmap .from { fill: #151618; stroke: #e1e3e4; stroke-width: 1.2; }
body[data-hm] .id .usmap .from-chip rect { fill: none; stroke: #5f6368; stroke-width: .7; }
body[data-hm] .id .usmap .from-chip text { fill: #c4c7c8; }
@media (prefers-reduced-motion: reduce) { body[data-hm] .id .usmap .route { animation: none; } body[data-hm] .id .usmap .trav { display: none; } }
/* the League-style top bar is back on Home (2026-10-31): the one-screen spread sits under its 48px */
@media (min-width: 1181px) and (min-height: 700px) { body[data-hm] .spread { height: calc(100vh - 48px); height: calc(100dvh - 48px); } }
body[data-hm] .ruler { top: 48px; }
/* the ECS cell is 48px shorter under the top bar: a smaller diagram and headline so nothing overlaps */
@media (min-width: 1181px) { body[data-hm] .pm-hero { width: 70%; margin: 4px auto 2px; }
  body[data-hm] .pm-ti h3 { font-size: clamp(20px, 1.45vw, 24px); line-height: 1.25; } }
/* ECS cell matches the Work page ECS card (2026-10-31, James): eyebrow "Electronic Communication System", the bottleneck
   headline, and the same two-sided thumbnail (IOC desktop + docked inbox at the back, pilot phone in front, a request
   travelling from Contact AA to the inbox), laid out on the same 620×400 grid but in this box's own container units
   (Work values × 100/62); the −45% chart stays below. Replaces the message-trace diagram (its script stops when .ecsf is gone). */
body[data-hm] .pm-k { display: block; margin-bottom: 8px; font: 500 12px/16px var(--m3); letter-spacing: .08em; text-transform: uppercase; color: #9aa0a6; }
body[data-hm] .pm-e2 { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 62 / 40; margin: 12px 0 4px; overflow: hidden; }
body[data-hm] .pm-e2 > * { position: absolute; }
body[data-hm] .pm-e2 .e2-desk { left: 8.06cqw; top: 9.68cqw; width: 87.1cqw; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .55)); }
body[data-hm] .pm-e2 img { display: block; width: 100%; height: auto; }
body[data-hm] .pm-e2 .e2-phone { left: 0; top: 22.6cqw; width: 22.6cqw; padding: 1.13cqw; border-radius: 4.2cqw; background: #0b0c0d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 16px 36px rgba(0, 0, 0, .6); }
body[data-hm] .pm-e2 .e2-phone img { border-radius: 3.2cqw; }
body[data-hm] .pm-e2 .e2-link { inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
body[data-hm] .pm-e2 .e2-link path { fill: none; stroke: #151618; stroke-width: 2.4; stroke-dasharray: 7 6; stroke-linecap: round;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff); animation: e2March 1s linear infinite; }
body[data-hm] .pm-e2 .e2-dot { fill: #151618; stroke: #fff; stroke-width: 3; }
body[data-hm] .pm-e2 :is(.e2-end, .e2-start) { fill: #fff; stroke: #151618; stroke-width: 2.4; }
@keyframes e2March { to { stroke-dashoffset: -13; } }
@media (prefers-reduced-motion: reduce) { body[data-hm] .pm-e2 .e2-dot { display: none; } body[data-hm] .pm-e2 .e2-link path { animation: none; } }
/* the thumbnail keeps its full size; the call chart goes compact beside the −45% (stat left, chart right) */
body[data-hm] .pm-e2 { flex: none; }
body[data-hm] .pm-mid { flex: none; }
body[data-hm] .pm-ft { margin-top: auto; }
body[data-hm] .pm-chart { display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 1fr); align-items: end; column-gap: 16px; }
body[data-hm] .pm-chart .pc-k { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 10px; }
body[data-hm] .pm-chart .pc-k b { font-size: 36px; line-height: 1; }
/* Selected work = ECS + Vision only (2026-10-31, James: Aggressive Pickup and Franklin removed from Home): ECS on the left,
   Vision fills the right, and View all projects runs as one slim line under Vision */
body[data-hm] .work-grid { grid-template-rows: minmax(0, 1fr) auto; }
body[data-hm] .work-grid .vibe.wide { grid-row: 1; }
body[data-hm] .work-grid .vibe.all.strip { grid-column: 2 / -1; grid-row: 2; justify-content: center; }
body[data-hm] .work-grid .vibe.all.strip .cap { margin-top: 0; align-items: center; }
body[data-hm] .work-grid .prem { grid-column: 1; grid-row: 1 / span 2; }
body[data-hm] .work-grid .vibe.wide { grid-column: 2 / -1; grid-row: 1; }
@media (max-width: 1180px) { body[data-hm] .work-grid .prem { grid-column: 1 / -1; grid-row: auto; }
  body[data-hm] .work-grid .vibe.wide, body[data-hm] .work-grid .vibe.all.strip { grid-column: 1 / -1; grid-row: auto; } }
/* ECS cell: the recorded ECS demo (images/ecs/ecs-demo.webm, 9s loop, 1280×692, recorded off-screen from the ECS page's live
   hero) replaces the built thumbnail, like the Vision cell's demo video (2026-10-31, James) */
body[data-hm] .pm-vid { flex: none; width: 100%; margin: 10px 0 4px; aspect-ratio: 1280 / 692; }
body[data-hm] .pm-vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-hm] .pm-vid { aspect-ratio: 1280 / 848; }   /* re-recorded tighter: phone over the desktop, crop around the screens */
/* ECS cell laid out like the Google Store "Google Fi Wireless" card (2026-10-31, James): label, headline, one line of story at the
   top; the ECS demo video large at the bottom, running off the cell's bottom edge. The −45% chart is out of this cell (kept in an
   HTML comment; it stays on the Work card and the case study). */
body[data-hm] .prem { overflow: hidden; }
body[data-hm] .prem .pm-s { margin: 10px 0 0; max-width: 46ch; font: 400 15px/22px var(--m3); color: var(--ink-2); }
body[data-hm] .prem .pm-mid { flex: 1 1 0; min-height: 0; display: block; position: relative; margin: 18px -24px -14px; overflow: hidden; }
body[data-hm] .prem .pm-vid { position: absolute; left: 50%; top: 0; width: 112%; margin: 0; transform: translateX(-50%); aspect-ratio: 1280 / 848; }
body[data-hm] .prem .pm-vid { left: -6px; top: 34px; width: 112%; transform: none; }   /* phone whole; bleeds off right and bottom */
/* chart back under the headline in place of the story line (2026-10-31, James); compact, stat left / chart right */
body[data-hm] .prem .pm-top .pm-ft { margin: 14px 0 0; padding: 0; }
body[data-hm] .prem .pm-top .pm-chart .cv { max-height: 120px; width: 100%; }
/* "−45% / Monthly calls to the IOC" removed (2026-10-31, James); the chart keeps its size and place in the right column */
body[data-hm] .prem .pm-chart .cv { grid-column: 2; }
/* ECS cell centred (2026-10-31, James: "reorganize the contents of the card and make it center aligned"): label, headline and the
   call chart stacked on the centre line; the demo video centred at the bottom, still running off the bottom edge */
body[data-hm] .prem .pm-top { text-align: center; }
body[data-hm] .prem .pm-ti h3 { max-width: 22ch; margin-inline: auto; }
body[data-hm] .prem .pm-chart { display: flex; justify-content: center; }
body[data-hm] .prem .pm-chart .cv { width: 300px; max-width: 100%; grid-column: auto; }
body[data-hm] .prem .pm-vid { left: 50%; top: 28px; width: 104%; transform: translateX(-50%); }
body[data-hm] .prem .pm-ti h3 { max-width: none; text-wrap: balance; }
/* UX pass: make ECS the click most Home visitors make (2026-10-31, James). Laws of UX:
   Fitts's / Von Restorff — ECS is the biggest target in Selected work (2.6 : 1 : 1 columns; was 1.9 and smaller than Vision);
   Selective Attention — it is the only moving project (Vision's video and agent chip wait for hover, index.html scripts);
   Similarity — it carries the same → as the other cells, top-right; plus a clear hover state (ground lifts, arrow nudges, demo
   eases in). Serial Position — it stays first, top-left of the group. */
@media (min-width: 1181px) { body[data-hm] .work-grid { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1fr); } }
body[data-hm] .prem { position: relative; }
body[data-hm] .prem .pm-go { position: absolute; top: 14px; right: 24px; z-index: 2; font-size: 20px; line-height: 1; color: var(--ink); }
body[data-hm] .prem .pm-go i { display: inline-block; transition: transform .2s ease; }
body[data-hm] .prem:is(:hover, :focus-visible) { background: #1d1e21; }
body[data-hm] .prem:is(:hover, :focus-visible) .pm-go i { transform: translateX(4px); }
body[data-hm] .prem .pm-vid video { transition: transform .5s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 0; }
body[data-hm] .prem:is(:hover, :focus-visible) .pm-vid video { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { body[data-hm] .prem .pm-vid video, body[data-hm] .prem .pm-go i { transition: none; transform: none !important; } }
body[data-hm] .prem .pm-vid { top: 6px; width: 100%; }   /* wider cell: less offset so more of the phone shows */

/* narrower portrait kept from the 2026-10-31 layout experiment (James): the work area gets the extra width; the rest of that
   experiment (Impact as a right column, ECS across the top) was reverted — copy in _archive/hm-uxlayout-tried-2026-10-31.css */
@media (min-width: 1181px) { body[data-hm] .spread { grid-template-columns: minmax(260px, 21fr) minmax(220px, 17fr) minmax(0, 62fr); } }
/* Selected work split 6 : 4 — ECS left, Vision / View all right (2026-10-31, James) */
@media (min-width: 1181px) { body[data-hm] .work-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 2fr); } }
/* trying 8 : 2 (2026-10-31, James) */
@media (min-width: 1181px) { body[data-hm] .work-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 1fr) minmax(0, 1fr); } }
/* settled on 7 : 3 (2026-10-31, James) */
@media (min-width: 1181px) { body[data-hm] .work-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 1.5fr) minmax(0, 1.5fr); } }
/* ECS card, header layout (2026-10-31, James: "try another layout"): label across the top; headline left with the call chart beside
   it on the right; the demo video full card width underneath, larger, running off the bottom edge. (Centred version: hm.css
   v=35, backup _archive/hm-pre-ecsheader-2026-10-31.css) */
@media (min-width: 1181px) {
  body[data-hm] .prem .pm-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "k k" "ti chart";
    column-gap: 28px; align-items: end; text-align: left; }
  body[data-hm] .prem .pm-k { grid-area: k; padding-right: 40px; }
  body[data-hm] .prem .pm-ti { grid-area: ti; }
  body[data-hm] .prem .pm-ti h3 { margin: 0; text-wrap: balance; }
  body[data-hm] .prem .pm-top .pm-ft { grid-area: chart; margin: 0; }
  body[data-hm] .prem .pm-chart { display: block; }
  body[data-hm] .prem .pm-chart .cv { width: 100%; max-height: 104px; }
  body[data-hm] .prem .pm-mid { margin-top: 18px; }
  body[data-hm] .prem .pm-vid { left: 0; top: 0; width: 100%; transform: none; }
}
/* ECS header layout, sizing pass (2026-10-31, James: "fix the size and spacing ... more cohesive"): one left edge (24px) for the
   label, headline and the demo; 24px top padding; label → headline row 16px, headline row → demo 24px; headline 24/30 on two lines
   beside a fixed 260px chart, bottoms aligned; → sits on the label's line */
@media (min-width: 1181px) {
  body[data-hm] .prem { padding-top: 24px; }
  body[data-hm] .prem .pm-top { grid-template-columns: minmax(0, 1fr) 260px; row-gap: 16px; column-gap: 32px; }
  body[data-hm] .prem .pm-k { margin: 0; line-height: 16px; }
  body[data-hm] .prem .pm-go { top: 22px; }
  body[data-hm] .prem .pm-ti h3 { font-size: 24px; line-height: 30px; letter-spacing: 0; }
  body[data-hm] .prem .pm-chart .cv { width: 260px; max-height: none; height: auto; display: block; }
  body[data-hm] .prem .pm-mid { margin: 24px -24px -14px 0; }
  body[data-hm] .prem .pm-vid { left: 0; width: calc(100% + 2px); }
}
@media (min-width: 1181px) {   /* headline block matches the chart's height (3 × 36 ≈ 115), both top-aligned under the label */
  body[data-hm] .prem .pm-top { align-items: start; }
  body[data-hm] .prem .pm-ti h3 { font-size: 28px; line-height: 36px; }
}
/* design programs dialog top (2026-11-01, James, after a Google knowledge-panel header): a photo collage — one large photo of James
   teaching on the left, two stacked on the right — with the two figures moved beside it as stat cards. The dialog widens for it. */
body[data-hm] dialog#m-schools { width: min(880px, calc(100vw - 32px)); }
body[data-hm] #m-schools .mdl-top { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 12px; padding: 20px 20px 0; }
body[data-hm] #m-schools .mdl-col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 4px; height: 300px; }
body[data-hm] #m-schools .mdl-col img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
body[data-hm] #m-schools .mdl-col .c1 { grid-row: 1 / 3; object-position: 55% 50%; }
body[data-hm] #m-schools .mdl-col .c2 { object-position: 50% 70%; }
body[data-hm] #m-schools .mdl-stats.side { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 12px; margin: 0; }
body[data-hm] #m-schools .mdl-stats.side li { justify-content: center; gap: 6px; padding: 16px 18px; }
body[data-hm] #m-schools .mdl-stats.side .k { font: 500 13px/18px var(--m3); color: var(--ink); }
body[data-hm] #m-schools .mdl-stats.side b { font-size: 40px; line-height: 44px; }
body[data-hm] #m-schools .mdl-x { position: absolute; top: 28px; right: 28px; margin: 0; float: none; }
@media (max-width: 700px) {
  body[data-hm] #m-schools .mdl-top { grid-template-columns: 1fr; }
  body[data-hm] #m-schools .mdl-col { height: 240px; }
  body[data-hm] #m-schools .mdl-stats.side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
}
body[data-hm] #m-schools .mdl-top + .mdl-bd { margin-top: 0; padding-top: 22px; position: relative; }
body[data-hm] #m-schools .mdl-col { min-height: 0; overflow: hidden; }
body[data-hm] #m-schools .mdl-col img { min-height: 0; }
body[data-hm] #m-schools .mdl-x { z-index: 5; }
body[data-hm] #m-schools .mdl-col .c1 { object-position: 62% 50%; }   /* whiteboard photo: James sits right of centre */
/* design programs dialog (2026-11-01, James): stats moved down beside the text; the collage takes the full width, with the
   first (large) photo widened into the freed space */
body[data-hm] #m-schools .mdl-top { grid-template-columns: minmax(0, 1fr); }
body[data-hm] #m-schools .mdl-col { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
body[data-hm] #m-schools .mdl-split { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; }
body[data-hm] #m-schools .mdl-stats.side { grid-template-rows: none; gap: 12px; }
body[data-hm] #m-schools .mdl-stats.side li { padding: 14px 18px; }
@media (max-width: 700px) { body[data-hm] #m-schools .mdl-split { grid-template-columns: 1fr; } body[data-hm] #m-schools .mdl-stats.side { grid-template-columns: 1fr 1fr; } }
/* Impact moved under the map in the identity column (2026-11-01, James); Selected work takes the full height on the right */
@media (min-width: 1181px) {
  body[data-hm] .id .impact { margin: auto -28px -24px; min-height: 0; flex: none; border-top: 1px solid var(--line); border-bottom: 0; }
  body[data-hm] .id .impact > .hd { padding: 0 28px; }
  body[data-hm] .id .impact .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  body[data-hm] .id .impact .num.q { grid-column: 1 / -1; padding: 16px 28px 18px; }
  body[data-hm] .id .impact .num.q blockquote { font-size: 16px; line-height: 23px; }
  body[data-hm] .id .impact .ph .im { height: 120px; flex: none; }
  body[data-hm] .id .impact .ph figcaption { font-size: 13px; }
  body[data-hm] .id .usmap { margin-top: 18px; }
  body[data-hm] .book > .workc { flex: 1; border-bottom: 0; }
}
@media (min-width: 1181px) {   /* taller ECS card: the demo is sized by height and runs off the right and bottom edges */
  body[data-hm] .prem .pm-vid { top: 0; left: 0; width: auto; height: 108%; aspect-ratio: 1280 / 850; transform: none; }
}
/* Selected work (2026-11-01, James): ECS is the one big project across the top; Vision and Aggressive Pickup share the bottom row;
   View all projects moves into the section header */
body[data-hm] .workc > .hd .hd-all { color: var(--ink); font: 500 14px/20px var(--m3); text-decoration: none; }
body[data-hm] .workc > .hd .hd-all i { font-style: normal; display: inline-block; transition: transform .2s; }
body[data-hm] .workc > .hd .hd-all:is(:hover, :focus-visible) i { transform: translateX(3px); }
@media (min-width: 1181px) {
  body[data-hm] .work-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.75fr) minmax(0, 1fr); }
  body[data-hm] .work-grid .prem { grid-column: 1 / -1; grid-row: 1; }
  body[data-hm] .work-grid .vibe.wide { grid-column: 1; grid-row: 2; }
  body[data-hm] .work-grid .vibe.apu { grid-column: 2; grid-row: 2; }
  body[data-hm] .prem .pm-top { grid-template-columns: minmax(0, 1fr) 300px; }
  body[data-hm] .prem .pm-chart .cv { width: 300px; }
  body[data-hm] .prem .pm-vid { left: 50%; top: 0; height: auto; width: 82%; transform: translateX(-50%); }
  body[data-hm] .vibe.apu .im.dev img { object-fit: contain; padding: 14px 18px 4px; }
}
/* Impact under the map reads as a list (2026-11-01, James): the quote, then one row per item — small thumbnail, label, arrow —
   with a hairline between rows */
@media (min-width: 1181px) {
  body[data-hm] .id .impact .row { display: flex; flex-direction: column; gap: 0; background: none; }
  body[data-hm] .id .impact .num.q { padding: 16px 28px; }
  body[data-hm] .id .impact .ph { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 10px 28px; border-top: 1px solid var(--line); cursor: pointer; }
  body[data-hm] .id .impact .ph .im { flex: none; width: 56px; height: 40px; }
  body[data-hm] .id .impact .ph figcaption { flex: 1; margin: 0; padding: 0; border: 0; font: 400 15px/20px var(--m3); color: var(--ink); }
  body[data-hm] .id .impact .ph:is(:hover, :focus-visible) { background: #1d1e21; }
}
/* section labels "Selected work" / "Impact" removed (2026-11-01, James); headings kept for screen readers */
body[data-hm] .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ECS card background = the IOC (2026-11-01, James): ecs/photo-ioc-console.webp (the operations floor behind a controller's
   desk), monochrome and darkened under the text and the demo; it stays on hover */
body[data-hm] .prem { isolation: isolate; }
body[data-hm] .prem::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(21, 22, 24, .9) 0%, rgba(21, 22, 24, .72) 45%, rgba(21, 22, 24, .82) 100%),
    url("images/ecs/photo-ioc-console.webp") 50% 30% / cover no-repeat;
  filter: grayscale(1) contrast(1.05); transition: opacity .3s; }
body[data-hm] .prem:is(:hover, :focus-visible) { background: transparent; }
body[data-hm] .prem:is(:hover, :focus-visible)::before { filter: grayscale(.6) contrast(1.05) brightness(1.15); }
/* shorter laptop screens: the left column (intro + Impact list, sized by the longest rotating quote) must still fit one screen */
@media (min-width: 1181px) and (max-height: 860px) {
  body[data-hm] .id .intro { font-size: 15px; line-height: 21px; margin-top: 14px; }
  body[data-hm] .id .impact .num.q { padding: 12px 28px; }
  body[data-hm] .id .impact .num.q blockquote { font-size: 14px; line-height: 20px; }
  body[data-hm] .id .impact .num.q figcaption { margin-top: 8px; font-size: 12px; }
  body[data-hm] .id .impact .ph { padding: 7px 28px; }
}
@media (min-width: 1181px) and (max-height: 860px) { body.hxf .id .impact .ph .im { width: 40px !important; height: 40px !important; } }

/* ECS cell = the Work page ECS card (2026-11-01, James): label, headline, story, Who uses it / Result / My role, the −45% chart on the
   left; the two-sided thumbnail (IOC desktop + docked inbox, pilot phone, request route) on the right; IOC photo background kept */
@media (min-width: 1181px) {
  body[data-hm] .prem { display: block; padding: 24px; }
  body[data-hm] .prem .pm-l { position: relative; z-index: 1; display: flex; flex-direction: column; width: 46%; height: 100%; }
  body[data-hm] .prem .pm-k { margin: 0 0 10px; }
  body[data-hm] .prem .pm-h { margin: 0; font: 400 26px/32px var(--m3); color: var(--ink); text-wrap: balance; }
  body[data-hm] .prem .pm-s { margin: 12px 0 0; max-width: none; font: 400 14px/21px var(--m3); color: var(--ink-2); }
  body[data-hm] .prem .pm-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(225, 227, 228, .18); }
  body[data-hm] .prem .pm-rows dt { font: 400 12px/16px var(--m3); color: var(--muted); }
  body[data-hm] .prem .pm-rows dd { margin: 4px 0 0; font: 400 13px/18px var(--m3); color: var(--ink); }
  body[data-hm] .prem .pm-chart2 { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; margin-top: 14px; }
  body[data-hm] .prem .pm-stat { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font: 400 13px/18px var(--m3); color: var(--ink-2); }
  body[data-hm] .prem .pm-stat b { font: 400 30px/1 var(--m3); color: var(--ink); }
  body[data-hm] .prem .pm-chart2 .cv { width: 100%; max-width: 340px; flex: 0 1 auto; min-height: 0; max-height: 100%; }
  body[data-hm] .prem .pm-e2 { position: absolute; top: 50%; right: -1%; left: auto; width: 56%; margin: 0; transform: translateY(-50%); aspect-ratio: 62 / 40; }
}
@media (min-width: 1181px) { body[data-hm] .prem .pm-e2 { right: -4%; width: 53%; } }

/* ---------- Home banner (2026-11-01, James: start the homepage with this sort of layout — the LoL Esports "Worlds Standings"
   header): a full-width dark banner under the top bar, James presenting in the centre with a warm-white glow behind him, fading
   into the dark at both sides; the name large on the left with a meta row (pill + icon items) under it. ---------- */
body[data-hm] .hm-banner { position: relative; height: clamp(220px, 30vh, 300px); overflow: hidden; background: #0e0f10; border-bottom: 1px solid var(--line); }
body[data-hm] .hb-art { position: absolute; inset: 0; display: flex; justify-content: center;
  background: radial-gradient(38% 90% at 50% 45%, rgba(255, 244, 224, .16), transparent 70%), linear-gradient(90deg, #0b0c0d, #16171a 50%, #0b0c0d); }
body[data-hm] .hb-art img { height: 100%; width: min(46%, 760px); object-fit: cover; object-position: 50% 22%; filter: saturate(.8) brightness(.85);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 0);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
body[data-hm] .hm-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 15, 16, .85) 0%, rgba(14, 15, 16, 0) 38%), linear-gradient(0deg, rgba(14, 15, 16, .55), transparent 45%); }
body[data-hm] .hb-copy { position: absolute; z-index: 1; left: 28px; bottom: 34px; }
body[data-hm] .hb-copy h1 { margin: 0; font: 500 clamp(40px, 3.6vw, 60px)/1.1 var(--m3); letter-spacing: -.01em; color: #fff; }
body[data-hm] .hb-meta { display: flex; align-items: center; gap: 22px; margin: 14px 0 0; padding: 0; list-style: none; }
body[data-hm] .hb-meta li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font: 500 13px/1 var(--m3); letter-spacing: .06em; text-transform: uppercase; color: #e1e3e4; }
body[data-hm] .hb-meta li::before { content: none; }
body[data-hm] .hb-meta .hb-pill { padding: 6px 10px; border-radius: 999px; background: #fff; color: #151618; font-size: 11px; letter-spacing: .04em; }
body[data-hm] .hb-meta svg { width: 18px; height: 18px; fill: none; stroke: #e1e3e4; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
body[data-hm] .hb-art img { width: min(34%, 600px); object-position: 50% 42%; }   /* face and shoulders in the window */
body[data-hm] .hb-art img { object-position: 50% 50%; transform: translateX(-7%); }   /* James centred in the banner */
/* Who uses it / Result / My role as a label | value table, hairlines between rows, no fill (2026-11-01, James) */
@media (min-width: 1181px) {
  body[data-hm] .prem .pm-rows { display: block; margin-top: 14px; padding: 0; border-top: 1px solid rgba(225, 227, 228, .18); }
  body[data-hm] .prem .pm-rows > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(225, 227, 228, .18); }
  body[data-hm] .prem .pm-rows dd { margin: 0; }
}
/* no ruler: the home spread no longer leaves its 40px gutter and edge line on the right (2026-11-01) */
@media (min-width: 1400px) { body[data-hm] .spread { margin-right: 0; border-right: 0; } }

/* ECS cell gets the same hextech frame as the Vision / Aggressive Pickup media (2026-11-01, James): an inset chamfered frame
   (top-left + bottom-right cut), hairline rim along the cuts, L-ticks on the square corners. The IOC photo is clipped to it and the
   devices sit inside it. */
@media (min-width: 1181px) {
  body[data-hm] .prem { --f: 14px; --c: 22px; overflow: hidden; padding: calc(var(--f) + 24px) calc(var(--f) + 24px); }
  body[data-hm] .prem::before, body[data-hm] .prem::after { inset: var(--f);
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
  body[data-hm] .prem::after { content: ""; position: absolute; z-index: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--hx-line, rgba(225, 227, 228, .24));
    background:
      linear-gradient(135deg, transparent calc(50% - .7px), var(--hx-line-2, rgba(225, 227, 228, .55)) 50%, transparent calc(50% + .7px)) top left / var(--c) var(--c) no-repeat,
      linear-gradient(135deg, transparent calc(50% - .7px), var(--hx-line-2, rgba(225, 227, 228, .55)) 50%, transparent calc(50% + .7px)) bottom right / var(--c) var(--c) no-repeat,
      linear-gradient(var(--hx-tick, rgba(255, 255, 255, .75)), var(--hx-tick, rgba(255, 255, 255, .75))) top right / 16px 1.5px no-repeat,
      linear-gradient(var(--hx-tick, rgba(255, 255, 255, .75)), var(--hx-tick, rgba(255, 255, 255, .75))) top right / 1.5px 16px no-repeat,
      linear-gradient(var(--hx-tick, rgba(255, 255, 255, .75)), var(--hx-tick, rgba(255, 255, 255, .75))) bottom left / 16px 1.5px no-repeat,
      linear-gradient(var(--hx-tick, rgba(255, 255, 255, .75)), var(--hx-tick, rgba(255, 255, 255, .75))) bottom left / 1.5px 16px no-repeat; }
  body[data-hm] .prem .pm-l { height: 100%; }
  body[data-hm] .prem .pm-e2 { right: calc(var(--f) + 16px); width: 50%; z-index: 1; }
}
/* Selected work: only the framed rectangle is clickable and lights up, like the Work page cards (2026-11-01, James). The cell itself
   ignores the pointer; its frame (.im on Vision / Aggressive Pickup, .pm-frame on ECS) takes it, and fx.js lights the frame's
   chamfered shape. No whole-cell hover ground any more. */
body[data-hm] .work-grid > .card { pointer-events: none; }
body[data-hm] .work-grid > .card:hover { background: var(--bg); }
body[data-hm] .work-grid > .card :is(.im, .pm-frame) { pointer-events: auto; cursor: pointer; }
body[data-hm] .prem .pm-frame { --hx-c: 22px; position: absolute; inset: 14px; z-index: 0;
  clip-path: polygon(var(--hx-c) 0, 100% 0, 100% calc(100% - var(--hx-c)), calc(100% - var(--hx-c)) 100%, 0 100%, 0 var(--hx-c)); }
body[data-hm] .prem:is(:hover, :focus-visible)::before { filter: grayscale(1) contrast(1.05); }
body[data-hm] .prem:has(.pm-frame:hover)::before { filter: grayscale(.6) contrast(1.05) brightness(1.15); }
/* Vision is secondary (2026-11-01, James: it was taking away from ECS as the primary click). At rest: the screenshot sits smaller
   inside its frame as a contained window on the dark ground, partly desaturated and dimmed; the agent chip is hidden. On hover or
   focus of its frame: full colour, the chip appears, the demo plays (index.html script). */
@media (min-width: 1181px) {
  body[data-hm] .vibe.wide .im { background: #1b1c1f; }
  body[data-hm] .vibe.wide .im :is(img, video) { inset: 12% 10% 0 10%; width: 80%; height: 88%; object-fit: cover; object-position: 0 0;
    filter: grayscale(.7) brightness(.62); transition: filter .25s ease; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
  body[data-hm] .vibe.wide .agent { opacity: 0; transition: opacity .2s ease; }
  body[data-hm] .vibe.wide:has(.im:hover) .im :is(img, video), body[data-hm] .vibe.wide:focus-visible .im :is(img, video) { filter: none; }
  body[data-hm] .vibe.wide:has(.im:hover) .agent, body[data-hm] .vibe.wide:focus-visible .agent { opacity: 1; }
}
/* the Vision demo window takes the same chamfered shape as its frame (top-left + bottom-right cut) */
@media (min-width: 1181px) {
  body[data-hm] .vibe.wide .im :is(img, video) { --c: 14px; box-shadow: none;
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
}
@media (min-width: 1181px) {   /* window fully inside the frame so both of its cut corners show */
  body[data-hm] .vibe.wide .im :is(img, video) { top: 10%; left: 9%; width: 82%; height: 80%; }
}
@media (min-width: 1181px) { body[data-hm] .vibe.wide .im :is(img, video) { --c: 18px; } }
/* Aggressive Pickup down a level too (2026-11-01, James: too bright): dimmed and partly desaturated at rest, full colour when its
   frame is hovered or focused — ECS is the only bright card at rest */
@media (min-width: 1181px) {
  body[data-hm] .vibe.apu .im img { filter: grayscale(.7) brightness(.62); transition: filter .25s ease; }
  body[data-hm] .vibe.apu:has(.im:hover) .im img, body[data-hm] .vibe.apu:focus-visible .im img { filter: none; }
}
/* correction (2026-11-01, James): the Vision demo fills its frame edge to edge (the frame's own chamfer clips it); no inset window,
   no separate cut. Still dimmed at rest, full colour on hover. */
@media (min-width: 1181px) {
  body[data-hm] .vibe.wide .im :is(img, video) { inset: 0; top: 0; left: 0; width: 100%; height: 100%; clip-path: none; object-position: 0 0; }
}
/* no hairlines between the project cells (2026-11-01, James): the grid's 1px gaps no longer show the line colour */
body[data-hm] .work-grid { background: var(--bg); }

/* Vision + Aggressive Pickup laid out like ECS (2026-11-01, James: text inside the polygonal frame): the frame (.im) fills the cell
   with the same 14px inset; the caption sits inside it at the top-left on the frame ground; the screens sit below the caption.
   The caption ignores the pointer, so hovering anywhere in the frame lights it (fx.js) and clicks reach the cell. */
@media (min-width: 1181px) {
  body[data-hm] .work-grid > .vibe:is(.wide, .apu) { position: relative; padding: 0; }
  body[data-hm] .work-grid > .vibe:is(.wide, .apu) .im { position: absolute; inset: 14px; height: auto; min-height: 0; background: #1b1c1f; }
  body[data-hm] .work-grid > .vibe:is(.wide, .apu) .cap { position: absolute; z-index: 2; top: 34px; left: 38px; right: 38px; margin: 0; pointer-events: none;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  body[data-hm] .work-grid > .vibe:is(.wide, .apu) .cap span:first-child { max-width: 46ch; }
  body[data-hm] .work-grid > .vibe.wide .im :is(img, video) { top: 34%; left: 0; width: 100%; height: 66%; object-position: 0 0; }
  body[data-hm] .work-grid > .vibe.apu .im img { position: absolute; top: 30%; left: 0; width: 100%; height: 70%; padding: 0 24px 0; object-fit: contain; object-position: 50% 0; }
  body[data-hm] .work-grid > .vibe.wide .agent { bottom: 16px; left: 24px; }
}
@media (min-width: 1181px) {
  body[data-hm] .work-grid > .vibe:is(.wide, .apu) .cap { background: transparent; padding: 0; }
  /* Impact list: the two rows first, the rotating quote at the bottom (2026-11-01, James) */
  body[data-hm] .id .impact .num.q { order: 3; border-top: 1px solid var(--line); }
}
@media (min-width: 1181px) { body[data-hm] .work-grid > .vibe:is(.wide, .apu) .cap span:first-child { text-wrap: balance; } }   /* no one-word last line */
/* Vision fix (2026-11-01, James: "doesn't look right"): the screenshot was a flat grey slab butting the frame's sides with a hard top
   edge. Now it reads as a device window like the ECS and Aggressive Pickup screens: inset from the sides, dark bezel, rounded top
   corners, running off the frame's bottom edge. */
@media (min-width: 1181px) {
  body[data-hm] .work-grid > .vibe.wide .im :is(img, video) { top: 34%; left: 7%; width: 86%; height: auto; aspect-ratio: 1120 / 700;
    border: 4px solid #0b0c0d; border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0 20px 44px rgba(0, 0, 0, .55); }
}