/*
 * ericville26 — home page
 * =======================
 * Hero, featured work card, stats strip and section rows, from the handoff
 * prototype. Values exact: 1.02fr/.98fr, 56px, 74vh, 13ch, 44ch, 26px grid
 * column, 14.5px, 11.5px, .09em — none rounded.
 *
 * Scoped under .ev26 like the rest of the component layer, so it cannot reach
 * the ericville25 markup that still renders below these sections.
 */

/* ── hero ─────────────────────────────────────────────
 * ONE column (#1420). Was `grid-template-columns:1.02fr .98fr;gap:56px;
 * align-items:center;min-height:74vh` with a square panel on the right.
 *
 * Deleting the panel is not just a subtraction — three numbers move with it:
 *
 *   measure   13ch -> none. The headline now runs the full 1032px column
 *             (--col 1120 minus 2x --gut 44). At 1440 that takes the longest
 *             rotating line, "I design tools people have to use.", from three
 *             lines to two.
 *   size      clamp(48,6.6vw,88) -> clamp(50,8.6vw,118). The measure got wider,
 *             so the type has to grow or the hero reads as a caption in a
 *             field. 118px at 1440, 88 at 1024, 66 at 768, 50 at 375.
 *   height    min-height:74vh -> none. 74vh was reserving 666px of a 900px
 *             viewport for a 430px card and a 3-line heading, which is where
 *             the ~200px of dead air under the hero came from. Padding alone
 *             now sets the height: ~600px at 1440, so the "Latest, everywhere"
 *             head just breaks the fold and asks to be scrolled to. That is
 *             half of the "more focus on the grid" ask, paid for by the hero.
 *
 * The h1 keeps display:block here; .hl below re-declares display:grid for the
 * rotating stack and must keep out-ranking this rule.
 *
 * #1429: padding-bottom 62px -> 24px. The hero's closing row (.hero-foot, and
 * the .hero-sig inside it) is deleted — it was half of a bio that now lives in
 * one section directly below this one — and 62px of padding under an empty box
 * left the new control adrift in the middle of the page instead of reading as
 * the line after the claim.
 *
 * #1477: 24px -> 44px. THE PAGE'S VERTICAL RHYTHM, LOOSENED — and this is the
 * one number that had to move rather than a general inflation. 24 was sized to
 * clear a one-line byline control. What follows the hero now is a full section
 * with a section header, and 50px total (26 margin + 24 padding) put a 26px
 * heading almost against 118px of type. 44 makes it 70. The three numbers this
 * task changes, all of them SECTION BOUNDARIES and none of them internal to a
 * component (measured at 1440):
 *
 *   gap under the h1            50 -> 70   here (24 -> 44)
 *   bio -> "Latest, everywhere" 64 -> 88   .bio-sec margin-bottom
 *   between the two grid rows   38 -> 46   .grid.latest row-gap
 *
 * That is +52px of air on a page that also gained ~250px of newly permanent
 * bio. Nothing inside a component grew: type sizes, line-heights, cell padding
 * and the 26px .shead margin are all untouched. "Slightly more spread out",
 * not a redesign.
 *
 * Only the BOTTOM of the hero box moves; padding-top and the h1's 26px margin
 * are untouched, so the h1's top is measured unchanged at 142 (1440/1024/768)
 * and 114 (375).
 *
 * margin-bottom:0 is not cosmetic. basetags.css gives EVERY <section> a 50px
 * bottom margin, and .hero never overrode it — invisible until now because it
 * simply collapsed with .latest-sec's own 44px margin-top. With the bio control
 * in between, that stray 50px was landing on top of the 50px this rule sets and
 * pushing the control 100px off the claim. Measured, not read: the gap was
 * 100px, not the 50 intended. */
/* #1495: padding-top 72 -> 30. The 72 was the PAGE's top air, because the hero
 * was the first thing under the masthead. The bio now is, so the page-top 72
 * moves onto .bio-sec and the hero keeps only the gap between the standfirst
 * and the claim. 30 is deliberately tighter than a section boundary (44/88 on
 * this page): the intro and the headline are ONE opening unit — a quiet line
 * and then the loud one — and spacing them like two sections would give the
 * standfirst a territory of its own to be a rival from. The page's total top
 * height is within ~10px of before: 72 + ~112 intro + 30 == the old 72 + the
 * space the bio used to occupy further down.
 *
 * padding-bottom 44 is untouched (#1477's boundary to "What I've been up to").
 * margin-bottom:0 still cancels basetags' 50px on every <section>. */
.ev26 .hero{display:block;padding:30px 0 44px;margin-bottom:0}
.ev26 .hero h1{margin-bottom:26px;font-size:var(--t-d-hero);line-height:.94;font-weight:var(--disp-weight);letter-spacing:var(--disp-track);color:var(--ink);display:block}
.ev26 .hero .deck{max-width:44ch;color:var(--text);font-weight:450}
.ev26 .acts{display:flex;gap:12px;align-items:center}

/* ── the bio ────────────────────────────────────────
 * #1477. ALWAYS OPEN, and non-interactive. #1429 built a <details> here over
 * two rounds; Eric asked for it expanded by default, so the machine is deleted,
 * not defaulted. Gone with it, and none of it kept as dead CSS:
 *   .bio-dl / .bio-sum        the control and its 56->132px state ladder
 *   .bio-sum::before          the borrowed nav pill
 *   .bio-cue                  the chevron
 *   .bio-label                the 14.5px summary text. Eric's words survive as
 *                             the section's h3 (see front-page.php); the SIZE
 *                             does not — 14.5/700 was a copy of the OLD .shead
 *                             rung, which #1450 raised to clamp(22,,26). Kept
 *                             at 14.5 it would have been an orphan size no
 *                             other header on the site still uses.
 *   .bio-panel/.bio-clip      the 0fr->1fr collapsing box
 *   @keyframes bio-open/-rise the no-JS open animation
 *   .bio-js, .bio-closing     js/bio.js's hooks — the file itself is deleted
 *   the whole prefers-reduced-motion block for this section
 * What remains is ~10 declarations, because a thing that is simply present does
 * not need state.
 *
 * REDUCED MOTION: there is now NOTHING on this block to guard. Checked rather
 * than assumed — the section declares no transition, no animation and no
 * transform; its only hover is the inherited link colour on the three inline
 * anchors, which is a colour change and is not motion. So the media query is
 * removed rather than emptied.
 *
 * THE HEADLINE PROBLEM, SOLVED WITH COMPOSITION. #1429's whole argument for
 * hiding this content was that the h1 is clamp(50px,8.6vw,118px) and anything
 * under it competes. Permanently visible, it has to lose to the headline by
 * arrangement instead:
 *
 *   IT IS A SECTION, NOT A SECOND HERO. It opens with the .shead component and
 *   the --shead-* rung (#1450) — the same header, at the same size, as "Latest,
 *   everywhere" 500px below it. That reads as two peers under one headline. The
 *   ladder is CONSUMED, not copied: #1450's whole point was collapsing five
 *   hand-written duplicates of that declaration into one token set, and a sixth
 *   would be the regression it fixed. So there is no type rule here at all.
 *
 *   THE PROSE STAYS ON THE SPINE, AT ITS OLD SIZE. 16.5px/1.7 at 62ch, flush to
 *   the same left edge as the h1, the section heads and the grid. No new size,
 *   no indent, no ground of its own, no border.
 *
 *   THE PORTRAIT MOVES TO THE RIGHT EDGE. Under the disclosure it sat at left:0
 *   and the prose was indented 152px past it, so the face was the first thing in
 *   the section — correct when it was the control's handle, wrong now that it is
 *   just a face. A 62ch measure in a 1032px column leaves ~400px of empty right
 *   field; the portrait goes there, flush to the column's right edge, so it is
 *   an aside in the margin aligned to a real page edge rather than the section's
 *   opener. It also keeps the left spine unbroken from the h1 to the footer.
 *
 * 132px is #1429 r2's diameter, unchanged: chosen against the headline (2.36x
 * the old resting circle, still obviously subordinate to 221px of type), and
 * that reasoning did not change when the growth did. Grayscale is kept for the
 * same reason it was there — it is the quietest the photograph can be, which is
 * what a permanent face under a 118px headline needs to be. It no longer has a
 * colour reward to switch to; it is simply a grey portrait.
 *
 * THE TWO LEGACY LANDMINES FROM #1429 STILL APPLY:
 *  1. `.bio` IS TAKEN. css/page-home.css carries `.home .bio{padding-top:20px;
 *     padding-bottom:40px}` plus `.home .bio p` and `.home .bio img` from
 *     ericville25, and the front page's <body> has the `home` class. Hence
 *     .bio-sec / .bio-body / .bio-copy / .bio-face and never a bare .bio.
 *  2. basetags.css sets `section{padding:20px 0;margin:0 0 50px}` for every
 *     <section> on the site, so .bio-sec states its padding explicitly.
 *
 * #1495 — IT IS NOW THE FIRST THING ON THE PAGE, ABOVE THE H1, and the three
 * paragraphs are one. Everything above still holds EXCEPT the answer to "how
 * does this not compete with the headline", because that answer was "look like
 * a section" and a section is exactly the wrong thing to put in front of a
 * claim. Above the h1 it has to read as a STANDFIRST: the quiet line you take
 * in on the way to the loud one. Three subtractions, no additions:
 *
 *   THE HEADER DROPS A RUNG. .shead -> .shead-sub (see front-page.php): sans,
 *   var(--t-body), 600, against serif clamp(23,,28) 600. The ladder is still
 *   consumed, never restated (#1450) — this file adds no type rule for it, only
 *   the 6px of rhythm under it. Losing .shead also loses its ::after, the 1px
 *   accent line that fills the header row: a full-bleed rule at y=0 reads as
 *   "chapter start" and was the single loudest mark above the fold.
 *
 *   THE FACE COMES DOWN 176 -> 120. Not taste — arithmetic. The copy is now one
 *   paragraph: a 22px greeting plus ~3 lines at 16.5/1.7 is ~112px of column.
 *   A 176px circle beside it overhangs the text by 64px and becomes the biggest
 *   object on screen before the h1 has been read. 120 sits inside the text
 *   block's own height, so the face is bounded BY the prose instead of setting
 *   the intro's height. It stays grayscale for the reason it always was — the
 *   quietest a photograph can be — which matters more now that it is first.
 *
 *   IT STOPS BEING A SECTION-SIZED BLOCK. margin-bottom 88 -> 0; the 30px gap to
 *   the h1 is the hero's padding-top (above), and 30 < 44 < 88 is the whole
 *   hierarchy: inside the opening unit, between sections, between the opening
 *   unit and the rest of the page. padding-top:72px is the page-top air the
 *   hero used to carry, moved here with the first-element job.
 *
 * The h1 is still clamp(50px,8.6vw,118px) and nothing above it is larger than
 * body text. The loudest moment did not move; it just stopped being first. */
/* #1500 — the greeting is now its OWN row, ahead of the rotating headline
 * (row 2) and the paragraph+face (row 3, still .bio-sec). It inherits the
 * page-top air and the anchor that used to live on .bio-sec, since it is now
 * the first element on the page. */
.ev26 .bio-greet{padding:72px 0 0;margin:0;scroll-margin-top:96px}
.ev26 .bio-greet .shead-sub{margin:0}
/* #1500 — Eric: larger, header typeface. Scoped here rather than raising
   --shead-sub-size/-weight in v26-components.css, because that rung is
   shared with every Lab sub-group label (Tools, Web 1.0 & 2.0, ...) — this
   greeting is the only .shead-sub that should look like a header instead of
   a caption. var(--shead-size) is the same clamp the section h2s use. */
.ev26 .bio-greet .shead-sub h2{
  font-family:var(--serif);font-size:var(--shead-size);font-weight:var(--shead-weight);
  letter-spacing:var(--shead-track);line-height:var(--shead-lh);
}
.ev26 .bio-sec{--bio-face:120px;--bio-gap:56px;margin:0;padding:0}
/* 6px, not .shead's 26: a header sits over a block, a lead-in sits on its
 * paragraph. */
.ev26 .bio-copy .shead-sub{margin:0 0 6px}
/* The h2/h3 fix landed in v26-components.css (`.shead-sub :is(h2,h3)`) --
 * the workaround that used to sit here is gone. See that file for the
 * rung itself. */

/* `1fr auto`, not two fixed tracks: the prose takes what is left and the face
 * is exactly its own diameter, pinned to the right edge of the column at every
 * width without a single hardcoded column number. align-items:start so the face
 * hangs from the first line of prose rather than centring against three
 * paragraphs — the top of the face and the top of the text are one line. */
.ev26 .bio-body{display:grid;grid-template-columns:1fr auto;gap:0 var(--bio-gap);align-items:start}
.ev26 .bio-copy p{margin:0 0 16px;font-size:var(--t-body);line-height:1.7;color:var(--text);max-width:62ch}
.ev26 .bio-copy p:last-child{margin-bottom:0}
/* <figure>, so basetags' default figure margin has to be zeroed here. */
.ev26 .bio-face{margin:0;width:var(--bio-face);height:var(--bio-face);border-radius:50%;overflow:hidden;background:var(--sunken);line-height:0}
.ev26 .bio-face img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06)}

/* ── featured work card ─────────────────────────────
 * UNUSED as of #1420 — the hero has no right-hand panel. Retained with the
 * ericville26_home_feature() helper it styles, as the revert path back to the
 * card treatment. Nothing on the site emits .feature today.
 *
 * Keeps the panel geometry the handoff specified for the plotter — square,
 * --r-m radius, hairline border, paper ground — and fills it with a real
 * piece of work instead of a generated figure. */
/* The two hardcoded rgba(11,15,13,…) shadows are gone: they were --ink written
   out longhand, which meant they could not follow the theme into dark. They
   are --raise / --raise-hi now, the same elevation the hovered .cell and .slab
   use, so the whole raised set casts one shadow. */
.ev26 .feature{position:relative;display:flex;flex-direction:column;border-radius:var(--r-m);background:var(--paper);aspect-ratio:1/1;overflow:hidden;box-shadow:var(--raise);transition:box-shadow var(--med) var(--ease),transform var(--med) var(--ease)}
.ev26 .feature:hover{box-shadow:var(--raise-hi);transform:translateY(-2px)}
.ev26 .feature figure{margin:0;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--sunken)}
.ev26 .feature figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter var(--slow) var(--ease),transform var(--slow) var(--ease)}
.ev26 .feature:hover figure img{filter:grayscale(0) contrast(1);transform:scale(1.03)}
.ev26 .feature-body{flex:0 0 auto;padding:22px 26px 24px;display:flex;flex-direction:column;gap:8px}
.ev26 .feature-body h2{font-size:var(--t-title);line-height:1.15;letter-spacing:var(--tr-title);font-weight:600;color:var(--ink);transition:color var(--fast) var(--ease)}
.ev26 .feature:hover .feature-body h2{color:var(--accent)}
.ev26 .feature-meta{margin:0;font-size:var(--t-meta);color:var(--faint)}
.ev26 .feature .more{margin-top:4px}
/* A card with no thumbnail should not collapse to a strip of text. */
.ev26 .feature:not(:has(figure)) .feature-body{flex:1 1 auto;justify-content:center}

/* The grid cells are anchors here, not divs, so kill the inherited underline
   and let the .cell rules do the work. */
.ev26 .grid .cell{text-decoration:none;color:inherit}
.ev26 .grid .cell h4{color:var(--ink)}

/* ── "Latest, everywhere" — two rows of three ────────
 * PAGE-SCOPED ON PURPOSE. `.grid`, `.grid.four` and `.cell` are shared
 * primitives in v26-components.css and another change is in that file right
 * now (#1418), so everything below hangs off .home-v26 and touches no other
 * surface. Nothing here is a new grid variant that needs promoting: the base
 * `:where(.ev26) .grid` is ALREADY repeat(3,1fr), so 3-up is the primitive's
 * own default and the markup simply stopped saying `.four`. The columns are
 * restated anyway so this section cannot be silently re-flowed by a future
 * change to that default.
 *
 * Everything else in this block is the "more focus" ask. At 4-up each card was
 * ~245px wide, which is why titles ran to four lines and the 4:3 thumbnails
 * were postage stamps. At 3-up they are ~330px, and the extra 85px is spent
 * on: a 3:2 image (wider, more like the photograph it is), a title that fits
 * on two lines, and a 24-word excerpt instead of 18.
 *
 * row-gap is 38px against an 8px column gap. The cells carry 22px of internal
 * padding, so 8px between columns already reads as ~52px of white — but two
 * rows 8px apart would let the bottom of one card's text touch the top of the
 * next card's kicker. The asymmetry is what makes it read as two rows rather
 * than one block of six. */
/* 44px, not the 20px this started at. #1418 is removing .shead's 1px top rule
 * and its hover wipe, so the boundary between the hero and this section is now
 * made of space alone. A drawn line can separate two things at 20px; space
 * cannot — it has to be unambiguously more than the gap inside the section
 * head itself, or the heading reads as a caption to the hero above it. */
/* #1500 — Eric: cards read narrow/misaligned on Home (and Lab, same bug).
 * Root cause: `.latest-sec` is a bare <section>, and basetags.css's legacy
 * responsive padding was never reset here the way it is on .art-group /
 * .shop-group (both carry an explicit `padding:0`). That legacy rule has
 * THREE different horizontal values depending on viewport —
 * `section{padding:var(--space-m) var(--page-gutter-s)}` (20px) below 700px,
 * `--page-gutter-l` between 700-939px, and 0 only at >=940px — so this
 * section was quietly gaining 20px+ of extra inset on every screen narrower
 * than 940px, on top of `.wrap`'s own gutter, while its sibling sections
 * (.bio-greet, .hero, .bio-sec) all explicitly zero their own padding and
 * never had the problem. `padding:0` makes `.latest-sec` match its siblings
 * and stop depending on ericville25's breakpoint math at all. */
.ev26.home-v26 .latest-sec{margin-top:44px;padding:0}
/* row-gap 38 -> 46 (#1477). The third of the three loosened boundaries: with
   two rows of three, this is the only gap INSIDE the grid, and 8px more of it
   is what stops six always-on cards under an always-on bio from reading as one
   block. The 8px column gap is untouched — the asymmetry is the thing that
   makes it two rows rather than a slab, and widening both would just make the
   cards smaller. */
.ev26.home-v26 .grid.latest{grid-template-columns:repeat(3,1fr);row-gap:46px}
.ev26.home-v26 .grid.latest .cell figure{aspect-ratio:3/2;margin:15px 0 17px}
.ev26.home-v26 .grid.latest .cell h4{font-size:var(--t-lead);line-height:1.22}
.ev26.home-v26 .grid.latest .cell p{font-size:var(--t-meta);line-height:1.6}

/* ── responsive ─────────────────────────────────────────
 * The prototype only carried the 900px hero collapse. Grid breakpoints below
 * that were the handoff's largest stated gap; these follow its own suggestion
 * (4 -> 2 at 900, -> 1 at 600) and are container-relative where the component
 * can be placed at an arbitrary width.
 *
 * The hero no longer needs a collapse rule — it is one column at every width
 * (#1420) — but it still needs its padding and headline to come down. The 3-up
 * grid takes the same 3 -> 2 -> 1 ladder the 4-up one took, one step earlier in
 * effect. */
@media (max-width:900px){
  /* The same three boundaries, scaled down with everything else (#1477):
     hero padding-bottom 20 -> 34, bio 48 -> 68, row-gap 30 -> 36. The ratio to
     the desktop numbers is held rather than the numbers themselves, so the page
     does not get proportionally airier as it gets narrower.
     --bio-gap comes down 56 -> 40 because the column is 680 here, and the prose
     losing 16px of measure buys less than the face losing its isolation. */
  /* #1495: the hero's top is now the intro->claim gap, not the page's top air,
     so it scales with that gap (30 -> 22) and the page-top 44 moves to the bio,
     which is what is actually first here. bio margin-bottom is gone with the
     section it used to end. */
  .ev26 .hero{padding:22px 0 34px}
  .ev26 .bio-greet{padding-top:44px}
  .ev26 .bio-sec{--bio-gap:40px;--bio-face:104px;margin-bottom:0;padding-top:0}
  .ev26 .grid.four{grid-template-columns:repeat(2,1fr)}
  .ev26.home-v26 .grid.latest{grid-template-columns:repeat(2,1fr);row-gap:36px}
}
@media (max-width:600px){
  .ev26 .grid.four,
  .ev26 .grid{grid-template-columns:1fr}
  .ev26.home-v26 .grid.latest{grid-template-columns:1fr;row-gap:8px}
  /* One column means the cards are already stacked; the generous row gap that
     separated two rows just becomes dead scroll. Back to the primitive's 8px,
     which with 22px of cell padding is still a clear 52px between titles. */

  /* THE PHONE, #1477. There is no beside at 287px, so the two-column body
     becomes one column — and the FACE GOES FIRST. That is the one place the
     phone deliberately disagrees with the desktop order: on a wide screen the
     portrait is an aside in the right margin and belongs after the prose, but
     stacked, a face under three paragraphs is a caption to a wall of text.
     Above them it is what turns the wall into an introduction. `order` moves it
     visually only; the DOM order, and therefore the reading order, is unchanged
     — the alt text is a name, not information the prose depends on.
     96px, not 132: 96 is what #1429 r2 measured as the largest circle that does
     not crowd the 287px column, and it is still the same object, just smaller.
     28px under it, against the 56px it has beside it at 1440.

     #1495: 96, down from 128. Stacked and FIRST ON THE PAGE, the circle is the
     masthead's immediate neighbour with nothing above it to be measured
     against; 128 there is a portrait page, not an introduction. 20px under it,
     since it now hands off to a two-line greeting-plus-paragraph rather than
     three paragraphs. */
  .ev26 .bio-greet{padding-top:32px}
  .ev26 .bio-sec{--bio-face:96px;padding-top:0}
  .ev26 .bio-body{grid-template-columns:1fr;gap:0}
  .ev26 .bio-face{order:-1;margin-bottom:20px}
}

/* ── rotating headline ──────────────────────────────
 * Every line occupies the same grid cell, so the heading is always as tall as
 * its tallest line and nothing below it moves when the text changes. Without
 * JS the first line is simply the one with .is-on and the rest never show.
 *
 * Selector must out-rank `.ev26 .hero h1` above, which sets display:block. It
 * did win at first, and the lines flowed inline instead of overlapping — four
 * invisible lines still take up inline space, so the heading grew to the sum
 * of all five and pushed the buttons off the screen. */
.ev26 .hero .hl{display:grid;margin-bottom:26px}

/* #1424 — the swap is DRIVEN FROM JS, not from a CSS transition.
 *
 * It used to be `transition:opacity/transform var(--slow)`: a 0.7s cross-fade
 * with 6px of travel, which on 118px type is a dissolve, not a move. Eric asked
 * for the outgoing line to smear vertically as it leaves.
 *
 * Vertical smear cannot be done in CSS. `filter:blur()` is ISOTROPIC — it has
 * one radius and blurs X and Y equally — so a CSS blur here would be a soft
 * focus, not motion. The directional version is an SVG `feGaussianBlur` with a
 * two-value stdDeviation ("0 12" = no X, 12px of Y), and its amount is an SVG
 * ATTRIBUTE, which CSS cannot interpolate. So headline.js owns the whole swap
 * on one rAF and derives every channel — offset, opacity, and blur — from the
 * same progress value. The blur is literally the derivative of the position
 * curve: it exists because the line is moving fast, which is what motion blur
 * IS. See the header of js/headline.js for the curves.
 *
 * What stays here is only the two RESTING states. With JS off, or under
 * reduced motion, line 0 carries .is-on and simply stays — no transition to
 * inherit, nothing to blur, no dependency on the filter existing.
 *
 * Selector must out-rank `.ev26 .hero h1` above, which sets display:block. It
 * did win at first, and the lines flowed inline instead of overlapping — four
 * invisible lines still take up inline space, so the heading grew to the sum
 * of all five and pushed the buttons off the screen. */
.ev26 .hl-line{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(.15em)}
.ev26 .hl-line.is-on{opacity:1;visibility:visible;transform:none}

/* The filter host. width/height 0 and absolutely positioned so a <defs>-only
 * SVG can never take part in layout — the h1 must keep reserving exactly the
 * height of its tallest line and nothing below it may move. */
.ev26 .hl-fx{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* Belt and braces. The rotation never starts under reduced motion (headline.js
 * returns early), so nothing should ever set an inline filter — but if anything
 * ever does, it does not get to blur type at somebody who asked for stillness. */
@media (prefers-reduced-motion:reduce){
  .ev26 .hl-line{transition:none;filter:none!important}
}

/* ── the person, formerly here ──────────────────────
 * `.person` / `.person-body` / `.person-portrait` / `.person-copy` are deleted
 * (#1429). They styled the section at the FOOT of the page that this task
 * merged into the bio section above, and nothing else on the site emitted
 * them — the front page was their only caller. The prose sizing survives
 * verbatim as `.bio-copy p` (16.5px/1.7, 62ch), so the paragraphs read exactly
 * as they did; scroll-margin-top:96px moved with id="about" onto .bio-sec. */

/* ── footer ─────────────────────────────────────────
 * One spine (UX / Lab / Art), utility in its own tier, identity and the
 * personal register last. */
/* #1431 — no ground of its own.
 * This carried `background:var(--bg)`, which is a NO-OP on every page whose
 * ground is --bg and a bug on the one page whose ground is not: on home it
 * painted an opaque cool slab over the warm wash, producing a hard grey band
 * with a visible edge. The footer is not a slab sitting on the page, it is the
 * bottom of the page — so it paints nothing and lets the ground run through.
 *
 * #1494 — and the hairline is gone too. With the surface system (#1421) every
 * page above the footer already ends in a bounded surface, so the rule was a
 * second boundary drawn on top of one that was already there; what it read as
 * was a seam across the page. The separation is now the 96px of ground plus
 * the type's own tier structure. No border, no fill: the footer is simply
 * where the page runs out. */
.ev26.site-footer{margin-top:96px;padding:56px 0 48px}
.ev26.site-footer .foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:44px;flex-wrap:wrap}
.ev26.site-footer .foot-mark{display:block;margin-bottom:16px}
.ev26.site-footer .foot-mark img{height:26px;width:auto}
.ev26.site-footer .foot-claim{margin:0;font-size:var(--t-meta);line-height:1.6;color:var(--muted);max-width:42ch}
.ev26.site-footer .foot-nav{display:flex;flex-direction:column;gap:2px}
.ev26.site-footer .foot-nav .micro{margin:0 0 12px;font-family:var(--sans)}
.ev26.site-footer .foot-nav a{display:flex;flex-direction:column;gap:1px;padding:7px 0;font-size:var(--t-body);font-weight:600;color:var(--ink);transition:color var(--fast) var(--ease)}
.ev26.site-footer .foot-nav a span{font-size:var(--t-meta);font-weight:400;color:var(--faint)}
.ev26.site-footer .foot-nav a:hover{color:var(--accent)}
/* #1494 — the social row was a 33px target (15px glyph + 8px padding), under
 * every touch minimum and visually the smallest thing in the footer. The glyph
 * grows to 18px and the padding to 12px, which makes a 44px circle: HIG's touch
 * floor, reached by padding around the icon rather than by inflating the mark,
 * so the icons stay quiet while the hit area stops being a lottery. */
.ev26.site-footer .foot-social .links{display:flex;gap:8px}
.ev26.site-footer .foot-social a{padding:12px;border-radius:999px;border:1px solid var(--line-strong);line-height:0;transition:var(--fast)}
.ev26.site-footer .foot-social a svg{width:18px;height:18px;fill:var(--muted);opacity:.75;transition:var(--fast)}
.ev26.site-footer .foot-social a:hover{border-color:var(--ink)}
.ev26.site-footer .foot-social a:hover svg{fill:var(--ink);opacity:1}

@media (max-width:900px){
  /* legacy */ .ev26 .personal{margin-top:56px}
  .ev26.site-footer .foot-top{gap:28px}
}
@media (max-width:600px){
  /* legacy */ .ev26 .personal-quote{font-size:var(--t-title)}
}

/* ── the top accent wash ─────────────────────────────
 *
 * NOT HERE ANY MORE. #1458 moved it to css/v26-base.css, next to the paper
 * grain, because it stopped being a home-page thing: every section gets the
 * same wash in its own accent now, from ONE rule keyed on --accent/--wash-a.
 * The design record for why it looks the way it does — document-anchored, no
 * blend mode, every stop eased to a ZERO SLOPE and not merely a zero value —
 * lives with the rule. Do not reintroduce a per-page copy of it here; a
 * surface defined per page cannot stay consistent, which is the whole lesson
 * of #1421. Home's contribution is now a single token: --wash-a:26% in
 * v26.css. */