/* ============================================================
   Constraint site.css — shared chrome (C-7/P-3/P-4, Q-7-approved)
   Extracted verbatim from playbooks.html (the named reference
   standard) @ 83b4917. Owns: fonts, tokens, base, type ramp,
   buttons, header/nav/menu, wordmark, section rhythm, footer,
   reveal, responsive chrome, reduced-motion. Page-specific
   figures stay in each page's inline <style>, which loads AFTER
   this file and therefore wins ties. Theme bootstrap stays
   inline in <head> (flash guard). Edit here, not per page.
   ============================================================ */

@font-face{font-family:"Fraunces";src:url("fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:"Fraunces";src:url("fonts/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}@font-face{font-family:"Inter";src:url("fonts/inter.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}


/* ================= tokens (ported from hardened homepage) ================= */
:root{
  --paper:#F8F5EE;
  --paper-2:#EEE9DC;
  --card:#FFFDF8;
  --ink:#15140F;
  --ink-2:#625D4E;
  --ink-3:#8A8372;
  --line:rgba(21,20,15,.13);
  --line-strong:rgba(21,20,15,.22);
  --accent:#2A4AE8;
  --accent-soft:rgba(42,74,232,.085);
  --accent-2:#6F82FF;
  --good:#2F8A5E;
  --on-accent:#F8F5EE;
  --surface-dark:#15160F;
  --shadow:0 1px 2px rgba(22,21,15,.04), 0 12px 40px -12px rgba(22,21,15,.12);
  --r-lg:24px;
  --r-md:15px;
  --r-sm:10px;
  --r-pill:999px;
  --gutter:clamp(20px,4vw,56px);
  --serif:"Fraunces", "Source Serif 4", Georgia, serif;
  --sans:"Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:"SF Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  /* T-2 label role (PROVISIONAL ★ = L-B "engineered tag"; batch website-type-ramp item 2).
     Every label-role element (eyebrows, column heads, record keys, chip text, footer heads)
     draws from these four vars — color stays per-module. Swapping the pick is a 4-value edit:
     L-A quiet-bigger: .875rem / 500 / none / 0 · L-C weight-led: .8125rem / 650 / none / 0 */
  --label-size:.78rem;
  --label-weight:600;
  --label-case:uppercase;
  --label-track:.07em;
}
[data-theme="dim"]{
  --paper:#12130F;
  --paper-2:#1A1B16;
  --card:#1B1C17;
  --ink:#F4F0E5;
  --ink-2:#AAA391;
  --ink-3:#807A6B;
  --line:rgba(244,240,229,.14);
  --line-strong:rgba(244,240,229,.24);
  --accent:#98A8FF;
  --accent-soft:rgba(152,168,255,.11);
  --accent-2:#C5CEFF;
  --good:#78C7A2;
  --on-accent:#10110D;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 40px -12px rgba(0,0,0,.5);
}

/* ================= base ================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--paper)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1rem/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  transition:background .35s ease,color .35s ease;
}
::selection{background:var(--accent); color:var(--on-accent)}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
img,svg,canvas{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:6px}
.skip-link{
  position:fixed;left:16px;top:-80px;z-index:250;
  background:var(--ink);color:var(--paper);text-decoration:none;
  padding:10px 18px;border-radius:var(--r-pill);font-weight:700;font-size:.92rem;
  transition:top .2s ease;
}
.skip-link:focus-visible{top:16px}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
[id]{scroll-margin-top:92px}
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
[data-theme="dim"] .grain{mix-blend-mode:screen;opacity:.055}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ================= type ================= */
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--serif);font-weight:560;letter-spacing:-.025em;line-height:1.04}
.h1{font-size:clamp(2.6rem,5.6vw,4.6rem);max-width:min(22ch,75%);line-height:1.02;margin:0}
.h2{font-size:clamp(2.05rem,4.5vw,3.6rem);max-width:18ch;margin:0;line-height:1.08}
.h3{font-size:1.2rem;margin:0 0 10px;line-height:1.2}
.lede{font-size:1.08rem;line-height:1.5;color:var(--ink-2);max-width:58ch;margin:0}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:var(--label-size);font-weight:var(--label-weight);text-transform:var(--label-case);letter-spacing:var(--label-track);
  color:var(--ink-2);margin:0;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent);flex:none}
.serif-i{font-style:italic;color:var(--accent);font-weight:420}
.mono-label{font-family:var(--sans);font-size:var(--label-size);font-weight:var(--label-weight);text-transform:var(--label-case);letter-spacing:var(--label-track);color:var(--ink-2);margin:0}

/* band-link: the quiet end-of-beat pointer affordance (promoted from use-cases, N-1) */
.band-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--accent);text-decoration:none;font-size:.92rem}
.band-link:hover{text-decoration:underline}

/* ================= buttons ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:14px 24px;border-radius:var(--r-pill);
  text-decoration:none;font-weight:700;font-size:.92rem;line-height:1;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .25s ease,background .3s ease,color .25s ease;
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 50%,transparent);color:var(--ink)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--ink)}
.btn-arrow{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* ================= header ================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  transition:background .25s ease,box-shadow .25s ease,backdrop-filter .25s ease;
}
.site-header .wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;transition:height .25s ease}
.site-header.scrolled{background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.site-header.scrolled .wrap{height:64px}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{display:block;text-decoration:none;color:var(--ink-2);font-weight:650;font-size:.9rem;padding:8px 13px;border-radius:var(--r-pill);transition:background .2s ease,color .2s ease}
.nav-links a:hover{background:var(--accent-soft);color:var(--ink)}
.nav-links a.active{color:var(--ink);background:var(--accent-soft)}
.header-actions{display:flex;align-items:center;gap:10px}
.btn-nav{min-height:40px;padding:11px 18px;font-size:.92rem}
.theme-toggle{width:39px;height:39px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--paper) 50%,transparent);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .25s ease}
.theme-toggle:hover{transform:rotate(12deg);border-color:var(--ink)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .moon{display:none}
[data-theme="dim"] .theme-toggle .sun{display:none}
[data-theme="dim"] .theme-toggle .moon{display:block}
.menu-btn{display:none;width:42px;height:42px;position:relative;z-index:140;border-radius:50%}
.menu-btn span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);border-radius:2px;transition:top .25s ease,transform .25s ease,opacity .2s ease}
.menu-btn span:nth-child(1){top:15px}.menu-btn span:nth-child(2){top:21px}.menu-btn span:nth-child(3){top:27px}
body.menu-open .menu-btn span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){top:21px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;background:var(--paper);z-index:110;display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
.mobile-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mobile-menu a:not(.btn){font-family:var(--serif);font-size:clamp(2.25rem,10vw,3.4rem);line-height:1;text-decoration:none;font-weight:560;display:inline-block;padding:8px 0}
.mobile-menu a.active{color:var(--accent)}
.mobile-menu .btn{align-self:flex-start;margin-top:34px}
body.menu-open{overflow:hidden}
body.menu-open .site-header{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ================= brand wordmark + scroll-collapse mark ================= */
.brandmark{display:inline-block;height:24px;width:105px;overflow:hidden;flex:none;text-decoration:none;color:var(--ink);transition:width .5s cubic-bezier(.4,0,.2,1)}.brandmark .wm{height:24px;width:auto;max-width:none;display:block;overflow:visible}.brandmark .wm-letters{fill:currentColor;transition:opacity .26s ease}.brandmark .wm-c{fill:currentColor}.brandmark .wm-slash{fill:var(--accent);stroke:var(--accent);stroke-width:70;stroke-linejoin:round;stroke-linecap:round;transition:transform .5s cubic-bezier(.4,0,.2,1)}


.brandmark:hover{opacity:.82}

.site-header.scrolled .brandmark{width:31px}.site-header.scrolled .brandmark .wm-letters{opacity:0}.site-header.scrolled .brandmark .wm-slash{transform:translateX(-4325px)}



@media (prefers-reduced-motion:reduce){
  .brandmark,.brandmark .wm-letters,.brandmark .wm-slash{transition:none}
}

/* ================= sections + surface rhythm ================= */
.section{padding-block:clamp(84px,10.5vw,144px)}
.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(32px,4.5vw,56px)}
.section-head .lede{margin:0}
/* alternating beat: even content sections sit on a paper-2 band (the dark #anatomy beat overrides its own) */
main > section:nth-of-type(even):not(.dark-beat){background:var(--paper-2);border-block:1px solid var(--line);transition:background .35s ease}
html[data-theme="dim"] main > section:nth-of-type(even):not(.dark-beat){background:#15160F}


/* ================= footer (dark beat, de-duped) ================= */
/* prose orphan guard: no single-word last lines (Q: operator straggler rule, 2026-07-01) */
/* ---- dark-beat: THE canonical dark strip (depth radial standardized 2026-07-01,
   from the C11 treatment on product/use-cases/playbooks). Apply class="... dark-beat"
   to the section; inner .wrap is lifted above the radial. ---- */
p{text-wrap:pretty}

.dark-beat{background:var(--surface-dark);border-block:1px solid rgba(255,255,255,.08);transition:background .35s ease;position:relative;overflow:hidden}
.dark-beat::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 15%,rgba(111,130,255,.2),transparent 34%),radial-gradient(circle at 80% 80%,rgba(42,74,232,.17),transparent 34%);pointer-events:none}
.dark-beat > .wrap{position:relative;z-index:1}

.site-footer{background:var(--surface-dark);border-top:1px solid rgba(255,255,255,.10);color:#B8B2A2;padding:clamp(54px,7vw,86px) 0 34px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(28px,4vw,54px);margin-bottom:54px}
.footer-brand p{margin:15px 0 0;color:#B8B2A2;max-width:34ch;font-size:.9rem}
.site-footer h3{font-family:var(--sans);font-weight:var(--label-weight);font-size:var(--label-size);text-transform:var(--label-case);letter-spacing:var(--label-track);color:#9A937F;margin:0 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.site-footer a{text-decoration:none}
.site-footer ul a{color:#D7D1C3;opacity:1;font-size:.9rem;transition:color .2s ease}
.site-footer ul a:hover{color:#FFFFFF}
.site-footer .brandmark{color:#F4F0E5;--wm-slash:var(--accent-2)}.site-footer .brandmark use{fill:currentColor}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-top:26px;font-size:.75rem;color:#B8B2A2}

/* ================= reveal (unified calm scroll-reveal) ================= */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.js [data-reveal].visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}}

/* ================= dim-mode elevation (surfaces sit a step above the background) ================= */
html[data-theme="dim"] :where(.card,.anatomy-card){background:#202219;border-color:var(--line-strong);box-shadow:inset 0 1px 0 rgba(244,240,229,.08)}
html[data-theme="dim"] .footer-bottom span{color:#B8B2A2}

/* ================= CTA orbit (shared closing-CTA decor) =================
   Two concentric hairline rings behind the final CTA: a solid outer circle
   and an inner dashed circle that spins slowly. The host section must clip
   the rings and keep its content above them (guards below); the rings never
   receive pointer events. Reduced motion freezes the spin (see global block).
   Ported from index.html's inline .cta treatment; now shared across pages. */
.cta-orbit-host{position:relative;overflow:hidden}
.cta-orbit-host>.wrap{position:relative;z-index:1}
.cta-orbit{position:absolute;left:50%;top:50%;width:min(760px,92vw);height:min(760px,92vw);transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%;pointer-events:none;opacity:.7;z-index:0}
.cta-orbit::before{content:"";position:absolute;inset:88px;border:1px dashed var(--line);border-radius:50%;animation:spin 70s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


/* ================= responsive ================= */
/* single nav breakpoint (F1): full nav + CTA down to 860px, then the mobile menu */
@media (min-width:861px) and (max-width:1000px){
  .nav-links{gap:0}
  .nav-links a{padding:8px 9px;white-space:nowrap}
  .header-actions .btn-nav{white-space:nowrap;padding:11px 15px}
}
@media (max-width:860px){.nav-links,.header-actions .btn-nav{display:none}.menu-btn{display:block}}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1 / -1}}
@media (max-width:640px){
  :root{--gutter:20px}
  .site-header .wrap{height:70px}
  .hero-ctas .btn{width:100%}
  .section{padding-block:clamp(60px,12vw,82px)}
  .site-footer ul a{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
  .band-link{min-height:44px}
  .brandmark{min-height:44px;display:inline-flex;align-items:center}
  .menu-btn,.theme-toggle{min-width:44px;min-height:44px}
  .btn{min-height:44px}
  .footer-bottom{flex-direction:column}
  .cta-orbit{width:min(420px,86vw);height:min(420px,86vw)}
}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ================= reduced motion (global) ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .cta-orbit::before{animation:none}
}

