/* ==========================================================================
   INDUSTRIAL — one page. Loaded on a/industrial.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A brushed-steel ground, riveted plates, heavy black rules, and hazard
   bands used ONLY at real boundaries (each zone, the record, the end of the
   page). Safety yellow and black over steel greys, no third accent. No
   motion of any kind: signage holds still. The shell (rail, top bar,
   community drawer) is never restyled: every rule here is scoped to
   .ix-page main, or to a class the room renders.

   The pairing (the record's rule): Big Shoulders Stencil for display,
   Big Shoulders and Barlow Condensed for support. The faces are ours.

   Contrast (WCAG AA, checked against the lightest point of each ground):
   yellow #F5C400 on ground #43474D 5.8 · on #3A3D42 6.7
   yellow on plate #5A5F66 3.9, so yellow on plate is display size only
   (h2); small yellow text sits on black or on the dark meta cells (8.9+)
   #E8EAEC on plate 5.3 · #FFFFFF on plate 6.4 · #C4C8CD on ground 5.6
   black #111214 on yellow 11.3
   ========================================================================== */
@font-face { font-family: "BigShouldersStencilIX"; src: url("fonts/big-shoulders-stencil.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "BigShouldersIX"; src: url("fonts/big-shoulders.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "BarlowCondensedIX"; src: url("fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "BarlowCondensedIX"; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "BarlowCondensedIX"; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "BarlowCondensedIX"; src: url("fonts/barlow-condensed-600-italic.woff2") format("woff2"); font-weight: 500 700; font-style: italic; font-display: swap; }

.ix-page {
  --ix-yel: #F5C400;
  --ix-blk: #111214;
  --ix-s1: #3A3D42;
  --ix-s2: #5B6068;
  --ix-s3: #8C929A;
  --ix-s4: #C4C8CD;
  --ix-fg: #E8EAEC;
  --ix-stencil: "BigShouldersStencilIX", "Arial Narrow", sans-serif;
  --ix-grotesk: "BigShouldersIX", "Arial Narrow", sans-serif;
  --ix-body: "BarlowCondensedIX", "Arial Narrow", sans-serif;
}
.ix-page main {
  background-color: var(--ix-s1);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), linear-gradient(180deg, #43474D, #35383D);
  color: var(--ix-fg);
  overflow-x: hidden;
}

/* ---- shared register: every root the room renders -------------------- */
.ix-hero, .ix-wrap, .ix-zone, .ix-rec { font: 500 19px/1.5 var(--ix-body); color: var(--ix-fg); }
.ix-hero a, .ix-wrap a, .ix-rec a { color: var(--ix-yel); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ix-hero a:hover, .ix-wrap a:hover, .ix-rec a:hover { background: var(--ix-yel); color: var(--ix-blk); }
.ix-hero :focus-visible, .ix-wrap :focus-visible, .ix-rec :focus-visible { outline: 4px solid var(--ix-yel); outline-offset: 2px; }
.ix-wrap p, .ix-rec p { max-width: 70ch; }
.ix-st { font-family: var(--ix-stencil); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.ix-y { color: var(--ix-yel); text-transform: uppercase; }

/* ---- hero -------------------------------------------------------------- */
.ix-hero { padding: clamp(40px, 6vw, 80px) clamp(14px, 4vw, 40px); }
.ix-notice { display: inline-block; font: 700 13px/1.4 var(--ix-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ix-s4); border: 2px solid var(--ix-s3); padding: 4px 10px; }
.ix-h1 { margin: 14px 0 0; font-size: clamp(56px, 12.5vw, 200px); line-height: .85; color: var(--ix-yel); overflow-wrap: break-word; }
.ix-lead { margin: 10px 0 0; font: 700 clamp(20px, 2.4vw, 28px)/1.25 var(--ix-grotesk); letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; max-width: 40ch; }

/* ---- hazard bands and zone strips: boundaries only --------------------- */
.ix-band { height: 28px; background: repeating-linear-gradient(-45deg, var(--ix-yel) 0 22px, var(--ix-blk) 22px 44px); }
.ix-rec .ix-zone, .ix-zone { max-width: none; display: flex; align-items: center; gap: 16px; margin: 0; background: var(--ix-blk); color: var(--ix-yel); padding: 8px clamp(14px, 4vw, 40px); border-top: 6px solid var(--ix-blk); font: 700 16px/1.3 var(--ix-grotesk); letter-spacing: .12em; text-transform: uppercase; }

/* ---- wraps, plates, heavy sections ------------------------------------ */
.ix-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 40px); }
.ix-plate {
  position: relative; margin: 40px 0; padding: clamp(24px, 4vw, 40px);
  background: linear-gradient(135deg, #5A5F66, #474B51 40%, #555A61 60%, #43474D);
  border: 4px solid var(--ix-blk); box-shadow: inset 0 2px 0 rgba(255,255,255,.2);
  color: #FFFFFF;
}
.ix-rv { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #D7DADE, #555A61 70%); box-shadow: 0 0 0 2px #222; }
.ix-rv1 { left: 10px; top: 10px; } .ix-rv2 { right: 10px; top: 10px; } .ix-rv3 { left: 10px; bottom: 10px; } .ix-rv4 { right: 10px; bottom: 10px; }
.ix-heavy { border-top: 10px solid var(--ix-blk); padding-top: 18px; margin: 40px 0; }
.ix-sec { margin: 40px 0; }
.ix-last { margin-bottom: 60px; }
.ix-h2 { margin: 0 0 14px; font-size: clamp(38px, 6vw, 72px); line-height: .9; color: var(--ix-yel); }
.ix-n { font-family: var(--ix-grotesk); font-weight: 800; }
.ix-sub { margin: 0 0 14px; font: 600 15px/1.4 var(--ix-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ix-s4); }
.ix-plate p { margin: 0 0 12px; }
.ix-plate b, .ix-rec b { font-weight: 700; }
.ix-claim { font-size: 22px; margin: 0 0 12px; }
.ix-cap { font: 600 18px/1.45 var(--ix-body); letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; border-left: 6px solid var(--ix-yel); padding-left: 12px; }
.ix-firm { font-weight: 700; border-left: 6px solid var(--ix-yel); padding-left: 12px; margin-top: 16px; }

/* ---- the pairing demo -------------------------------------------------- */
.ix-demo > p { margin: 0; }
.ix-pair, .ix-diag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.ix-sign { margin: 0; background: var(--ix-yel); color: var(--ix-blk); border: 6px solid var(--ix-blk); border-radius: 14px; padding: 18px; }
/* A caution sign (documented): a black panel carrying yellow letters on the yellow ground; rounded or blunt corners. */
.ix-sign__d { margin-bottom: 12px; padding: 8px 12px 4px; background: var(--ix-blk); color: var(--ix-yel); border-radius: 6px; font: 900 clamp(40px, 5.4vw, 68px)/.9 var(--ix-stencil); text-transform: uppercase; }
.ix-sign__t { font: 800 20px/1.2 var(--ix-grotesk); text-transform: uppercase; }
.ix-sign--bad .ix-sign__t { font: 700 20px/1.2 var(--ix-stencil); }
.ix-doc { margin: 16px 0 0; font-size: 17px; color: var(--ix-s4); }
.ix-doc b { color: var(--ix-yel); }
.ix-sign figcaption { margin-top: 12px; font: italic 600 14px/1.45 var(--ix-body); letter-spacing: .06em; text-transform: uppercase; }

/* ---- the two diagonals ------------------------------------------------- */
.ix-diag figure { margin: 0; }
.ix-sw1 { height: 120px; background: repeating-linear-gradient(-45deg, var(--ix-yel) 0 26px, var(--ix-blk) 26px 52px); border: 4px solid var(--ix-blk); }
.ix-sw2 { height: 120px; position: relative; overflow: hidden; background: var(--ix-s2); border: 4px solid var(--ix-blk); }
.ix-sw2 i { position: absolute; left: -10%; height: 6px; background: #FFFFFF; transform: skewX(-45deg); }
.ix-sw2 i:nth-child(1) { top: 20%; width: 60%; } .ix-sw2 i:nth-child(2) { top: 45%; width: 90%; } .ix-sw2 i:nth-child(3) { top: 70%; width: 40%; }
.ix-diag figcaption { margin-top: 8px; font: 600 15px/1.45 var(--ix-body); letter-spacing: .06em; }

/* ---- the record: meta plate ------------------------------------------- */
.ix-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 3px solid var(--ix-blk); }
.ix-meta > div { padding: 10px 12px; border: 1px solid var(--ix-blk); background: rgba(17,18,20,.72); }
.ix-meta .ix-span2 { grid-column: 1 / -1; }
.ix-meta .ix-full { grid-column: 1 / -1; }
.ix-meta dt { font: 700 13px/1.4 var(--ix-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ix-yel); }
.ix-meta dd { margin: 2px 0 0; color: var(--ix-fg); }

/* ---- rows ranked by rule weight: rules, what carries the look ---------- */
.ix-rules { list-style: none; margin: 0; padding: 0; }
.ix-rules > li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 3px solid var(--ix-blk); }
.ix-rules > li:first-child { border-top: 10px solid var(--ix-blk); }
.ix-ar { margin: 0; font: 900 clamp(24px, 2.6vw, 30px)/1 var(--ix-stencil); color: var(--ix-yel); text-transform: uppercase; }
.ix-ar a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.ix-ar .ix-k { display: table; margin-top: 6px; }
.ix-k { display: inline-block; background: var(--ix-blk); color: var(--ix-yel); font: 700 12px/1.5 var(--ix-body); letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; margin-bottom: 6px; }
.ix-rules p { margin: 0 0 10px; }
.ix-rules p:last-child { margin-bottom: 0; }
.ix-none p { color: var(--ix-s4); }
.ix-ev { display: inline-block; border: 2px solid var(--ix-yel); padding: 0 6px; font: 700 12px/1.5 var(--ix-body); letter-spacing: .1em; text-transform: uppercase; }
.ix-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ix-tags a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 2px solid var(--ix-yel); text-decoration: none; font-weight: 700; }
.ix-swatches { display: flex; flex-wrap: wrap; border: 3px solid var(--ix-blk); width: fit-content; max-width: 100%; }
.ix-swatches span { padding: 10px 12px; font: 700 13px/1 var(--ix-body); letter-spacing: .08em; }
.ix-asbuilt { font: 600 13px/1.4 var(--ix-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ix-s4); margin-top: 6px !important; }

/* ---- the coverage ledger ---------------------------------------------- */
.ix-tw { overflow-x: auto; margin-top: 16px; border: 3px solid var(--ix-blk); }
.ix-ledger { width: 100%; border-collapse: collapse; font: 500 17px/1.4 var(--ix-body); }
.ix-ledger th, .ix-ledger td { text-align: left; padding: 8px 12px; border: 1px solid var(--ix-blk); background: rgba(17,18,20,.72); color: var(--ix-fg); }
.ix-ledger thead th { background: var(--ix-blk); color: var(--ix-yel); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.ix-ledger tbody th { font-weight: 700; color: #FFFFFF; }

/* ---- neighbours -------------------------------------------------------- */
.ix-conf { list-style: none; margin: 0; padding: 0; }
.ix-conf li { padding: 10px 0; border-bottom: 3px solid var(--ix-blk); }
.ix-conf li:last-child { border-bottom: 0; }
.ix-gr { font: 800 26px/1.1 var(--ix-grotesk); text-transform: uppercase; }
.ix-conf a { display: inline-flex; align-items: center; min-height: 44px; }
.ix-conf .ix-k { margin: 0 0 0 8px; vertical-align: middle; }
.ix-conf p { margin: 4px 0 0; }

/* ---- use it ------------------------------------------------------------ */
.ix-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ix-rec .ix-use a { display: block; padding: 16px; background: var(--ix-blk); border: 3px solid var(--ix-yel); text-decoration: none; color: #FFFFFF; }
.ix-use a b { display: block; font: 800 26px/1.1 var(--ix-grotesk); text-transform: uppercase; color: var(--ix-yel); }
.ix-rec .ix-use a:hover { background: var(--ix-yel); color: var(--ix-blk); }
.ix-use a:hover b { color: var(--ix-blk); }
.ix-foot { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 16px; }
.ix-foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- narrow ------------------------------------------------------------ */
@media (max-width: 760px) {
  .ix-pair, .ix-diag, .ix-use { grid-template-columns: 1fr; }
  .ix-meta { grid-template-columns: 1fr 1fr; }
  .ix-rules > li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 480px) {
  .ix-meta { grid-template-columns: 1fr; }
  .ix-zone { font-size: 14px; gap: 10px; letter-spacing: .08em; }
  .ix-plate { padding: 30px 14px 24px; }
  .ix-ledger th, .ix-ledger td { padding: 8px; }
  .ix-ledger thead th { letter-spacing: .06em; }
}
/* Nothing on this page moves; nothing to reduce. */