/* agentic.adam . the SUB PAGES. method, shop, contact.
   ────────────────────────────────────────────────────────────────────────
   Why this file exists: the three sub pages were emitted against the V1
   stylesheet, and when system.css was rebuilt for V2 every `.bdg`, `.sec`,
   `.g3` and `.mstep-o` rule went with it. Fifteen classes on the shop page
   had NO css at all, so the cards rendered as flat stacked text and the
   words "free" and "hire" ran together into one. Measured 19 sep 2026.
   Nothing here invents paint: every value is a token from system.css.
   ──────────────────────────────────────────────────────────────────────── */

/* the section rhythm the sub pages expect, matched to .act on the home */
.sec{position:relative;padding-block:clamp(52px,8vw,110px)}
.sec + .sec{padding-top:0}
.display{font-family:var(--accent);font-weight:400;letter-spacing:-.022em;line-height:1.02}

/* three across, and it collapses the same way the home's shelf does */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,28px);align-items:stretch}
@media(max-width:940px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g3{grid-template-columns:1fr}}

/* ── THE AGENT CARD ──────────────────────────────────────────────────────
   The V1 "ID badge" was a cream rounded rectangle with text in it, which is
   DNA anti-tell #3 and OBJECTS_V2 §0 kills it by name. It survives here only
   as a container for a DRAWN WORKER: the figure carries the card, the card
   does not carry the figure. Same three faces as the home shelf.            */
.bdg{position:relative;display:flex;flex-direction:column;height:100%;
  padding:clamp(20px,2.2vw,26px);border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--lift),color-mix(in srgb,var(--paper-2) 62%,var(--lift)));
  border:1px solid var(--hair-2);box-shadow:var(--sh-2);
  transform:rotate(var(--tilt,0deg));
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.bdg:hover{transform:rotate(0deg) translateY(-4px);box-shadow:var(--sh-3)}

.bdg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:16px}
.bdg-head > svg:first-child{width:clamp(56px,5vw,72px);height:auto;flex:none}
.bdg-kind{flex:none;opacity:.62}
.bdg-kind svg{width:24px;height:24px}

.bdg-the{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ochre);margin:0;max-width:none}
.bdg-name{font-family:var(--accent);font-weight:400;font-size:clamp(30px,3.2vw,40px);
  line-height:1;letter-spacing:-.02em;margin:2px 0 0;color:var(--ink)}
.bdg-line{font-size:14.5px;line-height:1.5;color:var(--mut);margin:12px 0 0;max-width:34ch}
.bdg-rule{height:1px;background:var(--hair);margin:18px 0 0}
.bdg-proof{margin-top:14px;opacity:.9}
.bdg-plate{margin-top:14px;font-size:12.5px;color:var(--faint);line-height:1.5}

/* "free" and "hire" ran together because .bdg-foot had no layout at all */
.bdg-foot{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px}
.bdg-tag{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  padding:6px 13px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--burg) 10%,transparent);color:var(--burg)}
.bdg-act{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--burg);
  text-decoration:none;white-space:nowrap}
.bdg-act:hover{text-decoration:underline;text-underline-offset:3px}

/* the WORK agents are built to order and do not exist yet, so they never wear
   the same finished chrome as the three he actually runs. Dashed, quieter. */
#work .bdg{background:none;border-style:dashed;box-shadow:none}
#work .bdg-tag{background:color-mix(in srgb,var(--umber) 12%,transparent);color:var(--umber)}
#work .bdg-act{color:var(--umber)}

/* ── THE METHOD PAGE's numbered steps ──────────────────────────────────── */
/* MEASURED 19 sep 2026, 20:15: this block was written against the WRONG
   element. `.mstep-o` wraps the svg alone; `.mstep` is the row. So the grid
   landed on the wrapper, `.mstep-o > *{grid-column:2}` caught the svg itself
   and beat the width rule above it, and each 60px object rendered ~1000px
   wide with its text stacked underneath. Four giant pictograms, 5 905px of
   page. The row is the grid now and the object is the small cell. */
.mstep{display:grid;grid-template-columns:clamp(54px,5vw,68px) minmax(0,1fr);
  column-gap:clamp(18px,2.4vw,30px);align-items:start;
  padding-block:clamp(22px,2.6vw,32px);border-bottom:1px solid var(--hair)}
.mstep:last-of-type{border-bottom:0}
.mstep-o{grid-column:1;line-height:0}
.mstep-o svg{width:100%;height:auto;display:block}
.mstep h3{margin-top:4px}
.mstep p{max-width:56ch}
@media(max-width:560px){
  .mstep{grid-template-columns:44px minmax(0,1fr);column-gap:14px}}
/* THE INVERTED BAND. Measured 19 sep 2026, 20:20: this was `color:var(--lift)`
   with NO dark ground under it, so paper-white type sat on white glass on warm
   paper and the entire band was unreadable on screen. It breaks the law about
   a light translucent surface stacked on another: a structural surface over a
   ground you do not control is a HEAVY material, dark under light ink, never
   two near values. It borrows act three's vocabulary instead of inventing paint. */
.on-colour{position:relative;border-radius:var(--r-slab);color:var(--lift);
  padding:clamp(8px,1.2vw,14px);
  background:radial-gradient(130% 150% at 16% -10%,#5C1328 0%,#2C0910 55%,#1A1012 100%);
  box-shadow:0 46px 100px -46px rgba(29,10,12,.5)}
.on-colour .glass{background:linear-gradient(135deg,rgba(255,230,220,.14),
  rgba(255,230,220,.04) 42%,rgba(255,230,220,.10));
  box-shadow:0 40px 90px -46px #000,inset 0 1px 0 rgba(255,235,225,.3)}
.on-colour .kick{color:#E0A0B0}
.on-colour em{color:#E0A0B0}

/* the drawn worker inside an agent card. Ink on PAPER here, not on the dark
   act three ground, so the strokes invert from the home shelf's palette. */
.bdgfig{width:clamp(78px,7vw,104px);height:auto;overflow:visible}
.bdgfig .ln path,.bdgfig .ln circle{stroke:var(--ink);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.bdgfig .hair path{fill:var(--burg);stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.bdgfig .br{stroke:var(--ink);stroke-width:3}
.bdgfig .eye{stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:round}
.bdgfig .fl{fill:var(--ink);stroke:none}
.bdgfig .ln2{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;fill:none}
.bdgfig .pg{stroke:var(--ink);stroke-width:2;fill:var(--lift);stroke-linejoin:round}
.bdgfig .pg2{stroke:var(--faint);stroke-width:1.8;fill:none;stroke-linejoin:round}
.bdgfig .tx{stroke:var(--umber);stroke-width:2;stroke-linecap:round;fill:none}
.bdgfig .ring{stroke:var(--burg);stroke-width:2.2;fill:none;stroke-linecap:round}
.bdgfig .st{stroke:var(--ochre);stroke-width:2.2;stroke-linecap:round;fill:none}
.bdgfig .och{fill:var(--ochre);stroke:none}
.bdgfig .base{stroke:var(--hair-2);stroke-width:1.6;fill:none}

/* ── THE GROUND, on the sub pages ────────────────────────────────────────
   "the background is too stale and has no pattern and no texture" was his
   rejection of V1's flat fill, and the three sub pages still carried it. The
   home builds its ground from injected .L spans; here the same five layers
   are pinned to the body, since these pages have no per act value change. */
body{position:relative}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{background-image:
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 7%,transparent) 0 1px,
    transparent 1px 12.5%),
  radial-gradient(color-mix(in srgb,var(--ink) 20%,transparent) 1.4px,transparent 1.4px);
  background-size:auto,26px 26px;
  -webkit-mask-image:radial-gradient(86% 68% at 50% 38%,transparent 4%,#000 72%);
  mask-image:radial-gradient(86% 68% at 50% 38%,transparent 4%,#000 72%)}
body::after{opacity:.13;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23t)'/></svg>")}
.nav,.sec,.foot,main{position:relative;z-index:2}