/* pages.css — page-scoped additions shared by sub-pages. APPEND ONLY; site.css owns the tokens and the shell. */

/* ---------- forms: inline error + success states (contact/send.php, assets/js/forms.js) ---------- */
.form-err{display:none;padding:12px 14px;border:1px solid var(--warn);border-radius:8px;background:var(--surface);color:var(--ink);font-size:.9375rem;line-height:1.45}
.form-err.show{display:block}
.form-err ul{margin:6px 0 0 18px}
form [aria-invalid="true"]{border-color:var(--warn)}
.field .ok-msg{margin-top:0}
.field .form-err{margin-top:0}

/* ---------- send.php shell pages (confirmation / rejected) reuse the 404 block; the error list sits under the lede ---------- */
.nf ul.errs{margin:20px 0 0 18px;color:var(--ink-2);max-width:var(--measure)}
.nf ul.errs li{margin-top:6px}
.nf .lede.ok{color:var(--ink)}

/* ---------- claude tools (ct-) — /work/claude-tools/ (plan §5.6, §5.17). Four tool blocks → SSO block → "How I run production" ---------- */
.ct-prov{margin-top:18px;font-size:.875rem;color:var(--ink-3);display:flex;gap:8px;align-items:flex-start;max-width:var(--measure);line-height:1.5}
.ct-prov svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none;margin-top:5px}
.ct-tools{display:grid;gap:12px}
.ct-tool{background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ct-tool .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-height:44px}
.ct-tool h3{font-size:1.125rem}
.ct-tool .top .lock{margin-top:3px;flex:none}
.ct-tool dl{display:grid;gap:10px}
.ct-tool dt{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.ct-tool dd{margin:2px 0 0;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.ct-tool dd.stack{font-family:var(--mono);font-size:13px;color:var(--ink-3);line-height:1.5}
.ct-tile{border-top:2px solid var(--accent);padding-top:12px;margin-top:2px;min-height:80px}
.ct-tile .num{font-size:2.25rem;color:var(--ink)}
.ct-tile .word{font-size:1.375rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.ct-tile .lab{font-size:.875rem;color:var(--ink-2);margin-top:6px;line-height:1.4}
.ct-tile .lab em{font-style:normal;color:var(--ink-3)}
.ct-tool .ph{margin-top:auto}
.ct-tool .pill{align-self:flex-start}
.ct-sso{margin-top:12px;background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:10px}
.ct-sso .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px}
.ct-sso .stack{font-family:var(--mono);font-size:13px;color:var(--ink-3);line-height:1.4;flex:1 1 220px}
.ct-sso h3{font-size:1.125rem}
.ct-sso p{font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.ct-sso .sso-diagram{margin:10px 0 4px}
.ct-sso .facts{list-style:none;display:grid;gap:6px;font-size:.9375rem;color:var(--ink-2)}
.ct-sso .facts li{display:grid;grid-template-columns:12px 1fr;gap:10px;align-items:baseline}
.ct-sso .facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:8px}
.ct-prod{border-top:1px solid var(--hair);margin-top:4px}
.ct-row{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--hair);min-height:72px}
.ct-row .ttl{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ct-row b{font-weight:600;letter-spacing:-.01em}
.ct-row .line{font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.ct-row .tag{font-family:var(--mono);font-size:13px;color:var(--ink-3);line-height:1.5}
.ct-cta{margin-top:36px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ct-cta .link{color:var(--ink-2)}
.ct-cta .link:hover{color:var(--ink)}
@media (min-width:900px){
  .ct-tools{grid-template-columns:1fr 1fr;gap:16px}
  .ct-tool{padding:28px}
  .ct-sso{margin-top:16px;padding:28px}
  .ct-sso .body{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .ct-sso .sso-diagram{margin:0;max-width:440px;justify-self:end}
  .ct-row{grid-template-columns:1.1fr 1.6fr .9fr;gap:24px;align-items:center;padding:20px 0}
  .ct-row .line{font-size:1rem}
  .ct-cta{flex-direction:row;align-items:center;gap:28px}
}

/* ---------- products (pd-) — /products/ (plan §5.7, §5.7b, §5.16, §5.17): bento → long tail → essay → client strip ---------- */
.pd-head .zorm-head{margin-bottom:18px}
.pd-head h1{max-width:18ch}
.pd-head .not{margin-top:14px}
.pd-body{padding-top:0}
.pd-body .zgrid{margin-top:0}
.zcard .out{margin-top:2px;font-family:var(--mono);font-size:12.5px;color:var(--accent-ink);display:inline-flex;min-height:24px;align-items:center}
.zcard .out:hover{text-decoration:underline;text-underline-offset:3px}
.zcard .mods{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);line-height:1.4}
.pd-sec{padding-top:56px}
.pd-sec .sec-head{margin-bottom:8px}
.pd-tail{border-top:1px solid var(--hair);margin-top:20px}
.pd-row{display:grid;grid-template-columns:10px 1fr;gap:12px;align-items:start;padding:18px 0;border-bottom:1px solid var(--hair);min-height:88px}
.pd-row .dot{width:10px;height:10px;border-radius:50%;margin-top:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pd-row .dot.none{background:transparent;border:1px solid var(--ink-3);box-shadow:none}
.pd-row .body{display:flex;flex-direction:column;gap:6px;min-width:0}
.pd-row .ttl{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.pd-row b{font-weight:600;letter-spacing:-.01em}
.pd-row p{font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.pd-row .mono{line-height:1.5}
.pd-row .out{font-family:var(--mono);font-size:12.5px;color:var(--accent-ink)}
.pd-row .out:hover{text-decoration:underline;text-underline-offset:3px}
.pd-clients{display:grid;gap:12px;margin-top:20px}
.pd-client{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center;min-height:88px}
.pd-client .th{width:88px;height:88px;border-radius:10px;border:1px dashed var(--hair);background:var(--ph);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.pd-client b{font-weight:600}
.pd-client p{font-size:.9375rem;color:var(--ink-2);line-height:1.5}
@media (min-width:900px){
  .pd-sec{padding-top:80px}
  .pd-sec .sec-head{margin-bottom:16px}
  .zcard.span2{grid-column:span 2}
  .pd-row{padding:22px 0}
  .pd-clients{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}

/* per-platform dot not in site.css (zorm-io inc/site.php) */
.dot-glitch{background:#ff2bd6}

/* ---------- shared sub-page shell (pg-) — breadcrumb → page head → … → short contact block (plan §5.17). Owned by the
   résumé/press/privacy/book/writing pages; namespaces: pg- shared, rs- résumé, pr- press, pv- privacy, bk- book, wr- writing ---------- */
.pg-crumb{padding:12px 0 0}
.pg-crumb a{font-family:var(--mono);font-size:13px;color:var(--ink-3);display:inline-flex;align-items:center;min-height:32px;gap:6px}
.pg-crumb a:hover{color:var(--ink)}
.pg-crumb .sep{color:var(--ink-3);opacity:.6}
.pg-crumb .here{color:var(--ink-2)}
.pg-head{padding:32px 0 40px}
.pg-head h1{font-size:clamp(2.125rem,5vw + .75rem,3.5rem);line-height:1.06;letter-spacing:-.03em;max-width:16ch}
.pg-head .eyebrow{margin-bottom:14px}
.pg-head .lede{margin-top:16px}
.pg-head .meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.pg-head .meta a{color:var(--ink-2)}
.pg-head .meta a:hover{color:var(--accent-ink)}
.pg-body{padding-top:0}
.pg-contact{padding:56px 0 64px}
.pg-contact h2{font-size:clamp(1.625rem,3.6vw + .5rem,2.25rem)}
.pg-contact .sub{margin-top:10px}
.pg-contact .btn{margin-top:22px}
.pg-contact .reach{margin-top:24px}
.pg-actions{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.pg-note{margin-top:14px;font-size:.8125rem;color:var(--ink-3);line-height:1.5}
.pg-prose{max-width:var(--measure);color:var(--ink-2)}
.pg-prose p+p{margin-top:16px}
.pg-prose h2{font-size:1.125rem;letter-spacing:-.015em;color:var(--ink);margin:32px 0 10px}
.pg-prose h2:first-child{margin-top:0}
.pg-prose ul{padding-left:20px;display:grid;gap:6px}
.pg-prose a{color:var(--accent-ink);font-weight:500}
.pg-prose a:hover{text-decoration:underline;text-underline-offset:3px}
.pg-empty{display:block;border:1px dashed var(--hair);background:var(--ph);border-radius:8px;padding:16px;font-family:var(--mono);font-size:13px;color:var(--ink-3);line-height:1.5}
@media (min-width:900px){
  .pg-crumb{padding-top:8px}
  .pg-head{padding:56px 0 64px}
  .pg-contact{padding:96px 0 112px}
  .pg-contact .grid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
  .pg-contact .btn{width:auto}
  .pg-contact .reach{margin-top:0}
  .pg-actions{flex-direction:row}
}

/* ---------- résumé (rs-) — CONTENT.md verbatim; desktop = sticky left rail + scrolling column ---------- */
.rs-rail .kpi-grid{margin-top:0;gap:24px 20px}
.rs-rail .kpi .num{font-size:clamp(2.25rem,9vw,3rem)}
.rs-rail .kpi .lab{font-size:.875rem}
.rs-rail .kpi-note{margin-top:20px}
.rs-main{margin-top:48px}
.rs-brief p{color:var(--ink-2);max-width:var(--measure)}
.rs-brief p:first-child{color:var(--ink)}
.rs-brief p+p{margin-top:16px}
.rs-sec{margin-top:48px}
.rs-sec h2{font-size:1.5rem;letter-spacing:-.02em;margin-bottom:6px}
.rs-sec .sub{font-size:.9375rem}
.rs-list{margin-top:20px;border-top:1px solid var(--hair)}
.rs-entry{padding:22px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:1fr;gap:6px 24px}
.rs-entry .d{font-family:var(--mono);font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rs-entry .r{font-weight:600;font-size:1.125rem;letter-spacing:-.015em;line-height:1.3}
.rs-entry .c{color:var(--ink-2);font-size:1rem}
.rs-entry .l{color:var(--ink-2);font-size:.9375rem;line-height:1.5;margin-top:4px}
.rs-entry .body{display:grid;gap:6px}
.rs-bul{list-style:none;display:grid;gap:10px;margin-top:10px}
.rs-bul li{display:grid;grid-template-columns:14px 1fr;gap:8px;color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.rs-bul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:9px}
.rs-bul b{font-weight:600;color:var(--ink)}
.rs-foot{margin-top:16px;font-size:.8125rem;color:var(--ink-3);line-height:1.5}
.rs-refs{margin-top:40px;padding-top:24px;border-top:1px solid var(--hair)}
.rs-refs h2{font-size:1.125rem;letter-spacing:-.015em}
.rs-refs p{margin-top:6px;color:var(--ink-2)}
.rs-actions .btn{width:100%}
.rs-actions-bottom{margin-top:32px}
@media (min-width:900px){
  .rs-grid{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
  .rs-rail{position:sticky;top:32px}
  .rs-main{margin-top:0}
  .rs-rail .kpi-grid{grid-template-columns:1fr 1fr;gap:24px 20px}
  .rs-rail .kpi{border-top:2px solid var(--accent);border-left:0;padding:14px 0 0}
  .rs-rail .kpi .num::before{display:none}
  .rs-rail .kpi .num{font-size:2.75rem}
  .rs-entry{grid-template-columns:150px 1fr;padding:26px 0}
  .rs-entry .d{padding-top:5px}
  .rs-actions{flex-direction:column;margin-top:28px}
  .rs-actions .btn{width:100%;min-width:0}
  .rs-actions-bottom{display:none}
}

/* ---------- press (pr-) ---------- */
.pr-grid{display:grid;gap:40px}
.pr-bio h2,.pr-talks h2,.pr-side h2{font-size:1.125rem;letter-spacing:-.015em;margin-bottom:12px}
.pr-bio p{color:var(--ink-2);max-width:var(--measure)}
.pr-bio p+p{margin-top:14px}
.pr-bio .prov{margin-top:10px;font-size:.8125rem;color:var(--ink-3)}
.pr-bio details{margin-top:20px;border-top:1px solid var(--hair)}
.pr-bio summary{cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;font-weight:500;color:var(--ink);list-style:none}
.pr-bio summary::-webkit-details-marker{display:none}
.pr-bio summary::after{content:"+";font-family:var(--mono);color:var(--ink-3)}
.pr-bio details[open] summary::after{content:"\2212"}
.pr-bio details>div{padding:4px 0 16px}
.pr-facts{margin-top:28px;border-top:1px solid var(--hair)}
.pr-facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:.9375rem}
.pr-facts dt{font-family:var(--mono);font-size:13px;color:var(--ink-3);padding-top:2px}
.pr-facts dd{color:var(--ink-2)}
.pr-facts dd a{color:var(--ink)}
.pr-talks{margin-top:40px}
.pr-talk{border-top:1px solid var(--hair);padding:18px 0}
.pr-talk:last-of-type{border-bottom:1px solid var(--hair)}
.pr-talk h3{font-size:1.125rem}
.pr-talk p{margin-top:6px;color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.pr-talk .pill{margin-top:10px}
.pr-note{margin-top:12px;font-size:.8125rem;color:var(--ink-3)}
.pr-shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pr-shot{display:flex;flex-direction:column;gap:10px}
.pr-shot figure{border-radius:12px;overflow:hidden;background:var(--pill);aspect-ratio:547/613}
.pr-shot img{width:100%;height:100%;object-fit:cover}
.pr-shot figcaption{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);line-height:1.4}
.pr-shot .btn{width:100%;min-width:0}
.pr-shot.pending figure{border:1px dashed var(--hair);background:var(--ph);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px}
.pr-shot.pending figure span{font-family:var(--mono);font-size:13px;color:var(--ink-3);line-height:1.5}
.pr-side .reach{margin-top:0}
.pr-side .block+.block{margin-top:40px}
.pr-list{list-style:none;display:grid;gap:0;border-top:1px solid var(--hair)}
.pr-list li{padding:14px 0;border-bottom:1px solid var(--hair);display:grid;gap:4px}
.pr-list .d{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.pr-list b{font-weight:600}
.pr-list span{color:var(--ink-2);font-size:.9375rem}
@media (min-width:900px){
  .pr-grid{grid-template-columns:7fr 5fr;gap:64px;align-items:start}
  .pr-side{position:sticky;top:32px}
}

/* ---------- privacy (pv-) ---------- */
.pv-body .pg-prose p{font-size:1.0625rem;line-height:1.6}
.pv-home{margin-top:32px}

/* ---------- book (bk-) — states announced / chapter / preorder / published ---------- */
.bk-card{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:24px 20px;display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
.bk-card .cover{width:120px}
.bk-card h2{font-size:1.375rem;letter-spacing:-.02em;line-height:1.2;max-width:none}
.bk-card .promise{margin-top:10px;color:var(--ink-2);font-size:1rem;line-height:1.5}
.bk-card .state{margin-top:12px}
.bk-card .field{grid-column:1 / -1;margin-top:4px}
.bk-card .field label{font-size:.875rem;color:var(--ink-2)}
.bk-card .field button{width:100%}
.bk-honest{margin-top:16px;font-size:.8125rem;color:var(--ink-3);line-height:1.5;max-width:var(--measure)}
.bk-buy{grid-column:1 / -1;display:grid;gap:12px;margin-top:4px}
.bk-buy .btn{width:100%}
.bk-retail{display:flex;flex-wrap:wrap;gap:8px}
.bk-retail a,.bk-retail span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--hair);border-radius:999px;font-size:.9375rem;color:var(--ink-2)}
.bk-retail span{color:var(--ink-3);border-style:dashed}
.bk-about{margin-top:40px}
.bk-about h2{font-size:1.125rem;letter-spacing:-.015em;margin-bottom:10px}
.bk-about p{color:var(--ink-2);max-width:var(--measure)}
.bk-about p+p{margin-top:14px}
@media (min-width:900px){
  .bk-card{grid-template-columns:200px 1fr;gap:40px;padding:36px;max-width:820px}
  .bk-card .cover{width:200px;padding:18px 16px;grid-row:1 / span 2}
  .bk-card .field,.bk-buy{align-self:start}
  .bk-card .cover b{font-size:1.25rem}
  .bk-card .cover span{font-size:13px}
  .bk-card h2{font-size:1.75rem}
  .bk-card .field{grid-column:2;flex-direction:row;align-items:center;max-width:560px}
  .bk-card .field label{position:absolute;left:-9999px}
  .bk-card .field button{width:auto;min-width:0;white-space:nowrap;flex:none}
  .bk-buy{grid-column:2}
  .bk-buy .btn{width:auto}
  html:not([data-motion="reduce"]) .bk-card .cover{transition:transform .28s var(--ease)}
  html:not([data-motion="reduce"]) .bk-card:hover .cover{transform:rotate(-2deg)}
}

/* ---------- writing (wr-) — newsletter capture behind flag('newsletter') ---------- */
.wr-grid{display:grid;gap:40px}
.wr-essays h2,.wr-form h2{font-size:1.125rem;letter-spacing:-.015em;margin-bottom:12px}
.wr-list{list-style:none;border-top:1px solid var(--hair)}
.wr-list li{border-bottom:1px solid var(--hair)}
.wr-list a{display:grid;gap:4px;padding:16px 0;min-height:56px}
.wr-list a:hover b{color:var(--accent-ink)}
.wr-list b{font-weight:600;font-size:1.0625rem;letter-spacing:-.015em}
.wr-list span{color:var(--ink-2);font-size:.9375rem}
.wr-list .d{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.wr-form{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:24px 20px}
.wr-form .promise{color:var(--ink-2);font-size:1rem;line-height:1.5}
.wr-form .field{margin-top:16px}
.wr-form .field label{font-size:.875rem;color:var(--ink-2)}
.wr-form .field button{width:100%}
.wr-form .ok-msg{margin-top:12px}
@media (min-width:900px){
  .wr-grid{grid-template-columns:7fr 5fr;gap:64px;align-items:start}
  .wr-form{position:sticky;top:32px;padding:32px}
}

/* ---------- print (pages that load pages.css): single column, ink on white, no chrome — the résumé prints as the PDF's twin ---------- */
@media print{
  :root{--paper:#fff;--surface:#fff;--ink:#111;--ink-2:#333;--ink-3:#555;--hair:#bbb;--hair-2:#ddd;--accent:#111;--accent-ink:#111;--ph:transparent;--pill:#fff}
  html{scroll-behavior:auto}
  body{background:#fff!important;color:#111!important;font-size:11pt;line-height:1.45;padding:0!important}
  header,.menu,footer,.bar,.skip,.pg-crumb,.pg-contact,.pg-actions,.rs-actions,.pr-shot .btn,.bk-card .field,.wr-form,.reach{display:none!important}
  .wrap{max-width:none;padding:0}
  section,.pg-head,.pg-body{padding:0 0 18pt}
  .rs-grid,.pr-grid,.wr-grid,.pg-contact .grid{display:block}
  .rs-rail{position:static}
  .rs-rail .kpi-grid{grid-template-columns:repeat(4,1fr);gap:12pt;margin-top:14pt}
  .rs-rail .kpi{border-top:1.5pt solid #111;border-left:0;padding:6pt 0 0}
  .rs-rail .kpi .num{font-size:20pt}
  .rs-rail .kpi .num::before{display:none}
  .rs-rail .kpi .lab{font-size:9pt}
  .rs-main{margin-top:14pt}
  .rs-sec{margin-top:16pt}
  .rs-entry{grid-template-columns:110pt 1fr;padding:9pt 0}
  .rs-entry .body>.r{break-after:avoid}
  .rs-rail .pg-note{display:none}
  .rs-bul li::before{background:#111}
  .rv{animation:none!important;opacity:1!important;transform:none!important}
  a{color:inherit}
  .pg-head h1{font-size:26pt}
}
/* ct-/pd- shared: breadcrumb breathing room inside the page head; play control sits in the poster's lower third so it never covers the title card */
.ct .pg-crumb,.pd .pg-crumb{margin-bottom:22px}
.ct .pg-crumb .sep,.pd .pg-crumb .sep{margin:0 8px}

/* ---------- work index (wk-) — /work/ (plan §5.1, §5.17): three §5.6-style teaser cards, 3-up on desktop ---------- */
.wk-body{padding-top:0}
.wk-cases .diagram{margin-top:auto}
.wk-cases .case .num small{max-width:24ch}
.wk .pg-contact{padding-top:64px}
@media (min-width:900px){
  .wk-cases{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
  .wk-cases .case{padding:28px 24px}
  .wk .pg-contact{padding-top:96px}
}

/* ---------- contact page (cp) — /contact/ (plan §5.13, §5.17): the home #contact block under a page head ---------- */
.cp .pg-head{padding-bottom:8px}
.cp .contact{padding-top:24px}
.cp .contact .btn{margin-top:0}
.cp .pg-note{margin-top:24px}
.cp .pg-note a{color:var(--ink-2);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.cp .pg-note a:hover{color:var(--ink)}
@media (min-width:900px){
  .cp .pg-head{padding-bottom:16px}
  .cp .contact{padding-top:32px}
  .cp .contact .grid{gap:0 64px}
}