@font-face{font-family:'UrbanAsked';src:url("assets/UrbanAsked.otf") format("opentype"),url("assets/UrbanAsked.ttf") format("truetype");font-weight:400;font-display:swap}
:root{
  /* type roles per the colour-scheme sheet */
  --dirt:'UrbanAsked',sans-serif;              /* org name + section titles */
  --titel:'Chakra Petch',sans-serif;           /* general titles */
  --sub:'Space Mono',ui-monospace,monospace;   /* subtitles + readouts */
  --body:'Inter',system-ui,sans-serif;         /* basic text */
  --mono:var(--sub);
  --display:var(--titel);                      /* .hr-display falls back to General Titel */
}
/* org name + section headlines only */
h1,h2,.hr-dirt,.hr2-vert{font-family:var(--dirt);font-weight:400;letter-spacing:.02em}
h1,h2{line-height:1}
/* general titles */
h3,h4{font-family:var(--titel);font-weight:700;letter-spacing:.02em;line-height:1.08}
/* subtitles */
.hr-eyebrow,.hr-stamp,.hr-mono,.hr-tag,.hr-brand,.hr-table th{font-family:var(--sub)}
.hr-brand{font-size:10px;letter-spacing:.16em}
body,p,.hr-body{font-family:var(--body)}
/* THE HULL RATS — warpstone atmosphere layer (loads AFTER hullrats.css)
   Ground shifts from dry black to backlit green murk. Hazard striping unchanged. */

:root{
  /* primary & neutral */
  --hull:#0B0D0E;--work:#F1F0EA;--gun:#545B5E;--bone:#1C2548;
  /* murk ladder derived from Hull Black */
  --murk-0:#0B0D0E;--murk-1:#101413;--murk-2:#161B1A;--murk-3:#1D2422;
  /* accents — exact guide hexes */
  --hazard:#E2B93B;--rust-or:#C96832;--acid:#B7DD45;--steel:#4D7078;--radio:#F2FF00;
  --gold:#AA8B2C;--oxide:#873725;--corr:#6E8C58;--cryo:#7EB7C5;--toxic:#39FF14;
  --ochre:#63511A;--rust:#4A3428;--moss:#424C06;--coolant:#2C4045;--caustic:#FF5A00;
  /* semantic aliases used across the build */
  --verdigris:#6E8C58;--brass:#AA8B2C;--warp:#39FF14;
  --warp-haze:rgba(57,255,20,.16);
  --line:rgba(84,91,94,.34);--line-2:rgba(84,91,94,.62);
  --ink-2:rgba(241,240,234,.88);--ink-3:rgba(241,240,234,.42);
}
html,body{background:var(--murk-0);color:var(--work)}

/* ── atmosphere ─────────────────────────────────────────────── */
.hr2-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.hr2-glow::before{content:'';position:absolute;left:50%;bottom:-14%;width:120%;height:78%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,rgba(57,255,20,.26) 0%,rgba(110,140,88,.15) 34%,rgba(11,13,14,0) 72%)}
.hr2-glow.left::before{left:16%}
.hr2-glow.right::before{left:82%}

.hr2-fog{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.hr2-fog i{position:absolute;left:-30%;width:160%;height:44%;background:linear-gradient(180deg,rgba(183,221,69,0) 0%,rgba(183,221,69,.08) 55%,rgba(110,140,88,.02) 100%);filter:blur(22px);animation:hr2-drift 44s linear infinite}
.hr2-fog i:nth-child(1){bottom:-6%;animation-duration:52s}
.hr2-fog i:nth-child(2){bottom:14%;height:30%;opacity:.6;animation-duration:78s;animation-direction:reverse}
.hr2-fog i:nth-child(3){bottom:32%;height:24%;opacity:.34;animation-duration:104s}
@keyframes hr2-drift{from{transform:translateX(-9%)}to{transform:translateX(9%)}}



@media(prefers-reduced-motion:reduce){.hr2-fog i{animation:none}}

/* ── surfaces re-skinned in murk + verdigris ────────────────── */
.hr-panel{background:rgba(17,28,25,.72);border:1px solid var(--line);backdrop-filter:blur(3px)}
.hr-panel.inset{background:rgba(8,14,13,.8)}
.hr-plate{background:linear-gradient(168deg,rgba(62,122,99,.16) 0%,rgba(12,20,18,.86) 46%,rgba(8,14,13,.94) 100%);border:1px solid var(--line-2);backdrop-filter:blur(3px)}
.hr-plate-moss{background:linear-gradient(168deg,rgba(107,255,122,.10),rgba(10,18,16,.9) 60%);border:1px solid rgba(107,255,122,.3)}
.hr-plate-oxide{background:linear-gradient(168deg,rgba(135,55,37,.20),rgba(12,18,16,.92) 62%);border:1px solid rgba(135,55,37,.5)}
.hr-panel.inset,.hr-plate,.hr-panel{box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.hr-table th{background:rgba(8,14,13,.9)}
.hr-table tbody tr:hover{background:rgba(107,255,122,.05)}
.hr-meter{background:rgba(6,12,11,.9)}
.hr-input{background:rgba(8,14,13,.85)}
::-webkit-scrollbar-track{background:var(--murk-0)}
::-webkit-scrollbar-thumb{background:#1c2c26;border:2px solid var(--murk-0)}
.hr-grain::after{opacity:.34}

/* brass + bone: the earned metal */
.hr-brass{color:var(--brass)}
.hr-bone{color:var(--bone)}
.hr-tag.gold{border-color:rgba(201,162,39,.6);color:var(--brass)}
.hr-tally i{background:currentColor}

/* ── gantry spine (the new layout's backbone) ───────────────── */
.hr2-root{display:grid;grid-template-columns:78px 1fr;min-height:100vh}
.hr2-gantry{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 0 16px;background:linear-gradient(180deg,rgba(8,14,13,.96),rgba(12,20,18,.9));border-right:1px solid var(--line-2);z-index:30;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.hr2-gantry::-webkit-scrollbar{width:0;height:0}
.hr2-gantry>nav{min-height:0}
@media(max-height:900px){.hr2-gantry .brand-vert{display:none}}
@media(max-height:820px){.hr2-rung .hr2-vert{display:none}.hr2-rung{padding:10px 0}.hr2-gantry{gap:10px}}
.hr2-gantry .stripe{width:100%;flex:none}
.hr2-vert{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.24em;font-size:15px;color:var(--ink-2)}
.hr2-rung{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 0;width:100%;background:none;border:none;border-left:2px solid transparent;cursor:pointer;color:var(--ink-3);font-family:var(--mono);font-size:9px;letter-spacing:.14em}
.hr2-rung:hover{color:var(--acid)}
.hr2-rung.on{color:var(--warp);border-left-color:var(--warp);background:rgba(107,255,122,.06)}
.hr2-rung b{font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:.06em}

/* ── bands ──────────────────────────────────────────────────── */
.hr2-band{position:relative;overflow:hidden;isolation:isolate}
.hr2-band>.inner{position:relative;z-index:5;padding:110px clamp(24px,5vw,86px)}
.hr2-band.tight>.inner{padding:76px clamp(24px,5vw,86px)}
.hr2-edge-top{border-top:1px solid var(--line-2)}

/* stepped descent for the rank ladder */
.hr2-step{position:relative;border-left:1px solid var(--line-2)}
.hr2-step::before{content:'';position:absolute;left:-1px;top:0;width:14px;height:1px;background:var(--line-2)}

@media(max-width:900px){
  .hr2-root{grid-template-columns:1fr}
  .hr2-gantry{position:sticky;height:auto;flex-direction:row;gap:4px;padding:0;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line-2)}
  .hr2-gantry .stripe{display:none}
  .hr2-rung{flex-direction:row;gap:8px;width:auto;padding:12px 14px;border-left:none;border-bottom:2px solid transparent;white-space:nowrap}
  .hr2-rung.on{border-left-color:transparent;border-bottom-color:var(--warp)}
  .hr2-band>.inner{padding:56px 20px}
}

/* ── site-wide shattered backdrop (fixed, faint parallax) ───── */
.hr2-bg{position:absolute;inset:0;z-index:0;pointer-events:none;--par:0px;background-color:#030807;background-image:url("assets/hr-moon-far2.webp");background-repeat:no-repeat;background-attachment:fixed;background-position:center calc(50% + var(--par));background-size:cover}
/* sharp moon on top, its edges dissolved into the far field so there is no seam */
.hr2-bg::before{content:'';position:absolute;inset:0;background-image:url("assets/hr-moon.webp");background-repeat:no-repeat;background-attachment:fixed;background-position:center calc(50% + var(--par));background-size:cover}
.hr2-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(58% 52% at 76% 34%,rgba(3,8,7,.62) 0%,rgba(3,8,7,.4) 46%,rgba(3,8,7,.16) 76%,rgba(3,8,7,0) 100%),linear-gradient(180deg,rgba(3,8,7,.1) 0%,rgba(3,8,7,.06) 44%,rgba(3,8,7,.24) 100%)}
/* starfield behind the moon so the void isn't dead */
.hr2-root{position:relative;z-index:1;background:transparent}
html,body{background:#030807}
.hr2-band{background:transparent!important}
#top .hr2-veil,#top .hr2-glow{display:none}
.hr2-band>.inner{position:relative;z-index:5}
.hr2-veil{position:absolute;inset:0;z-index:1;pointer-events:none}
.hr2-gantry{background:linear-gradient(180deg,rgba(5,10,9,.92),rgba(8,14,13,.86));backdrop-filter:blur(6px)}

/* content floats over the shared backdrop — never restyle sticky chrome */
.hr2-bg~*:not(.hr2-gantry):not(.hr2-enter):not(aside){position:relative;z-index:1}
.hr2-bg~aside{z-index:20}

/* ── translucency pass: the void reads through the chrome ───── */
.hr-panel{background:rgba(12,24,20,.46);backdrop-filter:blur(7px)}
.hr-panel.inset{background:rgba(6,14,12,.5)}
.hr-plate{background:linear-gradient(168deg,rgba(62,122,99,.13) 0%,rgba(9,18,15,.5) 46%,rgba(5,12,10,.6) 100%);backdrop-filter:blur(7px)}
.hr-plate-moss{background:linear-gradient(168deg,rgba(107,255,122,.11),rgba(7,16,13,.56) 60%);backdrop-filter:blur(6px)}
.hr-plate-oxide{background:linear-gradient(168deg,rgba(135,55,37,.19),rgba(9,16,14,.58) 62%);backdrop-filter:blur(6px)}
.hr-table th{background:rgba(5,12,10,.62)}
.hr-input{background:rgba(5,12,10,.55)}
.hr-panel,.hr-plate,.hr-panel.inset{box-shadow:none}
.hr2-gantry{background:linear-gradient(180deg,rgba(4,10,8,.62),rgba(6,14,11,.5));backdrop-filter:blur(12px)}

/* ── interaction layer: reveal, tenets, accordions, drawers ── */
.hr-rev{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.hr-rev.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hr-rev{opacity:1;transform:none;transition:none}}
.hr2-clock{display:inline-flex;align-items:center;gap:7px}
.hr2-clock i{width:6px;height:6px;flex:none;border-radius:50%}

/* council seal in the doctrine rail */
.hr2-seal{margin-top:26px;width:96px;height:96px;display:grid;place-content:center;gap:4px;text-align:center;border:1px solid rgba(201,162,39,.45);background:radial-gradient(circle at 50% 40%,rgba(201,162,39,.14),transparent 70%);transform:rotate(-4deg)}
.hr2-seal .hr-mono:first-child{font-size:26px;letter-spacing:.1em;color:var(--brass)}
.hr2-seal .hr-mono:last-child{font-size:8px;letter-spacing:.28em;color:var(--ink-3)}

/* tenets */
.hr2-tenets{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;align-items:stretch}
.hr2-tenets.stack{grid-template-columns:1fr}
@media(max-width:1180px){.hr2-tenets{grid-template-columns:1fr}}
.hr2-tenet{position:relative;overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:26px 24px 0;background:rgba(17,28,25,.72);border:1px solid var(--line);border-top:3px solid var(--tone);backdrop-filter:blur(3px);cursor:pointer;color:var(--ink-1,inherit);transition:background .22s,transform .22s,border-color .22s}
.hr2-tenet:hover{background:rgba(24,38,33,.82);transform:translateY(-2px)}
.hr2-tenet.on{background:color-mix(in oklab,var(--tone) 11%,rgba(12,20,18,.9))}
.hr2-tenet-num{position:absolute;right:8px;bottom:-6px;font-size:120px;line-height:.7;color:var(--tone);opacity:.09;pointer-events:none;transition:opacity .3s,transform .3s}
.hr2-tenet.on .hr2-tenet-num{opacity:.2;transform:translateY(-6px)}
.hr2-tenet-kick{display:block;font-size:8.5px;letter-spacing:.28em;color:var(--tone);margin-bottom:14px}
.hr2-tenet-body{font-size:13.5px;line-height:1.6;color:var(--ink-2);position:relative;z-index:2}
.hr2-tenet-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.22,.61,.36,1);position:relative;z-index:2}
.hr2-tenet.on .hr2-tenet-more{grid-template-rows:1fr}
.hr2-tenet-more-in{overflow:hidden;display:block;font-family:var(--mono);font-size:11.5px;line-height:1.65;color:var(--acid)}
.hr2-tenet.on .hr2-tenet-more-in{padding-top:16px}
.hr2-tenet-bar{margin-top:auto;height:3px;background:var(--tone);opacity:.25;transform:scaleX(0);transform-origin:left;transition:transform .34s,opacity .34s}
.hr2-tenet.on .hr2-tenet-bar{transform:none;opacity:.9}
.hr2-tenet::after{content:'';display:block;height:22px}

/* accordion */
.hr2-acc{display:grid;gap:2px}
.hr2-acc-item{background:rgba(8,14,13,.72);border:1px solid var(--line);transition:border-color .2s}
.hr2-acc-item.on{border-color:var(--verdigris);background:rgba(14,26,22,.82)}
.hr2-acc-head{display:grid;grid-template-columns:38px 1fr 26px;align-items:center;gap:16px;width:100%;text-align:left;padding:17px 20px;background:none;border:none;cursor:pointer;color:inherit}
.hr2-acc-n{font-size:10px;letter-spacing:.2em;color:var(--brass)}
.hr2-acc-t{font-size:21px;letter-spacing:.04em;color:var(--work)}
.hr2-acc-item.on .hr2-acc-t{color:var(--acid)}
.hr2-acc-sign{position:relative;width:14px;height:14px;justify-self:end}
.hr2-acc-sign::before,.hr2-acc-sign::after{content:'';position:absolute;inset:50% 0 auto;height:1.5px;background:var(--brass);transition:transform .28s}
.hr2-acc-sign::after{transform:rotate(90deg)}
.hr2-acc-item.on .hr2-acc-sign::after{transform:rotate(0)}
.hr2-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.22,.61,.36,1)}
.hr2-acc-item.on .hr2-acc-panel{grid-template-rows:1fr}
.hr2-acc-panel>p{overflow:hidden;margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-2);padding:0 20px 0 74px;max-width:820px}
.hr2-acc-item.on .hr2-acc-panel>p{padding-bottom:22px}
@media(max-width:700px){.hr2-acc-panel>p{padding-left:20px}}

/* rank rows */
.hr2-rank{display:grid;align-items:center;width:100%;text-align:left;cursor:pointer;color:inherit;font:inherit;transition:background .2s,transform .2s}
.hr2-rank:hover{transform:translateX(3px);background:rgba(24,38,33,.8)}
.hr2-rank.on{background:rgba(107,255,122,.07)}
.hr2-rank-sign{position:relative;width:13px;height:13px;flex:none}
.hr2-rank-sign::before,.hr2-rank-sign::after{content:'';position:absolute;inset:50% 0 auto;height:1.5px;background:var(--brass);transition:transform .28s}
.hr2-rank-sign::after{transform:rotate(90deg)}
.hr2-rank.on .hr2-rank-sign::after{transform:rotate(0)}
.hr2-rank-drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.22,.61,.36,1);background:rgba(6,12,11,.7);border-left:3px solid var(--warp)}
.hr2-rank-drawer.on{grid-template-rows:1fr}
.hr2-rank-drawer-in{overflow:hidden;padding:0 26px}
.hr2-rank-drawer.on .hr2-rank-drawer-in{padding-top:18px;padding-bottom:20px}

/* wing segmented control + dimming */
.hr2-seg{display:flex;gap:2px;margin-top:16px;flex-wrap:wrap}
.hr2-seg-btn{padding:9px 15px;background:rgba(8,14,13,.72);border:1px solid var(--line-2);color:var(--ink-3);font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .18s}
.hr2-seg-btn:hover{color:var(--acid);border-color:var(--verdigris)}
.hr2-seg-btn.on{background:var(--warp);border-color:var(--warp);color:#08120f}
.hr2-seg-btn.ox.on{background:#d1836a;border-color:#d1836a}
.hr2-wing{transition:opacity .35s,filter .35s}
.hr2-wing.dim{opacity:.34;filter:saturate(.4)}
.hr2-spec{transition:background .18s}
.hr2-spec:hover{background:color-mix(in oklab,var(--tone) 9%,rgba(6,14,11,.34)) !important}

/* toolkit plates */
.hr2-tool{position:relative;display:grid;grid-template-columns:54px 1fr 20px;gap:16px;align-items:start;text-align:left;cursor:pointer;color:inherit;font:inherit;transition:transform .2s,border-color .2s}
.hr2-tool:hover{transform:translateY(-3px)}
.hr2-tool.on{border-color:var(--verdigris)}
.hr2-tool-n{font-size:30px;color:var(--brass);line-height:.9}
.hr2-tool-sign{position:relative;width:13px;height:13px;margin-top:8px}
.hr2-tool-sign::before,.hr2-tool-sign::after{content:'';position:absolute;inset:50% 0 auto;height:1.5px;background:var(--brass);transition:transform .28s}
.hr2-tool-sign::after{transform:rotate(90deg)}
.hr2-tool.on .hr2-tool-sign::after{transform:rotate(0)}
.hr2-tool-panel{grid-column:2/4;display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.22,.61,.36,1)}
.hr2-tool.on .hr2-tool-panel{grid-template-rows:1fr}
.hr2-tool-panel-in{overflow:hidden;display:grid;gap:7px}
.hr2-tool.on .hr2-tool-panel-in{padding-top:16px}
.hr2-tool-li{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--acid);padding-left:16px;position:relative}
.hr2-tool-li::before{content:'';position:absolute;left:0;top:6px;width:5px;height:5px;background:var(--warp);transform:rotate(45deg)}


/* ── Crew entrance ──────────────────────────────────────────────────────
   Fixed top-right shortcut into the member portal. Wears the .hr-brand
   stamp treatment — hand-cut angle, warpstone edge — but sized and lit
   like a button so it reads as the one thing on the page you can enter. */
.hr2-enter{
  position:fixed;top:18px;right:20px;z-index:40;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  padding:11px 16px;text-decoration:none;
  border:1px solid var(--warp);color:var(--warp);
  background:rgba(57,255,20,.07);
  transform:rotate(-1.1deg);
  backdrop-filter:blur(4px);
  transition:background .14s linear,box-shadow .14s linear,transform .14s linear;
}
.hr2-enter:hover{
  background:rgba(57,255,20,.17);
  box-shadow:0 0 0 1px var(--warp),0 0 18px rgba(57,255,20,.25);
  transform:rotate(-1.1deg) translateY(-1px);
}
.hr2-enter:focus-visible{outline:2px solid var(--warp);outline-offset:3px}
.hr2-enter i{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--warp);box-shadow:0 0 8px var(--warp);
}
@media(max-width:900px){
  .hr2-enter{top:12px;right:12px;font-size:9px;padding:14px 13px;letter-spacing:.16em;gap:7px}
}
@media(prefers-reduced-motion:reduce){.hr2-enter{transition:none}}