@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/newsreader.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 800;font-display:swap;src:url(/fonts/newsreader-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-italic.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono.woff2) format('woff2')}

:root{--bone:#F2E9E1;--bone2:#EADFD4;--ink:#4A1C1C;--brick:#B8412E;--rule:#E0CDC2;--muted:#8A6B64;--sub:#5E3B38;--peach:#E8A48E;--band-rule:#6B3A3A;--band-rule2:#5E3030;--band-text:#D9C4BC;--band-text2:#EAD9D1;--band-who:#C9A69C;--band-prov:#B08E85;--band-fg:#F2E9E1}
*{box-sizing:border-box}
html{background:var(--bone);scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--ink);font:16px/1.55 'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 36px}
@media(max-width:700px){.wrap{padding:0 20px}}
.eyebrow{font:400 12px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--brick);margin:0 0 18px}
h1,h2{font-family:'Newsreader',serif;font-weight:400;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(30px,3.8vw,44px);line-height:1.08;font-variation-settings:'opsz' 48;max-width:22ch}
p{margin:0}
.btn{display:inline-block;font:500 15px/1 'Instrument Sans',sans-serif;padding:14px 20px;border:1px solid var(--ink);border-radius:2px}
.btn:hover{text-decoration:none;background:var(--bone2)}
.btn.primary{background:var(--brick);border-color:var(--brick);color:#FBF3EC}
.btn.primary:hover{background:#A3382A;border-color:#A3382A}
.btn+.btn{margin-left:10px}
.cap{font-size:14.5px;line-height:1.55;color:var(--sub);max-width:70ch}

header nav{display:flex;justify-content:space-between;align-items:center;padding:26px 0;border-bottom:1px solid var(--rule)}
.wm{font:500 26px/1 'Newsreader',serif;letter-spacing:-.01em}
.wm:hover{text-decoration:none}
.wm span{font:400 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;vertical-align:middle;margin-left:8px;padding:3px 5px 2px;border:1px solid var(--brick);color:var(--brick)}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
nav li{font:400 13px 'IBM Plex Mono',monospace;color:var(--sub)}
nav li.cta{color:var(--brick)}

.hero{padding-top:clamp(64px,10vw,128px);padding-bottom:clamp(48px,7vw,80px)}
h1{font-size:clamp(42px,6.6vw,80px);line-height:1.0;font-variation-settings:'opsz' 72;max-width:15ch;margin-bottom:24px}
.hero .sub{font-size:clamp(17px,1.7vw,20px);line-height:1.5;max-width:52ch;color:var(--sub);margin-bottom:34px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;border-top:1px solid var(--rule);padding:24px 0 0;margin-top:clamp(48px,7vw,88px)}
.three h3{font:600 13.5px/1.3 'Instrument Sans',sans-serif;letter-spacing:.01em;color:var(--brick);margin:0 0 8px}
.three p{font-size:15px;color:var(--sub)}
@media(max-width:700px){.three{grid-template-columns:1fr;gap:18px}}

section{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--rule)}
.fig{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch;margin-top:40px}
.box{border:1px solid var(--ink);padding:22px 24px;background:var(--bone)}
.box .t{font:400 12px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.box h3{font:500 22px/1.15 'Newsreader',serif;margin:0 0 14px}
.box ul{margin:0;padding:0;list-style:none}
.box li{padding:9px 0;border-top:1px solid var(--rule);font-size:15px;display:flex;justify-content:space-between;gap:12px}
.box li small{font:400 12px 'IBM Plex Mono',monospace;color:var(--muted);white-space:nowrap}
.box.you{background:var(--bone2)}
.link{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.link::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--brick)}
.link span{position:relative;background:var(--bone);font:400 11px/1.3 'IBM Plex Mono',monospace;color:var(--brick);text-align:center;padding:4px 2px}
.fig .cap{grid-column:1/-1;margin-top:18px}
@media(max-width:700px){.fig{grid-template-columns:1fr}.link{height:56px}.link::before{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:1px dashed var(--brick)}}

.scroll{overflow-x:auto;margin-top:36px}
table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
th{text-align:left;font:400 12px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 16px 12px 0;border-bottom:1px solid var(--ink)}
td{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--sub)}
td:first-child{color:var(--ink);font-weight:500;width:26%}
.tag{display:inline-block;font:400 11.5px/1 'IBM Plex Mono',monospace;padding:5px 7px;border:1px solid var(--rule);color:var(--ink);background:var(--bone2);white-space:nowrap}
.tag.k{border-color:var(--brick);color:var(--brick);background:transparent}

.band{background:var(--ink);color:var(--band-fg)}
.band .eyebrow{color:var(--peach)}
.band h2{color:var(--band-fg)}
.band .lede{font-size:17px;line-height:1.55;max-width:52ch;color:var(--band-text);margin-top:18px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:800px){.cols2{grid-template-columns:1fr;gap:36px}}
.chat{border:1px solid var(--band-rule);padding:8px 0}
.msg{padding:14px 20px;display:grid;grid-template-columns:72px 1fr;gap:14px;font-size:15px;line-height:1.5}
.msg+.msg{border-top:1px solid var(--band-rule2)}
.msg .who{font:400 11.5px/1.6 'IBM Plex Mono',monospace;color:var(--band-who);letter-spacing:.04em}
.msg .who.k{color:var(--peach)}
.msg .prov{display:block;margin-top:8px;font:400 12px/1.4 'IBM Plex Mono',monospace;color:var(--band-prov)}
.msg .rule{display:table;margin-top:10px;font:400 11.5px/1 'IBM Plex Mono',monospace;padding:6px 8px;border:1px solid var(--peach);color:var(--peach)}
.band .pts{margin:28px 0 0;padding:0;list-style:none}
.band .pts li{padding:14px 0;border-top:1px solid var(--band-rule);font-size:15.5px;color:var(--band-text2);display:grid;grid-template-columns:140px 1fr;gap:16px}
.band .pts li b{font-family:'Newsreader',serif;font-weight:500;font-size:18px;color:var(--band-fg)}

.qa{margin:36px 0 0;border-top:1px solid var(--ink)}
.qa div{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:22px 0;border-bottom:1px solid var(--rule)}
.qa dt{font:500 21px/1.25 'Newsreader',serif;margin:0}
.qa dd{margin:0;font-size:15.5px;color:var(--sub);max-width:60ch}
@media(max-width:700px){.qa div{grid-template-columns:1fr;gap:10px}}

.pull{font:400 clamp(26px,3.4vw,38px)/1.2 'Newsreader',serif;font-style:italic;letter-spacing:-.01em;max-width:28ch;margin:0}
.by{margin-top:18px;font:400 12.5px 'IBM Plex Mono',monospace;color:var(--muted)}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:800px){.contact{grid-template-columns:1fr;gap:28px}}
.contact .lede{font-size:17px;line-height:1.55;color:var(--sub);margin-top:14px;max-width:40ch}
.addr{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.addr .in{flex:1;min-width:220px;border:1px solid var(--ink);padding:14px;font:400 17px 'IBM Plex Mono',monospace;color:var(--ink);display:flex;align-items:center}
.note{margin-top:12px;font:400 12.5px/1.5 'IBM Plex Mono',monospace;color:var(--muted)}

footer{border-top:1px solid var(--ink);padding:28px 0 44px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:400 12.5px/1.6 'IBM Plex Mono',monospace;color:var(--muted)}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:22px}

.prose{max-width:66ch;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.prose h1{font-size:clamp(34px,4.6vw,56px);margin-bottom:28px}
.prose h2{font-size:24px;margin:36px 0 10px;font-variation-settings:'opsz' 32}
.prose p{margin:0 0 14px;color:var(--sub);font-size:16px}
.prose ul{margin:0 0 14px;padding-left:20px;color:var(--sub)}
.prose li{margin-bottom:6px}

@media(max-width:700px){
.scroll{overflow:visible}
table{min-width:0}
thead{display:none}
table,tbody,tr,td{display:block;width:100%}
tr{padding:14px 0;border-bottom:1px solid var(--rule)}
td{padding:4px 0;border:0}
td:first-child{width:auto;padding-bottom:8px}
td[data-l]::before{content:attr(data-l);display:block;font:400 11px/1.4 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:6px 0 2px}
}

html[data-theme=dark]{--bone:#2E1010;--bone2:#3E1818;--ink:#F2E9E1;--brick:#E8A48E;--rule:#5A2B2B;--muted:#B08E85;--sub:#D9C4BC;--peach:#E8A48E;--band-rule:#6B3A3A;--band-rule2:#5E3030;--band-text:#D9C4BC;--band-text2:#EAD9D1;--band-who:#C9A69C;--band-prov:#B08E85}
html[data-theme=dark] .btn.primary{background:#B8412E;border-color:#B8412E;color:#FBF3EC}
html[data-theme=dark] .btn.primary:hover{background:#A3382A;border-color:#A3382A}
html[data-theme=dark] .wm span{border-color:var(--brick);color:var(--brick)}
html[data-theme=dark] .band{background:#1F0A0A;border-top:1px solid #5A2B2B}
html[data-theme=dark] .box{background:var(--bone)} .box.you{background:var(--bone2)}
html[data-theme=dark] .link span{background:var(--bone)}
html[data-theme=dark] .tag{background:var(--bone2);color:var(--ink);border-color:var(--rule)}
html[data-theme=dark] .tag.k{border-color:var(--brick);color:var(--brick);background:transparent}
html[data-theme=dark] th{border-bottom-color:var(--ink)}
html[data-theme=dark] footer{border-top-color:var(--rule)}
html[data-theme=dark] .qa{border-top-color:var(--rule)}

/* switcher */
.theme{background:none;border:1px solid var(--rule);border-radius:999px;padding:4px 10px 4px 6px;display:inline-flex;align-items:center;gap:7px;color:var(--sub);font:400 12px/1 'IBM Plex Mono',monospace;cursor:pointer;vertical-align:middle}
.theme:hover{border-color:var(--ink)}
.theme i{display:block;width:12px;height:12px;border-radius:50%;border:1px solid var(--ink);background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);transition:transform .4s ease}
html[data-theme=dark] .theme i{transform:rotate(180deg)}
@media(max-width:700px){nav ul li:not(.cta):not(.keep){display:none}}

/* hero cards */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.hero .three{grid-column:1/-1}
.cards{position:relative;height:400px}
.card{position:absolute;width:min(380px,100%);background:var(--bone2);border:1px solid var(--ink);padding:16px 20px 14px}
.card .kind{display:block;font:400 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--brick);margin-bottom:8px}
.card p{font:400 21px/1.25 'Newsreader',serif;letter-spacing:-.01em;color:var(--ink);margin:0 0 10px}
.card .prov{display:block;font:400 11.5px/1.4 'IBM Plex Mono',monospace;color:var(--muted)}
.card.c1{top:0;left:10%;transform:rotate(-2deg)}
.card.c2{top:136px;left:0;transform:rotate(1.2deg)}
.card.c3{top:272px;left:14%;transform:rotate(-1deg)}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:36px}.cards{height:auto}.card{position:static;transform:none;width:100%;margin-bottom:12px}.card.c1,.card.c2,.card.c3{transform:none}}

/* drawn figure */
.fig-svg{display:none;margin-top:40px}
.fig-svg svg{width:100%;height:auto;display:block;overflow:visible}
.fig-svg .bx{fill:var(--bone);stroke:var(--ink);stroke-width:1}
.fig-svg .bx.you{fill:var(--bone2)}
.fig-svg .bx.model{fill:none;stroke:var(--ink);stroke-dasharray:4 3}
.fig-svg .sep{stroke:var(--rule);stroke-width:1}
.fig-svg .t{font:400 12px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
.fig-svg .h{font:500 24px 'Newsreader',serif;fill:var(--ink)}
.fig-svg .r{font:400 14.5px 'Instrument Sans',sans-serif;fill:var(--ink)}
.fig-svg a:hover text{text-decoration:underline}
.fig-svg .g{font:400 11.5px 'IBM Plex Mono',monospace;fill:var(--muted)}
.fig-svg .s{font:400 15px 'Instrument Sans',sans-serif;fill:var(--sub)}
.fig-svg .lb{font:400 11px 'IBM Plex Mono',monospace;letter-spacing:.06em;fill:var(--brick)}
.fig-svg .flow{stroke:var(--brick);stroke-width:1.2;fill:none;stroke-dasharray:6 6;animation:flow 1.6s linear infinite}
.fig-svg .key{stroke:var(--brick);stroke-width:1.2;fill:none}
.fig-svg .dot{fill:var(--brick)}
@keyframes flow{to{stroke-dashoffset:-24}}
@media(prefers-reduced-motion:reduce){.fig-svg .flow{animation:none}}
@media(min-width:800px){.fig-svg{display:block}.fig{display:none}.fig-cap{margin-top:18px}}

/* sigil */
.sigil{display:flex;justify-content:center;padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px)}
.sigil span{display:block;width:88px;height:88px;background:var(--ink);color:var(--bone);font:500 58px/88px 'Newsreader',serif;text-align:center}