/* ==========================================================================
   FERRUM — Bureau for Structural Works
   Industrial brutalism. Flat fields, hard edges, no rounded corners,
   no soft shadows, no gradients (except functional hazard stripes).
   ========================================================================== */

:root{
  --c:      #aeaca6;   /* concrete field */
  --c2:     #a3a19b;   /* concrete, shaded pour */
  --c3:     #b8b6b0;   /* concrete, light pour */
  --ink:    #171611;   /* near-black structure */
  --ink2:   #211f19;   /* raised black panel */
  --paper:  #e9e7df;   /* chalk / print white */
  --red:    #c2280d;   /* hazard red on concrete */
  --redb:   #ef3512;   /* hazard red on black */
  --barH:   48px;
  --hair:   1px solid var(--ink);
  --rule:   2px solid var(--ink);
  --ease-slam: cubic-bezier(.85,0,.15,1);
  --ease-drop: cubic-bezier(.9,0,.1,1);
  --f-disp: 'Archivo Black', 'Arial Black', sans-serif;
  --f-cond: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-mono: 'JetBrains Mono', 'Courier New', monospace;
  /* concrete textures injected by script.js as data-URLs */
  --texL: none;
  --texD: none;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; border-radius:0 !important; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background: var(--texL) var(--c);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.mono{ font-family: var(--f-mono); }
.bshd{ font-family: var(--f-cond); font-weight:800; }
.red-t{ color: var(--red); }
.red{ color: var(--redb); }

::selection{ background: var(--red); color: var(--paper); }

/* scrollbar — squared, structural */
html{ scrollbar-color: var(--ink) var(--c2); scrollbar-width: thin; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background: var(--c2); }
::-webkit-scrollbar-thumb{ background: var(--ink); border:2px solid var(--c2); }
::-webkit-scrollbar-thumb:hover{ background: var(--red); }

:focus-visible{ outline: 3px solid var(--red); outline-offset: 2px; }

.skip{
  position: fixed; top: -60px; left: 8px; z-index: 300;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; font: 700 12px var(--f-mono); letter-spacing:.12em;
  text-decoration: none; transition: top .15s steps(3);
}
.skip:focus{ top: calc(var(--barH) + 8px); }

/* ==========================================================================
   LOADER — roller shutter
   ========================================================================== */
.loader{
  position: fixed; inset: 0; z-index: 200;
  background: var(--texD) var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform .55s steps(11);
}
.loader.done{ transform: translateY(-101%); }
.loader.gone{ display:none; }
.loader-box{ color: var(--paper); font-size: 13px; letter-spacing:.08em; line-height: 1.9; min-width: 300px; }
.loader-box .ln{
  opacity: 0; white-space: pre;
  animation: ln-in .01s steps(1) forwards;
  animation-delay: calc(var(--l) * .16s + .1s);
}
@keyframes ln-in{ to{ opacity:1; } }
.nojs .loader{ display:none; }
@media (prefers-reduced-motion: reduce){
  .loader{ display:none; }
}

/* ==========================================================================
   HEADER BAR
   ========================================================================== */
.bar{
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: var(--barH);
  background: var(--ink);
  color: var(--paper);
  display: flex; align-items: stretch;
  font-size: 11px; letter-spacing: .14em;
  border-bottom: 2px solid var(--ink);
}
.bar > *{ display:flex; align-items:center; padding: 0 16px; }
.back{
  color: var(--paper); text-decoration: none; font-weight: 700;
  background: var(--ink); border-right: 1px solid var(--paper);
  white-space: nowrap;
}
.back:hover, .back:focus-visible{ background: var(--redb); color: var(--ink); }
.bar-name{ flex: 1; white-space: nowrap; overflow: hidden; }
.bar-meta{ border-left: 1px solid var(--paper); white-space: nowrap; }
.bar-live{ border-left: 1px solid var(--paper); color: var(--redb); font-weight:700; white-space: nowrap; gap:8px; }
.live-dot{
  width: 8px; height: 8px; background: var(--redb); display: inline-block;
  animation: live 1.6s steps(2) infinite;
}
@keyframes live{ 0%,49%{ opacity:1; } 50%,100%{ opacity:.15; } }
@media (max-width: 860px){ .bar-meta{ display:none; } }
@media (max-width: 560px){ .bar-name{ display:none; } .bar-live{ margin-left:auto; } }
@media (prefers-reduced-motion: reduce){ .live-dot{ animation:none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
main{ padding-top: var(--barH); }

.hero{
  min-height: calc(100vh - var(--barH));
  min-height: calc(100svh - var(--barH));
  display: flex; flex-direction: column;
  position: relative;
  border-bottom: var(--rule);
  overflow: hidden;
}
.hero-rail{
  position: absolute; top:0; bottom:0; left:0; width: 44px;
  border-right: var(--hair);
  overflow: hidden;
}
.hero-rail span{
  position: absolute; top: 24px; left: 50%;
  transform: rotate(90deg) translateY(-50%);
  transform-origin: 0 0;
  white-space: nowrap;
  font-size: 10px; letter-spacing: .22em; color: var(--ink);
}
.hero-main{
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 72px 5vw 40px calc(44px + 5vw);
}
.hero-over{
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  margin-bottom: 2.2vh;
  display:flex; align-items:center;
}
.hz-chip{
  display:inline-block; width: 42px; height: 14px;
  background: repeating-linear-gradient(-45deg, var(--red) 0 7px, var(--ink) 7px 14px);
}
.hero-word{
  font-family: var(--f-disp);
  font-size: clamp(72px, 16.8vw, 264px);
  line-height: .84;
  letter-spacing: -.015em;
  color: var(--ink);
  display: flex;
  user-select: none;
}
.lt{ display:inline-block; overflow:hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.lt i{ display:inline-block; font-style: normal; transform: translateY(-112%); }
body.ready .lt i, .nojs .lt i{
  transform: translateY(0);
  transition: transform .5s var(--ease-drop);
  transition-delay: calc(var(--i) * .07s + .15s);
}
.nojs .lt i{ transition:none; }
.hero-underbar{ display:flex; height: 14px; margin-top: 3vh; width: min(720px, 62vw); }
.hub-red{ background: var(--red); width: 0%; }
.hub-ink{ background: var(--ink); width: 0%; }
body.ready .hub-red{ width: 22%; transition: width .4s var(--ease-slam) .95s; }
body.ready .hub-ink{ width: 78%; transition: width .4s var(--ease-slam) 1.05s; }
.nojs .hub-red{ width:22%; } .nojs .hub-ink{ width:78%; }
.hero-sub{
  margin-top: 3.2vh;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: .18em;
  line-height: 2;
}
.hero-num{
  position: absolute; right: 2vw; bottom: 34px;
  font-size: clamp(120px, 22vh, 240px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  opacity: .55;
  pointer-events: none;
}
.hero-strip{
  display: flex; flex-wrap: wrap;
  border-top: var(--rule);
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
}
.hero-strip span{
  padding: 12px 18px;
  border-right: var(--hair);
  background: var(--c3);
}
.hero-strip .strip-scroll{
  margin-left: auto; border-right: 0; border-left: var(--hair);
  background: var(--ink); color: var(--paper);
  animation: strip-blink 2.4s steps(2) infinite;
}
@keyframes strip-blink{ 0%,74%{ opacity:1; } 75%,100%{ opacity:.35; } }
@media (prefers-reduced-motion: reduce){
  .hero-strip .strip-scroll{ animation:none; }
  .lt i{ transform:none; transition:none !important; }
  .hub-red{ width:22% !important; transition:none !important; }
  .hub-ink{ width:78% !important; transition:none !important; }
}
@media (max-width: 720px){
  .hero-rail{ display:none; }
  .hero-main{ padding: 56px 6vw 24px; }
  .hero-num{ font-size: 96px; bottom: 64px; opacity:.4; }
  .hero-strip span{ flex: 1 1 40%; text-align:center; }
  .hero-strip .strip-scroll{ flex-basis: 100%; border-left:0; border-top: var(--hair); }
}

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker{
  background: var(--texD) var(--ink);
  color: var(--paper);
  overflow: hidden;
  border-bottom: var(--rule);
}
.ticker-row{
  display: flex; width: max-content;
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  padding: 13px 0;
  animation: tick 30s linear infinite;
}
.ticker-row span{ white-space: nowrap; }
@keyframes tick{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-row{ animation:none; } }

/* ==========================================================================
   SECTION SCAFFOLD
   ========================================================================== */
.sect{ border-bottom: var(--rule); }
.sect-head{
  display: flex; align-items: stretch;
  border-bottom: var(--rule);
  background: var(--c3);
}
.sect-no{
  font-size: 34px; line-height: 1;
  padding: 10px 18px 6px;
  background: var(--ink); color: var(--paper);
  display:flex; align-items:center;
}
.sect-title{
  display:flex; align-items:center;
  padding: 0 20px;
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
}
.sect-fill{ flex:1; background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--ink) 10px 11px); opacity:.25; margin: 14px 16px; }
.sect-head--dark{ background: var(--ink2); border-bottom: 2px solid var(--paper); }
.sect-head--dark .sect-no{ background: var(--redb); color: var(--ink); }
.sect-head--dark .sect-title{ color: var(--paper); }
.sect-head--dark .sect-fill{ background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--paper) 10px 11px); opacity:.2; }

/* slam-in reveal */
[data-slam]{
  opacity: 0;
  transform: translateY(26px);
}
[data-slam].in{
  opacity: 1;
  transform: translateY(0);
  transition:
    transform .38s var(--ease-slam) calc(var(--d, 0) * .06s),
    opacity .18s steps(2) calc(var(--d, 0) * .06s);
}
.nojs [data-slam]{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-slam]{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   DOCTRINE
   ========================================================================== */
.doctrine-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--ink);
}
.doc-cell{
  background: var(--texL) var(--c);
  padding: clamp(20px, 3vw, 44px);
  min-height: clamp(180px, 24vw, 300px);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
}
.doc-cell:hover{ background-color: var(--c3); }
.doc-no{
  font-size: clamp(44px, 5.4vw, 84px); line-height: .9;
  color: transparent; -webkit-text-stroke: 2px var(--ink);
}
.doc-cell:hover .doc-no{ color: var(--red); -webkit-text-stroke: 2px var(--red); }
.doc-line{
  font-family: var(--f-disp);
  font-size: clamp(17px, 1.9vw, 30px);
  line-height: 1.12;
  letter-spacing: -.01em;
}
@media (max-width: 940px){ .doctrine-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .doctrine-grid{ grid-template-columns: 1fr; } .doc-cell{ min-height: 150px; } }

/* ==========================================================================
   GENERATOR — pinned centerpiece
   ========================================================================== */
.gen-wrap{
  height: 380vh;
  position: relative;
  background: var(--texD) var(--ink);
  border-bottom: var(--rule);
}
.gen-sticky{
  position: sticky; top: var(--barH);
  height: calc(100vh - var(--barH));
  height: calc(100svh - var(--barH));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.gen-body{ flex:1; display:flex; min-height:0; }
.gen-stage{
  flex: 1; position: relative; min-width: 0;
}
.gen-stage svg{
  position:absolute; inset: 0; width:100%; height:100%; display:block;
}
.gen-noscript{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  color: var(--paper); letter-spacing:.2em; font-size: 12px; white-space: nowrap;
}

/* svg stroke classes (used by script-generated elements) */
.gen-stage .st       { stroke: var(--paper); fill: none; stroke-width: 1.6; }
.gen-stage .st.thin  { stroke-width: 1; opacity: .78; }
.gen-stage .st.faint { stroke-width: 1; opacity: .38; }
.gen-stage .st.heavy { stroke-width: 3; }
.gen-stage .st.red   { stroke: var(--redb); }
.gen-stage .st.dash  { stroke-dasharray: 6 6 !important; }
.gen-stage text{
  fill: var(--paper);
  font-family: var(--f-mono);
  letter-spacing: .06em;
}
.gen-stage text.red{ fill: var(--redb); stroke:none; }
.gen-stage .t{ opacity: 0; }
.gen-stage .t.on{ opacity: 1; animation: flick .22s steps(3); }
@keyframes flick{ 0%{opacity:0} 40%{opacity:1} 60%{opacity:.2} 100%{opacity:1} }
@media (prefers-reduced-motion: reduce){ .gen-stage .t.on{ animation:none; } }

/* inspection stamp — slams in at 100% */
.gen-stage .stamp{ opacity: 0; }
.gen-stage.complete .stamp{ opacity: 1; animation: flick .3s steps(4); }
.gen-stage .stamp text{ font-family: var(--f-mono); letter-spacing: .12em; }

/* scan line after completion */
.gen-stage .scan{ opacity: 0; }
.gen-stage.complete .scan{
  opacity: .8;
  animation: scan 7s linear infinite;
}
@keyframes scan{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(var(--sw, 1200px)); }
}
@media (prefers-reduced-motion: reduce){ .gen-stage.complete .scan{ animation:none; opacity:0; } }

.gen-hud{
  width: 250px; flex: none;
  border-left: 1px solid var(--paper);
  color: var(--paper);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 18px;
  font-size: 11px; letter-spacing: .14em;
  background: var(--ink);
}
.hud-cap{ font-weight: 700; border-bottom: 1px solid var(--paper); padding-bottom: 10px; }
.hud-phases{ list-style: none; display:flex; flex-direction: column; gap: 7px; }
.hud-phases li{ opacity: .38; white-space: nowrap; }
.hud-phases li.cur{ opacity: 1; color: var(--redb); font-weight: 700; }
.hud-phases li.done{ opacity: .85; }
.hud-phases li.done::after{ content: " ✓"; }
.hud-pct{ line-height: .8; }
.hud-pct .bshd{ font-size: 74px; color: var(--paper); }
.hud-pct-sym{ font-size: 22px; font-family: var(--f-cond); font-weight: 700; margin-left: 4px; }
.hud-seed{ opacity: .75; }
.btn{
  font: 700 12px var(--f-mono);
  letter-spacing: .16em;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--paper);
  padding: 12px 10px;
  cursor: pointer;
  text-transform: uppercase;
}
.btn:hover{ background: var(--redb); border-color: var(--redb); color: var(--ink); }
.btn:active{ transform: translate(2px, 2px); }
.hud-note{ opacity: .55; margin-top: auto; }
@media (max-width: 860px){
  .gen-wrap{ height: 300vh; }
  .gen-body{ flex-direction: column; }
  .gen-hud{
    width: auto; order: 2;
    border-left: 0; border-top: 1px solid var(--paper);
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 12px 18px; padding: 12px 14px;
  }
  .hud-cap{ border-bottom: 0; padding-bottom: 0; }
  .hud-phases{ display: none; }
  .hud-pct .bshd{ font-size: 34px; }
  .hud-pct-sym{ font-size: 14px; }
  .hud-note{ margin-top: 0; display:none; }
  .btn{ padding: 9px 12px; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce){
  .gen-wrap{ height: auto; }
  .gen-sticky{ position: static; height: calc(100vh - var(--barH)); }
}

/* ==========================================================================
   WORKS INDEX
   ========================================================================== */
.works{ display: flex; flex-direction: column; }
.w-row{
  display: grid;
  grid-template-columns: 84px minmax(0,1.6fr) 1fr 100px 110px 70px 150px;
  gap: 0 14px;
  align-items: center;
  padding: 15px 5vw 15px 24px;
  border-bottom: var(--hair);
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .1em;
  white-space: nowrap;
}
.w-row:last-child{ border-bottom: 0; }
.w-head{
  font-weight: 700; font-size: 10px; letter-spacing: .22em;
  background: var(--c2);
  padding-top: 9px; padding-bottom: 9px;
}
a.w-row:hover, a.w-row:focus-visible{
  background: var(--ink); color: var(--paper);
}
a.w-row:hover .w-no, a.w-row:focus-visible .w-no{ color: var(--redb); }
a.w-row:hover .red-t, a.w-row:focus-visible .red-t{ color: var(--redb); }
.w-no{ font-weight: 700; }
.w-name{ font-family: var(--f-disp); font-size: 15px; letter-spacing: .02em; overflow:hidden; text-overflow: ellipsis; }
@media (max-width: 860px){
  .w-row{ grid-template-columns: 64px minmax(0,1.6fr) 84px 54px 130px; padding-right: 5vw; }
  .w-hide{ display: none; }
}
@media (max-width: 520px){
  .w-row{ grid-template-columns: 56px minmax(0,1fr) 46px 110px; font-size: 11px; }
  .w-row > span:nth-child(4){ display:none; } /* span col */
  .w-name{ font-size: 13px; }
}

/* ==========================================================================
   MATERIAL
   ========================================================================== */
.mat-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--ink);
}
.mat-cell{
  background: var(--texL) var(--c);
  padding: 0 0 26px;
  display: flex; flex-direction: column;
}
.mat-swatch{
  width: 100%; height: 148px; display: block;
  border-bottom: var(--rule);
  background: var(--c2);
}
.mat-name{
  font-size: clamp(40px, 4.4vw, 64px); line-height: 1;
  padding: 18px 20px 0;
}
.mat-role{
  font-size: 10px; font-weight: 700; letter-spacing: .26em;
  color: var(--paper); background: var(--ink);
  align-self: flex-start;
  margin: 10px 20px 14px;
  padding: 4px 10px;
}
.mat-cell:hover .mat-role{ background: var(--red); }
.mat-spec{ font-size: 11px; letter-spacing: .08em; line-height: 1.9; padding: 0 20px; }
@media (max-width: 940px){ .mat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .mat-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  background: var(--texD) var(--ink);
  color: var(--paper);
}
.foot-hz{
  height: 18px;
  background: repeating-linear-gradient(-45deg, var(--redb) 0 14px, var(--ink) 14px 28px);
  border-bottom: 2px solid var(--paper);
}
.foot-big{
  font-family: var(--f-disp);
  font-size: clamp(52px, 11.5vw, 190px);
  line-height: .9;
  letter-spacing: -.015em;
  padding: 8vh 5vw 6vh;
  color: var(--c);
  user-select: none;
}
.foot-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--paper);
  border-top: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
}
.foot-cell{
  background: var(--ink);
  padding: 26px 24px 30px;
  font-size: 11px; letter-spacing: .1em; line-height: 2;
}
.foot-cap{
  font-weight: 700; font-size: 10px; letter-spacing: .26em;
  color: var(--redb);
  margin-bottom: 12px;
}
.foot-link{ color: var(--paper); text-decoration: none; border-bottom: 2px solid var(--redb); font-weight: 700; }
.foot-link:hover, .foot-link:focus-visible{ background: var(--redb); color: var(--ink); }
.foot-base{
  padding: 18px 5vw;
  font-size: 10px; letter-spacing: .2em; opacity: .55;
}
@media (max-width: 860px){ .foot-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .foot-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   CROSSHAIR CURSOR (fine pointers only, enabled by JS)
   ========================================================================== */
.xh{ display: none; }
body.xh-on{ cursor: none; }
body.xh-on a, body.xh-on button{ cursor: none; }
body.xh-on .xh{
  display: block;
  position: fixed; inset: 0; z-index: 150;
  pointer-events: none;
  mix-blend-mode: difference;
}
.xh-v, .xh-h{ position: absolute; background: #9a9a9a; }
.xh-v{ top:0; bottom:0; width:1px; left:0; }
.xh-h{ left:0; right:0; height:1px; top:0; }
.xh-box{
  position: absolute; width: 14px; height: 14px;
  border: 1.5px solid #fff;
  transform: translate(-50%,-50%);
}
.xh.hit .xh-box{ background:#fff; width: 10px; height: 10px; }
.xh-tag{
  position: absolute;
  font-size: 9px; letter-spacing: .18em; font-weight: 700;
  color: #fff;
  transform: translate(14px, 14px);
  white-space: nowrap;
}