/* Shared base for site + demos. Values come from tokens.css only (no off-scale spacing). */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/plex-sans-latin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/plex-sans-latin-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/plex-sans-latin-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plex-mono-latin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plex-mono-latin-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--s-9)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit;border-radius:var(--radius)}
table{border-collapse:collapse;width:100%}
code,pre{font-family:var(--font-mono)}

h1,h2{text-wrap:balance}
p,li,dd{text-wrap:pretty}
h1,h2,h3{font-family:var(--font-display);font-variation-settings:"opsz" 144,"SOFT" 0;font-weight:400}
h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.012em}
h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.005em}
h3{font-size:var(--t-h3);line-height:1.25;font-weight:500;letter-spacing:-.005em;font-variation-settings:"SOFT" 0}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-2);max-width:var(--measure)}
.small{font-size:var(--t-small);line-height:1.5}
.muted{color:var(--ink-2)}
.measure{max-width:var(--measure)}

.label{font:500 var(--t-label)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.label.mark::before,.sq::before{content:"";display:inline-block;width:8px;height:8px;background:var(--signal);margin-right:var(--s-2);vertical-align:baseline}
.mono{font-family:var(--font-mono)}

a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color 120ms}
a:hover{color:var(--signal)}
.on-paper-2 a:hover,.band a:hover{color:var(--signal-ink)}
:focus-visible{outline:none;box-shadow:var(--focus)}
.inverse :focus-visible{box-shadow:0 0 0 3px var(--inverse-bg),0 0 0 5px var(--inverse-fg)}
.skip{position:absolute;left:var(--s-4);top:-100px;background:var(--ink);color:var(--paper);padding:var(--s-3) var(--s-4);z-index:100}
.skip:focus{top:var(--s-4)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.g{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--gutter)}
@media(min-width:900px){.g{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}

/* buttons: rectangular, no shadow */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:var(--s-4) var(--s-5);background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:var(--radius);font:600 1rem/1.2 var(--font-body);text-decoration:none;cursor:pointer;transition:background-color 120ms,color 120ms,border-color 120ms}
.btn:hover{background:var(--signal);border-color:var(--signal);color:var(--paper)}
.btn.secondary{background:transparent;color:var(--ink)}
.btn.secondary:hover{background:var(--paper-2);border-color:var(--ink);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-4)}

/* forms */
.field{display:grid;gap:var(--s-2)}
.field label{font:500 var(--t-label)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.field input,.field select,.field textarea{font:400 1rem/1.5 var(--font-body);min-height:48px;padding:var(--s-3) var(--s-4);background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:var(--radius);width:100%}
.field textarea{resize:vertical}
.field input,.field select{height:48px}
.field select{appearance:none;-webkit-appearance:none;padding-right:var(--s-7);cursor:pointer}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:var(--s-4);top:50%;margin-top:-3px;border:5px solid transparent;border-top:6px solid var(--ink);border-bottom:0;pointer-events:none}
.field .err{font:400 var(--t-small)/1.5 var(--font-mono);color:var(--signal-ink)}
.field .hint{font-size:var(--t-small);color:var(--ink-2)}

/* header */
.site-header{position:sticky;top:0;z-index:50;height:72px;background:var(--paper);border-bottom:var(--hair)}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)}
.wordmark{font:500 1.5rem/1 var(--font-display);font-variation-settings:"opsz" 144,"SOFT" 0;letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark::after{content:"";display:inline-block;width:.28em;height:.28em;margin-left:.08em;background:var(--signal)}
.wordmark:hover{color:var(--ink)}
.nav-links{display:none;align-items:center;gap:var(--s-5)}
.nav-links a{font:400 13px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;padding:var(--s-3) 0}
.nav-links a:hover{color:var(--signal)}
.nav-links .btn{color:var(--paper);padding:var(--s-3) var(--s-5)}
.nav-links .btn:hover{color:var(--paper)}
.menu-btn{min-height:48px;min-width:48px;background:none;border:0;padding:var(--s-3);font:500 13px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.menu-sheet{position:fixed;inset:72px 0 0 0;background:var(--paper);z-index:49;padding:var(--s-6) var(--gutter);display:none;overflow:auto}
.menu-sheet.open{display:block}
.menu-sheet a{display:block;font:400 2.5rem/1.2 var(--font-display);font-variation-settings:"opsz" 144,"SOFT" 0;letter-spacing:-.005em;text-decoration:none;padding:var(--s-3) 0;border-bottom:var(--hair)}
@media(min-width:900px){.nav-links{display:flex}.menu-btn,.menu-sheet{display:none!important}}

/* artefact panel + citation chip + messages (used on site hero and in demos) */
.artefact{border:1px solid var(--ink);background:var(--paper);border-radius:0}
.artefact-head{text-wrap:balance;background:var(--paper-2);border-bottom:1px solid var(--ink);padding:var(--s-3) var(--s-4)}
.artefact-body{padding:var(--s-5);display:grid;gap:var(--s-5)}
.msg{padding-left:var(--s-4);border-left:1px solid var(--ink);display:grid;gap:var(--s-2)}
.msg.assistant{border-left-color:var(--signal)}
.msg .who{font:500 var(--t-label)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.msg .text{white-space:pre-line;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:var(--s-2);font:400 13px/1.4 var(--font-mono);background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s-2) var(--s-3);color:var(--ink);text-decoration:none;cursor:pointer;text-align:left;min-height:32px}
.chip::before{content:"";flex:none;width:8px;height:8px;background:var(--signal)}
button.chip:hover,a.chip:hover{background:var(--paper-3);color:var(--ink)}
mark{background:var(--paper-2);color:inherit;box-shadow:none;border-bottom:2px solid var(--signal);padding:0}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}