:root{
  --bg:#EEF1EC; --surface:#E3E9DF; --ink:#161F17; --ink-soft:#4A564B;
  --line:#B7C2B0; --line-strong:#8FA085; --accent:#9C5A16; --accent-ink:#FFFFFF;
  --accent-2:#1F6F63; --olive:#5B6B4F; --focus:#2F6F68;
  --font-display:'Big Shoulders Stencil Display','Arial Narrow',sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1512; --surface:#161F19; --ink:#E7ECE3; --ink-soft:#A7B4A1;
    --line:#324033; --line-strong:#4C5F49; --accent:#E8A33D; --accent-ink:#151009;
    --accent-2:#6FD8C9; --olive:#8FA37A; --focus:#6FD8C9;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1512; --surface:#161F19; --ink:#E7ECE3; --ink-soft:#A7B4A1;
  --line:#324033; --line-strong:#4C5F49; --accent:#E8A33D; --accent-ink:#151009;
  --accent-2:#6FD8C9; --olive:#8FA37A; --focus:#6FD8C9;
}

*{box-sizing:border-box;}
body{
  margin:0; min-height:100dvh; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance;}
p,ul,ol,dl,dd{margin:0;}
a{color:var(--accent-2); text-underline-offset:3px;}
a:hover{color:var(--accent);}
::selection{background:var(--accent); color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px;}

.wrap{max-width:1200px; margin-inline:auto; padding-inline:clamp(16px,5vw,56px); width:100%;}

header.site{background:var(--surface); padding-block:16px; border-bottom:1px solid var(--line);}
.head-row{display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:14px; flex-wrap:wrap; row-gap:8px; text-decoration:none; color:inherit;}
.brand:hover{color:inherit;}
.brand .unit{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); line-height:1.4;}
.brand .unit strong{display:block; color:var(--ink); font-weight:600;}
.sticker{display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; background:var(--olive); padding:9px 14px 8px; border-radius:3px; flex:none;}
.sticker .word{font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:#FBFBF6; letter-spacing:.01em; line-height:1; text-shadow:2px 2px 0 rgba(10,14,9,.35); white-space:nowrap;}
.sticker .by{font-family:var(--font-mono); font-weight:700; font-size:.5rem; letter-spacing:.14em; color:#FBFBF6; text-transform:uppercase; opacity:.9;}
.nav{display:flex; gap:18px; flex-wrap:wrap;}
.nav a{font-family:var(--font-mono); font-size:.78rem; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-strong); padding-block:6px 2px;}
.nav a[aria-current="page"]{color:var(--accent); border-color:var(--accent);}
.nav a:hover{color:var(--accent); border-color:var(--accent);}

.hero{position:relative; overflow:hidden; padding-block:clamp(40px,8vh,88px); border-bottom:1px solid var(--line);}
.hero-decor{position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(circle,color-mix(in srgb,var(--line-strong) 55%,transparent) 1px,transparent 1.6px); background-size:28px 28px;}
.hero-decor::before,.hero-decor::after{content:""; position:absolute; top:50%; left:50%; width:min(85vw,820px); aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%);}
.hero-decor::before{background-image:repeating-radial-gradient(circle,var(--line-strong) 0 1.5px,transparent 1.5px calc(min(85vw,820px) / 7)); opacity:.3;}
.hero-decor::after{background:conic-gradient(from 0deg,transparent 0deg,var(--accent-2) 10deg,transparent 40deg); opacity:.14; animation:spin 20s linear infinite; transform-origin:center;}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}

.panel{position:relative; z-index:1; display:flex; flex-direction:column; gap:20px; max-width:872px;}
.status{display:inline-flex; align-items:center; gap:8px; width:fit-content; font-family:var(--font-mono); font-size:.74rem; color:var(--accent); border:1px solid var(--accent); padding:6px 12px; background:var(--bg);}
.status .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.8s ease-in-out infinite; flex:none;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
h1{font-family:var(--font-display); font-weight:800; font-size:clamp(2.1rem,5vw,3.5rem); line-height:1.05;}
.lead{color:var(--ink); font-size:1.06rem; max-width:64ch;}

.details{border:1px solid var(--line); border-left:2px solid var(--accent-2); background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:10px;}
.details .row{display:grid; grid-template-columns:150px 1fr; gap:12px; font-size:.92rem;}
.details dt{font-family:var(--font-mono); color:var(--ink-soft); text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; padding-top:3px;}
.details dd{font-weight:500;}

.cta{display:flex; gap:12px; flex-wrap:wrap;}
.btn{display:inline-block; font-family:var(--font-mono); font-size:.82rem; font-weight:600; text-decoration:none; padding:10px 16px; border:1px solid var(--accent-2); color:var(--accent-2); background:var(--bg);}
.btn.primary{background:var(--accent-2); color:var(--bg);}
.btn:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}

.body{padding-block:clamp(36px,6vh,64px); gap:44px;}
.section{display:flex; flex-direction:column; gap:14px;}
.tag{font-family:var(--font-mono); font-size:.68rem; color:var(--accent); letter-spacing:.08em; text-transform:uppercase;}
.section h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:.01em; line-height:1.1; margin-top:-8px;}
.section h3{font-size:1rem; font-weight:600; line-height:1.4;}
.section p,.section li{font-size:.97rem; max-width:72ch;}
.muted{color:var(--ink-soft); font-size:.86rem !important;}

.topics{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.topic{border-left:3px solid var(--accent-2); padding-left:14px;}
.topic p{font-size:.92rem; color:var(--ink-soft);}

.stats{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); background:var(--surface); width:fit-content; max-width:100%;}
.stat{padding:12px 22px; border-right:1px solid var(--line);}
.stat:last-child{border-right:0;}
.stat b{display:block; font-family:var(--font-display); font-size:1.9rem; line-height:1;}
.stat span{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft);}

.vm-item{border-left:3px solid var(--accent-2); padding-left:14px; display:flex; flex-direction:column; gap:6px;}
.vm-item:last-child{border-left-color:var(--accent);}
.vm-label{font-family:var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.08em; color:var(--accent-2); text-transform:uppercase;}
.vm-item:last-child .vm-label{color:var(--accent);}

.pubs{padding-left:0; list-style:none; display:flex; flex-direction:column; gap:12px;}
.pubs li{border-top:1px solid var(--line); padding-top:10px;}
.pubs .venue{display:block; color:var(--ink-soft); font-size:.86rem;}
.people{padding-left:20px; display:flex; flex-direction:column; gap:4px;}
.faq{display:flex; flex-direction:column; gap:16px;}
.faq div{border-top:1px solid var(--line); padding-top:12px;}
.faq h3{margin-bottom:4px;}

footer{background:var(--surface); border-top:1px solid var(--line); padding-block:18px;}
.foot-row{display:flex; justify-content:space-between; align-items:center; gap:16px 24px; flex-wrap:wrap;}
footer small{color:var(--ink-soft); font-size:.76rem; max-width:62ch;}
footer .mark{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft);}
.foot-links{display:flex; gap:18px;}
.foot-links a{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; text-decoration:none; border-bottom:1px solid var(--line-strong);}

@media (max-width:560px){
  .details .row{grid-template-columns:1fr; gap:2px;}
  .stat{flex:1 1 33%; padding:10px 14px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;}
}
