:root{
  --bg:#ffffff;
  --panel:#f5f5f7;
  --divider-fill:#e8e8ed;
  --deep:#000000;
  --ink:#1d1d1f;
  --elevated:#3a3a3c;
  --muted:#6e6e73;
  --muted-2:#86868b;
  --line:rgb(0 0 0 / 8%);
  --line-strong:rgb(0 0 0 / 16%);
  --line-dark:rgb(255 255 255 / 16%);
  --signal:#1d1d1f;
  --pad:clamp(22px,5vw,76px);
  --max:1540px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{min-width:320px;margin:0;color:var(--ink);background:var(--bg);font-family:var(--font-sans);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.skip-link{position:fixed;z-index:20;top:12px;left:12px;padding:10px 14px;color:var(--bg);background:var(--ink);transform:translateY(-150%)}
.skip-link:focus{transform:none}

/* header + brand */
.site-header{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:76px;padding:0 var(--pad);border-bottom:1px solid var(--line)}
.brand-lockup{display:flex;align-items:center;gap:11px}
/* 5px gap matches the business-card front's name/discipline line — same two-line pattern, same rhythm */
.brand-lockup-small{display:flex;flex-direction:column;align-items:flex-start;gap:5px;color:var(--muted);font-size:10px;letter-spacing:.04em}
.brand-lockup-name{color:var(--ink);font-size:12px;font-weight:600;letter-spacing:-.01em}
.brand-lockup-role{color:var(--muted)}
.brandmark{flex:none;display:block}
.wordmark{font-size:16px;font-weight:600;letter-spacing:-.01em}
.wordmark span{font-weight:400;color:var(--muted)}
.header-status,.header-link{font-size:12px;color:var(--muted)}
.header-status{display:flex;gap:8px;align-items:center}
.header-status i,.signal-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.header-link{justify-self:end;color:var(--ink);font-weight:500}
.header-link:hover{color:var(--signal)}
main{overflow:hidden}

/* shared label style — quiet operational voice, no mono/uppercase shouting */
.hero-meta,.eyebrow,.chapter-head>span,.hero-facts dt,.palette-group-label,.palette b,.palette span,.visual-notes span,.type-specimen>span,.type-specimen small,.architecture-card>span,.architecture-card>b,.stage-top,.rollout-list>b{font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted)}

/* hero */
.hero,.chapter,.chapter-nav,.site-footer{width:min(100%,var(--max));margin-inline:auto}
.hero{position:relative;min-height:600px;padding:clamp(92px,13vw,190px) var(--pad) 70px}
.hero-meta{position:relative;display:flex;justify-content:space-between}
.eyebrow{position:relative;margin-top:clamp(85px,12vw,180px);color:var(--signal)}
h1,h2,h3,p{margin:0}
.hero h1{position:relative;margin-top:16px;font-size:clamp(64px,11vw,168px);font-weight:600;line-height:.98;letter-spacing:-.03em;color:var(--ink)}
.hero h1 em{color:var(--muted-2);font-style:normal;font-weight:600}
.chapter-head h2 em,.position-card em,.type-specimen p em{color:var(--muted-2);font-style:normal;font-weight:inherit}
.hero-bottom{position:relative;display:grid;grid-template-columns:1fr .52fr;gap:40px;margin-top:clamp(60px,8vw,110px);margin-left:25%}
.hero-lede{max-width:530px;font-size:clamp(18px,2vw,24px);line-height:1.35;color:var(--muted)}
.hero-facts{display:grid;gap:13px;align-content:end}
.hero-facts div{display:flex;justify-content:space-between;gap:12px;padding-top:8px;border-top:1px solid var(--line);font-size:13px}
.hero-facts dd{margin:0;color:var(--muted)}
.hero-facts dd:last-child{display:flex;gap:7px;align-items:center}

/* chapter nav + shell */
.chapter-nav{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chapter-nav a{display:grid;gap:25px;min-height:100px;padding:17px;border-right:1px solid var(--line);font-size:13px;color:var(--ink)}
.chapter-nav a:last-child{border-right:0}
.chapter-nav span{color:var(--signal);font-size:12px}
.chapter-nav a:hover{color:var(--signal)}
.chapter{padding:clamp(90px,12vw,170px) var(--pad)}
.chapter-paper{max-width:none;color:var(--ink);background:var(--panel)}
.chapter-ink{max-width:none;color:#ffffff;background:var(--deep)}
.chapter-ink .hero-meta,.chapter-ink .eyebrow{color:var(--muted-2)}
.chapter-head{display:grid;grid-template-columns:.68fr 1fr;gap:40px;margin-bottom:clamp(50px,7vw,100px)}
.chapter-head>span{color:var(--signal)}
.chapter-ink .chapter-head>span{color:var(--muted-2)}
.chapter-head h2{font-size:clamp(44px,6vw,98px);font-weight:600;line-height:.98;letter-spacing:-.025em}

/* position */
.position-grid{display:grid;grid-template-columns:1fr .8fr .65fr;gap:clamp(28px,5vw,90px);margin-left:23%}
.lead{font-size:clamp(21px,2.6vw,34px);line-height:1.2;letter-spacing:-.015em}
.prose{display:grid;gap:22px;color:var(--muted);font-size:15px}
.position-card{display:grid;align-content:space-between;min-height:300px;padding:26px;background:var(--panel);color:var(--ink)}
.position-card span,.position-card small{font-size:12px;font-weight:500;color:var(--muted)}
.position-card strong{font-size:clamp(22px,2.2vw,34px);font-weight:600;line-height:1.05;letter-spacing:-.02em}
.position-card em{color:var(--muted-2);font-style:normal}

/* principles */
.principle-list{display:grid;max-width:1080px;margin:0 0 0 23%;padding:0;list-style:none}
.principle-list li{display:grid;grid-template-columns:60px 1fr 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--line)}
.principle-list li:last-child{border-bottom:1px solid var(--line)}
.principle-list>li>span{color:var(--muted);font-size:12px;font-weight:500}
.principle-list h3{font-size:clamp(20px,2.2vw,30px);font-weight:600;line-height:1.1;letter-spacing:-.015em}
.principle-list p{color:var(--muted);font-size:14px}

/* brandmark usage guide */
.mark-guide{display:flex;flex-wrap:wrap;gap:1px;margin-bottom:56px;border:1px solid var(--line);background:var(--line)}
.mark-guide-display{flex:0 0 260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px;background:var(--panel)}
.mark-guide-frame{display:flex;align-items:center;justify-content:center;padding:28px;border:1px dashed var(--line-strong)}
.mark-guide-display small{color:var(--muted);font-size:12px;text-align:center}
.mark-guide-notes{flex:1 1 380px;padding:30px 32px;background:var(--panel)}
.mark-guide-notes>span{color:var(--muted)}
.mark-guide-notes h3{margin-top:14px;font-size:24px;font-weight:600;letter-spacing:-.015em}
.mark-guide-notes>p{margin-top:12px;max-width:56ch;color:var(--muted);font-size:14px}
.mark-rules{display:flex;flex-direction:column;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);list-style:none}
.mark-rules li{display:flex;gap:16px}
.mark-rules b{flex:0 0 108px;font-size:12px;font-weight:600;color:var(--ink)}
.mark-rules span{color:var(--muted);font-size:13px;line-height:1.4}

/* colour system (greyscale) */
.palette{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)}
.palette-group{flex:1 1 230px;display:flex;flex-direction:column;background:var(--bg)}
.palette-group-label{padding:14px 20px 0;color:var(--muted)}
.swatch{display:grid;align-content:space-between;min-height:96px;padding:16px 20px;text-align:left;border:0;border-top:1px solid var(--line);cursor:pointer;transition:outline-color .15s var(--ease)}
.palette-group>.swatch:first-of-type{border-top:0;margin-top:14px}
.swatch.is-active{outline:2px solid var(--ink);outline-offset:-2px}
.swatch:hover{outline:1px solid var(--muted);outline-offset:-1px}
.swatch span{font-size:12px}

.visual-notes{display:flex;flex-wrap:wrap;gap:1px;margin-top:30px;border:1px solid var(--line);background:var(--line)}
.visual-notes article{flex:1 1 260px;min-height:210px;padding:22px;background:var(--bg)}
.visual-notes span{color:var(--muted)}
.visual-notes h3{margin-top:50px;font-size:22px;font-weight:600;letter-spacing:-.015em}
.visual-notes p{margin-top:12px;color:var(--muted);font-size:14px}

/* type specimen */
.type-specimen{display:grid;gap:18px;margin-top:90px;padding:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.type-specimen p{font-size:clamp(30px,4.2vw,64px);line-height:1.08;letter-spacing:-.02em;font-weight:600}
.type-specimen small{color:var(--muted)}

.chapter-ink .chapter-head h2 em{color:var(--muted-2)}

/* brand collateral — reproduced at the exact values used in Billing/books.css and the business
   card, not approximated, so this page can't quietly drift from what actually ships */
.collateral-intro{max-width:56ch;margin:-20px 0 40px;color:var(--muted);font-size:15px;line-height:1.5}
.collateral-frame{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.collateral-piece{display:flex;flex-direction:column;background:var(--bg)}
.collateral-sample{position:relative;flex:none;overflow:hidden;background:#ffffff;color:#1d1d1f;font-family:var(--font-sans)}
.collateral-caption{display:grid;gap:8px;align-content:start;padding:20px}
.collateral-caption h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.collateral-caption p{color:var(--muted);font-size:13px;line-height:1.5}
.collateral-link{justify-self:start;margin-top:2px;color:var(--signal);font-size:12px;font-weight:500}
.collateral-link:hover{text-decoration:underline}

/* the real .invoice-paper, at true A4 proportions, driven by the actual books.css rules — not a
   hand-copied approximation, so there's nothing here to accidentally drift from Billing */
/* the invoice design's type is fixed px, sized for the editor's real on-screen width (roughly
   700-900px there) — shrinking the sample much below that overflows its own table and meta grid,
   so it stays pinned at that native scale and scrolls horizontally in its own frame on narrow
   screens (min-width:0 lets the grid track shrink below the sample's content instead of the
   sample forcing the whole page wider) rather than reflowing into overlapping text */
.collateral-letterhead{display:grid;grid-template-columns:680px 1fr;gap:40px;padding:32px;background:var(--bg)}
.collateral-letterhead-sample{width:680px;min-width:0;overflow-x:auto;border:1px solid var(--line);box-shadow:0 1px 3px rgb(0 0 0 / 6%)}
.collateral-letterhead-sample .invoice-paper{width:680px}
.collateral-letterhead .collateral-caption{padding:0;align-content:start}

.collateral-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.collateral-cards .collateral-piece{background:var(--bg)}

.collateral-card{height:230px;padding:18px;display:flex;flex-direction:column}
.collateral-card-front{justify-content:space-between}
.collateral-card-mark{width:24px;height:24px}
.collateral-card-id{display:flex;flex-direction:column;gap:5px}
.collateral-card-name{font-size:14px;font-weight:600;letter-spacing:-.01em}
.collateral-card-role{color:#6e6e73;font-size:8.5px;letter-spacing:.01em}
.collateral-card-back{justify-content:center;gap:7px;font-size:10px;line-height:1.6}
.collateral-card-spacer{height:5px}
.collateral-card-muted{color:#6e6e73}

@media(max-width:1300px){.collateral-letterhead{grid-template-columns:1fr}.collateral-letterhead-sample{margin:0 auto}}
@media(max-width:720px){.collateral-cards{grid-template-columns:1fr}.collateral-letterhead{padding:20px}.collateral-letterhead-sample{margin:0}}

/* architecture */
.architecture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.architecture-card{display:grid;min-height:260px;padding:22px;background:var(--deep);border-right:1px solid var(--line-dark)}
.architecture-card:nth-child(3n){border-right:0}
.architecture-card:nth-child(n+4){border-top:1px solid var(--line-dark)}
.architecture-card>span{color:var(--muted-2)}
.architecture-card h3{align-self:end;font-size:clamp(22px,2.6vw,36px);font-weight:600;line-height:1.02;letter-spacing:-.02em}
.architecture-card p{margin-top:12px;color:var(--muted-2);font-size:14px}
.architecture-card>b{align-self:end;margin-top:28px;color:#ffffff;font-weight:600}
.architecture-card-feature{background:#ffffff;color:var(--ink)}
.architecture-card-feature>span{color:var(--muted)}
.architecture-card-feature p{color:var(--muted)}
.architecture-card-feature>b{color:var(--ink)}

/* interaction */
.interaction-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.interaction-stage{display:grid;min-height:480px;padding:28px;background:var(--deep);color:#ffffff;transition:background .35s var(--ease)}
.stage-top{display:flex;justify-content:space-between}
.stage-top span{color:var(--muted-2)}
.stage-center{position:relative;display:grid;place-items:center;min-height:230px}
.stage-center i{position:absolute;width:clamp(100px,15vw,230px);aspect-ratio:1;border:1px solid rgb(255 255 255 / 22%);border-radius:50%;animation:orbit 8s linear infinite}
.stage-center i:nth-child(2){width:65%;animation-direction:reverse;animation-duration:11s}
.stage-center i:nth-child(3){width:34%;animation-duration:5s}
.stage-center strong{position:relative;font-size:clamp(26px,3.6vw,52px);font-weight:600;letter-spacing:-.02em}
.interaction-stage p{max-width:460px;font-size:17px;line-height:1.35;color:var(--muted-2)}
.stage-action{justify-self:start;align-self:end;min-height:42px;padding:0 16px;border:1px solid #ffffff;border-radius:999px;background:transparent;color:#ffffff;cursor:pointer;font-size:13px;font-weight:500}
.stage-action:hover{color:var(--ink);background:#ffffff}
.interaction-list{display:grid;background:var(--bg)}
.interaction-item{display:grid;grid-template-columns:36px 1fr;gap:2px 12px;padding:18px;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;cursor:pointer}
.interaction-item:last-child{border-bottom:0}
.interaction-item span{grid-row:span 2;color:var(--muted);font-size:12px}
.interaction-item b{font-size:17px;font-weight:600}
.interaction-item small{color:var(--muted)}
.interaction-item.is-active{color:var(--ink);background:var(--panel)}
.interaction-item.is-active span{color:var(--signal)}

/* rollout */
.rollout-list{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.rollout-list>div{display:grid;gap:16px;min-height:240px;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.rollout-list span{color:var(--muted);font-size:12px;font-weight:500}
.rollout-list h3{font-size:22px;font-weight:600;line-height:1.1;letter-spacing:-.015em}
.rollout-list p{color:var(--muted);font-size:14px}
.rollout-list b{align-self:end;color:var(--ink);font-weight:600}

.site-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px var(--pad);border-top:1px solid var(--line);color:var(--muted);font-size:12px}

@keyframes orbit{to{transform:rotate(360deg)}}

@media(max-width:900px){
  .site-header{grid-template-columns:1fr auto}
  .header-status{display:none}
  .hero{min-height:520px}
  .hero-bottom{grid-template-columns:1fr;margin-left:12%}
  .chapter-nav{grid-template-columns:repeat(3,1fr)}
  .chapter-nav a:nth-child(n+4){border-top:1px solid var(--line)}
  .chapter-head{grid-template-columns:1fr;gap:24px}
  .position-grid,.principle-list{margin-left:0}
  .position-grid{grid-template-columns:1fr 1fr}
  .position-card{grid-column:1/-1}
  .architecture-grid{grid-template-columns:1fr 1fr}
  .architecture-card:nth-child(3n){border-right:1px solid var(--line-dark)}
  .architecture-card:nth-child(2n){border-right:0}
  .architecture-card:nth-child(n+3){border-top:1px solid var(--line-dark)}
  .interaction-layout{grid-template-columns:1fr}
  .rollout-list{grid-template-columns:1fr 1fr}
  .rollout-list>div:nth-child(2n){border-right:0}
  .rollout-list>div:nth-child(n+3){border-top:1px solid var(--line)}
}

@media(max-width:600px){
  .site-header{min-height:64px}
  .wordmark{font-size:14px}
  .header-link{font-size:12px}
  .hero{min-height:auto;padding-top:72px}
  .hero h1{font-size:clamp(56px,17vw,96px)}
  .hero-bottom{margin-left:0}
  .chapter-nav{grid-template-columns:repeat(2,1fr)}
  .chapter-nav a{min-height:80px}
  .chapter{padding-top:76px;padding-bottom:76px}
  .position-grid{grid-template-columns:1fr}
  .position-card{grid-column:auto}
  .mark-guide-display{flex-basis:100%}
  .palette-group{flex:1 1 100%}
  .principle-list li{grid-template-columns:34px 1fr}
  .principle-list p{grid-column:2}
  .architecture-grid,.rollout-list{grid-template-columns:1fr}
  .architecture-card,.architecture-card:nth-child(3n),.architecture-card:nth-child(2n){border-right:0;border-top:0;border-bottom:1px solid var(--line-dark)}
  .architecture-card:last-child{border-bottom:0}
  .rollout-list>div,.rollout-list>div:nth-child(2n){border-right:0;border-top:0;border-bottom:1px solid var(--line)}
  .rollout-list>div:last-child{border-bottom:0}
  .site-footer{display:grid;gap:12px;text-align:left}
  .interaction-stage{min-height:400px}
  .stage-center{min-height:160px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage-center i{animation:none}
}

/* Field accents (Kelvin scale) */
.field-accents{display:grid;gap:18px;margin:48px 0 0}
.field-accents-head{display:grid;gap:8px;max-width:640px}
.field-accents-head p{margin:0;color:#6e6e73;font-size:15px;line-height:1.55}
.field-accents-bar{height:14px;border-radius:999px;background:linear-gradient(90deg,#e8b24f,#f0cd8e,#ffffff,#cfd9e6,#afc0d6);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 8%)}
.field-accents-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.field-swatch{display:grid;gap:6px;align-content:start;padding:18px 16px;border-radius:14px;background:#000;color:var(--fa)}
.field-swatch b{font-size:clamp(22px,2.4vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1}
.field-swatch span{color:rgb(255 255 255 / 62%);font-size:12px}
.field-swatch code{font:500 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fa)}
.field-swatch code.on-white{margin-top:6px;padding:6px 8px;border-radius:8px;background:#fff;color:var(--fa-ink)}
@media(max-width:820px){.field-accents-row{grid-template-columns:repeat(2,minmax(0,1fr))}}