/* ============================================================================
   screen.css — the shared "dot-matrix screen" design system for psyrcuit.com.
   One engine per page draws the field AND the pixel headers (see screen.js).
   Content is plain mono text laid directly on top of the field (no scrim box);
   the field is dim behind content, and text carries a shadow for legibility.
   Only nav and footer are real containers.
   ============================================================================ */

:root{
  --violet:#8b5cf6; --violet-light:#a78bfa; --violet-rgb:139,92,246;
  --bg:#000;
  --ink:#edeef4; --ink-2:#a6a6b2; --ink-3:#6a6a77; --ink-4:#3a3a44;
  --line:rgba(255,255,255,0.10);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}

/* shared backdrop canvas (subpages render the field + their pixel headers here) */
#screen-bg{position:fixed; inset:0; z-index:0; display:block; pointer-events:none;}

/* content sits directly on the field. Shadow keeps mono text legible over dots. */
.screen-content{
  position:relative; z-index:5;
  text-shadow:0 1px 2px #000, 0 0 4px #000, 0 0 9px rgba(0,0,0,0.55);
}

/* pixel-header placeholder: empty box that reserves the text's size; the page's
   own dot engine lights the dots that form the text (screen.js / PX). */
.pxh{display:inline-block; line-height:0; vertical-align:bottom;}

/* nav (the only fixed chrome) — opaque enough to occlude content behind it */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:1.25rem;
  padding:0.8rem 1.25rem; background:rgba(0,0,0,0.9);
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(-100%); transition:opacity .35s ease, transform .35s ease;
}
.nav.is-visible{opacity:1; transform:none;}
.nav .brand{display:inline-flex; align-items:center; gap:.55rem;}
.nav .brand .bn{font-weight:700; letter-spacing:0.2em; font-size:0.8rem; color:var(--ink);}
.nav .brand:hover .bn{color:var(--violet-light);}
.nav .grow{flex:1;}
.nav a.navlink{font-size:.66rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-2);}
.nav a.navlink:hover, .nav a.navlink.active{color:var(--violet-light);}
@media(max-width:560px){ .nav{gap:.8rem; padding:.7rem 1rem;} .nav a.navlink{font-size:.6rem; letter-spacing:0.1em;} }

/* layout — generous width, simple padding, no boxes */
.wrap{max-width:760px; margin:0 auto; padding:0 1.4rem;}
.wrap.wide{max-width:1000px;}
.sec{padding:clamp(3.25rem,8vw,6rem) 0;}

/* type */
.kicker{margin-bottom:1.4rem;}
.h-xl{font-size:clamp(1.5rem,5.6vw,2.3rem); font-weight:700; letter-spacing:-0.01em; line-height:1.12; color:var(--ink);}
.h{font-size:clamp(1.3rem,4.4vw,1.8rem); font-weight:700; letter-spacing:-0.01em; line-height:1.2; color:var(--ink); margin-bottom:1.1rem;}
.lead{font-size:clamp(1.05rem,2.5vw,1.3rem); color:var(--ink); line-height:1.5; margin-top:1.4rem;}
.body{font-size:0.98rem; color:var(--ink-2); line-height:1.8; max-width:64ch;}
.body + .body{margin-top:1rem;}
.body strong{color:var(--ink); font-weight:600;}
.fine{font-size:.84rem; color:var(--ink-3); margin-top:1.9rem;}
.fine a{color:var(--ink-2); border-bottom:1px solid var(--ink-4); padding-bottom:1px;}
.fine a:hover{color:var(--violet-light); border-color:var(--violet);}

/* dot motifs */
.pxdot{width:6px; height:6px; background:var(--violet); box-shadow:0 0 8px rgba(var(--violet-rgb),0.55); display:inline-block; flex:none;}
/* section divider drawn by the engine (a row of the page's own dots); reserves space here */
.pxrule{display:block; width:100%; height:7px; margin:0 0 2.8rem;}
.dotrule{display:block; width:100%; height:7px; margin:2.4rem 0;}
/* reduced-motion fallback divider (engine isn't drawing dots then) */
.pxrule-css{height:7px; color:var(--ink-4);
  background-image:radial-gradient(currentColor 1px, transparent 1.6px);
  background-size:9px 9px; background-position:0 2px; background-repeat:repeat-x;}

/* build-log — screen-native rows, no cards */
.bl{margin-top:2.4rem; display:flex; flex-direction:column;}
.bl-row{padding:1.7rem 0; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.2rem;}
.bl-row:last-child{border-bottom:1px solid var(--line);}
.bl-num{padding-top:.15rem;}
.bl-main{min-width:0;}
.bl-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.bl-title{font-size:1.3rem; font-weight:700; letter-spacing:-0.01em; color:var(--ink);}
.bl-status{display:inline-flex; align-items:center; gap:.5rem; font-size:.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap;}
.bl-status .d{width:6px; height:6px; background:var(--ink-4); display:inline-block;}
.bl-status.live .d{background:var(--violet-light); box-shadow:0 0 8px rgba(var(--violet-rgb),0.6);}
.bl-cap{font-size:.64rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--violet-light); margin-top:.5rem;}
.bl-outcome{font-size:1rem; color:var(--ink); line-height:1.55; margin-top:.7rem;}
.bl-problem{font-size:.92rem; color:var(--ink-2); margin-top:.55rem;}
.bl-detail{font-size:.88rem; color:var(--ink-3); line-height:1.7; margin-top:.55rem;}
.bl-link{display:inline-block; margin-top:.9rem; font-size:.72rem; letter-spacing:0.06em; color:var(--violet-light);}
.bl-link:hover{color:var(--violet);}
.bl-link.none{color:var(--ink-3); font-style:italic;}
.bl-more{margin-top:1.7rem; font-size:.74rem; letter-spacing:0.06em; color:var(--ink-2); border-bottom:1px solid var(--ink-4); padding-bottom:2px; display:inline-block;}
.bl-more:hover{color:var(--violet-light); border-color:var(--violet);}
@media(max-width:560px){ .bl-row{grid-template-columns:1fr;} .bl-num{order:-1;} }

/* contact */
.contact-actions{margin-top:2rem;}
.email-btn{display:inline-block; font-size:1rem; letter-spacing:0.03em; color:var(--violet-light);
  padding:.95rem 2rem; border:1px solid rgba(var(--violet-rgb),0.35); transition:all .25s ease;}
.email-btn:hover{border-color:var(--violet); background:rgba(var(--violet-rgb),0.08); box-shadow:0 0 28px rgba(var(--violet-rgb),0.14);}
.detail-grid{display:grid; gap:1.25rem; margin-top:2.25rem;}
@media(min-width:600px){ .detail-grid{grid-template-columns:1fr 1fr;} }
.detail .label{font-size:.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.35rem;}
.detail a, .detail p{font-size:.95rem; color:var(--ink-2);}
.detail a:hover{color:var(--violet-light);}

/* footer */
.foot{position:relative; z-index:5; padding:2.5rem 1.4rem 3rem;
  text-shadow:0 1px 2px #000, 0 0 4px #000;}
.foot-inner{max-width:1000px; margin:0 auto;}
.foot-links{display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; margin-bottom:1rem;}
.foot-links a{font-size:.72rem; letter-spacing:0.1em; color:var(--ink-2);}
.foot-links a:hover{color:var(--violet-light);}
.foot-meta{text-align:center; font-size:.68rem; color:var(--ink-4); letter-spacing:0.04em;}

/* reveal — opacity only (no transform, so pixel-header positions stay fixed) */
.reveal{opacity:0; transition:opacity .6s ease;}
.reveal.in{opacity:1;}
@media(prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transition:none !important;}
  html{scroll-behavior:auto;}
}