/* ============================================================
   THIRDSHIFT HOUSE — Industrial Midnight
   Shared system for ThirdShift + MIAI (house) pages.
   Discipline: every element carries function. No decorative LEDs,
   no fake screws, no glow, no pulse. Hardware dark, steel + amber
   + signal green, no blue. Boone/CampOS use their own camp brand.
   ============================================================ */
:root{
  --b:#0b0d11; --plate:#14161c; --line:#31343b; --line-2:#454952;
  --fg:#f2f0ea; --dim:#c2c0b8; --faint:#8b8a84;
  --amber:#EF9F27; --amber-deep:#8f5c14; --tint:#171207;
  --nv:#4dff88; --nv-deep:#1f6b40;
  --well:#08090d;
  --tag:#0f1116; --groove:rgba(210,208,200,.13);
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --disp:"Archivo",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--b);color:var(--fg);font:400 16px/1.6 var(--disp);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a.tx{color:var(--nv)}a.tx:hover{color:#8effb4}
a:focus-visible,button:focus-visible{outline:2px solid var(--nv);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* status bar — carries live facts only */
.statusbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 16px;background:var(--plate);border-bottom:2px solid var(--amber-deep);
  font:500 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--dim)}
.statusbar .sep{color:var(--faint)}
.statusbar b{color:var(--fg);font-weight:600}
.statusbar .right{margin-left:auto;color:var(--amber);display:flex;gap:16px}
.statusbar .right a:hover{color:var(--fg)}

/* frame + rail (navigation) */
.frame{display:grid;grid-template-columns:220px 1fr;max-width:1240px;margin:0 auto;min-height:100vh}
@media (max-width:900px){.frame{grid-template-columns:1fr}}
.rail{border-right:2px solid var(--line);padding:22px 0 40px;position:sticky;top:39px;align-self:start;height:calc(100vh - 39px);overflow:auto}
@media (max-width:900px){.rail{position:static;height:auto;border-right:0;border-bottom:2px solid var(--line);padding-bottom:8px}}
.rail__brand{display:flex;align-items:center;gap:11px;padding:0 18px 18px;border-bottom:1px solid var(--line);margin-bottom:10px}
.rail__brand b{font:700 14px/1.25 var(--disp);letter-spacing:.03em;display:block}
.rail__brand span{font:500 9.5px/1.5 var(--mono);letter-spacing:.15em;color:var(--faint)}
.rail__label{font:600 9.5px/1 var(--mono);letter-spacing:.05em;color:var(--faint);padding:14px 18px 8px}
.rail a.ln{display:block;padding:9px 18px;font:500 12.5px/1.3 var(--mono);letter-spacing:.04em;color:var(--dim);border-left:3px solid transparent}
.rail a.ln:hover,.rail a.ln[aria-current]{color:var(--fg);border-left-color:var(--amber);background:rgba(239,159,39,.05)}
.rail .fact{padding:6px 18px;font:500 11px/1.5 var(--mono);letter-spacing:.03em;color:var(--dim)}
.rail .fact b{color:var(--fg);font-weight:600}
@media (max-width:900px){.rail__nav{display:flex;flex-wrap:wrap}.rail a.ln{border-left:0;border-bottom:2px solid transparent}.rail a.ln:hover{border-bottom-color:var(--amber)}.rail__facts{display:none}}

/* plates — bordered sections with a label */
main{padding:0 0 72px;min-width:0}
.plate{margin:24px clamp(16px,3vw,36px) 0;background:var(--plate);border:2px solid var(--line);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.4)}
/* section nameplate — engraved phenolic fascia legend: bevel, routed groove, tracked caps, bolted each end */
.plate__head{position:relative;padding:10px 18px;border-bottom:2px solid var(--line);
  background:linear-gradient(180deg,#12141a,#0e1015);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.55);
  font:700 13.5px/1.4 var(--disp);letter-spacing:.02em;color:var(--fg)}
.plate__body{padding:clamp(20px,3.2vw,34px)}
.plate--ledger{border-color:#5a2b20}
/* red phenolic — reserved for warnings / the blind-spot ledger */
.plate--ledger .plate__head{background:linear-gradient(180deg,#241012,#180b0d);color:#e7b7ad}

/* hero */
.hero h1{font:800 clamp(33px,5.4vw,58px)/1.0 var(--disp);letter-spacing:-.01em;max-width:17ch}
.hero h1 .amb{color:var(--amber)}
.hero__sub{max-width:66ch;color:var(--dim);font-size:16.5px;margin:20px 0 0}
.hero__sub b{color:var(--fg);font-weight:600}
.hero__engr{font:500 11.5px/1.7 var(--mono);letter-spacing:.04em;color:var(--faint);margin-top:16px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* buttons — a button is a button; no status light */
.pbtn{display:inline-flex;align-items:center;font:700 12.5px/1 var(--mono);letter-spacing:.03em;cursor:pointer;
  color:var(--amber);background:var(--tint);border:2px solid var(--amber-deep);border-radius:3px;padding:13px 18px;
  box-shadow:0 2px 0 var(--amber-deep);transition:background-color .12s ease,color .12s ease}
.pbtn:hover{background:#241905;color:#ffc46a}
.pbtn:active{transform:translateY(2px);box-shadow:none}
.pbtn--nv{color:var(--nv);border-color:var(--nv-deep);background:#06140b;box-shadow:0 2px 0 var(--nv-deep)}
.pbtn--nv:hover{background:#0a2113;color:#8effb4}
.pbtn--flat{box-shadow:none;border-color:var(--line-2);color:var(--dim);background:transparent}
.pbtn--flat:hover{color:var(--fg);background:rgba(255,255,255,.03)}
.pbtn--flat:active{transform:none}

/* readout wells — ONLY real numbers live here */
.wellrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
@media (max-width:760px){.wellrow{grid-template-columns:1fr}}
.well{background:var(--well);border:1px solid var(--line);border-radius:3px;padding:14px 16px 12px}
.well .v{font:700 26px/1.1 var(--mono);color:var(--amber);white-space:nowrap}
.well .v.nv{color:var(--nv)}
.well .k{font:500 10.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--faint);margin-top:5px}

/* offer row */
.orders{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media (max-width:900px){.orders{grid-template-columns:1fr}}
.ord{padding:24px 22px;border-right:2px solid var(--line);display:flex;flex-direction:column;gap:8px}
.ord:last-child{border-right:0}
@media (max-width:900px){.ord{border-right:0;border-bottom:2px solid var(--line)}.ord:last-child{border-bottom:0}}
.ord .k{font:600 10px/1 var(--mono);letter-spacing:.05em;color:var(--faint)}
.ord h3{font:700 20px/1.2 var(--disp)}
.ord .p{font:700 25px/1 var(--mono);color:var(--amber)}
.ord .p small{font-size:12px;color:var(--faint);font-weight:500;letter-spacing:.03em}
.ord p{font-size:13.5px;color:var(--dim);flex:1}
.ord .pbtn{align-self:flex-start;margin-top:2px}

/* cells grid (feature/principle squares) */
.cells{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid var(--line)}
@media (max-width:640px){.cells{grid-template-columns:1fr}}
.cell{padding:22px;border-right:2px solid var(--line);border-bottom:2px solid var(--line)}
.cell:nth-child(2n){border-right:0}
.cell .k{font:600 10px/1 var(--mono);letter-spacing:.05em;color:var(--amber);margin-bottom:9px}
.cell p{font-size:14px;color:var(--dim)}
.cell p b{color:var(--fg);font-weight:600}

/* prose + straight-talk */
.prose{max-width:74ch}
.prose p{font-size:15.5px;color:var(--dim);margin-bottom:14px}
.prose p:last-child{margin-bottom:0}
.prose p b,.prose strong{color:var(--fg);font-weight:600}
.prose h2{font:700 17px/1.3 var(--disp);color:var(--fg);margin:24px 0 10px;letter-spacing:.02em}
.rowbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.talk{border-left:3px solid var(--amber-deep);padding-left:16px;margin:0 0 14px;font:500 14px/1.65 var(--mono);color:var(--dim)}
.talk b{color:var(--fg);font-weight:600}
.startline{font:500 11.5px/1.7 var(--mono);letter-spacing:.05em;color:var(--faint);margin-top:16px}
.startline a{color:var(--amber)}.startline a:hover{color:#ffc46a}

/* footer */
.foot{margin:38px clamp(16px,3vw,36px) 0;padding:18px 4px 0;border-top:2px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font:500 11px/1.7 var(--mono);letter-spacing:.07em;color:var(--faint)}
.foot a:hover{color:var(--fg)}
.foot .cry{margin-left:auto;color:var(--amber-deep);letter-spacing:.05em}
@media (max-width:700px){.foot .cry{margin-left:0}}

/* hero eyebrow + trust line */
.hero__eyebrow{font:600 11px/1 var(--mono);letter-spacing:.05em;color:var(--amber);margin-bottom:15px}
.trust{font:500 11.5px/1.8 var(--mono);letter-spacing:.05em;color:var(--faint);margin-top:18px}
.trust b{color:var(--dim);font-weight:600}

/* product deck — house-styled readouts (a product is a readout on the panel) */
.deck{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.deck{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;background:var(--plate);border:2px solid var(--line);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 -1px 0 rgba(0,0,0,.5)}
.pcard__head{position:relative;display:flex;align-items:center;gap:9px;padding:9px 30px 9px 14px;border-bottom:2px solid var(--line);
  background:linear-gradient(180deg,#12141a,#0e1015);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.55);
  font:600 9.5px/1.35 var(--mono);letter-spacing:.05em;color:var(--faint)}
/* single bolt at the head's right end — the readout tag is fastened too */
.pcard__head::after{content:"";position:absolute;top:50%;right:12px;width:9px;height:9px;transform:translateY(-50%);
  border-radius:50%;background:radial-gradient(circle at 50% 45%,#41454d,#24272d 34%,#101217 60%,#070809 78%);pointer-events:none}
.pcard__badge{color:var(--amber);border:1px solid var(--amber-deep);border-radius:2px;
  padding:2px 7px;font:600 8.5px/1.35 var(--mono);letter-spacing:.09em;white-space:nowrap}
.pcard__body{padding:18px 16px 16px;display:flex;flex-direction:column;gap:11px;flex:1}
.pcard__title{font:800 23px/1.02 var(--disp);letter-spacing:-.01em}
.pcard__title .amb{color:var(--amber)}
/* Brand lock: "CampOS" always mixed-case, never all-caps (all-caps reads as an unrelated corporation). Kept as belt-and-suspenders. */
.campos{text-transform:none!important;letter-spacing:.02em}
.pcard__desc{font-size:13.5px;color:var(--dim);flex:1}
.pcard__desc b{color:var(--fg);font-weight:600}
.pcard__act{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pcard .price{font:700 15px/1 var(--mono);color:var(--amber);letter-spacing:.02em}
.pcard .price small{color:var(--faint);font-weight:500;font-size:11px}
/* the CampOS card carries one camp token — a hint of the world behind the door */
.pcard--door .pcard__head{color:var(--dim)}
.doormark{width:15px;height:15px;flex:none;opacity:.9}