/* Kas-Studios — structure after goatz.cafe (panels, mono labels, hard borders), skin after Cynosure terminal UI.
   All colour lives in tokens below: swap tokens to rebrand. */
:root{
 --bg:#EFEAE0;--panel:#F8F5EE;--panel-2:#E4DDCF;--ink:#121312;--muted:#5E5A52;--line:#1E1E1C;--grid:rgba(18,19,18,.07);
 --magenta:#C2187A;--violet:#6666FF;--orange:#E8742C;--blue:#2F6FDB;--mint:#B9F0D7;--yellow:#FBCC58;--ok:#2E8B57;
 --accent:var(--violet);--on-accent:#fff;
 --f-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;--f-mono:"IBM Plex Mono","Courier New",monospace;
 --b:2px solid var(--line);--b1:1px solid var(--line);--shadow:6px 6px 0 var(--line);--maxw:1280px}
[data-theme=dark]{
 --bg:#0F1011;--panel:#17191B;--panel-2:#202326;--ink:#ECE6D8;--muted:#9A958A;--line:#3A3D40;--grid:rgba(236,230,216,.05);
 --magenta:#FF4FB0;--violet:#8C8CFF;--orange:#FF8F4A;--blue:#5B9BFF;--ok:#5BD69A;--accent:var(--violet);--on-accent:#0F1011;--shadow:6px 6px 0 #000}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f-display);color:var(--ink);background:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;line-height:1.55;transition:background .2s,color .2s}
a{color:inherit}img{max-width:100%;display:block}
.mono,.panel-head,.tag,label,.btn,th{font-family:var(--f-mono);letter-spacing:.04em}
.small{font-size:.8rem}.muted{color:var(--muted)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--yellow);color:#121312;padding:6px;z-index:9}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.topbar{max-width:var(--maxw);margin:16px auto;padding:10px 16px;display:flex;align-items:center;gap:20px;border:var(--b);background:var(--panel);box-shadow:var(--shadow);position:sticky;top:10px;z-index:5}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none}.brand b{font-size:1.15rem;display:block;line-height:1}.brand small{font-size:.65rem;color:var(--muted);text-transform:uppercase}
.mark{color:var(--accent)}
.topbar nav{margin-left:auto}.topbar ul{display:flex;gap:4px;list-style:none;flex-wrap:wrap}
.topbar nav a{font-family:var(--f-mono);font-size:.82rem;text-transform:uppercase;text-decoration:none;padding:6px 10px;border:1px solid transparent}
.topbar nav a:hover{border:var(--b1)}.topbar nav a[aria-current]{background:var(--ink);color:var(--bg)}
.theme-btn{display:flex;align-items:center;gap:8px;border:var(--b);background:var(--panel-2);color:var(--ink);padding:6px 10px;cursor:pointer;font-size:.72rem}
.led{width:10px;height:10px;border-radius:50%;background:var(--yellow);box-shadow:0 0 6px var(--yellow)}[data-theme=dark] .led{background:var(--violet);box-shadow:0 0 8px var(--violet)}
main{max-width:var(--maxw);margin:0 auto;padding:10px 20px 40px;display:grid;gap:26px}
.panel{border:var(--b);background:var(--panel);box-shadow:var(--shadow);position:relative}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:var(--b);padding:6px 12px;font-size:.72rem;text-transform:uppercase;background:var(--panel-2)}
.panel-body{padding:22px}
.tag{display:inline-block;font-size:.66rem;padding:2px 8px;border:var(--b1);text-transform:uppercase;background:var(--panel)}
.tag.ok{background:var(--ok);color:#fff;border-color:var(--ok)}.tag.m{background:var(--magenta);color:#fff;border-color:var(--magenta)}
.tag.o{background:var(--orange);color:#121312;border-color:var(--orange)}.tag.b{background:var(--blue);color:#fff;border-color:var(--blue)}
.tag.v{background:var(--violet);color:#fff;border-color:var(--violet)}.tag.y{background:var(--yellow);color:#121312;border-color:var(--yellow)}
h1,h2,h3{line-height:1.08;letter-spacing:-.01em}h1{font-size:clamp(2.2rem,5.5vw,4.4rem)}h2{font-size:clamp(1.5rem,3vw,2.2rem)}h3{font-size:1.15rem}
.eyebrow{font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;color:var(--magenta);margin-bottom:10px}
.hl{color:var(--accent)}
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:26px}
.hero .lead{font-size:1.12rem;max-width:56ch;margin:18px 0 24px;color:var(--muted)}
.btn{display:inline-block;border:var(--b);padding:10px 16px;font-size:.8rem;text-transform:uppercase;text-decoration:none;background:var(--panel);color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--line)}
.btn.primary{background:var(--accent);color:var(--on-accent)}.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-img{aspect-ratio:16/10;object-fit:cover;width:100%;border-bottom:var(--b)}
.readout{display:grid;grid-template-columns:repeat(3,1fr)}.readout div{padding:12px;border-right:var(--b1)}.readout div:last-child{border:0}
.readout b{display:block;font-size:1.5rem}.readout span{font-family:var(--f-mono);font-size:.66rem;color:var(--muted);text-transform:uppercase}
/* schematic node layout */
.schematic{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;position:relative}
.node{border:var(--b);background:var(--panel);display:flex;flex-direction:column}
.node .panel-head .id{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:#fff;font-weight:700}
.node .panel-body{padding:16px;flex:1}.node ul{margin:10px 0 0 18px;font-size:.92rem}.node .foot-row{border-top:var(--b1);padding:8px 16px;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.72rem}
.wire{position:relative}.wire::before{content:"";position:absolute;left:-23px;top:50%;width:22px;border-top:2px dashed var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.card{border:var(--b);background:var(--panel);text-decoration:none;display:flex;flex-direction:column}
.card img{aspect-ratio:16/10;object-fit:cover;border-bottom:var(--b)}.card .panel-body{padding:14px}.card p{font-size:.9rem;color:var(--muted)}
.card:hover{box-shadow:var(--shadow);transform:translate(-2px,-2px)}
.ph{aspect-ratio:16/10;border-bottom:var(--b);display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--panel-2) 0 10px,var(--panel) 10px 20px)}
.filters{display:flex;gap:8px;flex-wrap:wrap}.filters button{font-family:var(--f-mono);border:var(--b);background:var(--panel);color:var(--ink);padding:6px 12px;cursor:pointer;text-transform:uppercase;font-size:.75rem}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.gallery img{aspect-ratio:1;object-fit:cover;border:var(--b1)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}blockquote{font-size:.95rem}blockquote footer{font-family:var(--f-mono);font-size:.75rem;margin-top:10px;color:var(--muted)}
form .f{display:grid;gap:4px;margin-bottom:14px}label{font-size:.7rem;text-transform:uppercase}
input,select,textarea{font:inherit;border:var(--b);background:var(--bg);color:var(--ink);padding:9px 10px}textarea{min-height:120px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
table{width:100%;border-collapse:collapse;font-size:.88rem}th,td{border-bottom:var(--b1);padding:8px;text-align:left;vertical-align:top}th{font-size:.68rem;text-transform:uppercase;background:var(--panel-2)}
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.col{border:var(--b1);background:var(--bg);min-height:120px}.col h4{font-family:var(--f-mono);font-size:.7rem;padding:6px 8px;border-bottom:var(--b1);text-transform:uppercase}
.kc{margin:8px;border:var(--b1);background:var(--panel);padding:8px;font-size:.82rem}
.banner{border:2px dashed var(--orange);padding:10px 14px;font-family:var(--f-mono);font-size:.78rem;background:color-mix(in srgb,var(--orange) 12%,transparent)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.sw{border:var(--b1)}.sw i{display:block;height:70px;border-bottom:var(--b1)}.sw p{font-family:var(--f-mono);font-size:.72rem;padding:6px}
.foot{max-width:var(--maxw);margin:0 auto 30px;padding:0 20px}.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding:18px}.foot ul{list-style:none}.foot .mark{vertical-align:middle}
.status{position:absolute;right:-1px;top:-14px}
@media(max-width:860px){.hero,.two,.schematic,.quotes,.foot-grid,.f2{grid-template-columns:1fr}.wire::before{display:none}.kanban{grid-template-columns:1fr 1fr}
 .topbar{flex-wrap:wrap;position:static}.topbar nav{margin-left:0;order:3;width:100%}.theme-btn{margin-left:auto}}
.hero>*,.two>*,.schematic>*,.quotes>*,main>*{min-width:0}h1{overflow-wrap:anywhere}
@media(max-width:860px){main{padding:10px 12px 30px}.topbar{margin:10px 12px}.panel-body{padding:16px}.readout b{font-size:1.1rem}.schematic[style]{grid-template-columns:1fr!important}}

.swatchbar{display:flex;aspect-ratio:16/10;border-bottom:var(--b)}.swatchbar i{flex:1}
.thumb{padding:0;border:0;background:none;cursor:zoom-in;display:block}.thumb:focus-visible,.lb-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.noscroll{overflow:hidden}
.lb{position:fixed;inset:0;z-index:50;display:grid;place-items:center}.lb[hidden]{display:none}
.lb-bd{position:absolute;inset:0;background:rgba(10,10,12,.86)}
.lb-fig{position:relative;max-width:min(92vw,1400px);border:var(--b);background:var(--panel);box-shadow:var(--shadow)}
.lb-fig img{max-height:78vh;max-width:100%;margin:0 auto;object-fit:contain;background:#000}.lb-fig figcaption{padding:8px 12px;border-top:var(--b1)}
.lb-btn{position:absolute;z-index:2;width:48px;height:48px;border:2px solid #fff;background:rgba(0,0,0,.6);color:#fff;font-size:1.6rem;cursor:pointer;line-height:1}
.lb-x{top:14px;right:14px}.lb-p{left:14px;top:50%;transform:translateY(-50%)}.lb-n{right:14px;top:50%;transform:translateY(-50%)}
@media(max-width:860px){.lb-p,.lb-n{top:auto;bottom:14px;transform:none}.lb-fig img{max-height:70vh}}