@font-face{
  font-family:"IBM VGA";
  src:url("../fonts/Web437_IBM_VGA_8x16.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --bg-deep:#0d0508;
  --surface:#380a0a;
  --surface-raised:#521212;
  --surface-sunken:#240505;
  --surface-panel:#2e0808;
  --border:#8c2924;
  --border-hi:#c73d33;
  --border-dim:#6b1a14;
  --text:#f5dbcc;
  --text-bright:#fff0e0;
  --text-dim:#b89996;
  --accent:#d94d3d;
  --focus:#f28c73;
  --danger:#ff5c1a;
  --warning:#ffcc40;
  --success:#9ee073;
  --bone:#e8d5c0;

  --plate-fill:rgba(20,4,4,.93);      
  --shadow-ink:rgba(0,0,0,.5);        
  --ink-invert:#150303;               
  --outline-ink:#000;                 
  --code-bg:#0a0202;
  --row-stripe:rgba(255,255,255,.03); 
  --row-final:rgba(217,77,61,.12);    
  --quote-wash:rgba(255,204,64,.07);  

  --measure:29.45rem;
  
  --gutter-w:clamp(96px,calc((100vw - 1120px) / 2),200px);
  
  --lap:26s;
  --rhythm:1rem;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;image-rendering:pixelated;}

body{
  margin:0;
  color:var(--text);
  background-color:var(--bg-deep);
  
  background-image:url("../img/meat-tile-loud.webp");
  background-repeat:repeat;
  background-size:192px;
  background-attachment:fixed;
  font-family:"IBM VGA",ui-monospace,monospace;
  font-size:.95rem;
  line-height:1.55;
  letter-spacing:.01em;
}

.scrim{
  position:fixed;inset:-50%;width:200%;height:200%;
  background:var(--bg-deep);opacity:.35;z-index:-2;pointer-events:none;
}

img{max-width:100%;height:auto;}
a{color:var(--accent);}
a:hover{color:var(--focus);}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

.skip{position:absolute;left:-9999px;}
.skip:focus{left:.5rem;top:.5rem;background:var(--surface-raised);padding:.5rem 1rem;z-index:99;}

.plate,.panel,.hero{
  border:16px solid transparent;
  border-image-slice:8;
  border-image-repeat:round;
}
.plate{border-image-source:url("../img/border-muscle.png");}
.panel{border-image-source:url("../img/border-blood.png");}
.hero{border-image-source:url("../img/border-bone.png");}
footer.console-foot.panel{border-image-source:url("../img/border-marbled.png");}

.shell{max-width:1080px;margin:0 auto;padding:1.5rem 1rem 3rem;}

.console{display:grid;grid-template-columns:230px minmax(0,1fr);gap:1.25rem;align-items:start;}

.panel{background:var(--plate-fill);box-shadow:4px 4px 0 var(--shadow-ink);padding:1rem 1.1rem;}
.plate{background:var(--plate-fill);box-shadow:5px 5px 0 var(--shadow-ink);padding:1.75rem 2rem 2.25rem;}

.titlebar{background:var(--surface);border-bottom:2px solid var(--border-dim);
  margin:-1.75rem -2rem 1.5rem;padding:.5rem 1rem;display:flex;justify-content:space-between;
  gap:1rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);}
.titlebar .dot{color:var(--danger);}

.rule{display:block;position:relative;max-width:100%;color:var(--border);
  white-space:nowrap;overflow:hidden;user-select:none;margin:1.25rem 0;line-height:1;
  height:24px;}
.rule__dither{position:absolute;inset:0;display:block;overflow:hidden;line-height:24px;}

.rule__cord{position:absolute;inset:0;background:url("../img/chrome/divider.gif") repeat-x center;
  image-rendering:pixelated;}

.rule__chunk{position:absolute;top:0;left:-32px;
  animation:chunk-roll var(--lap) linear infinite,
            chunk-relay calc(var(--lap) * 4) step-end infinite;}
@keyframes chunk-roll{
  from{left:-32px;}
  to{left:calc(100% + 32px);}
}
@keyframes chunk-relay{
  0%{opacity:1;}
  25%{opacity:0;}
}

.devbar{position:sticky;top:0;z-index:50;padding:.35rem .75rem;
  background:var(--warning);color:var(--ink-invert);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;}

.gutters{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.gutter{position:absolute;top:0;bottom:0;width:var(--gutter-w);}
.gutter--l{left:0;}
.gutter--r{right:0;}

.gutter .spurt{position:absolute;bottom:-10px;left:50%;margin-left:-64px;
  image-rendering:pixelated;}
.fly{position:absolute;bottom:86px;left:50%;margin-left:-24px;
  animation:chunk-drift linear infinite;}
.fly__chunk{display:block;animation:chunk-arc cubic-bezier(.2,.7,.5,1) infinite;}
@keyframes chunk-drift{
  from{transform:translateX(0);opacity:0;}
  8%{opacity:1;}
  86%{opacity:1;}
  to{transform:translateX(var(--drift));opacity:0;}
}
@keyframes chunk-arc{
  from{transform:translateY(0);}
  55%{transform:translateY(calc(var(--rise) * -1));animation-timing-function:cubic-bezier(.5,0,.8,.3);}
  to{transform:translateY(0);}
}
@media (max-width:1400px){.gutters{display:none;}}

.railspurt{display:none;position:relative;overflow:hidden;}
.railspurt .spurt{position:absolute;bottom:-10px;left:50%;margin-left:-64px;
  image-rendering:pixelated;}
.railspurt .fly{margin-left:-24px;}
@media (prefers-reduced-motion:reduce){
  .gutters{display:none;}
  .railspurt .fly{display:none;}
  .rule__cord{display:none;}
  
  .rule__chunk{animation:none;left:.5rem;}
  .rule__chunk ~ .rule__chunk{display:none;}
}

.rail{position:sticky;top:1.5rem;}
.rail h2{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);
  margin:0 0 .6rem;border-bottom:1px solid var(--border-dim);padding-bottom:.35rem;}
.rail h2+h2{margin-top:1.25rem;}
.rail nav{display:flex;flex-direction:column;gap:.15rem;margin-bottom:1.25rem;}
.rail nav a{text-decoration:none;text-transform:uppercase;font-size:.82rem;letter-spacing:.06em;
  color:var(--text);padding:.15rem 0;}
.rail nav a::before{content:"[ ";color:var(--border);}
.rail nav a::after{content:" ]";color:var(--border);}
.rail nav a:hover{background:var(--accent);color:var(--ink-invert);}
.rail nav a:hover::before,.rail nav a:hover::after{color:var(--ink-invert);}
.rail nav a[aria-current]{color:var(--warning);}
.rail .feedlink{display:inline-block;margin-top:1rem;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--warning);}
.rail .feedlink:hover{background:var(--warning);color:var(--ink-invert);}

h1{font-size:2.4rem;line-height:1.05;margin:0 0 .4rem;color:var(--text-bright);
  text-shadow:2px 2px 0 var(--outline-ink),-2px 2px 0 var(--outline-ink),
    2px -2px 0 var(--outline-ink),-2px -2px 0 var(--outline-ink);}
.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--accent);
  margin:0 0 .5rem;}
.standfirst{font-size:1rem;line-height:1.5;color:var(--text-bright);max-width:var(--measure);
  border-left:3px solid var(--accent);padding-left:1rem;}

.prose{max-width:var(--measure);}
.prose p,.prose ul,.prose ol,.prose blockquote,.prose pre,.prose table,.prose figure{
  margin:var(--rhythm) 0;}
.prose li{margin:.35rem 0;}
.prose p,.prose li{max-width:var(--measure);}

.prose em,.prose i,.standfirst em{font-style:normal;color:var(--warning);}
.prose strong{color:var(--text-bright);font-weight:400;text-shadow:1px 0 0 currentColor;}
.prose h2{font-size:1.3rem;line-height:1.1;text-transform:uppercase;letter-spacing:.04em;
  color:var(--accent);margin-top:2.4rem;}
.prose h2::after{content:"";display:block;height:2px;background:var(--border-dim);margin-top:.4rem;}
.prose h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-bright);margin:1.8rem 0 .4rem;}

.prose table{width:100%;border-collapse:collapse;font-size:.95rem;border:2px solid var(--border-dim);}
.prose th,.prose td{padding:.4rem .6rem;text-align:left;}
.prose th{background:var(--surface);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;
  color:var(--text-bright);}
.prose td{border-top:1px solid var(--border-dim);}
.prose tbody tr:nth-child(even){background:var(--row-stripe);}
.prose tbody tr:last-child{background:var(--row-final);}
.table-scroll{overflow-x:auto;margin:var(--rhythm) 0;}
.table-scroll table{margin:0;}

.prose blockquote{margin-inline:0;border-left:3px solid var(--warning);
  background:var(--quote-wash);padding:.75rem 1rem;color:var(--text-bright);}
.prose blockquote p{margin:.25rem 0;}
.prose pre{overflow-x:auto;padding:.75rem 1rem;background:var(--code-bg);
  border:1px solid var(--border-dim);color:var(--success);font-size:.9rem;line-height:1.5;}
.prose code{font-family:"IBM VGA",ui-monospace,monospace;font-size:1em;color:var(--warning);}
.prose pre code{color:inherit;}
.prose a{color:var(--accent);}
.prose a:hover{background:var(--accent);color:var(--ink-invert);}
.prose hr{border:none;border-top:2px solid var(--border-dim);margin:2rem 0;}
.prose figure{margin-inline:0;}
.prose figcaption{font-size:.78rem;color:var(--text-dim);margin-top:.4rem;}

.prose .video{position:relative;aspect-ratio:16/9;width:100%;background:var(--bg-deep);
  border:2px solid var(--border-dim);}
.prose .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.hero{background:var(--surface-sunken);
  background-image:url("../img/meat-tile-quiet.webp");background-size:192px;
  text-align:center;margin-bottom:1.25rem;box-shadow:5px 5px 0 var(--shadow-ink);}
.hero__title{margin:0;line-height:0;font-size:0;text-shadow:none;}
.hero__title img{display:block;width:100%;height:auto;}
.hero__tagline{margin:0;padding:.7rem 1rem;color:var(--text-dim);letter-spacing:.14em;
  font-size:.8rem;text-transform:uppercase;border-top:2px solid var(--border-dim);}

.hero--slim{margin-bottom:1rem;}
.hero--slim .hero__title img{width:522px;max-width:100%;margin:0 auto;}
.hero--slim .hero__tagline{padding:.4rem 1rem;font-size:.7rem;}

.faction{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.75rem;margin:2rem 0 1rem;font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-bright);border-bottom:2px solid var(--border-dim);padding-bottom:.4rem;}
.faction:first-of-type{margin-top:0;}
.faction span{font-size:.7rem;letter-spacing:.1em;color:var(--text-dim);}
.unit{margin-bottom:1.5rem;}
.unit__spread{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.75rem;
  align-items:start;}
.unit__plate{display:flex;flex-direction:column;gap:.6rem;}
.unit__plate img{display:block;background:var(--surface-sunken);
  border:2px solid var(--border-dim);}
.unit__plate .kicker{margin:0;}
.unit__prose :first-child{margin-top:0;}
.unit__stats{margin-top:.4rem;}
.unit__stats h3,.unit__leaves h3{margin:0 0 .5rem;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border-dim);
  padding-bottom:.35rem;}
.unit__stats dl{margin:0;display:flex;flex-direction:column;gap:.2rem;}

.unit__stats dl>div{display:flex;justify-content:space-between;gap:.75rem;
  flex-wrap:wrap;font-size:.78rem;padding:.15rem 0;
  border-bottom:1px dotted var(--border-dim);}
.unit__stats dt{color:var(--text-dim);}
.unit__stats dd{margin:0;color:var(--text-bright);font-variant-numeric:tabular-nums;}
.unit__leaves{margin-top:1.25rem;padding-top:1rem;border-top:2px solid var(--border-dim);}
.unit__leaves p{margin:0 0 .6rem;font-size:.82rem;color:var(--text-dim);
  max-width:var(--measure);}
.unit__drops{display:flex;flex-wrap:wrap;gap:.35rem;}
.unit__drop{background:var(--surface-sunken);border:1px solid var(--border-dim);}
@media (max-width:900px){
  .unit__spread{grid-template-columns:minmax(0,1fr);gap:1.1rem;}
}

.techtree{margin:0;padding:.75rem 1rem;background:var(--surface-sunken);
  border:1px solid var(--border-dim);font-size:.8rem;line-height:1.5;
  color:var(--text-bright);white-space:pre;
  
  overflow-x:auto;}
.techtree__note{margin:.7rem 0 0;font-size:.76rem;line-height:1.6;color:var(--text-dim);
  max-width:var(--measure);}
.techtree__note b{color:var(--accent);}

.newsitem{padding:.85rem 0;border-top:1px solid var(--border-dim);}
.newsitem:first-of-type{border-top:none;}
.newsitem time,.newsitem .undated{font-size:.74rem;letter-spacing:.12em;color:var(--accent);}
.newsitem .undated{color:var(--text-dim);}
.newsitem h3{margin:.25rem 0 .3rem;font-size:1.15rem;line-height:1.15;}
.newsitem h3 a{text-decoration:none;color:var(--text-bright);}
.newsitem h3 a:hover{color:var(--warning);}
.newsitem p{margin:0;font-size:.9rem;color:var(--text-dim);max-width:var(--measure);}
.newsitem .tags{margin-top:.3rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--border);}

.logpost{padding:1.5rem 0;border-top:2px solid var(--border-dim);}
.logpost:first-of-type{border-top:none;padding-top:.5rem;}
.logpost h2{margin:.25rem 0 .3rem;font-size:1.3rem;line-height:1.15;}
.logpost h2 a{text-decoration:none;color:var(--text-bright);}
.logpost h2 a:hover{color:var(--warning);}
.logpost .postmeta{margin-bottom:.75rem;}
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1rem;padding-top:1rem;border-top:2px solid var(--border-dim);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;}
.pager:empty{display:none;}

.postmeta{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  margin:0 0 1.25rem;}
.postmeta a{color:var(--text-dim);}
.postnav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2rem;padding-top:1rem;border-top:2px solid var(--border-dim);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;}

.hcard{border:2px solid var(--border-dim);background:var(--surface);padding:1rem 1.1rem;
  margin:1.25rem 0;max-width:var(--measure);}
.hcard .p-name{color:var(--text-bright);text-transform:uppercase;letter-spacing:.08em;}
.hcard ul{list-style:none;margin:.6rem 0 0;padding:0;font-size:.85rem;}
.hcard li{margin:.2rem 0;}

footer.console-foot{margin-top:1.25rem;font-size:.78rem;color:var(--text-dim);}
.footer-chrome{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;}

.odo{display:inline-flex;gap:1px;vertical-align:middle;margin-left:.35rem;}
.odo i{width:12px;height:20px;background-image:url("../img/chrome/odometer.png");
  background-position:calc(var(--d) * -12px) 0;image-rendering:pixelated;}
.stamp{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .5rem;
  border:2px solid transparent;border-image:url("../img/border-bone.png") 8 round;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);}
.blinkies{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem;}

.blinkie{image-rendering:pixelated;}
.webring{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem;
  padding-top:.6rem;border-top:1px solid var(--border-dim);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;}
.webring__label{color:var(--accent);}

.webring__nav{color:var(--text-dim);opacity:.55;}
.webring__note{color:var(--text-dim);text-transform:none;letter-spacing:0;font-size:.68rem;}

.badge8831{display:inline-block;width:88px;height:31px;image-rendering:pixelated;
  border:1px solid var(--border-dim);vertical-align:middle;}
.colophon-note{margin:.6rem 0 0;opacity:.75;max-width:var(--measure);}

@media(max-width:820px){
  
  .plate,.panel,.hero{border-width:8px;}

  .console{grid-template-columns:repeat(2,minmax(0,1fr));}
  .console>main{grid-column:1 / -1;}
  .railspurt{display:block;align-self:stretch;min-height:160px;}
  .rail{position:static;}
  .plate{padding:1.25rem 1.1rem 1.5rem;}
  .titlebar{margin:-1.25rem -1.1rem 1.25rem;}
  .hero h1{font-size:2.2rem;}
}
.postmeta.morelink{margin:1.25rem 0 0;}