/* == fonts: generated by `npm run fonts` (sites/tools/fonts.mjs), do not edit by hand == */
/* Self-hosted from Google Fonts. To change the faces, edit the URL below and
   re-run `npm run fonts`; it reads the URL back from here, and the preload
   list too (PAGE.md, "Preload what paints first").
   source: https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;1,400&family=Libre+Caslon+Text:ital,wght@0,400;1,400&display=swap
   preload: Inter:400,Libre Caslon Text:400
*/
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/libre-caslon-text-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/libre-caslon-text-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/libre-caslon-text-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/libre-caslon-text-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* == end fonts == */

/* ===========================================================================
   Engineered for Life
   Mockups: design/mockup/*.png (867-1024px native), built at a 1200 column.

   Every value below traces to a measurement in design/SPEC.md. If a number
   here is not in SPEC.md, it is a bug - not a preference. Readings not yet in
   SPEC.md carry their own comment: "mockup y/x" is the home-886 pixel, and
   the site value is that x1.354 (SPEC.md, "The conversion").

   DEPARTURE: band backgrounds run full width; content stops at 1200
   (design/BRIEF.md, Bundle 01's style guide). Sizes are written in 1200px
   design pixels as `N * var(--u)`; --u is 1px at 1200 and above and shrinks
   below it. Legibility floors use max() on the same line.
   =========================================================================== */

:root {
  --u: min(1px, 100vw / 1200);

  /* --- Colour: Bundle 01's tokens, matched to samples (SPEC.md, Colour) --- */
  --ivory: #FAF7F1;          /* page ground, header */
  --sand: #F3EBDD;           /* alternate band */
  --peach: #F4D9C7;          /* feature band */
  --terracotta: #AD5035;     /* buttons, links */
  --terracotta-hover: #8F3F2A;
  --ink: #292621;            /* charcoal: headings and body */
  --muted: #655E56;          /* supporting copy */
  --rule: #D8CBBE;           /* fine dividers */
  --footer: #F3ECE3;         /* footer band */
  --peach-pale: #F8EBE3;     /* contact form panel, drawn paler than --peach (SPEC.md, Colour) */
  --error: #9A3B2F;          /* a failed field and the failed status line: one red, named once
                                (CONTACT-FORMS.md, "What is missing goes red") */
  --highlight: #FFE94D;      /* Vernon's bright yellow, "not pink" (call, 1 Oct 2026); no mockup draws it */

  /* --- Type (SPEC.md, Type scale) ----------------------------------------- */
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans: "Inter", Arial, Helvetica, sans-serif;
  /* Sizes are SOLVED FROM LINE WIDTHS in these faces (BUILD.md, "Only then solve
     the sizes"), 23 Sep: the mockup's line width in site px over the width the
     same words render at a trial size. SPEC.md had them from line pitch, which
     overstates a size by its leading. Floors: Bundle 01's mobile sizes. */
  --f-h1: max(38px, calc(51 * var(--u)));   --lh-h1: 1.15;   /* "building the future." 447 / 494 at 56 -> 51.
                                              Pitch draws 1.09; MOBILE.md 2: a wrapping heading needs >= 1.15 */
  --f-h2: max(28px, calc(32 * var(--u)));   --lh-h2: 1.2;    /* three H2 lines solve 31.3-33.7; CTA line 325/402 at 40 -> 32.
                                              Pitch 38.6-44 over 32 = 1.2-1.37 */
  --f-h3: max(20px, calc(22 * var(--u)));   --lh-h3: 1.25;   /* "AI engineers & researchers" 270 / 300 at 24 -> 21.6 */
  --f-body: max(16px, calc(17 * var(--u))); --lh-body: 1.6;  /* body line 437 / 462 at 18 -> 17.0. Leading: the guide's 1.6
                                              (SPEC.md keeps it over the mockup's 1.43) */
  --f-card: 16px;                           --lh-card: 1.5;  /* 223 / 235 at 16 -> 15.2; held at the 16 floor */
  --f-eyebrow: 12px;                        --ls-eyebrow: 0.14em;  /* 301 / 338 at 13 -> 11.6 */
  --f-nav: 14px;                            /* "My Approach" 74.5 / 94 at 15 -> 11.9; held at a 14 floor */
  --f-strip: max(18px, calc(19 * var(--u))); /* two sizes up from 17 (floor 16), Jacob 25 Sep 2026.
                                               Was: my-approach "Spiritual grounding" 170 / 159 at 18
                                               -> 19.3, /1.1 -> 17.5; home's drew 16.8 */
  --f-btn: 16px;
  --f-display: max(30px, calc(40 * var(--u))); --lh-display: 1.15;
                                            /* the larger statement heading: my-approach "Take it into the world."
                                               448 / 407 at 40 -> 44, "Kindness becomes meaningful" 612 / 564 -> 43,
                                               over the page's 1.1 drawing scale (its H2s solve 35-36 against 32) */
  --f-small: 14px;                          /* step text: "Step away from the screen." 164 / 204 at 16 -> 12.9,
                                               /1.1 -> 11.7; held at a 14 floor */

  /* --- Layout (SPEC.md, Geometry, home) ------------------------------------ */
  --wrap: 1200px;
  --gut: max(20px, calc(74 * var(--u)));    /* x=55 at 886 -> 74; guide 20-24 on mobile */
  --header-h: calc(61 * var(--u));          /* 45 at 886 */
  --wordmark-w: max(190px, calc(230 * var(--u)));  /* 224 measured, guide 230-280; mobile 190 */
  --sec-py: max(48px, calc(88 * var(--u))); /* SPEC Assumptions: 88 desktop, 48 mobile */

  /* --- Rhythm (home-886, this session) ------------------------------------ */
  --gap-eyebrow: calc(16 * var(--u));       /* eyebrow -> H1 / H2 */
  --gap-head-body: calc(20 * var(--u));     /* H2 baseline -> body cap: 29 site less the line boxes */
  --gap-body-cta: calc(24 * var(--u));      /* hero sub -> button, mockup y 248 -> 267 */
  --gap-card-img: calc(15 * var(--u));      /* card image -> title, 11 at 886 */
  --gap-card-title: calc(6 * var(--u));
  --col-gap: calc(54 * var(--u));           /* who-I-work-with cards, rule at x=443 */
  --col-gap-3: calc(47 * var(--u));         /* three-up cards, rules at x=309 and 577 */

  /* --- Controls (SPEC.md, Button; Bundle 01) ------------------------------- */
  --btn-h: 44px;
  --btn-px: 24px;
  --radius: 3px;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--f-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img, picture { display: block; max-width: 100%; height: auto; }
strong, b { font-weight: 500; }   /* Inter 500 is loaded; 700 is not, and would be synthesised */
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--ivory); padding: 12px 16px; z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

/* --- The column ------------------------------------------------------------ */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.band { background: var(--ivory); }
.band--sand { background: var(--sand); }
.band--peach { background: var(--peach); }

/* --- Type ------------------------------------------------------------------ */
h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--f-h1); line-height: var(--lh-h1);
  letter-spacing: -0.01em;
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--f-h2); line-height: var(--lh-h2);
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--f-h3); line-height: var(--lh-h3);
}
.eyebrow {
  font-family: var(--sans); font-weight: 500;
  font-size: var(--f-eyebrow); line-height: 1.4;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  margin-bottom: var(--gap-eyebrow);
}
.lede { margin-top: var(--gap-head-body); }
.muted { color: var(--muted); }

/* --- Buttons and links (SPEC.md, Button; Bundle 01) ------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h);
  padding: 14px var(--btn-px);
  background: var(--terracotta); color: var(--ivory);
  border: 1px solid var(--terracotta); border-radius: var(--radius);
  font-family: var(--sans); font-size: var(--f-btn); font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}
.btn:hover { background: var(--terracotta-hover); border-color: var(--terracotta-hover); }
.btn--outline { background: transparent; color: var(--terracotta); }
.btn--outline:hover { background: var(--terracotta); color: var(--ivory); }

.more {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: var(--btn-h);
  color: var(--terracotta); font-size: var(--f-btn); font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  min-height: 0; padding-bottom: 4px;
}
.more:hover { color: var(--terracotta-hover); }

/* --- Header ---------------------------------------------------------------- */
.site-header { background: var(--ivory); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: max(64px, var(--header-h));
}
.brand { display: block; width: var(--wordmark-w); flex: none; }
.brand img { width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: calc(38 * var(--u)); }
.nav a:not(.btn) {
  font-size: var(--f-nav); text-decoration: none;
  padding-block: 12px;
}
.nav a:not(.btn):hover, .nav a[aria-current="page"]:not(.btn) {
  text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--terracotta);
}
.nav .btn { min-height: 44px; padding: 10px calc(36 * var(--u) + 4px); font-size: var(--f-nav); }
.menu-toggle { display: none; }

/* --- Hero (home: copy on the photograph's sky) ----------------------------
   One grid. On a desktop the photograph spans every row and the copy and the
   button sit on its sky; below 768 the rows run copy, photograph, button
   (MOBILE.md 11: the sky crops away on a phone). */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  /* was 443 (band 45-372 at 886), which sliced the tops off the three panels.
     Jacob, 25 Sep 2026: "too short". 580 at 1200 keeps sky above the panels and
     the pool below them. It is a full-bleed background, so it keeps that
     proportion past 1200 (a fixed height thins the crop as the photograph
     widens: at 1920 the panels lost their feet), capped at 760. */
  min-height: min(100vw * 580 / 1200, 760px);
}
/* Absolute on a desktop, so the photograph's own 16:9 never sets the band's
   height: the measured 443 does, and the photograph crops to it. */
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }  /* panel tops 30-50 below the band from 1200 to 1920 */
.hero__copy, .hero__actions { grid-column: 1; width: 100%; position: relative; }
.hero__copy { grid-row: 1; padding-top: calc(81 * var(--u)); }   /* eyebrow cap at y=105, band top 45 */
.hero__copy > * { max-width: calc(460 * var(--u)); }            /* headline wraps at 330/886 -> 447 */
.hero__copy .lede { max-width: calc(447 * var(--u)); margin-top: calc(18 * var(--u)); }
.hero__actions { grid-row: 2; padding-top: var(--gap-body-cta); padding-bottom: calc(60 * var(--u)); }

/* --- Strip -----------------------------------------------------------------
   Every mockup draws it differently. Built as the majority draws it
   (my-approach 347-395, who-i-help 316-359 at 887): sand, upright serif,
   no side rules. Home drew italic sans with rules (HANDOFF.md, "build the one
   the most pages draw"). */
.strip { background: var(--sand); }
.strip .wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(62 * var(--u));          /* 43-48 tall at 887 -> 58-65 */
  padding-block: 12px;
}
.strip ul {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  font-family: var(--serif); font-size: var(--f-strip); color: var(--ink);
}
.strip li + li::before { content: "\2022"; margin-inline: calc(24 * var(--u)); color: var(--muted); }
/* a bullet, not the mockup's slash: Jacob, 25 Sep 2026 */
.strip a { text-decoration: none; }
.strip a:hover { text-decoration: underline; text-decoration-color: var(--terracotta); }

/* --- Split: copy and photograph side by side in the 1200 column ------------
   Colour bleeds, content stops at 1200 (BRIEF.md, Jacob 24 Sep 2026): the
   photograph runs to the column's edge, not the screen's. The band's own
   padding centres the 1200 layout, so a wide screen draws exactly what 1200
   draws, with ivory beyond it. */
.split {
  padding-inline: max(0px, (100vw - var(--wrap)) / 2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split__copy {
  padding-left: var(--gut);
  padding-right: calc(35 * var(--u));
  padding-block: calc(36 * var(--u));
}
.split__copy > * { max-width: calc(494 * var(--u)); }  /* 55-420 at 886 */
.split__copy .lede { max-width: calc(440 * var(--u)); }
.split__img { align-self: stretch; position: relative; }
.split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The photograph's frame, inset from the band by the cream the mockup leaves:
   intro 433.5-628.5 inside 426-630, Vernon 1364-1540 inside 1351.5-1554. */
.split--intro { min-height: calc(275 * var(--u)); }
.split--intro .split__img img { top: calc(10 * var(--u)); height: calc(100% - 12 * var(--u)); }
.split--vernon { min-height: calc(274 * var(--u)); }
.split--vernon .split__img img { top: calc(17 * var(--u)); height: calc(100% - 34 * var(--u)); }
.split--vernon { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } /* image from x=421 of 886 */
.split .more { margin-top: calc(18 * var(--u)); }

/* --- Focal points ------------------------------------------------------------
   Where a photograph crops when its frame is a different shape from the file.
   Each is read off the original (24 Sep 2026 crop review) so faces stay in the
   frame at every width: these slots are 3:1 strips or narrow columns cut from
   3:2 and 16:9 files, and centred crops took the tops of heads. */
img.f-walking  { object-position: 50% 8%; }    /* both heads sit in the top tenth */
img.f-engineer { object-position: 50% 22%; }   /* his face at 22% down */
img.f-leader   { object-position: 50% 30%; }   /* her face at 30% down */
img.f-campus   { object-position: 50% 30%; }   /* the sunlit glass floors, not the blank slab below */
img.f-couple   { object-position: 72% 50%; }   /* the couple walk the right half; centred cut her in two */
/* The inner heroes' people stand in the right of the frame and the left 120px
   is under the fade: anchor right. Who I Help centred cut the fourth person to
   her hands. Above 900 only, where the photograph sits beside the copy. */
@media (min-width: 901px) {
  .page-hero__img img.f-hero-right { object-position: 100% 45%; }
}

/* --- Cards ----------------------------------------------------------------- */
.cards { display: grid; gap: var(--col-gap); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap-3); }
.card { position: relative; }
.cards--ruled .card + .card::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--col-gap) / -2); width: 1px; background: var(--rule);
}
.cards--3.cards--ruled .card + .card::before { left: calc(var(--col-gap-3) / -2); }
.card img { width: 100%; aspect-ratio: 499 / 165; object-fit: cover; }
.cards--3 .card img { aspect-ratio: 319 / 165; }
.card h3 { margin-top: var(--gap-card-img); }
.card p { margin-top: var(--gap-card-title); font-size: var(--f-card); line-height: var(--lh-card); color: var(--muted); max-width: 30ch; }

.audience { padding-block: calc(30 * var(--u)) calc(34 * var(--u)); }   /* eyebrow at 22.5 below the band edge */
.life { padding-block: calc(32 * var(--u)); }                            /* H2 cap 23.5 below the edge, last baseline 24 above */
.life h2 { margin-bottom: calc(24 * var(--u)); }

/* --- Feature (peach): image left, copy right ------------------------------- */
.feature .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(53 * var(--u)); align-items: center;
  padding-block: calc(32 * var(--u));
}
.feature img { width: 100%; aspect-ratio: 472 / 212; object-fit: cover; }
.feature .lede { max-width: calc(507 * var(--u)); }
.feature .more { margin-top: calc(18 * var(--u)); }

/* --- Inner-page hero: ivory copy panel, photograph right, blended in CSS ----
   (Bundles 03-06: "Keep any transition between the photo and text panel in
   CSS, not in the asset"). my-approach 45-347 at 887 -> 409 tall; photo's
   left edge ~340 (-> 460), fading over ~60 (-> 80). who-i-help 45-316 -> 367. */
.page-hero { position: relative; overflow: hidden; }
.page-hero__img {
  /* stops at the 1200 column's right edge: colour bleeds, photographs do not */
  position: absolute; top: 0; bottom: 0; right: max(0px, (100vw - var(--wrap)) / 2);
  left: calc(max(0px, (100vw - var(--wrap)) / 2) + 460 * var(--u));
}
.page-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.page-hero__img::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(120 * var(--u)); z-index: 1;
  background: linear-gradient(to right, var(--ivory), rgba(250, 247, 241, 0));
}
.page-hero .wrap { position: relative; z-index: 2; }   /* above the fade's z-index 1, which otherwise
                                                          paints ivory over the headline's last letters */
.page-hero__copy {
  max-width: calc(440 * var(--u));          /* "deserves a full life." 55-372 at 887 -> 429 */
  min-height: calc(409 * var(--u));
  padding-block: calc(64 * var(--u)) calc(56 * var(--u));   /* eyebrow cap 48 below the band at 887 */
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.page-hero__copy .lede { margin-top: calc(18 * var(--u)); }
.page-hero__copy .btn { margin-top: var(--gap-body-cta); }
.page-hero--short .page-hero__copy { min-height: calc(367 * var(--u)); }
/* My Approach: 409 showed the whole photograph with the couple small in it
   (Jacob, 25 Sep 2026: "could be better"). Contact's 490 lets the frame crop the
   wall and anchor right, which puts the couple in the middle of the unfaded part. */
.page-hero--tall .page-hero__copy { min-height: calc(490 * var(--u)); }

/* --- Statement band: heading left, rule, text right (my-approach 395-527) --- */
.statement .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: calc(64 * var(--u)); align-items: center;
  padding-block: calc(36 * var(--u));      /* 132 tall at 887, copy ~80 of it */
  border-bottom: 1px solid var(--rule);
}
.statement .wrap::before { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; background: var(--rule); }
.statement h2 { grid-column: 1; grid-row: 1; font-size: var(--f-display); line-height: var(--lh-display); }
.statement p { grid-column: 3; grid-row: 1; max-width: calc(424 * var(--u)); } /* 476-788 at 887 */

/* --- Centred statement with a short terracotta rule (my-approach 1157-1277,
       who-i-help 1045-1165) --------------------------------------------------- */
.quote .wrap { text-align: center; padding-block: calc(40 * var(--u)) calc(28 * var(--u)); }
.quote h2 { font-size: var(--f-display); line-height: var(--lh-display); max-width: 20em; margin-inline: auto; }
.quote p { margin-top: calc(12 * var(--u)); max-width: 40em; margin-inline: auto; }
.quote .wrap::after {
  content: ""; display: block; width: calc(32 * var(--u)); height: 1px; margin: calc(18 * var(--u)) auto 0;
  background: var(--terracotta);
}

/* --- Numbered steps (my-approach exercise: 3 columns, rules at 505 and 702) - */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(32 * var(--u)); margin-top: calc(26 * var(--u)); }
.steps li { position: relative; }
.steps li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-16 * var(--u)); width: 1px; background: var(--rule); }
.steps .num { font-family: var(--serif); font-size: var(--f-h3); line-height: 1; color: var(--terracotta); }
.steps h3 { margin-top: calc(8 * var(--u)); font-size: max(18px, calc(20 * var(--u))); }
.steps p { margin-top: calc(6 * var(--u)); font-size: var(--f-small); line-height: 1.5; color: var(--muted); }

/* --- Feature, wide (my-approach exercise: image 28-328 of 887, copy from 359) */
.feature--wide .wrap { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: calc(42 * var(--u)); padding-block: calc(34 * var(--u)); }
.feature--wide img { aspect-ratio: 300 / 271; }
.feature--wide h2 { font-size: var(--f-display); line-height: var(--lh-display); }

/* --- Duo: image and copy inside the column (who-i-help individuals /
       organizations / about teaser). Image 55-443 of 887 -> 525 wide. ----------- */
.duo .wrap {
  display: grid; grid-template-columns: minmax(0, 525fr) minmax(0, 481fr);
  gap: calc(46 * var(--u)); align-items: center;
  padding-block: calc(26 * var(--u));      /* image 379-677 inside 359-696 */
}
.duo--reverse .wrap { grid-template-columns: minmax(0, 481fr) minmax(0, 525fr); }
.duo--reverse .duo__img { order: 2; }
.duo__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* 3:2 is the files' own shape. The mockup's 388:298 cut "Support the people"
   through the head of the man in the foreground (Jacob, 25 Sep 2026); uncropped
   it reads as the over-the-shoulder shot it was composed as. */
.duo--short .duo__img img { aspect-ratio: 388 / 117; }
.duo .lede { max-width: calc(470 * var(--u)); }
.duo .btn, .duo .more { margin-top: calc(24 * var(--u)); }
.eyebrow--accent { color: var(--terracotta); }

/* --- Ruled checklist (who-i-help: three lines, rules between, serif) ------- */
.checklist { margin-top: calc(18 * var(--u)); border-top: 1px solid var(--rule); }
.checklist li {
  font-family: var(--serif); font-size: var(--f-card); line-height: 1.4;
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-bottom: 1px solid var(--rule);
}

.cards--tall .card img { aspect-ratio: 243 / 155; }   /* my-approach pillars, 155 tall at 887 */

/* --- A short terracotta rule under a heading (about-867: under the H1,
       "A foundation in engineering.", "Bringing that perspective..."; contact
       closing). 30 wide at 867 -> 42, 12 below the last baseline -> 17. --- */
.accent::after {
  content: ""; display: block; width: calc(42 * var(--u)); height: 1px;
  margin-top: calc(18 * var(--u)); background: var(--terracotta);
}

/* --- About hero: the photograph has a hard edge at x=385 of 867 (-> 533),
       no fade. Band 42-320 -> 385 tall. ------------------------------------- */
.page-hero--edge .page-hero__img { left: calc(max(0px, (100vw - var(--wrap)) / 2) + 533 * var(--u)); }
.page-hero--edge .page-hero__img::before { display: none; }
.page-hero--edge .page-hero__copy { max-width: calc(470 * var(--u)); min-height: calc(385 * var(--u)); }
/* About's H1 is drawn smaller than Home's: "A life shaped by people." 38-370 at
   867 -> 459 site px, which renders 563 at 51 -> 41.6. The display size (40)
   holds its two written lines inside the 470 panel (check:derived). */
.page-hero--edge h1 { font-size: var(--f-display); line-height: var(--lh-display); }
.page-hero--contact .page-hero__copy { min-height: calc(490 * var(--u)); } /* 65-483 at 1024 x1.172 */

/* --- Two-column intro: heading left, text right (about foundation, 322-420
       at 867: heading 38-245 -> 286 wide, text 303-622 -> 419-861) ----------- */
.intro .wrap { padding-top: calc(40 * var(--u)); }
.intro__cols { display: grid; grid-template-columns: minmax(0, 332fr) minmax(0, 720fr); gap: calc(40 * var(--u)); }
.intro__cols .lede { margin-top: 0; max-width: calc(442 * var(--u)); }
.portrait { margin-top: calc(24 * var(--u)); width: max(140px, calc(180 * var(--u))); }
/* The portrait no mockup draws (it arrived 23 Sep): under the heading it made
   the left column 240 taller than the paragraph beside it and left a hole
   (Jacob, 26 Sep 2026: "the layout ... is bad"). It takes a third column at the
   column's right edge instead: heading 286, paragraph as measured, portrait 180. */
.intro__cols--portrait { grid-template-columns: minmax(0, 286fr) minmax(0, 560fr) max(140px, calc(180 * var(--u))); column-gap: calc(59 * var(--u)); align-items: start; }
.intro__cols--portrait .portrait { margin-top: 0; width: 100%; }
.portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.banner { margin-top: calc(18 * var(--u)); padding-bottom: calc(30 * var(--u)); }
.banner img { width: 100%; aspect-ratio: 792 / 204; object-fit: cover; } /* 38-830 x 434-638 at 867 */

.cards--plain .card + .card::before { display: none; }
.membership { margin-top: calc(14 * var(--u)); font-size: var(--f-card); color: var(--muted); }
.membership a { color: var(--ink); }
.book .subtitle { margin-top: calc(12 * var(--u)); font-family: var(--serif); font-size: var(--f-h3); line-height: var(--lh-h3); }
.book h2 { font-size: var(--f-display); line-height: var(--lh-display); }
/* The synopsis for sale (29 Sep): no mockup draws it. The
   button and "more" link the site already has. */
.buy { margin-top: calc(22 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--rule); }
.buy__title { font-family: var(--serif); font-size: var(--f-h3); line-height: var(--lh-h3); }
.buy__steps { list-style: none; margin: calc(14 * var(--u)) 0 0; padding: 0; display: grid; gap: calc(14 * var(--u)); }
/* Venmo and Cash App side by side (5 Oct), each button with its code; they
   wrap one under the other, 14 apart like the steps, when the column is narrow. */
.buy__pay { display: flex; flex-wrap: wrap; align-items: center; gap: calc(14 * var(--u)) calc(44 * var(--u)); }
.buy__way { display: flex; align-items: center; gap: calc(44 * var(--u)); } /* 22 until 2 Oct; Jacob asked for more room between button and code */
.buy__qr { width: 112px; height: 112px; padding: 6px; background: #fff; border: 1px solid var(--rule); }
.buy__steps .more { justify-self: start; }
.buy__ask { font-size: var(--f-card); line-height: 1.5; }
.buy__lead { margin-top: calc(8 * var(--u)); font-size: var(--f-card); line-height: 1.5; } /* ask for the email before they pay (7 Oct) */
.buy__form { margin-top: calc(12 * var(--u)); }
.buy__form .form__send .btn { width: auto; padding-inline: 28px; }

/* --- Split, photograph LEFT (contact closing: image 0-625 of 1024 fading into
       ivory, copy from 680), inside the column like the right-hand split ---- */
.split--left .split__img { order: -1; }
.split--left .split__copy {
  padding-left: calc(56 * var(--u));
  padding-right: var(--gut);
}
.split--left .split__img::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(120 * var(--u));
  background: linear-gradient(to left, var(--ivory), rgba(250, 247, 241, 0));
}
.split--left { min-height: calc(368 * var(--u)); }                  /* 1125-1439 at 1024 */
.split--left h2 { font-size: var(--f-display); line-height: var(--lh-display); }

/* --- Contact: details left, the form panel right (contact-1024: details
       50-366 -> 59-429, panel 401-988 -> 470-1158, 515-1093 tall) ----------- */
.contact .wrap {
  display: grid; grid-template-columns: minmax(0, 370fr) minmax(0, 688fr);
  gap: calc(42 * var(--u)); align-items: start;
  padding-block: calc(38 * var(--u));
}
.contact h2 { font-size: var(--f-display); line-height: var(--lh-display); }
.contact__who { margin-top: calc(40 * var(--u)); }   /* the email block's place: no client address on the site (PAGE.md) */
.contact__who h3 + p { margin-top: 4px; }
.contact__who p { font-size: var(--f-card); line-height: var(--lh-card); color: var(--muted); }
.contact__who > div + div { margin-top: calc(24 * var(--u)); }

.form-panel {
  background: var(--peach-pale); border-radius: var(--radius);
  padding: calc(34 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));
}
.form-panel h2 { font-size: var(--f-h2); line-height: var(--lh-h2); }
.form { margin-top: calc(20 * var(--u)); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(18 * var(--u)); }
.form__row + .form__row, .form fieldset, .form .field--wide { margin-top: calc(20 * var(--u)); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .form legend { font-size: var(--f-card); line-height: 1.4; color: var(--ink); }
.req { color: var(--terracotta); }
.field input, .field textarea {
  width: 100%; min-height: var(--btn-h);
  padding: 10px 12px;
  font: inherit; font-size: var(--f-card); color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--error); }
.field__error { font-size: var(--f-small); color: var(--error); }
.form fieldset { border: 0; padding: 0; margin-inline: 0; }
.form legend { padding: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 8px; }
.radios label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--f-card); cursor: pointer; }
.radios input { width: 20px; height: 20px; accent-color: var(--terracotta); margin: 0; }
.form__send { margin-top: calc(22 * var(--u)); }
.form__send .btn { width: 100%; min-height: max(44px, calc(47 * var(--u))); }
.form__status { margin-top: 12px; font-size: var(--f-card); min-height: 1.5em; }
.form__status--ok { color: var(--ink); }
.form__status--bad { color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Long-form writing: Privacy ----------------------------------------------- */
.article .wrap { padding-block: var(--sec-py); }
.article__body { max-width: 42em; }
.article__body > * + * { margin-top: 1em; }
.article__body h2 { margin-top: calc(48 * var(--u)); }
.article__body h3 { margin-top: calc(28 * var(--u)); }
.article__body ul { list-style: disc; padding-left: 1.25em; }
.article__body li + li { margin-top: .4em; }

/* --- Understanding AI (understanding-ai-806, 26 Sep 2026, x1.489 to the 1200
   column). Readings are "806 px -> site px". Colours are the site's own: the
   panel and bars sample #F4E9DA and #F5D5BD, which are --sand and --peach. */
/* Hero: band 40-278 -> 354 tall; the photograph's hard edge at x=378 -> 563.
   The H1 stays the site's (the mockup draws it at its own scale, BUILD.md "A
   page drawn at a different scale"); the lede is drawn in the serif. */
.page-hero--ai .page-hero__img { left: calc(max(0px, (100vw - var(--wrap)) / 2) + 563 * var(--u)); }
.page-hero--ai .page-hero__copy { max-width: calc(470 * var(--u)); min-height: calc(354 * var(--u)); padding-block: calc(40 * var(--u)); }
.page-hero--ai h1 { font-size: var(--f-h1); line-height: var(--lh-h1); }
.page-hero--ai .lede { font-family: var(--serif); font-size: var(--f-h3); line-height: var(--lh-h3); color: var(--muted); }
@media (max-width: 1080px) {
  /* by 1080 the frame narrowed past the 16:9 (check:layout, "starved"): the
     photograph starts where the other inner heroes' do */
  .page-hero--ai .page-hero__img { left: calc(max(0px, (100vw - var(--wrap)) / 2) + 460 * var(--u)); }
  /* ...and the copy stops short of it by the same 19 it does at 1200 (544 ->
     563): 460 - 19 - 74. Left at 470 the lede ran under the photograph's hard
     edge from 901 to 1080 (by-hand QA, 1 Oct) */
  .page-hero--ai .page-hero__copy { max-width: calc(367 * var(--u)); }
}

/* The top band: a contents list left of a rule (x 42-180 -> 205 wide, rows 24
   apart -> 36), the lead-in and the three definitions right of it (from 205
   -> 305). The list names his own headings. */
.ai-top .wrap { display: grid; grid-template-columns: calc(194 * var(--u)) minmax(0, 1fr); column-gap: calc(36 * var(--u)); padding-block: calc(36 * var(--u)) calc(44 * var(--u)); }
.toc { border-right: 1px solid var(--rule); padding-right: calc(16 * var(--u)); }
/* Every item sits 12 in from a 2px bar (42 and 53 at 806), the bar coloured on
   the first only, so the bar lines up with the column edge and the words with
   each other. The first line starts level with the lead-in's cap height. */
.toc ol { list-style: none; padding: 0; position: sticky; top: 16px; margin-top: 2px; }
.toc a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.toc li:first-child a { border-left-color: var(--terracotta); color: var(--terracotta); }
.toc a:hover { color: var(--terracotta); }
@media (max-width: 1080px) {
  /* the contents list took a fifth of the width and left the definitions 15
     characters a line by 768 (check:layout): below 1080 the list goes */
  .ai-top .wrap { grid-template-columns: 1fr; }
  .toc { display: none; }
}
.ai-lead { font-family: var(--serif); font-size: var(--f-h3); line-height: var(--lh-h3); }   /* the hero lede's size, Jacob 1 Oct 2026 (was --f-h2, pitch 26 -> 39) */
.readmore { margin-top: calc(18 * var(--u)); border-block: 1px solid var(--rule); }
.readmore summary {
  display: flex; justify-content: space-between; align-items: center; min-height: max(44px, calc(43 * var(--u)));
  padding-inline: 0; font-size: 14px; cursor: pointer; list-style: none;   /* level with the lead-in */
}
.readmore summary::-webkit-details-marker { display: none; }
.readmore p { padding: 0 0 16px; max-width: 42em; }
.readmore p + p { padding-top: 0; }
.ai-top h2 { margin-top: max(24px, calc(30 * var(--u))); }
.defs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(18 * var(--u)); }
.def { padding-inline: calc(22 * var(--u)); }
.def:first-child { padding-left: 0; }
.def + .def { border-left: 1px solid var(--rule); }
.def img { width: max(36px, calc(49 * var(--u))); height: auto; }          /* 33 -> 49 */
.def__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.def h3 { font-size: var(--f-h3); }
.def p { font-size: var(--f-card); line-height: var(--lh-card); color: var(--muted); }
/* Open and closed source (Vernon, 28 Sep): no mockup draws it, so it is the
   row above at two columns, set off by the same rule and the defs' own gaps. */
/* The AI architecture (29 Sep): no mockup draws it. The picture takes the
   column less a label column; each name sits at its layer's centre, measured
   on the 1024-high original: Application 94-270, Model 332-481, Hardware
   532-690, Energy 728-920. The defs' 18 and 22 are the gaps. */
.arch { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(22 * var(--u)); margin: calc(18 * var(--u)) 0 0; }
.arch img { display: block; width: 100%; height: auto; }
.arch__layers { position: relative; list-style: none; margin: 0; padding: 0; min-width: 7.5em; }
.arch__layer { position: absolute; left: 0; transform: translateY(-50%); font-family: var(--serif); font-size: var(--f-h3); line-height: var(--lh-h3); }
.arch__layer--4 { top: 17.8%; }   /* 182 / 1024 */
.arch__layer--3 { top: 39.7%; }   /* 406.5 / 1024 */
.arch__layer--2 { top: 59.7%; }   /* 611 / 1024 */
.arch__layer--1 { top: 80.5%; }   /* 824 / 1024 */
.defs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--rule); }
.defs--2 h3 { margin-bottom: 10px; }
.def__eg { margin-top: 10px; font-weight: 500; color: var(--ink); }
.def__list { margin: 4px 0 0; padding-left: 1.1em; font-size: var(--f-card); line-height: var(--lh-card); color: var(--muted); }

/* How it learns: a sand panel inside the column (683-830 -> 219 tall), his
   sentence left of a rule at x=378, the steps right in filled terracotta
   circles (26 -> 39) joined by a line. */
.ai-learn .wrap { padding-block: 0; }
/* The rule is its own grid column, so it runs the panel's height rather than
   the sentence's; the inset is the bars' (28), one inset for every filled box. */
.learn-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); column-gap: calc(40 * var(--u)); align-items: center;
  background: var(--sand); padding: calc(36 * var(--u)) calc(28 * var(--u));
}
.learn-panel::before { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; background: var(--rule); }
.learn-panel h2 { grid-column: 1; grid-row: 1; font-size: var(--f-h2); line-height: var(--lh-h2); }
.learn-steps { grid-column: 3; grid-row: 1; list-style: none; padding: 0; }
.learn-steps li { position: relative; display: grid; grid-template-columns: max(34px, calc(39 * var(--u))) minmax(0, 1fr); gap: 16px; padding-bottom: calc(18 * var(--u)); }
.learn-steps li:last-child { padding-bottom: 0; }
.learn-steps li:not(:last-child)::before {
  content: ""; position: absolute; left: calc(max(34px, calc(39 * var(--u))) / 2); top: max(34px, calc(39 * var(--u))); bottom: 0; width: 1px; background: var(--terracotta);
}
.learn-steps .num {
  display: grid; place-items: center; width: max(34px, calc(39 * var(--u))); aspect-ratio: 1; border-radius: 50%;
  background: var(--terracotta); color: var(--ivory); font-size: 13px; font-weight: 500;
}
.learn-steps h3 { font-size: var(--f-h3); line-height: 1.2; padding-top: 6px; }
.learn-steps p { margin-top: 4px; font-size: var(--f-card); line-height: var(--lh-card); color: var(--muted); }

/* AGI: two columns of rows (29 apart -> 43, held at 44) split by a rule, then
   Benefits, Features and Negatives as full-width bars (33 -> 50 tall, 4 -> 6
   apart), Benefits in peach. */
.ai-agi .wrap, .ai-legacy .wrap, .ai-ethics .wrap, .ai-glossary .wrap { padding-block: max(28px, calc(30 * var(--u))); }   /* 10px on a phone without the floor */
.acc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(48 * var(--u)); margin-top: calc(14 * var(--u)); }
/* The divider belongs to the pair, not to one column, so it runs the taller
   column's height while each column's rows keep their own (align-self). */
.acc-cols { position: relative; }
.acc-cols::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--rule); }
.acc-cols .accordion { margin-top: 0; align-self: start; }   /* the shorter column's last rule sits under its last row */
.bars { margin-top: calc(22 * var(--u)); display: grid; gap: 6px; }
.bar { background: var(--sand); }
.bar--peach { background: var(--peach); }
.bar summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: max(44px, calc(50 * var(--u))); padding-inline: calc(28 * var(--u)); cursor: pointer; list-style: none; }
.bar summary::-webkit-details-marker { display: none; }
.bar h2 { font-size: var(--f-h3); line-height: var(--lh-h3); }
.bar__body { padding: 0 calc(28 * var(--u)) calc(22 * var(--u)); max-width: 50em; }
.bar__body p { font-size: var(--f-card); line-height: var(--lh-card); }
.bar__body p + p { margin-top: 12px; }
.bar__body mark { background: var(--highlight); color: var(--ink); padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Legacy: heading and his lines left-aligned; the three eras in a row, an icon
   (31 -> 46) before each, a terracotta rule between them. */
.eras { list-style: none; padding: 0; display: flex; align-items: center; gap: calc(24 * var(--u)); margin: calc(14 * var(--u)) 0; }
.eras li { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-size: var(--f-h3); white-space: nowrap; }
.eras li + li::before { content: ""; width: calc(96 * var(--u)); height: 1px; background: var(--terracotta); opacity: .5; margin-right: calc(10 * var(--u)); }
.eras img { width: max(36px, calc(46 * var(--u))); height: auto; }
@media (max-width: 900px) {
  /* three nowrap labels and two rules overlapped at 768-800 (sweep) */
  .eras { flex-wrap: wrap; gap: 12px 28px; }
  .eras li + li::before { display: none; }
}
.ai-legacy__close { max-width: 46em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The human component: the left-photograph split with a hard edge (photo
   0-437, 236 tall -> 351), his sentence and five traits with icons (20 -> 30,
   26 apart -> 39). */
.split--hard .split__img::after { display: none; }
.ai-human { min-height: calc(351 * var(--u)); }
.ai-human h2 { font-size: var(--f-h2); line-height: var(--lh-h2); }
.traits { list-style: none; padding: 0; margin-top: calc(18 * var(--u)); }
.traits li { display: flex; align-items: center; gap: 14px; min-height: max(36px, calc(39 * var(--u))); font-size: var(--f-card); }   /* icons on the heading's edge */
.traits img { width: max(26px, calc(30 * var(--u))); height: auto; }

/* Ethics: his opening line, two columns of rows, and his values line as a
   terracotta pull quote with a rule (the mockup's italic serif, which is why
   Libre Caslon's italic is loaded). */
.ai-ethics__open { color: var(--muted); max-width: 46em; }
.pull {
  margin: calc(28 * var(--u)) 0 0; padding-left: calc(20 * var(--u)); border-left: 3px solid var(--terracotta);
  max-width: 34em; font-family: var(--serif); font-style: italic; font-size: var(--f-h3); line-height: 1.35; color: var(--terracotta);
}

/* What opens says so (Vernon's 5 Oct call, ask-1277): his testers did not
   read a bare plus as "there is more here". Every <details> on the site, the
   read-more, the bars and the rows, ends in one labelled terracotta tag,
   "Open +", "Close −" once open (Jacob, 5 Oct: "Open", not "Click here").
   No mockup draws it: the colours, the font and the radius are .btn's, the size --f-card, and the "/ ''" keeps the
   label out of the row's accessible name (the summary already announces
   collapsed or expanded). */
.readmore summary::after, .bar summary::after, .accordion summary::after {
  content: "Open +"; content: "Open +" / "";
  flex: none; padding: 8px 14px; border-radius: var(--radius);
  background: var(--terracotta); color: var(--ivory);
  font-family: var(--sans); font-size: var(--f-card); font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background-color .2s;
}
.readmore[open] summary::after, .bar[open] summary::after, .accordion details[open] summary::after { content: "Close \2212"; content: "Close \2212" / ""; }
.readmore summary:hover::after, .bar summary:hover::after, .accordion summary:hover::after { background: var(--terracotta-hover); }

/* The rows: <details>, so they open with no script, the tag at the right. */
.accordion { margin-top: calc(30 * var(--u)); border-bottom: 1px solid var(--rule); }
.accordion details { border-top: 1px solid var(--rule); }
.accordion summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 44px; padding-inline: 0;   /* the words on the column edge, the plus on the other */
  font-family: var(--serif); font-size: var(--f-card); cursor: pointer; list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion details p { padding: 0 0 calc(16 * var(--u)); max-width: 42em; font-size: var(--f-card); line-height: var(--lh-card); color: var(--muted); }
.accordion details p + p { padding-top: 0; }

/* About, "A foundation in engineering", below 1080: the heading's 286 column
   broke "in" onto its own line by 900, so it goes above the other two. */
@media (max-width: 1080px) {
  .intro__cols--portrait { grid-template-columns: minmax(0, 1fr) max(140px, calc(180 * var(--u))); row-gap: 20px; }
  .intro__cols--portrait h2 { grid-column: 1 / -1; }
  .intro__cols--portrait .lede { max-width: 36em; }
}

/* --- 404 --------------------------------------------------------------------- */
.lost .wrap { padding-block: calc(120 * var(--u)); max-width: 820px; }
.lost .btn { margin-top: var(--gap-body-cta); }

/* --- Closing CTA over the landscape (Bundle 01: object-position ~55%) ------ */
.cta { position: relative; overflow: hidden; }
.cta__img { position: absolute; inset: 0; }
.cta__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.cta .wrap {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px;
  /* The mockup draws the band 158 (1554-1671 at 886), which keeps only a
     third of the 3:1 landscape (check:layout, "starved"). Bundle 01's
     placement notes ask for 260-340 on a desktop and the bundle decides
     between sources (HANDOFF.md, default 4). */
  min-height: max(200px, calc(320 * var(--u)));   /* 320: at 260 a 1440 viewport kept 54% of the 3:1 landscape */
  padding-block: calc(24 * var(--u));
}
.cta h2 { padding-left: calc(41 * var(--u)); }                 /* line 1 at x=86 of 886 */
.cta h2 span { display: block; }
.cta--button .wrap { justify-content: center; }   /* Understanding AI: no line of his for the band, so the button alone, centred */
.cta--button .btn { margin-right: 0; }
.cta h2 span + span { padding-left: calc(133 * var(--u)); }    /* line 2 at x=184 */
.cta .btn { min-width: calc(292 * var(--u)); min-height: max(44px, calc(54 * var(--u))); margin-right: calc(42 * var(--u)); font-size: max(16px, calc(18 * var(--u))); }

/* --- Footer ---------------------------------------------------------------- */
.site-footer { background: var(--footer); font-size: 14px; }
.site-footer .wrap { padding-block: calc(18 * var(--u)) calc(20 * var(--u)); }
.footer-top {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
}
.site-footer .brand { width: max(170px, calc(213 * var(--u))); }   /* 157 at 886 */
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px calc(34 * var(--u)); }
.footer-nav a { text-decoration: none; padding-block: 12px; }
.footer-nav a:hover { text-decoration: underline; }
.footer-note { color: var(--muted); text-align: right; font-style: italic; }
.footer-bottom { margin-top: calc(40 * var(--u)); color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.credit a { text-decoration: none; }

/* ===========================================================================
   Below 768 columns stack, in source order (Bundle 01: "Stack columns below
   768px. Preserve source order").
   =========================================================================== */
@media (max-width: 1080px) {
  .nav a:not(.btn) { display: none; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 12px;
    background: none; border: 1px solid var(--rule); border-radius: var(--radius);
    font: inherit; font-size: var(--f-nav); color: var(--ink); cursor: pointer;
  }
  .nav.is-open { position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 20px;
    background: var(--ivory); border-bottom: 1px solid var(--rule); }
  .nav.is-open a:not(.btn) { display: block; padding-block: 12px; border-bottom: 1px solid var(--rule); }
  .nav.is-open .btn { margin-top: 16px; }
  .site-header { position: relative; }
  .footer-top { grid-template-columns: auto 1fr; }
  .footer-nav { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .site-header .wrap { flex-wrap: nowrap; }
}

/* Splits and the numbered steps stack from 1080: below it a split whose copy
   is long (About's "perspective", Vernon's own paragraph) grows so tall that
   its photograph becomes a near-square sliver, and the steps set at 12-16
   characters a line (check:layout, 23 Sep). */
@media (max-width: 1080px) {
  .split, .split--vernon { grid-template-columns: 1fr; min-height: 0; }
  .split__copy { padding: 40px var(--gut); }
  .split__copy > *, .split__copy .lede { max-width: 36em; }
  .split__img { order: 2; }
  .split--left .split__img { order: 2; }
  .split__img img { position: static; aspect-ratio: 3 / 2; height: auto; }
  .split--left .split__copy { padding: 40px var(--gut); }
  .split--left .split__img::after { display: none; }
  .split--intro, .split--vernon, .split--left { min-height: 0; }
}

/* The steps stack below 1200: the column the mockup gives them sets their text
   at 17 characters a line up to 1151 (check:layout, 23 Sep). */
@media (max-width: 1199px) {
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .steps li + li::before { display: none; }
}

/* The hero stacks from 1080 (MOBILE.md 11): the copy keeps its legibility
   floors while the photograph scales, so below ~1080 the copy outgrows the sky
   and lands on the glass panels and pool (rendered at 768 and 961, 23 Sep). */
@media (max-width: 1080px) {
  .hero { grid-template-rows: auto auto auto; min-height: 0; }
  .hero__copy { grid-row: 1; padding-block: 32px 28px; }
  .hero__copy > *, .hero__copy .lede { max-width: 36em; }
  .hero__img { position: static; grid-row: 2; }
  .hero__img img { aspect-ratio: 16 / 9; height: auto; object-position: 50% 50%; }
  .hero__actions { grid-row: 3; padding-block: 24px 40px; }

}

/* Inner heroes stack from 900. The copy sits on its own ivory panel, never on
   the picture, so MOBILE.md 11's reason to stack early does not apply; but
   below 900 the copy's legibility floors make the panel so tall that the
   photograph beside it turns nearly square (check:layout at 768, 23 Sep). */
@media (max-width: 900px) {
  .page-hero { display: flex; flex-direction: column; }
  .page-hero__img, .page-hero--edge .page-hero__img { position: relative; left: 0; order: 2; }
  .page-hero__img::before { display: none; }
  .page-hero__img img { aspect-ratio: 16 / 9; height: auto; }
  .page-hero__copy, .page-hero--short .page-hero__copy, .page-hero--edge .page-hero__copy,
  .page-hero--contact .page-hero__copy, .page-hero--tall .page-hero__copy { max-width: 36em; min-height: 0; padding-block: 32px 36px; }
}

@media (max-width: 767px) {
  .hero__img img { aspect-ratio: 5 / 4; }
  .page-hero__img img { aspect-ratio: 5 / 4; }
  .hero__actions .btn { width: 100%; }

  .strip ul { flex-direction: column; align-items: center; gap: 4px; }
  .strip li + li::before { content: none; }


  .cards--2, .cards--3 { grid-template-columns: 1fr; gap: 40px; }
  .cards--ruled .card + .card::before { display: none; }
  .card p { max-width: none; }
  .card img, .cards--3 .card img, .cards--tall .card img { aspect-ratio: 3 / 2; }
  .audience, .life { padding-block: var(--sec-py); }

  .feature .wrap { grid-template-columns: 1fr; gap: 28px; padding-block: var(--sec-py); }
  .feature .lede { max-width: none; }                /* MOBILE.md 5: measured for the column, which is gone */
  .statement .wrap { grid-template-columns: 1fr; gap: 20px; padding-block: var(--sec-py); }
  .statement .wrap::before { display: none; }
  .statement h2, .statement p { grid-column: 1; grid-row: auto; max-width: none; }
  .duo .wrap, .duo--reverse .wrap { grid-template-columns: 1fr; gap: 24px; padding-block: var(--sec-py); }
  .duo--reverse .duo__img { order: 0; }
  .duo .lede { max-width: none; }
  .quote .wrap { padding-block: var(--sec-py); }
  .intro__cols, .intro__cols--portrait { grid-template-columns: 1fr; gap: 20px; }
  .intro__cols--portrait .portrait { width: max(140px, calc(180 * var(--u))); }
  .banner { margin-top: 28px; }
  .banner img { aspect-ratio: 2 / 1; }   /* 3.9:1 made a 90px strip on a phone */
  .intro__cols .lede { max-width: none; }
  .contact .wrap { grid-template-columns: 1fr; gap: 40px; padding-block: var(--sec-py); }
  .form__row { grid-template-columns: 1fr; }
  /* Understanding AI on a phone: the contents list goes (the page is one column
     and short enough to scroll), everything else stacks in reading order. */
  .ai-top .wrap { grid-template-columns: 1fr; }
  .toc { display: none; }
  .defs, .acc-cols, .learn-panel { grid-template-columns: 1fr; }
  .def, .def:first-child { padding: 18px 0 0; }
  .def + .def { border-left: 0; border-top: 1px solid var(--rule); margin-top: 18px; }
  .acc-cols::before { display: none; }
  .learn-panel { padding: 28px 20px; row-gap: 24px; }
  .learn-panel::before { display: none; }
  .learn-panel h2, .learn-steps { grid-column: 1; grid-row: auto; }
  .eras { flex-direction: column; align-items: flex-start; gap: 10px; }
  .eras li + li::before { display: none; }
  .cta--button .wrap { min-height: 0; }   /* a button alone needs no band height below the photograph */

  .cta__img { position: static; }
  .cta__img img { aspect-ratio: 5 / 4; height: auto; }
  .cta .wrap { flex-direction: column; align-items: flex-start; padding-block: 32px 40px; }
  .cta h2, .cta h2 span + span { padding-left: 0; }
  .cta .btn { margin-right: 0; min-width: 0; width: 100%; }

  .footer-top { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
  .footer-nav { justify-content: flex-start; }
  .footer-note { text-align: left; }
}

/* The narrowest phones: wordmark (190) + Menu + Contact + gutters is wider
   than 390, so Contact moves into the menu, where it is still one tap away. */
@media (max-width: 480px) {
  .site-header .wrap { gap: 12px; }
  .nav:not(.is-open) .btn { display: none; }
}

/* --- The song window (song.js; Vernon's call, 28 Sep 2026) ----------------- */
/* A button that reads as the site's "more" link. */
button.more { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 4px; font-family: var(--sans); cursor: pointer; }
.feature .more + .more { display: flex; width: fit-content; margin-top: calc(14 * var(--u)); }
.steps .more { margin-top: calc(10 * var(--u)); font-size: var(--f-small); gap: 8px; text-align: left; }
.song { width: min(800px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: var(--ink); overflow: visible; }
.song::backdrop { background: rgb(41 38 33 / .72); }
.song__frame { aspect-ratio: 16 / 9; }
.song__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
/* The Music link sits first and large, the Premium note quieter under it, so
   the link is the one people find (ask-1520; laid out in Claude Design, 14 Oct). */
.song__more { display: inline-block; margin: 18px 18px 0; color: var(--ivory); font-family: var(--serif); font-size: var(--f-h2); line-height: var(--lh-h2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.song__more:hover { color: var(--peach); }
.song__note { margin: 0; padding: 12px 18px 18px; color: var(--rule); font-family: var(--sans); font-size: var(--f-small); line-height: 1.5; }
@media (max-width: 480px) { .song__more { font-size: var(--f-h3); line-height: var(--lh-h3); margin-top: 16px; } }
.song__close {
  position: absolute; top: -48px; right: 0; width: 44px; height: 44px;
  background: none; border: 0; color: var(--ivory); font-size: 32px; line-height: 1; cursor: pointer;
}

/* On a phone the Venmo code would be scanned from the same phone: the button is the way to pay. */
@media (max-width: 767px) { .buy__qr { display: none; } }

/* On a phone the names stay beside their layers, at the card size, so the
   label column stays narrow and the picture keeps most of the width. */
@media (max-width: 767px) {
  .arch { column-gap: 10px; }
  .arch__layers { min-width: 6.2em; }
  .arch__layer { font-size: var(--f-small); }
}

/* --- Music (mockup from Vernon's call, 8 Oct 2026; music.js) --------------- */
/* No mockup draws this page: it is built from the site's own parts (eyebrow,
   H1/H2, the sand band, the card rhythm) so it reads as one of them. */
.music-top .wrap { padding-block: var(--sec-py) calc(40 * var(--u)); }
.music-top .lede { max-width: 34em; }

.stage .wrap {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: calc(48 * var(--u)); align-items: center;
  padding-block: calc(56 * var(--u));
}
.stage__player { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; border-radius: var(--radius); }
.stage__player iframe { display: block; width: 100%; height: 100%; border: 0; }
.stage__poster { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.stage__poster img { width: 100%; height: 100%; object-fit: cover; }
.stage__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 76px; height: 76px; padding-left: 6px;
  border-radius: 50%; background: var(--terracotta); color: var(--ivory); font-size: 26px;
  transition: background-color .2s;
}
.stage__poster:hover .stage__play { background: var(--terracotta-hover); }
.stage__by { margin-top: calc(10 * var(--u)); font-size: var(--f-card); }
.stage__note { margin-top: calc(24 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--rule); font-size: var(--f-small); line-height: 1.55; color: var(--muted); }

.library .wrap { padding-block: calc(64 * var(--u)) var(--sec-py); }
.library__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.library__head p { font-size: var(--f-card); }
.tracks + .library__head { margin-top: calc(64 * var(--u)); }
.tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(36 * var(--u)) var(--col-gap-3); margin-top: calc(28 * var(--u)); }
.track {
  display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left;
  color: inherit; font: inherit; cursor: pointer;
}
.track img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); transition: opacity .2s; }
.track:hover img { opacity: .88; }
.track__title { display: block; margin-top: var(--gap-card-img); font-family: var(--serif); font-size: var(--f-h3); line-height: var(--lh-h3); }
.track__by { display: block; margin-top: var(--gap-card-title); font-size: var(--f-card); line-height: var(--lh-card); color: var(--muted); }
.track__by::after { content: "Play ▶"; display: block; margin-top: 8px; color: var(--terracotta); font-family: var(--sans); font-weight: 500; font-size: var(--f-small); }
.track.is-playing img { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.track.is-playing .track__by::after { content: "Now playing"; }
.channel__link { display: inline-block; margin-top: 10px; font-size: var(--f-small); color: var(--muted); text-underline-offset: 3px; }
.channel__link:hover { color: var(--terracotta); }

@media (max-width: 900px) {
  .stage .wrap { grid-template-columns: 1fr; gap: 24px; padding-block: 0 32px; padding-inline: 0; }
  .stage__player { border-radius: 0; }
  .stage__copy { padding-inline: var(--gut); }
  .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}
@media (max-width: 767px) {
  .library__head { flex-direction: column; gap: 4px; }
  .tracks + .library__head { margin-top: 48px; }
}
@media (max-width: 480px) {
  .tracks { grid-template-columns: 1fr; }
}