:root{
  --bg:#1b1611;
  --panel:#221c15;
  --fg:#e8dcc4;
  --dim:#9d8c73;
  --line:#332a1f;
  --orange:#f26a1b;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{background:#0d0a07;}
body{
  height:100dvh;overflow:hidden;display:flex;flex-direction:column;
  font-family:'Courier New',Courier,monospace;
  background:var(--bg);color:var(--fg);
}

#noise{position:fixed;inset:0;z-index:0;}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .4s steps(2) infinite;}
@keyframes grain{50%{transform:translate(2px,-2px);}}

.scanline{position:fixed;left:0;right:0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(transparent,rgba(242,106,27,.05),transparent);
  animation:scan 7s linear infinite;}
@keyframes scan{from{top:-15%;}to{top:110%;}}

#chrome{
  position:sticky;top:0;z-index:5;
  padding-bottom:8px;
}
#topbar{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) 16px 8px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
}
#rec{color:var(--orange);display:flex;align-items:center;gap:6px;text-decoration:none;}
#rec:hover{text-shadow:0 0 8px rgba(242,106,27,.6);}
#rec::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 8px var(--orange);animation:blinkrec 1.4s steps(1) infinite;}
@keyframes blinkrec{50%{opacity:.15;}}
#chan{font-size:clamp(15px,4vw,20px);font-weight:bold;letter-spacing:.18em;color:var(--fg);text-decoration:none;}
#chan .bracket{color:var(--orange);}

#nav{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:4px 18px;
  padding:8px 16px 0;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
#nav a{color:var(--dim);text-decoration:none;}
#nav a:hover{color:var(--fg);}
#nav a.active{color:var(--orange);}

main{
  position:relative;z-index:2;flex:1;min-height:0;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
  width:100%;max-width:860px;margin:0 auto;
  padding:5vh 7%;
}
/* children must not flex-shrink (would squash/overlap lines instead of overflowing) */
main > *{flex-shrink:0;}
/* centers short content, top-aligns when it overflows (flex 'auto margin' trick —
   justify-content:center would clip the top of overflowing content) */
main > :first-child{margin-top:auto;}
main > :last-child{margin-bottom:auto;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.type-line{white-space:pre-wrap;word-break:break-word;min-height:1.5em;font-weight:bold;}
.eyebrow{color:var(--orange);font-size:clamp(12px,2.2vw,15px);letter-spacing:.3em;text-transform:uppercase;}
h1.type-line{font-size:clamp(28px,6vw,44px);line-height:1.35;letter-spacing:.03em;}
p.type-line{font-size:clamp(15px,2.2vw,18px);line-height:1.6;}
.log .type-line{font-size:clamp(13px,2vw,16px);line-height:1.7;color:var(--dim);}

/* case-study articles: theme chrome, static text (no typing) for readability */
.article h1{font-size:clamp(22px,5vw,36px);line-height:1.4;letter-spacing:.02em;font-weight:bold;}
.article > p{font-size:clamp(14px,2.1vw,16px);line-height:1.75;}
.sec{color:var(--orange);font-size:clamp(12px,2vw,14px);letter-spacing:.28em;text-transform:uppercase;font-weight:bold;margin-top:10px;}
.article .log p{font-size:clamp(13px,2vw,15px);line-height:1.7;color:var(--dim);font-weight:bold;}
.article p a:not(.backlink){color:var(--orange);text-decoration:none;font-weight:bold;}
.article p a:not(.backlink):hover{text-shadow:0 0 8px rgba(242,106,27,.6);}
.backlink{color:var(--dim);text-decoration:none;font-size:13px;letter-spacing:.15em;text-transform:uppercase;font-weight:bold;}
.backlink:hover{color:var(--orange);}

/* clickable field-log entries (About) */
a.type-line{display:block;color:var(--dim);text-decoration:none;}
a.type-line:hover{color:var(--fg);}
.hint{color:var(--dim);opacity:.7;font-size:clamp(11px,1.8vw,13px);letter-spacing:.2em;text-transform:uppercase;}

.corrupt{color:var(--orange);}
.glitching{animation:rgbsplit .18s steps(2) infinite;}
@keyframes rgbsplit{
  0%{text-shadow:-2px 0 var(--orange),2px 0 rgba(232,220,196,.55);transform:translateX(0);}
  50%{text-shadow:2px 0 var(--orange),-2px 0 rgba(232,220,196,.55);transform:translateX(1px);}
}
#cursor{display:inline-block;width:.55em;height:1.1em;background:var(--orange);
  vertical-align:text-bottom;margin-left:3px;box-shadow:0 0 8px rgba(242,106,27,.6);
  animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

.cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.btn{
  font-weight:bold;font-size:14px;letter-spacing:.18em;
  background:var(--panel);color:var(--fg);
  border:1px solid var(--orange);border-radius:3px;
  padding:14px 22px;text-transform:uppercase;text-decoration:none;
}
.btn:hover,.btn:active{background:var(--orange);color:#1b1611;}
.tel{color:var(--orange);text-decoration:none;font-weight:bold;letter-spacing:.1em;font-size:15px;}
.tel:hover{text-shadow:0 0 8px rgba(242,106,27,.6);}

#footer{
  position:relative;z-index:2;text-align:center;
  font-size:9px;letter-spacing:.28em;color:var(--dim);text-transform:uppercase;
  padding:14px 0 calc(14px + env(safe-area-inset-bottom));
}
#footer .g{color:var(--orange);}
#footer a{color:var(--dim);text-decoration:none;}
#footer a:hover{color:var(--orange);}

@media (prefers-reduced-motion: reduce){
  .grain,.scanline{animation:none;}
  #cursor,#rec::before{animation:none;}
}