@import url("tokens.css");
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--head);line-height:1.2;font-weight:600}
h1{font-size:clamp(30px,4.4vw,48px);margin:.2em 0 .4em;letter-spacing:-.01em}
h2{font-size:clamp(22px,2.6vw,30px);margin:1.6em 0 .5em}
h3{font-size:20px;margin:1.3em 0 .4em}
p,li{overflow-wrap:anywhere}
code{font:.88em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:0 .3em}
pre{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow:auto;font-size:14px}
pre code{background:none;border:0;padding:0}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.narrow{max-width:780px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--card);padding:6px 10px;z-index:9}
.kicker{font:700 12.5px system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.lead{font-size:19px;color:var(--dim);max-width:70ch}
.note{font-size:14.5px;color:var(--dim)}

/* chrome */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:58px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;line-height:1.1;color:var(--head)}
.brand b{font:600 19px Georgia,serif}.brand small{font-size:12px;color:var(--dim)}
.brand:hover{text-decoration:none}
nav.main{display:flex;flex-wrap:wrap;gap:4px 16px;flex:1}
nav.main a{color:var(--text);font-size:15px;font-weight:550}
nav.main a[aria-current]{color:var(--accent)}
button.theme{font:600 13px system-ui,sans-serif;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}
.foot{margin-top:70px;border-top:1px solid var(--line);background:var(--bg2);padding:22px 0 30px;font-size:14px;color:var(--dim)}
.foot p{margin:4px 0}.foot b{color:var(--text)}
@media(max-width:700px){nav.main{order:3;flex-basis:100%;padding-bottom:8px}}

/* home */
.hero{padding:44px 0 30px;border-bottom:1px solid var(--line)}
.hero .g{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px;align-items:center}
@media(max-width:900px){.hero .g{grid-template-columns:1fr}}
.hero h1{font-size:clamp(36px,5.6vw,64px);margin:.1em 0 .25em}
.hero h1 em{font-style:normal;color:var(--agent)}
.hero .sub{font-size:20px;color:var(--text);max-width:40ch;margin:0 0 18px}
.event{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px;color:var(--dim);margin:0 0 20px;padding:0;list-style:none}
.event li b{color:var(--text)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;font:650 15px system-ui,sans-serif;padding:10px 16px;border-radius:10px;border:1px solid var(--line2);background:var(--card);color:var(--text)}
.btn.p{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:hover{text-decoration:none;border-color:var(--accent)}
.venn{width:100%;height:auto;display:block}
.venn text{font-family:system-ui,sans-serif}
.venn .c{fill-opacity:.13;stroke-width:3}
.venn .c1{fill:var(--agent);stroke:var(--agent)}.venn .c2{fill:var(--infra);stroke:var(--infra)}.venn .c3{fill:var(--risk);stroke:var(--risk)}
.venn .l{font-size:17px;font-weight:750}.venn .l1{fill:var(--agent)}.venn .l2{fill:var(--infra)}.venn .l3{fill:var(--risk)}
.venn .s{font-size:13px;fill:var(--dim)}
.venn .mid{font:800 14px system-ui,sans-serif;fill:var(--head)}
.venn .g1{animation:v1 1.2s .1s both cubic-bezier(.2,.8,.2,1)}
.venn .g2{animation:v2 1.2s .35s both cubic-bezier(.2,.8,.2,1)}
.venn .g3{animation:v3 1.2s .6s both cubic-bezier(.2,.8,.2,1)}
.venn .mid{animation:fade .8s 1.6s both}
@keyframes v1{from{transform:translate(-60px,-30px);opacity:0}}
@keyframes v2{from{transform:translate(60px,-30px);opacity:0}}
@keyframes v3{from{transform:translate(0,60px);opacity:0}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion: reduce){.venn *{animation:none!important}}

.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0 0;padding:0;list-style:none}
@media(max-width:860px){.three{grid-template-columns:1fr}}
.three li{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.three h3{margin:0 0 6px;color:var(--c)}
.three p{margin:0;font-size:15.5px}
.three .a{--c:var(--agent)}.three .i{--c:var(--infra)}.three .r{--c:var(--risk)}
.way{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:w}
@media(max-width:860px){.way{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.way{grid-template-columns:1fr}}
.way li{counter-increment:w;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.way li::before{content:counter(w);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 14px system-ui;margin-bottom:8px}
.way b{display:block;font:600 17px Georgia,serif;color:var(--head);margin-bottom:2px}
.way span{font-size:14.5px;color:var(--dim)}
.band{padding:34px 0;border-bottom:1px solid var(--line)}
.band.alt{background:var(--bg2)}
.band h2{margin-top:0}
.deck{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0c0f15;box-shadow:var(--shadow);margin:16px 0 10px}
.deck iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* cards, articles, script */
.cards{list-style:none;padding:0;margin:20px 0;display:grid;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow)}
.card h2{font-size:22px;margin:0 0 6px}.card p{margin:0}
.card .kicker{margin-bottom:4px}
.card.ext{border-style:dashed}
.prose{padding-top:20px}
.prose p,.prose li{max-width:70ch}
.prose blockquote{margin:1.2em 0;padding:4px 18px;border-left:4px solid var(--accent);background:var(--accent-t);border-radius:0 10px 10px 0}
.crumbs{font-size:14px;color:var(--dim);margin:6px 0 0}
.art-head{border-bottom:1px solid var(--line);margin-bottom:10px;padding-bottom:10px}
.byline{font-size:14.5px;color:var(--dim);margin:0 0 12px}
.abstract{font-size:17px;font-style:italic;color:var(--text)}
.abstract b{font-style:normal}
.tbl{overflow-x:auto;margin:14px 0}
table{border-collapse:collapse;font-size:15px;min-width:100%}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}
.script{list-style:none;padding:0;margin:20px 0}
.beat{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px 18px;margin:0 0 12px}
.beat .bh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.beat .n{font:700 13px system-ui;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:1px 9px}
.beat .t{font:600 13px ui-monospace,monospace;color:var(--dim)}
.beat h2{font-size:20px;margin:0;flex:1}
.beat .act{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.beat .say{margin:8px 0 4px;font-size:16.5px}
.beat .cue,.beat .srcs{font-size:14px;color:var(--dim);margin:4px 0 0}
.src-list li{margin:0 0 8px}
.tiles{list-style:none;padding:0;margin:22px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tile a{display:block;color:var(--text)}
.tile a:hover{text-decoration:none}
.tile .thumb{display:block;position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0c0f15}
.tile a:hover .thumb{border-color:var(--accent)}
.tile iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.tile .cap{display:block;font-size:15px;margin-top:6px;line-height:1.3}
.tile .cap small{display:block;font-size:12.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
/* the version, in the top bar, always visible, linked to its own entry in the release history */
.top a.ver{font:600 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dim);border:1px solid var(--line2);border-radius:999px;padding:1px 8px;white-space:nowrap;align-self:center}
.top a.ver:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
.rel{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 18px;margin:14px 0;scroll-margin-top:80px}
.rel:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-t)}
.rel h2{margin:0;font-size:22px}
.rel .here{font:700 11.5px system-ui;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:2px 8px;vertical-align:middle;margin-left:6px}
.rel .meta{font-size:14px;color:var(--dim);margin:2px 0 6px}
.rel .ttl{font-weight:600;color:var(--head);margin:4px 0}
.rel details{font-size:14.5px}
.files{font-size:13.5px;columns:2;column-gap:20px}
@media(max-width:600px){.files{columns:1}}
.c-dim{color:var(--dim)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:700px){.cols2{grid-template-columns:1fr}}
.prose img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px}

/* studio */
.st{display:inline-block;font:700 11.5px system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:1px 9px;border:1px solid var(--line2);color:var(--dim);white-space:nowrap}
.st.open{color:var(--accent);border-color:var(--accent);background:var(--accent-t)}
.st.wip{color:var(--infra);border-color:var(--infra);background:var(--infra-t)}
.st.review{color:var(--risk);border-color:var(--risk);background:var(--risk-t)}
.st.done{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.loop{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;counter-reset:l}
@media(max-width:1000px){.loop{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.loop{grid-template-columns:1fr}}
.loop li{counter-increment:l;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;position:relative}
.loop li::before{content:counter(l);font:700 12px ui-monospace,monospace;color:var(--dim)}
.loop b{display:block;font:600 18px Georgia,serif;color:var(--head);margin:2px 0 4px}
.loop span{font-size:14px;color:var(--dim);line-height:1.45}
.backlog li{margin:0 0 8px}
.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:16px 0}
.map .act{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c,var(--line2));border-radius:12px;padding:10px 14px}
.map .a1{--c:var(--agent)}.map .a2{--c:var(--infra)}.map .a3{--c:var(--risk)}
.map h3{font-size:16px;margin:2px 0 6px;color:var(--c,var(--head))}
.map ul{list-style:none;padding:0;margin:0}
.map li{font-size:15px;padding:4px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
.map li:first-child{border-top:0}
.map li a{flex:1 0 auto}
.map li small{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;text-align:right}
.studio-top{padding-top:20px}
.map li.has small{color:var(--accent);font-weight:700}
.shelves{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tech{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tech .card h2{font-size:20px}.tech .card p{font-size:15px}
.brief .facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:14px 0 6px;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:15px}
.brief .facts dt{font-weight:700;color:var(--dim);text-transform:uppercase;font-size:12px;letter-spacing:.06em;padding-top:3px}
.brief .facts dd{margin:0}
@media(max-width:520px){.brief .facts{grid-template-columns:1fr}.brief .facts dd{margin-bottom:6px}}

/* the team board, read live from the Issues-FS vault */
#board .loading{color:var(--dim);font-style:italic}
#board .filters{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
#board .filters button{font:600 13.5px system-ui,sans-serif;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:4px 12px;cursor:pointer}
#board .filters button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
#board .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
@media(max-width:860px){#board .cols{grid-template-columns:1fr}}
#board .col{background:var(--bg2);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:12px;padding:10px 12px}
#board .c-open{--c:var(--accent)}#board .c-blocked{--c:var(--agent)}#board .c-done{--c:var(--line2)}
#board .col h2{font:700 14px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--c);margin:2px 0 10px}
#board .issue{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 8px}
#board .issue summary{cursor:pointer;list-style:none}
#board .issue summary::-webkit-details-marker{display:none}
#board .who{display:block;font:600 12px ui-monospace,monospace;color:var(--dim)}
#board .ttl{display:block;font-weight:650;color:var(--head);line-height:1.3;margin:2px 0 4px}
#board .tags{display:flex;flex-wrap:wrap;gap:6px;font-size:12px}
#board .tags span{border:1px solid var(--line2);border-radius:999px;padding:0 7px;color:var(--dim)}
#board .p-high .pri{color:var(--agent);border-color:var(--agent)}
#board .tags .wait{color:var(--infra);border-color:var(--infra)}
#board .plan{white-space:pre-wrap;font:14px/1.45 system-ui,sans-serif;background:none;border:0;padding:8px 0 0;margin:0}
#board .src,#board .path{font-size:12.5px;color:var(--dim);margin:4px 0 0;overflow-wrap:anywhere}
#board .none{color:var(--dim);font-size:14px}
#board .fresh{font-size:13.5px;color:var(--dim);margin-top:10px}
.keyline{overflow-wrap:anywhere;white-space:pre-wrap}
main>section.wrap:first-child,main>article.wrap:first-child{padding-top:20px}