:root { color-scheme:light; --paper:#e9e4cf; --ink:#202219; --quiet:#535542; --rule:#a5a28d; --mono:"Courier New",monospace; --display:"Arial Black","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); }
a { color:inherit; }
[hidden] { display:none !important; }
.wrap { width:min(1260px,calc(100% - 9vw)); margin-inline:auto; }
header { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--rule); }
header a, .panel-label, .panel-state { font:bold .75rem/1.35 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.brand { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; text-transform:none; }
.brand-mark { display:inline-grid; place-items:center; width:2.2rem; height:2.2rem; color:var(--paper); background:#243226; font-size:1rem; letter-spacing:-.07em; }
header > a:last-child { text-underline-offset:.24rem; }
.hero { display:grid; grid-template-columns:1fr minmax(13rem,17rem); gap:2rem; align-items:end; padding-block:clamp(1.8rem,4.3vh,3.3rem) 1.55rem; }
h1 { margin:0; font:950 clamp(2.5rem,6.85vw,6.7rem)/.83 var(--display); letter-spacing:-.075em; text-transform:uppercase; }
h1 span { display:block; }
.hero-copy { border-left:1px solid var(--rule); padding:.15rem 0 .15rem 1.15rem; }
.hero-copy strong { display:block; font:800 1.3rem/1.1 var(--display); letter-spacing:-.045em; }
.hero-copy p { margin:.52rem 0 0; color:var(--quiet); font:.83rem/1.55 var(--mono); }
.panel { margin:0; border:1px solid var(--ink); background:#181d18; color:#dedbc2; }
.panel-top,.panel-bottom { display:flex; align-items:center; justify-content:space-between; padding:.63rem .9rem; gap:.8rem; background:#273127; }
.panel-top { border-bottom:1px solid #4a5140; }
.panel-bottom { border-top:1px solid #4a5140; }
.panel-label { display:flex; align-items:center; gap:.57rem; }
.indicator { width:.48rem; height:.48rem; background:#d9a96d; box-shadow:0 0 8px #e0b37545; }
.panel-state { color:#c0c6ac; text-align:right; }
.scene { position:relative; aspect-ratio:2.72; background:#1b211b; overflow:hidden; }
canvas { display:block; width:100%; height:100%; }
.fallback { position:absolute; inset:0; display:grid; place-items:center; margin:0; color:#b7c49a; font:bold clamp(.48rem,2vw,1rem)/1.25 var(--mono); }
figcaption { color:#c5c7ae; font:.75rem/1.35 var(--mono); }
#motion { padding:.18rem .46rem; color:#f3ebcc; border:1px solid #777e63; background:transparent; cursor:pointer; font:bold .7rem/1.25 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
#motion:hover { background:#404b36; }
:focus-visible { outline:2px solid #a96825; outline-offset:4px; }
.about { border-top:1px solid var(--rule); display:grid; grid-template-columns:1fr 1.25fr; gap:1rem 2.6rem; margin-top:1.5rem; padding-block:2.1rem 3rem; }
.about h2 { margin:0; font:850 clamp(1.75rem,3.5vw,3.3rem)/.95 var(--display); letter-spacing:-.055em; }
.about p { max-width:44ch; margin:0; color:var(--quiet); font:.9rem/1.6 var(--mono); }
@media (max-width:800px) {
  .hero { grid-template-columns:1fr; gap:1rem; }
  h1 { font-size:clamp(2rem,9.8vw,5.6rem); }
  .hero-copy { max-width:30rem; }
  .scene { aspect-ratio:2.22; }
}
@media (max-width:470px) {
  .wrap { width:calc(100% - 28px); }
  header { min-height:55px; }
  header .brand { font-size:.65rem; letter-spacing:0; }
  header > a:last-child { font-size:.66rem; }
  .scene { aspect-ratio:1.9; }
  .panel-top,.panel-bottom { padding-inline:.53rem; }
  .panel-label,.panel-state { font-size:.63rem; }
  figcaption { font-size:.63rem; }
  .about { grid-template-columns:1fr; padding-bottom:2.5rem; }
}