/* ============================================================================
   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;
  /* No grey TEXT anywhere: ink-2/ink-3 are white. ink-4 is kept ONLY for borders,
     dividers, and indicator dots (never text). All text is --ink (white) or a violet. */
  --ink:#edeef4; --ink-2:#edeef4; --ink-3:#edeef4; --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:1; display:block; pointer-events:none;}
/* feathered glow underlay: real (non-pixel) letterforms drawn BEHIND the dot grid so the
   pixel headers read as clean, even text. Sits below the field canvas (#fx z1 / #screen-bg z1),
   above the page background. See PX glow in screen.js. */
#px-glow{position:fixed; inset:0; z-index:0; display:block; pointer-events:none;}
/* violet circuit-line accents (circuit.js) — replace the section dividers; behind the content */
#circuit-bg{position:fixed; inset:0; z-index:4; display:block; pointer-events:none;}
/* mobile dissolve overlay: one full-screen canvas ABOVE the content (z between content z5 and
   nav z20) with dark pixel bands top & bottom; content fades into them as you scroll. Sized to the
   full device height + positioned from the live viewport so the address bar can't snap/gap it. */
#edge-v{position:fixed; top:0; left:0; z-index:10; 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.92);
  border-bottom:1px solid rgba(255,255,255,0.12);
  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:#edeef4;}
.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:#cfcfd6;}
.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.5rem,5.6vw,2.3rem); font-weight:700; letter-spacing:-0.01em; line-height:1.12; 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 matches the thesis lead everywhere — same size, color, line-height, font */
.body{font-size:clamp(1.05rem,2.5vw,1.3rem); color:var(--ink); line-height:1.5;}
.body + .body{margin-top:1rem;}
.body strong{color:var(--ink); font-weight:600;}
.fine{font-size:.95rem; 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:.72rem; 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:.78rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--violet-light); margin-top:.5rem;}
.bl-outcome{font-size:1.1rem; color:var(--ink); line-height:1.55; margin-top:.7rem;}
.bl-problem{font-size:1.02rem; color:var(--ink-2); line-height:1.55; margin-top:.55rem;}
.bl-detail{font-size:1rem; color:var(--ink-3); line-height:1.65; margin-top:.55rem;}
.bl-link{display:inline-block; margin-top:.9rem; font-size:.85rem; 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:.85rem; 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:.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.35rem;}
.detail a, .detail p{font-size:1.02rem; color:var(--ink-2);}
.detail a:hover{color:var(--violet-light);}

/* footer */
.foot{position:relative; z-index:15; padding:2.5rem 1.4rem 3rem; background:#000;
  text-shadow:0 1px 2px #000, 0 0 4px #000;}   /* above the mobile dissolve overlay (z10), below the nav (z20) — band hides behind the footer */
.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:.82rem; letter-spacing:0.1em; color:#dcdce2;}
.foot-links a:hover{color:var(--violet-light);}
.foot-meta{text-align:center; font-size:.78rem; color:#9a9aa6; letter-spacing:0.04em;}

/* ===== Light theme — content / subpages: inverted to a white page with black text, solid
   violet headers, and a smooth (dot-less) version of the same noise field. Applied via
   <body class="theme-light">. The homepage animates INTO this state on scroll (Phase 2). ===== */
body.theme-light{ --ink:#0a0a0c; --ink-2:#0a0a0c; --ink-3:#0a0a0c; --line:rgba(0,0,0,0.12);
  background:#ffffff; color:#0a0a0c; }
body.theme-light .screen-content{ text-shadow:none; }
/* nav + footer stay dark chrome on every page (see .nav / .foot) so they stand out on both the dark hero and the light content */

/* 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;}
}