/* THE HULL RATS — colour + surface system v0.1
   Law: surfaces rot (Family A, ~95%), signal glows (Family B, <=5%).
   No glows, bevels or drop shadows on Family B. Ever. */

:root{
  /* ground */
  --hull:#0B0D0E;--hull-1:#121516;--hull-2:#1a1e1f;--hull-3:#222728;
  --work:#FFF0EA;--gun:#545B5E;--bone:#DCD5C6;
  --ink-2:rgba(255,240,234,.60);--ink-3:rgba(255,240,234,.36);
  --line:rgba(84,91,94,.34);--line-2:rgba(84,91,94,.62);
  /* family A — the carcass */
  --rust:#4A3428;--oxide:#873725;--rust-or:#C96832;--ochre:#63511A;
  --gold:#AA8B2C;--moss:#5C6F23;--corr:#6E8C58;--coolant:#2C4D45;
  --steel:#4D7078;--cryo:#7EB7C5;
  /* family B — the infection */
  --toxic:#39FF14;--acid:#B7DD45;--radio:#F2FF00;--caustic:#FF5A00;--hazard:#E2B93B;
  --display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--hull);color:var(--work);font-family:var(--body);-webkit-font-smoothing:antialiased}
::selection{background:var(--acid);color:var(--hull)}
a{color:var(--acid);text-decoration:none}
a:hover{color:var(--toxic)}

/* ── type ───────────────────────────────────────────── */
.hr-display{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.9}
.hr-mono{font-family:var(--mono)}
.hr-eyebrow{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--acid)}
.hr-eyebrow.dim{color:var(--ink-3)}
.hr-stamp{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink-3)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;text-transform:uppercase;margin:0;line-height:.92;letter-spacing:.005em}
p{margin:0;text-wrap:pretty}

/* ── surfaces ───────────────────────────────────────── */
.hr-grain{position:relative}
.hr-grain::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.3'/></svg>")}
.hr-panel{background:var(--hull-1);border:1px solid var(--line)}
.hr-panel.inset{background:#0e1112;box-shadow:inset 0 1px 0 rgba(0,0,0,.6)}
.hr-plate{background:linear-gradient(168deg,#1c1613 0%,#141312 42%,#0e1011 100%),radial-gradient(120% 90% at 12% -10%,rgba(74,52,40,.55),transparent 60%);border:1px solid var(--line-2)}
.hr-plate-moss{background:linear-gradient(168deg,rgba(92,111,35,.20),rgba(14,16,17,.9) 62%),#101211;border:1px solid rgba(92,111,35,.45)}
.hr-plate-oxide{background:linear-gradient(168deg,rgba(135,55,37,.24),rgba(14,16,17,.9) 62%),#111011;border:1px solid rgba(135,55,37,.5)}
.hr-plate-steel{background:linear-gradient(168deg,rgba(77,112,120,.16),rgba(13,16,17,.9) 62%),#0f1213;border:1px solid rgba(77,112,120,.4)}
.hr-weld{height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 7px,transparent 7px 13px)}

/* rivets on panel corners — earned decoration, not bevel */
.hr-rivets{position:relative}
.hr-rivets::before,.hr-rivets::after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gun);top:7px}
.hr-rivets::before{left:7px}.hr-rivets::after{right:7px}

/* ── hazard striping — the one earned motif ─────────── */
.hr-hazard{height:7px;background:repeating-linear-gradient(135deg,var(--hazard) 0 9px,var(--hull) 9px 18px)}
.hr-hazard.thin{height:3px}
.hr-hazard.tall{height:14px;background:repeating-linear-gradient(135deg,var(--hazard) 0 14px,#0e1011 14px 28px)}
.hr-hazard.rust{background:repeating-linear-gradient(135deg,var(--rust-or) 0 9px,var(--hull) 9px 18px)}
.hr-rail-l{border-left:3px solid var(--acid)}

/* ── controls ───────────────────────────────────────── */
.hr-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:15px;background:var(--acid);color:var(--hull);border:1px solid var(--acid);cursor:pointer;transition:background .12s linear,color .12s linear,border-color .12s linear}
.hr-btn:hover{background:var(--toxic);border-color:var(--toxic);color:var(--hull)}
.hr-btn.ghost{background:transparent;color:var(--work);border-color:var(--line-2)}
.hr-btn.ghost:hover{background:var(--hull-2);border-color:var(--acid);color:var(--acid)}
.hr-btn.sm{padding:8px 14px;font-size:12px;letter-spacing:.12em}
.hr-btn.blk{width:100%;justify-content:center}
.hr-tag{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--line-2);color:var(--ink-2);background:#0e1112}
.hr-tag.gold{border-color:rgba(170,139,44,.6);color:var(--gold)}
.hr-tag.moss{border-color:rgba(110,140,88,.6);color:var(--corr)}
.hr-tag.oxide{border-color:rgba(135,55,37,.7);color:#c06a52}
.hr-tag.haz{border-color:var(--hazard);color:var(--hazard)}
.hr-tag.acid{border-color:rgba(183,221,69,.6);color:var(--acid)}
.hr-tag.toxic{border-color:var(--toxic);color:var(--toxic)}
.hr-input{width:100%;padding:12px 14px;background:#0d1011;border:1px solid var(--line-2);color:var(--work);font-family:var(--mono);font-size:13px}
.hr-input:focus{outline:none;border-color:var(--acid)}
.hr-input::placeholder{color:var(--ink-3)}

/* ── data ───────────────────────────────────────────── */
.hr-table{width:100%;border-collapse:collapse;font-size:13px}
.hr-table th{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-2);background:#0e1112;white-space:nowrap}
.hr-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.hr-table tbody tr:hover{background:rgba(84,91,94,.09)}
.hr-table .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hr-meter{height:8px;background:#0d1011;border:1px solid var(--line);overflow:hidden}
.hr-meter i{display:block;height:100%;background:var(--rust-or)}
.hr-meter i.gold{background:var(--gold)}
.hr-meter i.moss{background:var(--corr)}
.hr-meter i.haz{background:var(--hazard)}
.hr-meter i.acid{background:var(--acid)}
.hr-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}

/* one live signal per view — the rat's eye */
.hr-live{color:var(--toxic)}
.hr-live-dot{width:7px;height:7px;border-radius:50%;background:var(--toxic);display:inline-block;flex:none;animation:hr-blink 2.4s steps(1) infinite}
@keyframes hr-blink{0%,72%{opacity:1}76%,84%{opacity:.15}88%,100%{opacity:1}}

.hr-section{padding:96px max(56px,calc((100% - 1360px)/2))}
.hr-wrap{padding:0 max(56px,calc((100% - 1360px)/2))}
.hr-lift{transition:transform .14s linear,border-color .14s linear}
.hr-lift:hover{transform:translateY(-2px);border-color:var(--line-2)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0d1011}
::-webkit-scrollbar-thumb{background:var(--hull-3);border:2px solid #0d1011}
::-webkit-scrollbar-thumb:hover{background:var(--gun)}
@media(max-width:820px){.hr-section{padding:56px 20px}.hr-wrap{padding:0 20px}}

/* ── SKAVEN PASS — contamination, teeth, tallies ─────────────── */
:root{--warp:#39FF14;--warp-dim:rgba(57,255,20,.07)}

/* warpstone seeping through the plating */
.hr-tox-ground{position:relative;isolation:isolate}
.hr-tox-ground::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(60% 45% at 82% 6%,rgba(57,255,20,.09),transparent 62%),radial-gradient(45% 40% at 6% 88%,rgba(183,221,69,.07),transparent 66%)}
.hr-tox-ground>*{position:relative;z-index:1}

/* green-tinted rot in the grain */
.hr-grain.tox::after{opacity:.7;background-color:rgba(57,255,20,.035);background-blend-mode:overlay}

/* chewed / gnawed edges */
.hr-teeth{height:13px;background-repeat:repeat-x;background-size:24px 13px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='13'><path d='M0 0 L12 13 L24 0 Z' fill='%23B7DD45'/></svg>")}
.hr-teeth.up{transform:rotate(180deg)}
.hr-teeth.dim{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='13'><path d='M0 0 L12 13 L24 0 Z' fill='%23545B5E'/></svg>")}
.hr-btn{clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.hr-notch{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}

/* corrosion creeping along a panel edge */
.hr-rot-top{position:relative}
.hr-rot-top::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:repeating-linear-gradient(90deg,var(--acid) 0 4px,transparent 4px 9px,var(--acid) 9px 11px,transparent 11px 21px)}
.hr-panel.hr-lift:hover,.hr-plate.hr-lift:hover{border-color:rgba(183,221,69,.5)}

/* scrawled stamps — hand-cut, slightly off-square */
.hr-brand{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--acid);color:var(--acid);transform:rotate(-1.1deg);background:rgba(57,255,20,.05)}
.hr-brand.oxide{border-color:var(--oxide);color:#c9765c;background:rgba(135,55,37,.08);transform:rotate(.9deg)}

/* tally marks — the swarm counts in scratches */
.hr-tally{display:inline-flex;align-items:flex-end;gap:3px;height:15px}
.hr-tally i{display:block;width:2px;height:100%;background:currentColor;transform:skewX(-9deg)}
.hr-tally i.cross{position:relative;width:2px;background:none}
.hr-tally i.cross::after{content:'';position:absolute;left:-22px;top:6px;width:21px;height:2px;background:currentColor;transform:rotate(-22deg)}

/* eyes in the dark */
.hr-eyes{display:inline-flex;gap:5px}
.hr-eyes span{width:5px;height:5px;border-radius:50%;background:var(--toxic);opacity:.5;animation:hr-blink 3.6s steps(1) infinite}
.hr-eyes span:nth-child(2){animation-delay:.18s}
.hr-eyes.pair2 span{animation-delay:1.4s}
.hr-eyes.pair3 span{animation-delay:2.6s;opacity:.32}