/* ═══════════════════════════════════════════════════════════════════════════
   agentic.adam · layout and sections
   Gate 4, 19 sep 2026.
   NO HEX HERE AND NO RAW SIZE. Everything comes from tokens.css.
   Loads third, after matier-ui.css and tokens.css. It adds; it overrides the
   kit nowhere.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
  /* The masthead is sticky, so an in page jump landed its target UNDER it. The
     nav points at #about and the hero at #library, so this was live on the two
     links most likely to be used. Same family as a focus ring hidden behind a
     sticky element, which the audit gate names as a hard fail. */
  scroll-padding-top:calc(58px + var(--space-5))}
[id]{scroll-margin-top:calc(58px + var(--space-5))}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font:400 var(--step-0)/var(--leading-body) var(--font-ui);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
:where(a){color:inherit}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-xs)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-4);top:calc(var(--space-4) * -4);z-index:99;
  display:inline-flex;align-items:center;min-height:44px;
  background:var(--color-text);color:var(--color-bg);padding:0 var(--space-5);
  border-radius:var(--radius-pill);font:500 var(--step--1)/1 var(--font-mono);text-decoration:none}
.skip:focus{top:var(--space-4)}

/* ── measure and rhythm ──────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--space-4)}
@media(min-width:680px){.wrap{padding-inline:var(--space-6)}}
.wrap--wide{max-width:var(--wrap-wide)}
.sec{padding-block:var(--space-6)}                       /* seam = 64px  */
@media(min-width:900px){.sec{padding-block:var(--space-8)}}  /* seam = 144px */
.prose{max-width:var(--measure)}

/* ── type roles ──────────────────────────────────────────────────────────── */
/* The eyebrow sat flush against the line under it, measured at a 0px gap.
   Proximity carries meaning: the gap inside a group must be smaller than the
   gap between groups, and zero is not a gap. */
.eyebrow{font:500 var(--step--1)/1 var(--font-mono);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--color-accent);margin:0 0 var(--space-3)}
.eyebrow--meta{color:var(--color-text-meta)}
.h1{font:600 var(--step-4)/var(--leading-display) var(--font-ui);
  letter-spacing:var(--track-display);max-width:var(--measure-display);margin:0}
.h2{font:600 var(--step-3)/var(--leading-tight) var(--font-ui);
  letter-spacing:var(--track-heading);max-width:18ch;margin:0}
.h3{font:550 var(--step-1)/var(--leading-tight) var(--font-ui);
  letter-spacing:var(--track-heading);margin:0}
.lede{font:400 var(--step-1)/1.45 var(--font-ui);color:var(--color-text-muted);
  max-width:var(--measure);margin:0}
.body{margin:0;color:var(--color-text-muted)}
.body strong,.lede strong{color:var(--color-text);font-weight:550}
.meta{font:400 var(--step--1)/1.5 var(--font-mono);color:var(--color-text-meta);margin:0}
.mono{font-family:var(--font-mono)}
.num{font-variant-numeric:tabular-nums}
/* Emphasis inside a headline is the accent on ONE word, or an underline. Never
   both, never two words. DESIGN.md. */
.hl{color:var(--color-accent)}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:48px;padding:0 var(--space-6);border-radius:var(--radius-pill);
  background:var(--button-primary-bg);color:var(--button-primary-text);border:1px solid transparent;
  font:500 var(--step-0)/1 var(--font-ui);text-decoration:none;cursor:pointer;
  transition:opacity var(--dur-fast) var(--ease-io)}
.btn:hover{opacity:.88}
.btn--ghost{background:transparent;color:var(--color-text);border-color:var(--color-hairline)}
.btn--ghost:hover{border-color:var(--color-text);opacity:1}
.btn--sm{min-height:40px;padding:0 var(--space-5);font-size:var(--step--1)}

/* ── the masthead. Two items, not eight. ─────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;
  /* Near solid, not 88%. At 88% the dark band showed through and the strip read
     as a muddy grey. A light translucent surface over an unpredictable ground is
     the failure the house rule names, and the fix is density, not more blur. */
  background:color-mix(in srgb,var(--color-bg) 97%,transparent);
  backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--color-hairline-2)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  min-height:58px}
.top__m{display:inline-flex;align-items:center;min-height:44px;
  font:500 var(--step-0)/1 var(--font-mono);letter-spacing:-.01em;text-decoration:none}
.top__m i{font-style:normal;color:var(--color-accent)}
.top nav{display:flex;align-items:center;gap:var(--space-5)}
.top nav a{display:inline-flex;align-items:center;min-height:44px;
  font:400 var(--step--1)/1 var(--font-ui);text-decoration:none;color:var(--color-text-muted)}
.top nav a:hover{color:var(--color-text)}

/* ── 1 · DEMO HERO ───────────────────────────────────────────────────────────
   The four yes inside one 390px screen: the problem in the headline, the price
   in one line, the action in one button, the proof in one mono line. Then the
   object, because the text announces and the object proves. */
.hero{padding-block:var(--space-7) var(--space-6)}
@media(min-width:900px){.hero{padding-block:var(--space-8)}}
.hero__id{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  margin:0 0 var(--space-6)}
.hero__id .name{font:500 var(--step-0)/1 var(--font-ui)}
.hero__id .role{font:400 var(--step-0)/1 var(--font-ui);color:var(--color-text-muted)}
.hero__id .dot{color:var(--color-text-meta)}
.hero .h1{margin-block:var(--space-4) var(--space-5)}
.hero__sub{max-width:52ch}
.hero__price{margin-top:var(--space-4)}
.hero__do{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  margin-top:var(--space-6)}
/* The proof line is one of the four yes. It was set in the meta tone at 2.83:1,
   which is the tone reserved for things that carry nothing. A claim is not meta. */
.hero__proof{margin-top:var(--space-5);color:var(--color-text-muted)}
/* Above 1100 the fold had half a screen of nothing to the right of a measure
   capped column. The object moves beside the copy instead of under it, which is
   what a demo hero is for: the thing working, in frame, immediately. */
.hero__obj{margin-top:var(--space-7);max-width:640px}
@media(min-width:1100px){
  .hero__g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:var(--space-7);align-items:start}
  .hero__obj{margin-top:0;max-width:none}
  .hero .h1{max-width:none}
}
/* The returned payload, directly under the command that fetches it. Truncated
   by a fade rather than an ellipsis, because the point is that it keeps going. */
.hero__ret{margin-top:var(--space-3);font-size:12px;line-height:1.75;
  max-height:232px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);
  mask-image:linear-gradient(#000 60%,transparent)}
.hero__ret .u-term__r b{white-space:pre;overflow:hidden;text-overflow:ellipsis}
.hero__ret .u-term__k{width:1.8em}
.hero__cap{margin-top:var(--space-3);color:var(--color-text-meta)}

/* ── 2 · LIBRARY GRID · the spine ────────────────────────────────────────── */
.lib__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  flex-wrap:wrap;margin-bottom:var(--space-5)}
.filters{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  margin-bottom:var(--space-5)}
.chip{min-height:44px;display:inline-flex;align-items:center;padding:0 var(--space-4);
  border-radius:var(--radius-pill);border:1px solid var(--color-hairline);background:transparent;
  color:var(--color-text-muted);cursor:pointer;
  font:500 var(--step--1)/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;
  transition:border-color var(--dur-fast) var(--ease-io),color var(--dur-fast) var(--ease-io)}
.chip:hover{border-color:var(--color-text-meta);color:var(--color-text)}
.chip[aria-pressed="true"]{background:var(--chip-bg);color:var(--chip-text);border-color:transparent}
.search{flex:1 1 220px;min-width:0;display:flex;align-items:center;min-height:46px;
  padding:0 var(--space-4);border-radius:var(--radius-pill);
  border:1px solid var(--color-hairline);background:var(--color-surface)}
.search input{flex:1;min-width:0;align-self:stretch;min-height:44px;border:0;background:transparent;color:inherit;
  font:400 var(--step--1)/1 var(--font-ui)}
.search input:focus{outline:0}
.search:focus-within{border-color:var(--color-text-meta)}

.card{display:flex;flex-direction:column;gap:var(--space-2);
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);
  padding:var(--space-5);text-decoration:none;color:inherit;
  transition:border-color var(--dur-fast) var(--ease-io)}
.card{transform:translateY(0)}
.card:hover{border-color:var(--color-text-meta);box-shadow:var(--elev-2);
  transform:translateY(-2px)}
.card{transition:border-color var(--dur-fast) var(--ease-io),
  box-shadow var(--dur-fast) var(--ease-io),transform var(--dur-fast) var(--ease-io)}
@media(prefers-reduced-motion:reduce){.card,.card:hover{transform:none}}
.card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.card__n{font:500 var(--step-0)/1.2 var(--font-mono);letter-spacing:-.01em;word-break:break-word}
.card__t{font:500 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-meta);border:1px solid var(--color-hairline);
  border-radius:var(--radius-pill);padding:5px 9px;flex:none}
.card__d{color:var(--color-text-muted);font-size:var(--step--1);line-height:1.55;margin:0;flex:1}
.card__f{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2);
  font:400 var(--step--1)/1 var(--font-mono);color:var(--color-text-meta)}
/* The accent is a chip, a hairline, one word in a headline, or one live element
   inside a dark object. It is never a repeated fill. Twelve blue "Take it" on
   one screen made the grid read as twelve buttons, so the accent arrives on
   hover and on focus, where it means something. DESIGN.md. */
.card__f .go{margin-left:auto;color:var(--color-text-meta);
  transition:color var(--dur-fast) var(--ease-io)}
.card:hover .card__f .go,.card:focus-visible .card__f .go{color:var(--color-accent)}
.lib__empty{padding:var(--space-8) 0;text-align:center;color:var(--color-text-muted)}
.lib__more{margin-top:var(--space-6);display:flex;justify-content:center}

/* ── 3 · NUMBER BAND · figures are the section. No label, no cards. ──────── */
.figs{display:grid;gap:var(--space-6);grid-template-columns:1fr}
@media(min-width:760px){.figs{grid-template-columns:repeat(3,1fr);gap:var(--space-7)}}
.fig__v{font:600 var(--step-3)/1 var(--font-ui);letter-spacing:var(--track-heading);
  font-variant-numeric:tabular-nums;margin:0}
.fig__c{margin:var(--space-3) 0 0;color:var(--color-text-muted);font-size:var(--step--1);
  line-height:1.55;max-width:34ch}
.adm{margin-top:var(--space-7);padding-top:var(--space-5);
  border-top:1px solid var(--color-hairline);font-size:var(--step-1);
  color:var(--color-text);max-width:var(--measure)}
/* A section that ends on a rule does not also need the full gap after it: the
   rule already closed the thought. 250px of nothing measured here before. */
.sec--tight{padding-bottom:var(--space-6)}

/* ── THE INVERTED BAND ───────────────────────────────────────────────────────
   DESIGN.md: the dark is a material, not a theme. Punctuation, roughly one
   section in three, never two in a row. The page had none at full size and read
   as one uninterrupted sheet of paper from the masthead to the footer. The
   process rail takes it, because it is the section whose objects are already
   dark and were fighting the light ground they sat on. */
.inv{background:var(--color-invert-bg);color:var(--color-invert-text)}
.inv > .sec{padding-block:var(--space-7)}
@media(min-width:900px){.inv > .sec{padding-block:var(--space-8)}}
.inv .h2,.inv .step__h{color:var(--color-invert-text)}
.inv .step__b{color:var(--color-invert-meta)}
.inv .eyebrow{color:var(--color-accent-wash)}
/* Inside the band, an object cannot be the band's own colour or it vanishes.
   It steps up to a well and takes a hairline in the band's key. */
.inv .u-term{background:var(--color-invert-well);border:1px solid var(--color-invert-hair)}
.inv .step__n{color:var(--color-accent-wash)}
.inv ::selection{background:var(--color-accent);color:var(--color-invert-text)}

/* ── 4 · PROCESS RAIL · a spine at 390, a row at 1440. No cards. ─────────── */
.rail{display:grid;gap:var(--space-6);grid-template-columns:1fr;margin-top:var(--space-6)}
@media(min-width:1040px){
  .rail{grid-template-columns:repeat(5,1fr);gap:var(--space-5);
    /* number, heading, body, object. Four shared rows, so the five columns
       align on every band instead of each one starting where its own text
       happened to end. */
    grid-template-rows:auto auto 1fr auto}
  .step{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0}
  .step > *{min-width:0}
}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start}
@media(min-width:1040px){.step{grid-template-columns:1fr}}
.step__n{font:500 var(--step--1)/1 var(--font-mono);color:var(--color-accent);
  font-variant-numeric:tabular-nums;padding-top:4px}
@media(min-width:1040px){.step__n{padding:0 0 var(--space-4)}}
.step__h{font:550 var(--step-0)/1.3 var(--font-ui);margin:0 0 var(--space-3)}
.step__b{margin:0;color:var(--color-text-muted);font-size:var(--step--1);line-height:1.55}
.step__o{margin-top:var(--space-4);align-self:end}
@media(min-width:1040px){
  .step__o{margin-top:var(--space-5)}
  /* Five objects of five different heights closed the band on a ragged edge.
     They share a floor now, so the band ends on a line instead of a comb. */
  .rail .step__o > .u-term{min-height:104px;align-items:flex-start}
  .rail .step__o > .u-term--block{display:flex;flex-direction:column;justify-content:center}
}

/* ── 5 · ABOUT BAND ──────────────────────────────────────────────────────── */
.about{display:grid;gap:var(--space-6);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.about{grid-template-columns:1fr 2fr;gap:var(--space-7)}}
/* No photograph yet, so the band is one column of prose. An empty frame that
   announces a missing image is worse than no frame. */
.about--nophoto{grid-template-columns:1fr !important}
.about--nophoto .h2{max-width:20ch}
.about__p{margin:0;max-width:var(--measure);color:var(--color-text-muted)}
.about__p + .about__p{margin-top:var(--space-4)}
.shot{aspect-ratio:4/5;border-radius:var(--radius-m);border:1px solid var(--color-hairline);
  background:var(--color-well);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
/* The pending slot. It says what is missing rather than faking it, and it never
   becomes a generated face. DESIGN.md and SHOTBOOK.md. */
.shot--pending{display:grid;place-items:center;padding:var(--space-5);text-align:center}
.shot--pending span{font:400 var(--step--1)/1.5 var(--font-mono);color:var(--color-text-meta)}

/* ── 6 · CLOSE ───────────────────────────────────────────────────────────── */
.close{border-top:1px solid var(--color-hairline)}
.close__do{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  margin-top:var(--space-6)}
.foot{border-top:1px solid var(--color-hairline);padding-block:var(--space-6);
  margin-top:var(--space-8)}
.foot__in{display:flex;gap:var(--space-5);flex-wrap:wrap;align-items:baseline;
  justify-content:space-between}
.foot a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--color-text-muted);text-decoration:none;font-size:var(--step--1)}
.foot a:hover{color:var(--color-text);text-decoration:underline;text-underline-offset:3px}
.foot__l{display:flex;gap:var(--space-5);flex-wrap:wrap}

/* ── the detail page ─────────────────────────────────────────────────────── */
.det__back{display:inline-flex;align-items:center;gap:var(--space-2);
  font:400 var(--step--1)/1 var(--font-mono);color:var(--color-text-muted);text-decoration:none}
.det__back:hover{color:var(--color-text)}
.det__h{margin-block:var(--space-5) var(--space-4)}
.det__take{margin-block:var(--space-6);max-width:720px}
/* Same rule on the detail page: the raw url is an action, not a folio. */
.det__take .meta{margin-top:var(--space-3);color:var(--color-text-muted)}
.det__g{display:grid;gap:var(--space-6);grid-template-columns:1fr;margin-top:var(--space-7)}
@media(min-width:820px){.det__g{grid-template-columns:2fr 1fr;gap:var(--space-7)}}
.det__k{font:500 var(--step--1)/1 var(--font-mono);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--color-text-meta);margin:0 0 var(--space-3)}
.det__blk + .det__blk{margin-top:var(--space-6)}
.det__side dl{margin:0;display:grid;gap:var(--space-4)}
.det__side dt{font:500 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-meta)}
.det__side dd{margin:var(--space-2) 0 0;font-size:var(--step--1);color:var(--color-text-muted)}

/* ── THE REVEAL · 0 KB of JavaScript ─────────────────────────────────────────
   Ruling 2: the CSS only budget wins, Lenis is never loaded. The floor is
   opacity 1, so with no support and with JS off the page is simply complete.
   Plays once, never reverses. Stagger 120ms, measured off paco.me. */
.rv{opacity:1}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes rvin{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
    .rv{
      animation:rvin var(--dur-reveal) var(--ease-out) both;
      animation-timeline:view();
      animation-range:entry 0% cover 22%;
    }
    .rv-1{animation-delay:calc(var(--stagger) * 1)}
    .rv-2{animation-delay:calc(var(--stagger) * 2)}
    .rv-3{animation-delay:calc(var(--stagger) * 3)}
    .rv-4{animation-delay:calc(var(--stagger) * 4)}
  }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}


/* ── THE SHELF · what he runs and did not write ──────────────────────────────
   Six packages were pulled out of the library because they ship a LICENSE, an
   INSTALL, or a credit line naming someone else. Hiding them would have been
   the weaker move: naming them is trust route 4, a costly signal, and it shows
   the reader he knows the field. They link out and carry no copy button,
   because the whole point is that they are not his to hand over. */
.shelf{display:grid;gap:var(--space-3);grid-template-columns:1fr;margin-top:var(--space-5)}
@media(min-width:760px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3) var(--space-6)}}
.shelf a{display:flex;align-items:baseline;gap:var(--space-3);min-height:44px;
  padding-block:var(--space-2);border-bottom:1px solid var(--color-hairline-2);
  text-decoration:none;color:inherit}
.shelf a:hover .shelf__n{color:var(--color-accent)}
.shelf__n{font:500 var(--step-0)/1.4 var(--font-mono);flex:none;
  transition:color var(--dur-fast) var(--ease-io)}
.shelf__b{font-size:var(--step--1);color:var(--color-text-muted);margin-left:auto;
  text-align:right}

/* A caveat is prose. It was set in mono at the meta tone, which is the treatment
   for a date or a count, and three lines of it is work to read. */
.note{font:400 var(--step--1)/1.6 var(--font-ui);color:var(--color-text-muted);
  max-width:var(--measure);margin:0}

/* A row of links is not a sentence, so the inline exception to the target size
   rule does not cover it. The contact row and the "see all" link become real
   targets rather than 21px of text. Measured at 390: eleven targets were under
   the 44px floor this audience's row sets, and every one of them is now over it. */
.links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;margin:0}
.links a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-text-muted);
  text-decoration:none;transition:color var(--dur-fast) var(--ease-io)}
.links a:hover{color:var(--color-text);text-decoration:underline;text-underline-offset:4px}
.lib__head .meta{display:inline-flex;align-items:center;min-height:44px}