/* 2026-10-13 THE ABOUT PAGE, gone over for phone and desktop (James: "we dont need that eyebrow … for phone check the
   fonts and make sure it reads well and is the correct font"). Loaded by about/ only, after the four shared sheets.
   Three sizes on a screen: the statement (the lead), the title, the table. Public Sans for everything read; the
   Barlow caps only on the table's keys and the figure's name, as on the rest of the site. */

/* the title is the quiet one, the statement is the page: on desktop the title sits small at the top of the left column,
   its top aligned with the statement's; the eyebrow is gone from the markup, so no margin above the h2 */
.about-head h2{margin-top:0;font-size:clamp(22px,1.75vw,28px);line-height:1.15;letter-spacing:-.018em;color:var(--plate)}
.about-head{padding-top:.35em}   /* optical: the small title's cap height meets the big statement's */
.about-lead{max-width:28ch}

/* the table: a touch more room, the keys one step up so they read on paper */
.wh-row dt{font-size:12px;letter-spacing:.13em}
.wh-row dd{font-size:16px;line-height:1.5}
.wh-row .wh-sub{font-size:15px;line-height:1.5}

/* ── phones: one column at reading sizes. The statement first and biggest (26 px), the title above it at 20 px, the
   table at 16, the keys at 12. Nothing hidden. */
@media (max-width:900px){
  .about{padding-block:36px 56px}
  .about-head{padding-top:0}
  .about-head h2{font-size:20px;line-height:1.2;color:var(--muted);letter-spacing:-.01em}
  .about-lead{margin-top:10px;font-size:26px;line-height:1.28;letter-spacing:-.018em;max-width:22ch}
  .whoami{margin-top:30px;padding-top:6px}
  .wh-row{padding:12px 0}
  .wh-row dt{font-size:11.5px;line-height:1.9}
  .wh-row dd{font-size:16px}
  .wh-row .wh-sub{font-size:14.5px}
  .about-art{margin-top:34px;max-width:none}
  .about-art figcaption{margin-top:12px;font-size:11px}
}

/* ── the art is a film (2026-10-13): the slab holds a looping video of the stencil come alive; the glass rim overlay
   (.art-slab::after) stays on top of it; reduced motion shows the poster */
/* v2: the film is on paper like the hero, so the slab is a paper frame with a hairline, no glass rim */
.art-slab.art-film-slab{aspect-ratio:4/3;background:var(--paper-hi,#fff);border:1px solid var(--rule)}
.art-slab.art-film-slab::after{content:none}
.art-film{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){
  .art-film{display:none}
  .art-slab.art-film-slab{background:#fff url(media/about-tool-poster.jpg) center/cover no-repeat}
}

/* the caption says what the film is (James: "we have to show that this is like an example of a tool not something i
   provide, yet"): a label, then one plain sentence */
.about-art figcaption{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.about-art figcaption p{margin:0;max-width:56ch;font:400 14px/1.55 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
@media (max-width:900px){.about-art figcaption p{font-size:13.5px}}

/* ── 2026-10-13 ONE SCREEN on desktop (James: "dont love that you have to scroll on this page any way to consolidate it").
   The statement band is tighter, the table and the film sit under it, and the film takes its size from the height that
   is left under the bar (a 4/3 box sized by height), so the page is the viewport: no scrollbar at 1366x768 and up. */
@media (min-width:901px){
  html,body{height:100%}
  body{display:flex;flex-direction:column;min-height:100svh}
  #main{flex:1 1 auto;display:flex;flex-direction:column}
  .about.page-sec,main>.about.page-sec{flex:1 1 auto;padding-block:clamp(22px,3vh,40px) 0;align-content:start}   /* main>.about.page-sec: outranks controls.css's 40–88 px bottom padding */
  .about-head{padding-top:.25em}
  .about-head h2{font-size:clamp(20px,1.5vw,24px)}
  .about-lead{font-size:clamp(24px,2.3vw,34px);line-height:1.22;max-width:30ch}
  .about::before{margin-top:calc(clamp(20px,2.6vh,32px) - 14px)}   /* the dashed rule sits 14 px above the row, not on the film's edge */
  .whoami,.about-art{margin-top:clamp(20px,2.6vh,32px)}
  .about-art{padding-top:0}
  .art-slab.art-film-slab{height:calc(100svh - 69px - clamp(22px,3vh,40px) - 2*clamp(20px,2.6vh,32px) - 4.2em - 186px);min-height:330px;width:auto;max-width:100%;aspect-ratio:4/3}
  .about-art figcaption{margin-top:10px}
  .about-art figcaption p{font-size:13px;line-height:1.45;max-width:60ch}
  .foot{padding-block:16px 18px}
}