/* Private review uses the supplied system-font fallbacks; no external font request. */
/* ============ RIVET — industrial workshop meets retro-computing ============
   Riveted steel panels, CRT-green phosphor glow, punch-card motifs,
   blueprint grids, chunky pixel accents. Pure CSS/SVG. */
:root{
  --bg:#14161a;
  --bg-soft:#1b1e23;
  --card:#22262c;
  --card-hi:#2a2f37;
  --ink:#d7dde4;
  --muted:#9aa3ad;
  --line:#0c0e11;
  --phosphor:#39ff6e;
  --phosphor-dim:#1fbf52;
  --amber:#ffb000;
  --steel:#8b939e;
  --manila:#d9c98f;
  --grid:rgba(139,147,158,.07);
  --blueprint-line:rgba(139,147,158,.05);
  --glow:0 0 14px rgba(57,255,110,.30);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --body:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="light"]{
  --bg:#e9eef6;
  --bg-soft:#dde5f0;
  --card:#f8fafd;
  --card-hi:#ffffff;
  --ink:#1c2430;
  --muted:#5b6a7d;
  --line:#b9c6d8;
  --phosphor:#0a7a33;
  --phosphor-dim:#0a7a33;
  --amber:#b26a00;
  --steel:#5b6a7d;
  --manila:#e4d6a4;
  --grid:rgba(11,61,145,.10);
  --blueprint-line:rgba(11,61,145,.07);
  --glow:0 0 10px rgba(10,122,51,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background-color:var(--bg);
  font-family:var(--body);line-height:1.65;font-size:1.02rem;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--blueprint-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--blueprint-line) 1px,transparent 1px);
  background-size:28px 28px,28px 28px,140px 140px,140px 140px;
}
[data-theme="dark"] body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}
/* ---------- header / nav ---------- */
.machinebar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,var(--card-hi),var(--card));
  border-bottom:3px solid var(--line);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.machinebar .bar-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:.55rem 1rem}
.brand{font-family:var(--mono);font-weight:700;color:var(--phosphor);text-decoration:none;
  font-size:1.15rem;letter-spacing:.06em;text-shadow:var(--glow);white-space:nowrap}
.brand .dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--phosphor);
  box-shadow:0 0 8px var(--phosphor);margin-right:.4em;animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
nav.main{margin-left:auto;display:flex;flex-wrap:wrap;gap:.15rem}
nav.main a{font-family:var(--mono);font-size:.82rem;color:var(--muted);text-decoration:none;
  padding:.4rem .55rem;border:1px solid transparent;border-radius:4px;letter-spacing:.02em}
nav.main a:hover{color:var(--phosphor);border-color:var(--phosphor-dim);background:rgba(57,255,110,.06)}
nav.main a.active{color:var(--phosphor);border-color:var(--phosphor-dim)}
.themebtn{font-family:var(--mono);font-size:.8rem;background:var(--bg-soft);color:var(--ink);
  border:1px solid var(--line);border-radius:4px;padding:.4rem .6rem;cursor:pointer;white-space:nowrap}
/* ---------- layout ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:0 1rem}
.hero{padding:3rem 0 2rem;text-align:left}
.kicker{font-family:var(--mono);color:var(--amber);letter-spacing:.25em;font-size:.78rem;text-transform:uppercase}
h1,h2,h3,h4{font-family:var(--mono);color:var(--phosphor);text-shadow:var(--glow);line-height:1.25}
h1{font-size:2.3rem;margin:.4rem 0 1rem;letter-spacing:.02em}
h2{font-size:1.5rem;margin:2rem 0 .8rem}
h3{font-size:1.15rem;margin:1.5rem 0 .6rem}
a{color:var(--phosphor)}
.lede{font-size:1.15rem;color:var(--muted);max-width:46rem}
/* ---------- riveted steel panel ---------- */
.steel-panel{
  position:relative;background:linear-gradient(180deg,var(--card-hi),var(--card));
  border:1px solid var(--line);border-radius:10px;padding:1.4rem 1.6rem;margin:1.4rem 0;
  box-shadow:0 6px 20px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
}
.steel-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background-image:
    radial-gradient(circle,#c3cad3 2.6px,#565d66 3.6px,transparent 4.2px),
    radial-gradient(circle,#c3cad3 2.6px,#565d66 3.6px,transparent 4.2px),
    radial-gradient(circle,#c3cad3 2.6px,#565d66 3.6px,transparent 4.2px),
    radial-gradient(circle,#c3cad3 2.6px,#565d66 3.6px,transparent 4.2px);
  background-repeat:no-repeat;background-size:14px 14px;
  background-position:9px 9px,calc(100% - 9px) 9px,9px calc(100% - 9px),calc(100% - 9px) calc(100% - 9px);
}
.steel-panel > *:first-child{margin-top:0}
/* ---------- CRT terminal ---------- */
.terminal{
  background:#0a0d0a;border:2px solid #203020;border-radius:8px;color:#39ff6e;
  font-family:var(--mono);padding:1.2rem 1.4rem;margin:1.4rem 0;position:relative;overflow:hidden;
  box-shadow:inset 0 0 40px rgba(57,255,110,.06),0 4px 16px rgba(0,0,0,.4);
}
.terminal::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px)}
.terminal .prompt{color:#ffb000}
.terminal a{color:#7dffab}
.cursor::after{content:"▊";animation:blink 1s steps(1) infinite;color:#39ff6e}
@keyframes blink{50%{opacity:0}}
/* ---------- punch card strip ---------- */
.punchcard{
  background:var(--manila);border-radius:6px;padding:.9rem 1.1rem;margin:1.4rem 0;color:#4a3f22;
  font-family:var(--mono);font-size:.85rem;border:1px solid #b3a05f;
  background-image:radial-gradient(circle,rgba(0,0,0,.35) 2.4px,transparent 2.8px);
  background-size:16px 16px;background-position:8px 8px;
}
.punchcard .hole-row{display:flex;gap:.5rem;margin-bottom:.4rem}
/* ---------- pixel divider ---------- */
.pixel-hr{height:10px;margin:2rem 0;border:0;opacity:.55;
  background:repeating-linear-gradient(90deg,var(--phosphor) 0 10px,transparent 10px 16px)}
/* ---------- misc ---------- */
.btn{display:inline-block;font-family:var(--mono);background:var(--phosphor);color:#06130a;
  text-decoration:none;font-weight:700;padding:.7rem 1.3rem;border-radius:6px;border:2px solid var(--phosphor-dim);
  box-shadow:var(--glow);margin:.4rem .4rem .4rem 0}
.btn.ghost{background:transparent;color:var(--phosphor);box-shadow:none}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
img.resp{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
figure{margin:1.4rem 0}
figcaption{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-top:.4rem}
blockquote{border-left:4px solid var(--phosphor);margin:1.2rem 0;padding:.6rem 1rem;
  background:rgba(57,255,110,.05);font-family:var(--mono)}
table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem}
th,td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left}
th{font-family:var(--mono);color:var(--phosphor);background:rgba(57,255,110,.06)}
.badge{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  border:1px solid var(--amber);color:var(--amber);border-radius:4px;padding:.2rem .55rem;margin:.15rem .25rem .15rem 0;text-transform:uppercase}
.pagenav{display:flex;justify-content:space-between;gap:1rem;margin:2.5rem 0 1rem;flex-wrap:wrap}
.pagenav a{font-family:var(--mono);text-decoration:none;border:1px solid var(--line);border-radius:6px;
  padding:.6rem 1rem;background:var(--card)}
footer.site{margin-top:3rem;border-top:3px solid var(--line);background:var(--bg-soft);padding:2rem 0 3rem}
footer.site .fine{font-size:.82rem;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:16/10;object-fit:cover}
.social-card{position:relative}
.social-card .overlay{position:absolute;left:0;right:0;bottom:0;padding:1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.82));color:#eaffef;font-family:var(--mono)}
.social-card .overlay .q{font-size:1rem;color:#39ff6e;text-shadow:0 0 10px rgba(57,255,110,.6)}
.dl{display:inline-block;font-family:var(--mono);font-size:.8rem;margin-top:.5rem;color:var(--amber);text-decoration:none}
.mockup-banner{background:#3a1010;border:2px dashed #ff5a5a;color:#ffb3b3;font-family:var(--mono);
  padding:1rem 1.2rem;border-radius:8px;margin:1.2rem 0;text-align:center}
.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;border:2px solid var(--line)}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.faq details{margin:.8rem 0;border:1px solid var(--line);border-radius:6px;padding:.8rem 1rem;background:var(--card)}
.faq summary{font-family:var(--mono);cursor:pointer;color:var(--phosphor)}
@media (max-width:700px){h1{font-size:1.7rem}.brand{font-size:1rem}}

/* =====================================================================
   DEEP PASS — "the machine room at 3am"
   Rivet amplified: CRT phosphor glow, riveted steel, punch cards,
   blueprint grids, hazard-stripe industrial trim. Content untouched —
   presentation only. Extends the base rules above.
   ===================================================================== */

:root{
  --display:'Chakra Petch',ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --pixel:'VT323',ui-monospace,Menlo,Consolas,"Courier New",monospace;
  --bezel:#0b0d10;
  --hazard:repeating-linear-gradient(135deg,var(--amber) 0 14px,#14161a 14px 28px);
  --vignette:radial-gradient(ellipse 120% 90% at 50% 30%,transparent 55%,rgba(0,0,0,.42) 100%);
  --brushed:repeating-linear-gradient(100deg,rgba(255,255,255,.022) 0 2px,transparent 2px 5px);
  --scan:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 5px);
}
[data-theme="light"]{
  --bezel:#2b3440;
  --hazard:repeating-linear-gradient(135deg,var(--amber) 0 14px,#e9eef6 14px 28px);
  --vignette:radial-gradient(ellipse 120% 90% at 50% 30%,transparent 60%,rgba(11,61,145,.10) 100%);
}

/* ---------- skip link (first focusable) ---------- */
.skip-link{
  position:absolute;left:.75rem;top:-4rem;z-index:100;
  font-family:var(--mono);font-size:.85rem;font-weight:700;
  background:var(--phosphor);color:#06130a;text-decoration:none;
  padding:.6rem 1rem;border-radius:6px;transition:top .15s ease;
}
.skip-link:focus-visible{top:.75rem}

/* ---------- body atmosphere ---------- */
body{background-image:var(--vignette),var(--brushed),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--blueprint-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--blueprint-line) 1px,transparent 1px);
  background-size:auto,auto,28px 28px,28px 28px,140px 140px,140px 140px}

/* ---------- machine bar: rivet-stud rail + hazard trim ---------- */
.machinebar::after{
  content:"";display:block;height:6px;background:var(--hazard);opacity:.85}
.machinebar .bar-inner{position:relative}
.machinebar .bar-inner::before,.machinebar .bar-inner::after{
  content:"";position:absolute;top:50%;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e8edf2,#7d858f 60%,#3c4249);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.6);transform:translateY(-50%)}
.machinebar .bar-inner::before{left:.2rem}
.machinebar .bar-inner::after{right:.2rem}
.brand{font-family:var(--pixel);font-size:1.7rem;letter-spacing:.04em}
.themebtn{transition:transform .12s ease,box-shadow .12s ease}
.themebtn:hover{box-shadow:0 0 0 2px var(--phosphor-dim)}
nav.main{max-width:100%}
nav.main a{transition:all .15s ease}
nav.main a.active{
  color:#06130a;background:var(--phosphor);border-color:var(--phosphor-dim);
  font-weight:700;text-shadow:none;box-shadow:var(--glow)}

/* ---------- hero: framed console ---------- */
.hero{
  position:relative;padding:3.2rem 2rem 2.4rem;margin:1.6rem 0 0;
  background:linear-gradient(180deg,var(--card-hi),var(--card));
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 14px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--brushed),radial-gradient(ellipse 90% 70% at 20% 0%,rgba(57,255,110,.07),transparent 60%)}
[data-theme="light"] .hero::before{
  background:var(--brushed),radial-gradient(ellipse 90% 70% at 20% 0%,rgba(10,122,51,.08),transparent 60%)}
.hero::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,var(--phosphor),var(--phosphor-dim) 60%,var(--amber));
  box-shadow:2px 0 12px rgba(57,255,110,.35)}
.hero>*{position:relative}
.kicker{font-family:var(--mono);color:var(--amber);letter-spacing:.22em;font-size:.76rem;
  text-transform:uppercase}
.kicker::before{content:"[ "}
.kicker::after{content:" ]"}
.hero h1{
  font-family:var(--pixel);font-weight:400;font-size:clamp(3.2rem,9vw,5.4rem);
  letter-spacing:.03em;line-height:1;margin:.5rem 0 1rem;color:var(--phosphor);
  text-shadow:0 0 6px rgba(57,255,110,.55),0 0 26px rgba(57,255,110,.28),0 3px 0 rgba(0,0,0,.55)}
[data-theme="light"] .hero h1{text-shadow:0 0 4px rgba(10,122,51,.25),0 2px 0 rgba(255,255,255,.6)}
.hero .lede{color:var(--ink);font-size:1.18rem}
.hero .btn{font-family:var(--display);letter-spacing:.03em}

/* ---------- section headers: rivet-bolt rule ---------- */
main h2{
  font-family:var(--display);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;font-size:1.28rem;
  display:flex;align-items:center;gap:.7rem}
main h2::before{
  content:"";flex:none;width:.85em;height:.85em;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f2f5f8,#8b939e 55%,#3c4249);
  box-shadow:0 0 0 2px var(--line),0 0 8px rgba(139,147,158,.5)}
main h2::after{
  content:"";flex:1;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--phosphor-dim),transparent)}
main h3{font-family:var(--display);letter-spacing:.04em}
main h1{font-family:var(--pixel);font-weight:400;letter-spacing:.03em}

/* ---------- rivet divider ornament (pure CSS) ---------- */
main .wrap hr,.pixel-hr{
  height:12px;margin:2.4rem 0;border:0;opacity:1;
  background:
    radial-gradient(circle at 6px 6px,#c9d1da 2.6px,#565d66 3.8px,transparent 4.6px),
    repeating-linear-gradient(90deg,var(--phosphor-dim) 0 12px,transparent 12px 20px);
  background-size:96px 12px,auto;background-repeat:repeat-x;filter:saturate(.8)}

/* ---------- steel panels: brushed depth + hover ---------- */
.steel-panel{background-image:var(--brushed),linear-gradient(180deg,var(--card-hi),var(--card))}
.grid3 .steel-panel,.grid2 .steel-panel{transition:transform .18s ease,box-shadow .18s ease}
.grid3 .steel-panel:hover,.grid2 .steel-panel:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 22px rgba(57,255,110,.10),inset 0 1px 0 rgba(255,255,255,.07)}
.steel-panel h3{margin-top:1.2rem}

/* ---------- terminal: console with power LED ---------- */
.terminal{border-width:3px}
.terminal::before{
  content:"";display:block;height:14px;margin:-1.2rem -1.4rem 1rem;
  background:linear-gradient(180deg,#1e242b,#12161b);border-bottom:1px solid #203020}
.terminal .prompt{font-weight:700}

/* ---------- CRT-framed imagery ---------- */
figure{position:relative}
img.resp{
  display:block;width:100%;border:12px solid var(--bezel);border-radius:14px;
  box-shadow:0 0 0 1px var(--line),0 16px 44px rgba(0,0,0,.5),0 0 30px rgba(57,255,110,.07)}
figcaption{
  display:inline-block;margin-top:.7rem;padding:.35rem .8rem;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:4px}
.gallery figure{transition:transform .18s ease}
.gallery figure:hover{transform:translateY(-4px)}
.gallery img{border-width:8px;transition:box-shadow .18s ease}
.gallery figure:hover img{box-shadow:0 0 0 1px var(--line),0 16px 44px rgba(0,0,0,.5),0 0 26px rgba(57,255,110,.22)}

/* ---------- punch card: perforated edge ---------- */
.punchcard{
  position:relative;padding-top:1.6rem;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.25)}
.punchcard::before{
  content:"";position:absolute;top:8px;left:10px;right:10px;height:8px;
  background-image:radial-gradient(circle,rgba(0,0,0,.4) 3px,transparent 3.6px);
  background-size:22px 8px;background-repeat:repeat-x}

/* ---------- pull quotes: phosphor speech ---------- */
blockquote{
  position:relative;border-left:0;border-radius:10px;
  background:linear-gradient(180deg,var(--card-hi),var(--card));
  border:1px solid var(--line);padding:1.3rem 1.5rem 1.3rem 3.4rem;
  box-shadow:0 8px 24px rgba(0,0,0,.3);font-family:var(--body)}
blockquote::before{
  content:"\201C";position:absolute;left:1rem;top:.4rem;
  font-family:var(--pixel);font-size:3.2rem;line-height:1;color:var(--amber);
  text-shadow:0 0 14px rgba(255,176,0,.4)}

/* ---------- tables: spec-sheet ---------- */
table{border:1px solid var(--line);border-radius:8px;overflow:hidden}
th{font-family:var(--display);letter-spacing:.05em;text-transform:uppercase;font-size:.82rem}
tbody tr:nth-child(even){background:rgba(139,147,158,.07)}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:rgba(57,255,110,.07)}

/* ---------- buttons: chunky machine keys ---------- */
.btn{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;
  border-radius:8px;border-bottom-width:4px;
  transition:transform .1s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px);border-bottom-width:2px}
.btn.ghost{border:2px solid var(--phosphor-dim)}

/* ---------- badges & page nav ---------- */
.badge{font-weight:700;box-shadow:0 0 10px rgba(255,176,0,.18)}
.pagenav a{font-family:var(--display);font-weight:600;transition:all .15s ease}
.pagenav a:hover{border-color:var(--phosphor-dim);color:var(--phosphor);box-shadow:var(--glow)}

/* ---------- FAQ details ---------- */
.faq details{transition:border-color .15s ease}
.faq details[open]{border-color:var(--phosphor-dim)}
.faq summary{font-family:var(--display);font-weight:600;letter-spacing:.03em}
.faq summary::marker{color:var(--amber)}

/* ---------- footer: hazard trim ---------- */
footer.site{border-top:0;position:relative}
footer.site::before{content:"";display:block;height:8px;background:var(--hazard);opacity:.8}
footer.site .wrap{padding-top:2rem}

/* ---------- video / social / stream keep, with glow ---------- */
.video-wrap{box-shadow:0 0 0 1px var(--line),0 0 30px rgba(57,255,110,.12)}
.social-card{border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.mockup-banner{box-shadow:0 6px 20px rgba(255,90,90,.12)}

/* ---------- focus visibility ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .machinebar .bar-inner{flex-wrap:wrap}
  nav.main{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:thin;padding-bottom:.35rem}
  nav.main a{white-space:nowrap}
}
@media (max-width:700px){
  .hero{padding:2.2rem 1.2rem 1.8rem}
  img.resp{border-width:8px}
  blockquote{padding:1.1rem 1.1rem 1.1rem 2.8rem}
  table{font-size:.85rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .brand .dot{opacity:1}
}