/* ===========================================================================
   Matt Parvaneh — stylesheet
   Loaded by index.html. Section order:
     tokens · boot · sheet · nav · main · type · home · crt
     · shared (index rows) · detail pages · about · footer
   =========================================================================== */

:root{
  --void:      #06070b;
  --panel:     #0a0d14;
  --panel-lit: #0e1220;
  --rule:      #1b2740;
  --oxblood:   #8f2129;
  --phos:      #8fc4f5;
  --phos-dim:  #4d6f96;
  --phos-hot:  #d7ecff;
 
  /* text: one solid reading color, one quieter label color */
  --text:      #bcc4cc;
  --text-mute: #8e98a3;
  --moss:      #16221b;
}
 
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
 
body{
  margin:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  padding:0;
  display:flex;
  justify-content:center;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, #101a2b 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, var(--moss) 0%, transparent 70%),
    var(--void);
  color:var(--text);
  font-family:'Source Serif 4', Georgia, serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
 
/* softened: these scanlines were sitting on top of every paragraph */
body::after{
  content:"";
  position:fixed; inset:0; z-index:80;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px,
      transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.45) 100%);
  mix-blend-mode:multiply;
}
body::before{
  content:"";
  position:fixed; inset:-50%; z-index:79;
  pointer-events:none;
  opacity:0.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
 
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}
 
:focus-visible{ outline:1px solid var(--phos); outline-offset:3px; }
 
/* ============ BOOT ============ */
#boot{
  position:fixed; inset:0; z-index:200;
  background:var(--void);
  display:none; flex-direction:column; justify-content:center;
  padding:0 24px; cursor:pointer;
}
html.booting #boot{display:flex;}
html.booting .sheet{opacity:0;}
 
.boot-inner{width:100%; max-width:440px; margin:0 auto; font-family:'Share Tech Mono', monospace;}
.boot-brand{
  font-family:'Cormorant Garamond', serif;
  font-weight:300; font-size:13px; letter-spacing:0.5em; text-transform:uppercase;
  color:var(--phos-dim); margin-bottom:26px;
  opacity:0; animation:bootIn .5s ease .1s forwards;
}
.boot-line{
  font-size:12px; letter-spacing:0.07em; color:var(--phos-dim); line-height:2.1;
  opacity:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.boot-line.show{animation:bootIn .16s steps(2) forwards;}
.boot-line .ok{color:var(--phos);}
.boot-line .bad{color:var(--oxblood);}
@keyframes bootIn{to{opacity:1;}}
 
.boot-meter{margin-top:24px; display:flex; align-items:center; gap:12px; opacity:0;}
.boot-meter.show{animation:bootIn .2s forwards;}
.boot-track{flex:1; height:9px; border:1px solid var(--phos-dim); padding:1px;}
.boot-fill{
  height:100%; width:0%;
  background:repeating-linear-gradient(90deg, var(--phos) 0 3px, transparent 3px 5px);
  box-shadow:0 0 12px rgba(143,196,245,.6);
}
.boot-pct{font-size:11px; color:var(--phos); letter-spacing:0.08em; min-width:44px; text-align:right;}
.boot-skip{margin-top:22px; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:#33455e;}
 
#boot.flare{animation:flare .5s ease forwards;}
@keyframes flare{
  0%{ background:var(--void); }
  22%{ background:#dbeeff; }
  100%{ background:var(--void); opacity:0; visibility:hidden; }
}
 
/* ============ SHEET ============ */
.sheet{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, var(--panel-lit) 0%, var(--panel) 22%, var(--panel) 100%);
  border:none;
  box-shadow:none;
}
.sheet.power-on{ animation:powerOn .75s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes powerOn{
  0%{ opacity:0; transform:scaleY(0.004) scaleX(1.04); filter:brightness(3); }
  38%{ opacity:1; transform:scaleY(0.02) scaleX(1); filter:brightness(2.2); }
  100%{ opacity:1; transform:scaleY(1) scaleX(1); filter:brightness(1); }
}
 
/* corner ticks, inset off the viewport edge so they aren't clipped */
.sheet .brk{position:absolute; width:14px; height:14px; border:1px solid var(--phos-dim); z-index:6; pointer-events:none;}
.brk.tl{top:12px; left:12px; border-right:none; border-bottom:none;}
.brk.tr{top:12px; right:12px; border-left:none; border-bottom:none;}
.brk.bl{bottom:12px; left:12px; border-right:none; border-top:none;}
.brk.br{bottom:12px; right:12px; border-left:none; border-top:none;}
 
/* ============ NAV ============ */
header{
  flex:0 0 auto;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:20px 44px 18px;
  border-bottom:1px solid var(--rule);
  position:relative; z-index:4;
}
@media (max-width:600px){ header{padding:18px 22px 16px;} }
 
nav button{
  background:none; border:none; padding:2px 0; cursor:pointer;
  font-family:'Share Tech Mono', monospace;
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-mute);
  transition:color .18s ease;
}
nav button:hover{color:var(--phos-hot);}
nav button.active{
  color:var(--phos-hot);
  border-bottom:1px solid var(--oxblood);
}
.nav-right{display:flex; gap:24px; flex-wrap:wrap; justify-content:flex-end;}
 
/* ============ MAIN ============ */
/* main is the only scroll container — the document itself never scrolls.
   home + about fit inside it, so those two pages have no scrollbar at all. */
main{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:44px 44px 54px;
  display:flex;
  flex-direction:column;
  position:relative; z-index:4;
}
@media (max-width:600px){ main{padding:32px 22px 44px;} }

/* keeps line length readable now that the frame is full-bleed */
main > .page{ width:100%; max-width:1080px; margin:0 auto; flex-shrink:0; }
 
#tune{
  position:absolute; inset:0; z-index:9;
  display:none; align-items:center; justify-content:center;
  background:rgba(6,7,11,0.92);
  font-family:'Share Tech Mono', monospace;
}
#tune.on{display:flex; animation:tuneIn .1s forwards;}
@keyframes tuneIn{from{opacity:0;} to{opacity:1;}}
.tune-label{
  font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--phos-dim); margin-bottom:10px; text-align:center;
}
.tune-track{width:170px; height:5px; border:1px solid var(--phos-dim); padding:1px; margin:0 auto;}
.tune-fill{
  height:100%; width:0%;
  background:var(--phos); box-shadow:0 0 10px rgba(143,196,245,.7);
  animation:tuneFill .3s linear forwards;
}
@keyframes tuneFill{to{width:100%;}}
.wipe{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--phos-hot), transparent);
  box-shadow:0 0 18px rgba(143,196,245,.8);
  z-index:10; pointer-events:none;
  animation:wipeDown .42s ease-out forwards;
}
@keyframes wipeDown{ from{top:0; opacity:1;} to{top:100%; opacity:0;} }
 
.page{display:none;}
.page.active{display:block; animation:boot .38s ease both;}

/* the two short pages stretch and centre instead of hugging the top */
#page-home.active,
#page-about.active{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (max-height:620px){
  #page-home.active,
  #page-about.active{ justify-content:flex-start; }
}
@keyframes boot{
  from{opacity:0; transform:translateY(7px); filter:blur(1.5px);}
  to{opacity:1; transform:none; filter:blur(0);}
}
 
/* ============ TYPE ============ */
.eyebrow{
  font-family:'Share Tech Mono', monospace;
  font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--phos-dim); margin:0 0 16px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:5px; height:5px;
  background:var(--oxblood);
  box-shadow:0 0 8px rgba(143,33,41,.9);
  flex-shrink:0;
}
 
/* display face stays Cormorant — glow lives on titles only */
h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:300;
  font-size:clamp(34px, 6.6vw, 50px);
  line-height:1.04;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--phos-hot);
  margin:0;
  text-shadow:0 0 26px rgba(143,196,245,0.22);
}
h1 .glow-off{color:#dfe5eb; text-shadow:none;}
 
.hand{
  font-family:'Kalam', cursive;
  font-size:16px; color:var(--text-mute);
  display:inline-block; transform:rotate(-1.2deg); margin-top:20px;
}
 
.lede{
  font-size:17.5px;
  line-height:1.72;
  color:var(--text);
  max-width:42ch;
  margin:22px 0 0;
  font-weight:400;
}
.linklike{
  background:none; border:none; padding:0;
  font:inherit; color:var(--phos); cursor:pointer;
  border-bottom:1px solid rgba(143,196,245,0.45);
  transition:color .18s, border-color .18s;
}
.linklike:hover{color:var(--phos-hot); border-color:var(--phos-hot);}
 
/* ============ HOME SPLIT ============ */
.home-grid{
  --crt-w:clamp(320px, 33vw, 480px);
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--crt-w);
  gap:clamp(40px, 5vw, 64px);
  align-items:center;
  margin-top:4px;
}
@media (max-width:740px){
  .home-grid{--crt-w:400px; grid-template-columns:1fr; gap:34px;}
  .crt{margin:0 auto;}
}

/* home reads larger than the index pages — it has the room now */
#page-home.active{ max-width:1200px; }
#page-home .eyebrow{ font-size:11.5px; margin-bottom:22px; }
#page-home h1{ font-size:clamp(40px, 5.2vw, 66px); }
#page-home .lede{
  font-size:clamp(18px, 1.5vw, 22px);
  line-height:1.68;
  max-width:40ch;
  margin-top:clamp(24px, 2.4vw, 34px);
}
/* the index pages run a full-width list underneath — a 42ch lede looks stranded there */
#page-writing .lede,
#page-projects .lede{ max-width:none; }

#page-home .crt-osd,
#page-home .crt-stamp{ font-size:clamp(9px, 0.72vw, 11px); }
#page-home .crt-chin{ font-size:clamp(8.5px, 0.68vw, 10.5px); }
 
/* ---------- the CRT ---------- */
.crt{
  width:100%;
  max-width:var(--crt-w, 288px);
  background:linear-gradient(165deg, #1a1e26 0%, #12151c 45%, #0b0d12 100%);
  border:1px solid #262c38;
  border-radius:18px 18px 13px 13px;
  /* bezel scales with the set so it doesn't look thin at the large end */
  padding:clamp(16px, 1.5vw, 22px) clamp(16px, 1.5vw, 22px) clamp(8px, 0.8vw, 12px);
  position:relative;
  box-shadow:
    0 0 0 1px rgba(143,196,245,0.05),
    0 26px 50px -22px rgba(0,0,0,0.95),
    0 0 60px -22px rgba(143,196,245,0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
 
.crt-screen{
  /* Default blank CRT background as a backup */
  /* --photo:linear-gradient(200deg,#4a5a72 0%,#2c3a52 38%,#1b2433 62%,#0d1220 100%); */
  --photo:url('pfp.jpeg');
  /* e.g.  --photo:url('me.jpg');  */

  /* TODO (idea, not scheduled): turn this into a carousel — cycle a few photos
     through the screen instead of one still. --photo is the single seam to drive:
     set it on .crt-screen from JS on a timer and all three layers (base + the two
     RGB ghosts) follow, since they all read the same variable. The existing
     channel-change treatment is the natural transition — reuse .crt-roll, or
     flash .crt-static up for ~120ms between images. Preload each file first,
     or the screen goes black on the swap. Pause it on prefers-reduced-motion. */

  position:relative;
  aspect-ratio:4/3;
  border-radius:12px / 16px;
  overflow:hidden;
  background:#05070a;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.9),
    inset 0 0 22px rgba(0,0,0,0.9),
    0 0 0 3px #0a0c11,
    0 0 0 4px #232935;
}
 
.crt-layer{
  position:absolute; inset:0;
  background-image:var(--photo);
  background-size:cover;
  background-position:center;
}
.crt-layer.base{
  filter:saturate(0.72) contrast(1.12) brightness(0.92);
  animation:wobble 7s ease-in-out infinite;
}
.crt-layer.ghost-r{
  background-color:#ff2d2d;
  background-blend-mode:multiply;
  mix-blend-mode:screen;
  opacity:0.42;
  animation:ghostR 7s ease-in-out infinite;
}
.crt-layer.ghost-b{
  background-color:#2d6bff;
  background-blend-mode:multiply;
  mix-blend-mode:screen;
  opacity:0.42;
  animation:ghostB 7s ease-in-out infinite;
}
@keyframes wobble{
  0%,100%{transform:translateX(0);}
  28%{transform:translateX(0.4px);}
  62%{transform:translateX(-0.4px);}
}
@keyframes ghostR{
  0%,100%{transform:translateX(1.6px);}
  33%{transform:translateX(2.6px);}
  71%{transform:translateX(1.1px);}
}
@keyframes ghostB{
  0%,100%{transform:translateX(-1.6px);}
  33%{transform:translateX(-2.4px);}
  71%{transform:translateX(-1px);}
}
 
.crt-static{
  position:absolute; inset:-60%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/></filter><rect width='140' height='140' filter='url(%23s)'/></svg>");
  opacity:0.14;
  mix-blend-mode:screen;
  animation:crawl .55s steps(4) infinite;
  pointer-events:none;
}
@keyframes crawl{
  0%{transform:translate(0,0);}
  25%{transform:translate(-6%,4%);}
  50%{transform:translate(5%,-5%);}
  75%{transform:translate(-4%,-3%);}
  100%{transform:translate(3%,6%);}
}
 
.crt-track{
  position:absolute; left:-10%; right:-10%;
  height:13%;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.05) 22%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0.05) 78%,
    transparent 100%);
  filter:blur(0.6px);
  mix-blend-mode:screen;
  animation:track 9s linear infinite;
  pointer-events:none;
}
@keyframes track{
  0%{transform:translateY(-140%) skewX(0deg);}
  47%{transform:translateY(300%) skewX(-1.4deg);}
  48%{transform:translateY(310%) skewX(1.4deg);}
  100%{transform:translateY(760%) skewX(0deg);}
}
 
.crt-scan{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0.30) 0px, rgba(0,0,0,0.30) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(to right,
      rgba(255,0,0,0.045) 0px, rgba(0,255,0,0.045) 1px, rgba(0,0,255,0.045) 2px);
  pointer-events:none;
}
 
.crt-glass{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 130% 120% at 50% 50%, transparent 52%, rgba(0,0,0,0.72) 100%),
    linear-gradient(168deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 22%, transparent 42%);
  pointer-events:none;
}
 
.crt-roll{
  position:absolute; inset:0;
  animation:roll 13s linear infinite;
  pointer-events:none;
}
@keyframes roll{
  0%, 92%, 100%{ background:transparent; }
  93%{ background:rgba(215,236,255,0.10); }
  94%{ background:transparent; }
  95%{ background:rgba(215,236,255,0.06); }
  96%{ background:transparent; }
}
 
.crt-osd{
  position:absolute; top:9px; left:11px;
  font-family:'Share Tech Mono', monospace;
  font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(233,244,255,0.82);
  text-shadow:0 0 8px rgba(143,196,245,0.9), 1.2px 0 0 rgba(255,45,45,0.55), -1.2px 0 0 rgba(45,107,255,0.55);
  pointer-events:none;
}
.crt-osd .rec{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--oxblood); margin-right:5px; vertical-align:1px;
  box-shadow:0 0 7px rgba(143,33,41,1);
  animation:blink 1.6s steps(1) infinite;
}
.crt-stamp{
  position:absolute; bottom:9px; right:11px;
  font-family:'Share Tech Mono', monospace;
  font-size:9px; letter-spacing:0.12em;
  color:rgba(233,244,255,0.7);
  text-shadow:0 0 8px rgba(143,196,245,0.8), 1.2px 0 0 rgba(255,45,45,0.5), -1.2px 0 0 rgba(45,107,255,0.5);
  pointer-events:none;
}
@keyframes blink{50%{opacity:0;}}
 
.crt-chin{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 3px 2px;
  font-family:'Share Tech Mono', monospace;
  font-size:8.5px; letter-spacing:0.2em; text-transform:uppercase;
  color:#3c4759;
}
.crt-led{
  width:6px; height:6px; border-radius:50%;
  background:var(--phos);
  box-shadow:0 0 9px rgba(143,196,245,0.95), 0 0 18px rgba(143,196,245,0.5);
  animation:ledPulse 4s ease-in-out infinite;
}
@keyframes ledPulse{
  0%,100%{opacity:0.85;}
  50%{opacity:0.45;}
}
 
/* ============ SHARED ============ */
.sec-head{
  font-family:'Share Tech Mono', monospace;
  font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--phos-dim);
  margin:44px 0 6px; padding-bottom:8px;
  border-bottom:1px solid var(--rule);
  display:flex; justify-content:space-between;
}
 
.entry{
  display:grid; grid-template-columns:46px 1fr; gap:0 16px;
  padding:22px 0;
  border-bottom:1px solid rgba(27,39,64,0.6);
  position:relative;
}
.entry:last-of-type{border-bottom:none;}
.entry .num{
  font-family:'Share Tech Mono', monospace;
  font-size:11px; color:var(--phos-dim); padding-top:7px; letter-spacing:0.06em;
}
.entry .title{
  font-family:'Cormorant Garamond', serif;
  font-weight:400; font-size:25px; letter-spacing:0.05em;
  color:#dfe5eb; margin:0 0 5px; cursor:pointer;
  transition:color .18s; display:inline-block;
  background:none; border:none; padding:0; text-align:left;
}
.entry .title:hover{color:var(--phos-hot);}
.entry .meta{
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--phos-dim); margin:0 0 9px;
}
.entry .blurb{
  font-size:16.5px; line-height:1.7;
  color:var(--text); margin:0; max-width:56ch; font-weight:400;
}
.entry .flag{
  font-family:'Kalam', cursive; font-size:13px; color:var(--oxblood);
  position:absolute; right:0; top:24px; transform:rotate(-2deg); display:none;
}
@media (min-width:760px){ .entry .flag{display:block;} }
 
.proj{
  display:flex; gap:28px; align-items:flex-start;
  padding:28px 0; border-bottom:1px solid rgba(27,39,64,0.6);
}
.proj:last-of-type{border-bottom:none;}
@media (max-width:640px){ .proj{flex-direction:column; gap:18px;} }
 
.scan{
  position:relative; flex-shrink:0; width:168px;
  border:1px solid var(--phos-dim);
  background:var(--void); padding:5px;
}
.scan .lbl{
  font-family:'Share Tech Mono', monospace;
  font-size:9px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--phos-dim);
  display:flex; justify-content:space-between; padding:0 1px 5px;
}
.scan .plate{
  aspect-ratio:4/5; position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(0deg, rgba(143,196,245,0.05) 0 1px, transparent 1px 4px),
    linear-gradient(155deg, #16203a 0%, #0a0e18 55%, #131a17 100%);
  display:flex; align-items:center; justify-content:center;
}
/* a thumb in posts/index.json fills the plate; without one it reads "no signal" */
.scan .plate img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(0.75) contrast(1.08) brightness(0.9);
}
.scan .plate span{
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:0.18em; color:var(--phos-dim);
}
.scan .plate::after{
  content:"";
  position:absolute; left:0; right:0; height:22%;
  background:linear-gradient(180deg, transparent, rgba(143,196,245,0.16), transparent);
  animation:sweep 5.5s linear infinite;
}
@keyframes sweep{
  0%{transform:translateY(-120%);}
  100%{transform:translateY(520%);}
}
.scan .cap{
  font-family:'Share Tech Mono', monospace;
  font-size:9px; letter-spacing:0.12em; color:var(--phos-dim);
  padding-top:5px; text-align:center; text-transform:uppercase;
}
.scan .corner{position:absolute; width:9px; height:9px; border:1px solid var(--phos);}
.scan .c1{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.scan .c2{top:-1px;right:-1px;border-left:none;border-bottom:none;}
.scan .c3{bottom:-1px;left:-1px;border-right:none;border-top:none;}
.scan .c4{bottom:-1px;right:-1px;border-left:none;border-top:none;}
 
.proj-body{flex:1; min-width:0;}
.proj-body h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:400; font-size:27px; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--phos-hot); margin:0 0 10px;
  text-shadow:0 0 20px rgba(143,196,245,0.16);
}
.proj-body .stack{
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--phos-dim);
  border-left:2px solid var(--oxblood);
  padding-left:10px; margin-bottom:13px;
}
.proj-body p{
  font-size:16.5px; line-height:1.7; color:var(--text);
  margin:0; max-width:46ch; font-weight:400;
}
/* the index title is the way into the detail page */
.proj-body h3 button{
  font:inherit; letter-spacing:inherit; text-shadow:inherit;
  background:none; border:none; padding:0; text-align:left;
  color:inherit; cursor:pointer;
  border-bottom:1px solid transparent;
  transition:border-color .18s;
}
.proj-body h3 button:hover{ border-bottom-color:var(--oxblood); }
.scan[data-page]{ cursor:pointer; }

/* ============ DETAIL PAGES ============ */
/* Narrower than the index pages — these are for reading, not scanning. */
/* every post renders into the one #page-post container; .wide is for projects,
   which carry figures and spec grids and want the extra room */
#page-post.active{ max-width:800px; }
#page-post.wide.active{ max-width:940px; }

.post-error{
  font-family:'Share Tech Mono', monospace;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--oxblood); line-height:2;
  padding:22px 0;
}

/* only ever seen in ?drafts preview — a published row can't carry this */
.draft-tag{
  display:inline-block; margin-right:10px; padding:1px 6px;
  border:1px solid var(--oxblood); border-radius:3px;
  font-family:'Share Tech Mono', monospace;
  font-size:9px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--oxblood); vertical-align:1px;
}

/* an index with nothing in it yet */
.empty{
  font-size:16.5px; line-height:1.7; color:var(--text-mute);
  padding:22px 0; margin:0; font-style:italic;
}

.back{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:'Share Tech Mono', monospace;
  font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--phos-dim);
  display:inline-flex; align-items:center; gap:9px;
  margin-bottom:30px;
  transition:color .18s;
}
.back:hover{ color:var(--phos-hot); }
.back::before{ content:"◀"; font-size:8px; }

.post h1{
  font-size:clamp(30px, 4vw, 46px);
  letter-spacing:0.1em;
  text-transform:none;
}
.post-meta{
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--phos-dim);
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin:20px 0 0; padding-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.post-meta .rec{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--oxblood); margin-right:7px; vertical-align:1px;
  box-shadow:0 0 7px rgba(143,33,41,1);
}

.post-body{ margin-top:36px; }
.post-body > p{
  font-size:17.5px; line-height:1.8; color:var(--text);
  margin:0 0 24px; max-width:68ch; font-weight:400;
}
.post-body > p.standfirst{
  font-size:19.5px; line-height:1.7; color:var(--phos-hot);
  font-weight:400; margin-bottom:32px;
}
.post-body h2{
  font-family:'Cormorant Garamond', serif;
  font-weight:400; font-size:26px; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--phos-hot); margin:44px 0 16px;
  text-shadow:0 0 20px rgba(143,196,245,0.16);
}
.post-body ul{ margin:0 0 24px; padding-left:0; list-style:none; max-width:66ch; }
.post-body li{
  font-size:17px; line-height:1.75; color:var(--text);
  padding-left:22px; margin-bottom:10px; position:relative;
}
.post-body li::before{
  content:""; position:absolute; left:2px; top:12px;
  width:5px; height:1px; background:var(--phos-dim);
}
.post-body blockquote{
  margin:0 0 26px; padding:2px 0 2px 20px;
  border-left:2px solid var(--oxblood);
  font-size:17px; line-height:1.75; color:var(--text-mute); font-style:italic;
  max-width:60ch;
}
.post-body a{ color:var(--phos); text-decoration:none; border-bottom:1px solid rgba(143,196,245,0.45); }
.post-body a:hover{ color:var(--phos-hot); border-color:var(--phos-hot); }

code{
  font-family:'Share Tech Mono', monospace;
  font-size:0.88em; color:var(--phos);
  background:rgba(143,196,245,0.07);
  border:1px solid var(--rule);
  padding:1px 5px;
}
pre{
  background:var(--void);
  border:1px solid var(--rule);
  padding:16px 18px; margin:0 0 26px;
  overflow-x:auto;
  font-family:'Share Tech Mono', monospace;
  font-size:12.5px; line-height:1.75; color:var(--text);
}
pre code{ background:none; border:none; padding:0; color:inherit; font-size:inherit; }
pre .cm{ color:var(--phos-dim); }

/* screenshot / figure slot — same treatment as the project index plates */
.shot{
  border:1px solid var(--rule); background:var(--void);
  padding:6px; margin:32px 0;
}
.shot-plate{
  aspect-ratio:16/9; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(0deg, rgba(143,196,245,0.05) 0 1px, transparent 1px 4px),
    linear-gradient(155deg, #16203a 0%, #0a0e18 55%, #131a17 100%);
}
.shot-plate span{
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--phos-dim);
}
.shot-plate::after{
  content:"";
  position:absolute; left:0; right:0; height:22%;
  background:linear-gradient(180deg, transparent, rgba(143,196,245,0.16), transparent);
  animation:sweep 5.5s linear infinite;
}
.shot figcaption{
  font-family:'Share Tech Mono', monospace;
  font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--phos-dim); padding-top:8px; text-align:center;
}

.post-end{
  margin-top:48px; padding-top:18px;
  border-top:1px solid var(--rule);
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--phos-dim);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* was an inline style="" on the markup — moved here so the CSP needs no
   'unsafe-inline' in style-src */
.about{ margin-top:26px; }

.about p{
  font-size:17.5px; line-height:1.78; color:var(--text);
  max-width:60ch; margin:0 0 20px; font-weight:400;
}
.fields{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:1px; margin-top:30px;
  background:var(--rule); border:1px solid var(--rule);
}
.field{
  background:var(--panel); padding:10px 12px;
  font-family:'Share Tech Mono', monospace;
  font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  display:flex; justify-content:space-between; gap:8px;
}
.field .k{color:var(--phos-dim);}
.field .v{color:var(--phos);}
 
.sig{
  font-family:'Kalam', cursive; font-size:26px; color:var(--phos);
  margin-top:34px; display:inline-block; transform:rotate(-2deg);
}
 
footer{
  flex:0 0 auto;
  padding:13px 44px;
  border-top:1px solid var(--rule);
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--phos-dim);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  position:relative; z-index:4;
}
@media (max-width:600px){ footer{padding:12px 22px;} }
.foot-right{display:flex; align-items:center; gap:12px;}
 
.radar{
  position:relative; width:20px; height:20px;
  border:1px solid var(--phos-dim); border-radius:50%;
  overflow:hidden; flex-shrink:0;
  background:radial-gradient(circle, rgba(143,196,245,0.08), transparent 70%);
}
.radar::before{
  content:""; position:absolute; inset:0;
  background:conic-gradient(from 0deg,
    rgba(143,196,245,0.55) 0deg,
    rgba(143,196,245,0.12) 42deg,
    transparent 90deg, transparent 360deg);
  animation:sweepRadar 2.6s linear infinite;
}
.radar::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, transparent 49%, rgba(143,196,245,.22) 49%, rgba(143,196,245,.22) 51%, transparent 51%),
    linear-gradient(to bottom, transparent 49%, rgba(143,196,245,.22) 49%, rgba(143,196,245,.22) 51%, transparent 51%);
}
@keyframes sweepRadar{to{transform:rotate(360deg);}}