/* ==============================================================
   ELECTROZAVOD / ARCHITECTURE — VISUAL SYSTEM v2
   Heavier than the mother site. Anthracite + raw concrete +
   oxidized copper. System fonts. No shadows, no radii, no play.
   --------------------------------------------------------------
   Order: tokens → reset → type → header → hero → sections →
   index → spec table → frames → prose → footer → breakpoints
   ============================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* palette */
  --c0: #141619;             /* near-black ground            */
  --c1: #1a1d20;             /* anthracite, primary surface  */
  --c2: #212528;             /* raised surface               */
  --c3: #2b3034;             /* hover surface                */
  --line: #3a4045;           /* hairline                     */
  --line-heavy: #464c52;     /* heavy rule (2–3px)           */
  --concrete: #b3b1ab;       /* raw concrete text/fields     */
  --concrete-dim: #84827d;   /* secondary concrete           */
  --concrete-dark: #4e5254;  /* ghost display text           */
  --ink: #e6e4df;            /* primary text                 */
  --ink-dim: #a5a39e;        /* secondary text               */
  --copper: #3e6b5f;         /* oxidized copper (verdigris)  */
  --copper-hi: #5fa08d;      /* verdigris highlight          */

  /* type — system only */
  --f-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-body: var(--f-display);
  --f-serif: Charter, Georgia, "Times New Roman", serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* scale — modular, monumental */
  --s--2: 0.6875rem;   /* 11px  mono labels   */
  --s--1: 0.8125rem;   /* 13px  meta          */
  --s-0: 1rem;         /* 16px  body          */
  --s-1: 1.1875rem;    /* 19px  large body    */
  --s-2: 1.4375rem;    /* 23px  subheads      */
  --s-3: clamp(1.75rem, 4vw, 2.6rem);    /* section titles */
  --s-4: clamp(2.5rem, 8vw, 5.5rem);     /* page titles    */
  --s-5: clamp(3rem, 12vw, 8.5rem);      /* hero           */

  /* rhythm */
  --gut: clamp(20px, 5vw, 72px);
  --max: 1440px;
  --rule: 1px solid var(--line);
  --rule-2: 2px solid var(--line-heavy);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* sticky header offset for anchors */
}
h1, h2, h3 { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
body {
  background: var(--c0);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--s-0);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--copper-hi); }

/* text links carry a non-color affordance (a11y) */
.site-footer a,
.prose a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.site-footer a:hover,
.prose a:hover { text-decoration-color: var(--copper-hi); }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--copper); color: var(--c0); }

/* focus: precise, no play */
:focus { outline: 2px solid var(--copper-hi); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* skip link — hard block, hidden until keyboard focus */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  background: var(--copper);
  color: var(--c0);
  padding: 0.9em 1.6em;
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 100;
}
.skip-link:focus { transform: none; color: var(--c0); }

/* ---------- 3. TYPE UTILITIES ---------- */
.mono {
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.serif {
  font-family: var(--f-serif);
  font-size: var(--s-1);
  line-height: 1.7;
  color: var(--ink);
}

/* ---------- 4. HEADER ---------- */
.site-header {
  border-bottom: var(--rule-2);
  background: var(--c1);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .bar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 84px;
}
.brand { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.brand .name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brand .sub {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--concrete-dim);
}
.site-nav { display: flex; align-items: stretch; }
.site-nav a {
  display: flex;
  align-items: center;
  padding: 0 1.6em;
  border-left: var(--rule);
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: background 120ms linear, color 120ms linear;
}
.site-nav a:hover {
  background: var(--c2);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--copper-hi); /* drawn rule, not a shadow */
}
.site-nav a[aria-current="page"] {
  background: var(--copper);
  color: var(--c0);
}
.site-nav a[aria-current="page"]:hover { color: var(--c0); }

/* ---------- 5. HERO ---------- */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(72px, 14vw, 200px) var(--gut) clamp(56px, 9vw, 120px);
}
.hero .index {
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper-hi);
  margin-bottom: 2em;
}
.hero h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--s-5);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.hero h1 .dim { color: var(--concrete-dark); }
.hero .lede {
  margin-top: 2.4em;
  max-width: 52ch;
  font-family: var(--f-serif);
  font-size: var(--s-1);
  line-height: 1.75;
  color: var(--ink-dim);
}
.hero-tight { padding-top: clamp(64px, 11vw, 168px); }

/* ---------- 6. SECTIONS — monumental rhythm ---------- */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--gut);
  border-top: var(--rule-2);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.section-head h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--s-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.section-head .count {
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.24em;
  color: var(--concrete-dim);
  white-space: nowrap;
}

/* ---------- 7. PROJECT INDEX ---------- */
.project-index { border: var(--rule-2); }
.project-index a {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: 2em;
  align-items: center;
  padding: clamp(2em, 4.5vw, 3.2em) clamp(1.2em, 3vw, 2em);
  border-bottom: var(--rule);
  transition: background 120ms linear;
}
.project-index a:last-child { border-bottom: 0; }
.project-index a:hover {
  background: var(--c2);
  box-shadow: inset 3px 0 0 var(--copper);
}
.project-index a:hover .no { color: var(--copper-hi); }
.project-index .no {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  line-height: 0.9;
  color: var(--concrete-dark);
  transition: color 120ms linear;
}
.project-index .title {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4.5vw, 2.7rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.project-index .meta {
  display: block;
  margin-top: 0.5em;
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--concrete-dim);
}
.project-index .arrow { font-family: var(--f-mono); color: var(--concrete-dim); transition: transform 120ms linear; }
.project-index a:hover .arrow { color: var(--copper-hi); transform: translateX(6px); }

/* ---------- 8. PROJECT PAGE ---------- */
.project-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 11vw, 160px) var(--gut) clamp(32px, 5vw, 64px);
}
.project-hero h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--s-4);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.spec-table { width: 100%; border: var(--rule-2); }
.spec-table div {
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) 1fr;
  border-bottom: var(--rule);
}
.spec-table div:last-child { border-bottom: 0; }
.spec-table dt {
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--concrete-dim);
  padding: 1.1em 1.3em;
  border-right: var(--rule);
}
.spec-table dd { padding: 1.1em 1.3em; color: var(--ink); line-height: 1.7; }

/* ---------- 9. FRAMES (placeholders) ---------- */
.frame {
  border: var(--rule-2);
  background: repeating-linear-gradient(-45deg, var(--c1) 0 16px, var(--c0) 16px 32px);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame span {
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--concrete-dim);
}

/* ---------- 10. PROSE (long text) ---------- */
.prose {
  max-width: 68ch;
  font-family: var(--f-serif);
  font-size: var(--s-1);
  line-height: 1.8;
}
.prose p + p { margin-top: 1.2em; }
.prose h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--s-2);
  text-transform: uppercase;
  margin: 2em 0 0.7em;
}
.prose .mono { display: inline-block; margin-bottom: 0.4em; }

/* ---------- 11. FOOTER ---------- */
.site-footer {
  border-top: var(--rule-2);
  margin-top: clamp(56px, 10vw, 140px);
  background: var(--c1);
}
.site-footer .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--gut);
  display: flex;
  flex-wrap: wrap;
  gap: 1em 3em;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete-dim);
}
.site-footer a:hover { color: var(--copper-hi); }

/* ---------- 12. BREAKPOINTS ---------- */
@media (max-width: 860px) {
  .site-header .bar { flex-direction: column; min-height: 0; }
  .brand { padding: 1em 0; border-bottom: var(--rule); }
  .site-nav { border-top: 0; }
  .site-nav a { flex: 1; justify-content: center; padding: 1.1em 0.6em; border-left: 0; border-right: var(--rule); }
  .site-nav a:last-child { border-right: 0; }
  .site-nav a:hover { box-shadow: none; } /* stacked cells: color shift only */
  html { scroll-padding-top: 132px; } /* stacked header is taller */
}
@media (max-width: 620px) {
  .project-index a { grid-template-columns: 5rem 1fr; }
  .project-index .arrow { display: none; }
  .spec-table div { grid-template-columns: 1fr; }
  .spec-table dt { border-right: 0; border-bottom: var(--rule); padding-bottom: 0.5em; }
  .spec-table dd { padding-top: 0.7em; }
  .chain { font-size: var(--s--2); letter-spacing: 0.06em; line-height: 1.9; }
  .frame { min-height: 180px; }
  .brand .name { font-size: 0.95rem; letter-spacing: 0.08em; }
}

/* ---------- 13. SAFETY ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer { background: #fff; border-color: #000; }
}

/* ---------- 14. P-01 PROJECT PAGE COMPONENTS ---------- */
.project-hero .index {
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper-hi);
  margin-bottom: 1.6em;
}
.eq {
  margin-top: 1.6em;
  font-family: var(--f-mono);
  font-size: var(--s--1);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--concrete);
}
.chain {
  margin-top: 2em;
  border: var(--rule-2);
  padding: 1.4em 1.6em;
  font-family: var(--f-mono);
  font-size: var(--s--1);
  letter-spacing: 0.08em;
  line-height: 2.1;
  color: var(--ink);
  overflow-x: auto;
}
.chain em { font-style: normal; color: var(--copper-hi); }

.num-grid { border: var(--rule-2); }
.num-grid li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 2em;
  padding: clamp(1.8em, 3.5vw, 2.6em) clamp(1.2em, 2.6vw, 1.8em);
  border-bottom: var(--rule);
}
.num-grid li:last-child { border-bottom: 0; }
.num-grid .no {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 0.9;
  color: var(--concrete-dark);
}
.num-grid h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--s-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.num-grid p {
  margin-top: 0.5em;
  font-family: var(--f-serif);
  font-size: var(--s-0);
  line-height: 1.7;
  color: var(--ink-dim);
}
.num-grid .ref {
  margin-left: 0.8em;
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.14em;
  color: var(--concrete-dim);
}

.status-table { width: 100%; border-collapse: collapse; border: var(--rule-2); }
.status-table th {
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: left;
  color: var(--concrete-dim);
  padding: 1em 1.2em;
  border-bottom: var(--rule-2);
}
.status-table td {
  padding: 1em 1.2em;
  border-bottom: var(--rule);
  vertical-align: top;
  font-size: var(--s--1);
  line-height: 1.6;
  color: var(--ink);
}
.status-table tr:last-child td { border-bottom: 0; }
.status-table td.no {
  font-family: var(--f-mono);
  font-size: var(--s--1);
  color: var(--copper-hi);
  white-space: nowrap;
}
.status-table td.lvl {
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}
.status-table td.lvl-ok { color: var(--copper-hi); }
.status-table td.lvl-part { color: var(--concrete-dim); }
.status-table tbody tr:hover {
  background: var(--c2);
  box-shadow: inset 3px 0 0 var(--copper);
}

/* documents — quiet source index */
.sub-head {
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--concrete-dim);
  margin: clamp(32px, 5vw, 56px) 0 1em;
}
.doc-index li {
  display: flex;
  gap: 1.4em;
  padding: 0.55em 0;
  border-bottom: var(--rule);
  font-family: var(--f-mono);
  font-size: var(--s--1);
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.doc-index li:last-child { border-bottom: 0; }
.doc-index .no { color: var(--copper-hi); min-width: 2.5em; }
.doc-index em { font-style: normal; color: var(--concrete-dim); }

/* ---------- 15. P-01 CONTENT RAIL (TOC) ---------- */
.toc { display: none; }

@media (min-width: 1101px) {
  .with-toc {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
  }
  .toc {
    display: block;
    position: sticky;
    top: 120px;
    border-right: var(--rule);
    margin-left: var(--gut);
    padding: clamp(40px, 7vw, 96px) 0;
  }
  .toc .toc-title {
    display: block;
    margin-bottom: 1.4em;
  }
  .toc a {
    display: block;
    padding: 0.6em 1em 0.6em 0;
    font-family: var(--f-mono);
    font-size: var(--s--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--concrete-dim);
    transition: color 120ms linear, box-shadow 120ms linear;
  }
  .toc a:hover {
    color: var(--ink);
    box-shadow: inset -3px 0 0 var(--line-heavy);
  }
.toc a[aria-current] {
  color: var(--copper-hi);
  box-shadow: inset -3px 0 0 var(--copper);
}

/* focus = hover language, keyboard-driven */
.site-nav a:focus-visible,
.project-index a:focus-visible {
  box-shadow: inset 3px 0 0 var(--copper);
  outline: none;
}
.toc a:focus-visible {
  box-shadow: inset -3px 0 0 var(--copper);
  outline: none;
}

/* deliberate horizontal scroll for wide tables on phones */
.table-scroll { overflow-x: auto; }
.table-scroll .status-table { min-width: 640px; }
  .toc-body .section {
    max-width: none;
    margin: 0;
    padding-left: clamp(32px, 4vw, 72px);
  }
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gut);
  margin-top: clamp(28px, 4vw, 56px);
}
.duo h3 {
  font-family: var(--f-mono);
  font-size: var(--s--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--concrete-dim);
  margin-bottom: 0.8em;
}
.duo h3.ok { color: var(--copper-hi); }
.duo li {
  font-family: var(--f-serif);
  font-size: var(--s-0);
  line-height: 1.65;
  color: var(--ink-dim);
  padding: 0.45em 0;
  border-bottom: var(--rule);
}
.duo li:last-child { border-bottom: 0; }

.q-list { border: var(--rule-2); }
.q-list li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.2em;
  padding: 1.2em 1.4em;
  border-bottom: var(--rule);
}
.q-list li:last-child { border-bottom: 0; }
.q-list .no { font-family: var(--f-mono); font-size: var(--s--1); color: var(--copper-hi); }
.q-list p { font-size: var(--s-0); line-height: 1.6; color: var(--ink); }
.q-list p .mono { margin-left: 0.6em; }

.verdict {
  border-left: 3px solid var(--copper);
  padding: 0.3em 0 0.3em 1.6em;
  font-family: var(--f-serif);
  font-size: var(--s-2);
  line-height: 1.65;
  color: var(--ink);
  max-width: 30em;
}

@media (max-width: 620px) {
  .num-grid li { grid-template-columns: 3rem 1fr; gap: 0.9em; }
  .num-grid .ref { display: block; margin: 0.5em 0 0; }
  .duo { grid-template-columns: 1fr; gap: 2em; }
  .q-list li { grid-template-columns: 2.6rem 1fr; }
  .status-table td.lvl { white-space: normal; }
}