:root{
  --bg:#120e08;
  --panel:#1a140b;
  --rule:#3a2e1b;
  --dim:#8c7248;
  --text:#f2d6a2;
  --amber:#ffb000;
  --glow:0 0 6px rgba(255,176,0,.45);
  --mono:ui-monospace,"JetBrains Mono","SF Mono","Cascadia Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --w:72rem;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;
  background:var(--bg);color:var(--text);
  font:15px/1.65 var(--mono);
  -webkit-font-smoothing:antialiased;
}
/* static scanlines + vignette, pointer-transparent */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:10;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px),
    radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%);
}
::selection{background:var(--amber);color:var(--bg)}
a{color:var(--amber);text-decoration:none;border-bottom:1px dashed var(--dim)}
a:hover{border-bottom-style:solid;text-shadow:var(--glow)}
a:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-bottom-color:transparent}

.wrap{max-width:var(--w);margin:0 auto;padding:0 1.5rem}

/* ---------- top bar ---------- */
header.bar{
  position:sticky;top:0;z-index:5;
  background:rgba(18,14,8,.92);backdrop-filter:blur(4px);
  border-bottom:1px solid var(--rule);
}
header.bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;height:3rem}
.home{border:0;color:var(--text);white-space:nowrap}
.home b{color:var(--amber);font-weight:400}
nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
nav a{border:0;color:var(--dim)}
nav a:hover,nav a:focus-visible{color:var(--amber)}
nav a::before{content:"./";opacity:.55}

/* ---------- hero ---------- */
/* logo glyphs ship with the site: Android monospace fonts lack box drawing,
   so fallback glyphs of other widths broke the art. DejaVu Sans Mono subset
   (fonts/logo.woff2), only " █═║╔╗╚╝". */
@font-face{
  font-family:"Jaculus Logo";
  src:url(fonts/logo.woff2) format("woff2");
  font-display:block;
}
.hero{padding:clamp(3rem,10vh,7rem) 0 clamp(3rem,8vh,5rem);border-bottom:1px solid var(--rule)}
.logo{
  margin:0 0 2.5rem;
  font-family:"Jaculus Logo",var(--mono);
  font-size:clamp(5.4px,2.35vw,17px);line-height:1;
  color:var(--amber);text-shadow:var(--glow);
  white-space:pre;overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3rem;align-items:center}
.wolf{width:clamp(200px,26vw,380px);aspect-ratio:1;background:linear-gradient(160deg,var(--amber) 35%,#b07a1c 100%);
  -webkit-mask:url(/images/wolf.png) center/contain no-repeat;mask:url(/images/wolf.png) center/contain no-repeat;
  filter:drop-shadow(0 0 14px rgba(255,176,0,.35))}
.term{max-width:44rem}
.cmd{color:var(--dim);margin:0}
.cmd .ps{color:var(--amber)}
.cmd .typed{color:var(--text)}
.out{margin:.6rem 0 0}
.out p{margin:0 0 .9rem}
.out .lead{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.5;color:var(--text)}
.cursor{display:inline-block;width:.6em;height:1.15em;vertical-align:-.2em;background:var(--amber);box-shadow:var(--glow);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.js .hero .out{visibility:hidden}
.js .hero.done .out{visibility:visible}

/* ---------- sections ---------- */
section{padding:4.5rem 0;border-bottom:1px solid var(--rule)}
section h2{font-size:1rem;font-weight:400;margin:0 0 2rem;color:var(--dim)}
section h2 .ps{color:var(--amber)}
section h2 .c{color:var(--text)}
.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem;align-items:start}
.prose p{margin:0 0 1rem;max-width:36rem}
.prose .big{font-size:1.2rem;line-height:1.5;color:var(--text)}
.muted{color:var(--dim)}

/* intrudect component tree */
.tree{margin:0;padding:1.25rem 1.4rem;background:var(--panel);border-left:2px solid var(--amber)}
.tree .root{color:var(--amber);margin-bottom:.3rem}
.tree dl{margin:0;display:grid;grid-template-columns:max-content 1fr;column-gap:1.5rem;row-gap:.35rem}
.tree dt{color:var(--amber);white-space:nowrap}
.tree dt .g{color:var(--dim)}
.tree dd{margin:0;color:var(--text)}
.flags{margin:1.5rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;color:var(--dim)}
.flags li::before{content:"[+] ";color:var(--amber)}
.links{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:1rem 2rem}

/* services as directory listing */
.ls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.ls article{padding:1.5rem 1.5rem 1.5rem 0;border-right:1px solid var(--rule)}
.ls article + article{padding-left:1.5rem}
.ls article:last-child{border-right:0}
.ls h3{margin:0 0 .75rem;font-size:1rem;font-weight:400;color:var(--amber)}
.ls h3 .perm{color:var(--dim);font-size:.8rem;display:block;margin-bottom:.2rem}
.ls p{margin:0 0 .75rem}
.ls ul{margin:0;padding:0;list-style:none;color:var(--dim)}
.ls ul li::before{content:"- "}
.note{margin:2rem 0 0;color:var(--dim);max-width:44rem}

/* contact */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 2rem;margin:0}
.kv dt{color:var(--dim)}
.kv dt::after{content:":"}
.kv dd{margin:0}

footer{padding:2rem 0 3rem;color:var(--dim);font-size:.85rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem}

@media (max-width:52rem){
  .cols{grid-template-columns:1fr;gap:2rem}
  .ls{grid-template-columns:1fr}
  .ls article,.ls article + article{padding:1.5rem 0;border-right:0;border-bottom:1px solid var(--rule)}
  .ls article:last-child{border-bottom:0}
}
@media (max-width:52rem){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .hero-grid .wolf{order:-1;width:clamp(150px,45vw,220px)}
}
@media (max-width:34rem){
  body{font-size:14px}
  .wrap{padding:0 1.1rem}
  nav ul{gap:1rem}
  nav a::before{content:""}
  .tree dl{grid-template-columns:auto 1fr}
  .tree dt{grid-column:1 / -1}
  .tree dd{grid-column:1 / -1;padding-left:2.2ch;margin-bottom:.4rem;color:var(--dim)}
  .kv{grid-template-columns:1fr;gap:0}
  .kv dd{margin-bottom:.7rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cursor{animation:none}
}