/* ============================================================
   TOO MUCH TV — Maker Broadcast Co.
   Vintage print × blueprint × CRT broadcast design system
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* surfaces */
  --paper:      oklch(0.945 0.012 85);   /* warm newsprint */
  --paper-2:    oklch(0.915 0.016 84);   /* darker panel */
  --ink:        oklch(0.215 0.014 60);   /* warm near-black */
  --ink-soft:   oklch(0.215 0.014 60 / 0.62);
  --hairline:   oklch(0.215 0.014 60 / 0.16);

  /* riso accents — bold, same family */
  --red:    oklch(0.625 0.225 28);   /* signal red */
  --blue:   oklch(0.555 0.18  258);  /* broadcast blue */
  --yellow: oklch(0.835 0.16  88);   /* tally yellow */
  --green:  oklch(0.74  0.17  152);  /* phosphor green */
  --cyan:   oklch(0.74  0.13  205);

  --accent: var(--red);

  /* type */
  --sans: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace;

  /* geometry */
  --bar-h: 34px;
  --maxw: 1280px;
  --shadow-hard: 5px 5px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size:26px 26px;
  background-position:-1px -1px;
  font-size:17px;
  line-height:1.5;
  overflow-x:hidden;
}
@media (max-width:820px){ body{ cursor:auto; } }

img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; }

/* ---------- Fixed CRT / paper overlays ---------- */
.fx-overlay{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
}
.fx-scanlines{
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.035) 0px,
    rgba(0,0,0,0.035) 1px,
    transparent 1px,
    transparent 3px);
  mix-blend-mode:multiply;
  opacity:.6;
}
.fx-vignette{
  box-shadow:inset 0 0 220px rgba(40,28,16,0.20);
}
.fx-grain{
  opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.page{ min-height:60vh; padding-bottom:90px; }
@media (max-width:600px){ .wrap{ padding:0 18px; } }

/* ---------- Broadcast bar (top) ---------- */
.bbar{
  position:sticky; top:0; z-index:600;
  height:var(--bar-h); background:var(--ink); color:var(--paper);
  display:flex; align-items:center; gap:18px;
  padding:0 16px; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  border-bottom:2px solid var(--ink);
}
.bbar .onair{ display:flex; align-items:center; gap:7px; color:var(--red); font-weight:700; }
.bbar .dot{ width:8px; height:8px; border-radius:50%; background:var(--red);
  box-shadow:0 0 7px var(--red); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }
.bbar .sep{ opacity:.4; }
.bbar .spacer{ flex:1; }
.bbar .signal{ display:flex; align-items:flex-end; gap:2px; height:11px; }
.bbar .signal i{ width:3px; background:var(--paper); display:block; }
.bbar .signal i:nth-child(1){ height:30%; }
.bbar .signal i:nth-child(2){ height:55%; }
.bbar .signal i:nth-child(3){ height:80%; }
.bbar .signal i:nth-child(4){ height:100%; }
.bbar .hide-sm{ }
@media (max-width:680px){ .bbar .hide-sm{ display:none; } }

/* ---------- Header / channel nav ---------- */
.head{ position:sticky; top:var(--bar-h); z-index:550; background:var(--paper);
  border-bottom:2px solid var(--ink); }
.head-in{ max-width:var(--maxw); margin:0 auto; padding:12px 28px;
  display:flex; align-items:center; gap:20px; }
@media (max-width:600px){ .head-in{ padding:10px 18px; } }

.brand{ display:flex; align-items:center; gap:11px; cursor:pointer; text-decoration:none;
  user-select:none; }
.brand .tv{ width:40px; height:32px; border:2px solid var(--ink); border-radius:4px;
  position:relative; background:var(--ink); flex:none; overflow:hidden; }
.brand .tv canvas{ width:100%; height:100%; display:block; opacity:.9; }
.brand .tv::after{ content:""; position:absolute; right:-7px; top:6px; width:7px;
  height:2px; background:var(--ink); }
.brand .bname{ font-weight:700; font-size:19px; letter-spacing:-.02em; line-height:1; }
.brand .bsub{ font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); }

.nav{ margin-left:auto; display:flex; gap:2px; }
.nav button{ background:transparent; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:6px 11px; border-radius:3px; color:var(--ink); text-align:left; }
.nav button .ch{ font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  color:var(--ink-soft); }
.nav button .nm{ font-size:13px; font-weight:500; letter-spacing:.01em; }
.nav button:hover{ background:var(--paper-2); }
.nav button.active{ background:var(--ink); color:var(--paper); }
.nav button.active .ch{ color:var(--yellow); }
@media (max-width:920px){ .nav button .nm{ display:none; } .nav button{ padding:6px 9px; } }

/* mobile remote menu */
.menu-btn{ display:none; margin-left:auto; background:var(--ink); color:var(--paper);
  border:none; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:9px 14px; border-radius:4px; cursor:pointer; }
.remote{ position:fixed; inset:0; z-index:700; background:rgba(20,16,12,.55);
  display:none; }
.remote.open{ display:block; }
.remote-card{ position:absolute; top:74px; right:14px; width:230px; background:var(--ink);
  border:2px solid var(--ink); border-radius:12px; padding:12px; box-shadow:var(--shadow-hard); }
.remote-card button{ width:100%; display:flex; align-items:center; gap:10px;
  background:transparent; border:none; color:var(--paper); padding:11px 12px;
  border-radius:6px; cursor:pointer; text-align:left; }
.remote-card button .ch{ font-family:var(--mono); font-size:12px; color:var(--yellow);
  width:30px; }
.remote-card button .nm{ font-size:15px; font-weight:500; }
.remote-card button.active,.remote-card button:hover{ background:rgba(255,255,255,.1); }
@media (max-width:920px){ .nav{ display:none; } .menu-btn{ display:block; } }

/* ---------- Ticker ---------- */
.ticker{ background:var(--yellow); color:var(--ink); border-bottom:2px solid var(--ink);
  overflow:hidden; height:30px; display:flex; align-items:center; position:relative; }
.ticker .tag{ position:absolute; left:0; top:0; bottom:0; z-index:2; background:var(--ink);
  color:var(--yellow); font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.12em; display:flex; align-items:center; padding:0 12px; text-transform:uppercase; }
.ticker .track{ display:flex; gap:42px; white-space:nowrap; padding-left:140px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  animation:marq 34s linear infinite; }
.ticker .track span b{ color:var(--red); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- Section header ---------- */
.shead{ display:flex; align-items:flex-end; gap:18px; margin:0 0 26px; flex-wrap:wrap; }
.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.kicker::before{ content:""; width:22px; height:2px; background:var(--accent); }
.h-xl{ font-size:clamp(40px,8vw,104px); line-height:.92; font-weight:700;
  letter-spacing:-.03em; margin:0; }
.h-l{ font-size:clamp(30px,5vw,56px); line-height:.96; font-weight:700;
  letter-spacing:-.025em; margin:0; }
.h-m{ font-size:clamp(22px,3vw,32px); line-height:1.02; font-weight:700;
  letter-spacing:-.02em; margin:0; }
.lede{ font-size:clamp(17px,2vw,21px); line-height:1.55; max-width:62ch; color:var(--ink);
  text-wrap:pretty; }

/* overprint / misregistration headline */
.overprint{ position:relative; display:inline-block; }
.overprint > .lyr{ position:absolute; inset:0; pointer-events:none; }
.overprint > .l-red{ color:var(--red);  transform:translate(-3px,2px);  mix-blend-mode:multiply; }
.overprint > .l-blue{ color:var(--blue); transform:translate(3px,-2px);  mix-blend-mode:multiply; }

/* ---------- Color bars (SMPTE) ---------- */
.bars{ display:flex; height:10px; width:100%; }
.bars span{ flex:1; }
.bars .c1{ background:var(--ink); }
.bars .c2{ background:var(--yellow); }
.bars .c3{ background:var(--cyan); }
.bars .c4{ background:var(--green); }
.bars .c5{ background:var(--red); }
.bars .c6{ background:var(--blue); }
.bars.tall{ height:18px; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:13px 20px; border:2px solid var(--ink); background:var(--ink); color:var(--paper);
  border-radius:4px; cursor:pointer; text-decoration:none; box-shadow:var(--shadow-hard-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-hard); }
.btn:active{ transform:translate(2px,2px); box-shadow:none; }
.btn.red{ background:var(--red); border-color:var(--ink); }
.btn.ghost{ background:var(--paper); color:var(--ink); }
.btn .arr{ font-family:var(--sans); }
@media (max-width:820px){ .btn{ cursor:pointer; } }

/* ---------- Card (project) ---------- */
.grid{ display:grid; gap:24px; }
.grid.cols2{ grid-template-columns:repeat(2,1fr); }
.grid.cols3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .grid.cols2,.grid.cols3{ grid-template-columns:1fr; } }

.card{ position:relative; background:var(--paper); border:2px solid var(--ink);
  border-radius:6px; box-shadow:var(--shadow-hard); overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease; cursor:pointer; }
.card:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--ink); }
.card .frame{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink);
  border-bottom:2px solid var(--ink); }
.card .frame img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05); mix-blend-mode:luminosity;
  transition:filter .3s ease, transform .5s ease; }
.card:hover .frame img{ filter:none; transform:scale(1.04); mix-blend-mode:normal; }
.card .frame::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg,var(--accent),transparent 60%); opacity:.32;
  mix-blend-mode:multiply; transition:opacity .3s ease; }
.card:hover .frame::before{ opacity:0; }
.card.lit .frame img{ filter:none; mix-blend-mode:normal; transform:none; }
.card.lit .frame::before{ opacity:0; }
.card .meta{ position:absolute; top:10px; left:10px; z-index:3; font-family:var(--mono);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper);
  display:flex; gap:8px; align-items:center; }
.card .meta .pill{ background:var(--ink); padding:3px 7px; border-radius:3px; }
.card .body{ padding:16px 18px 20px; }
.card .body .tt{ font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0 0 6px; }
.card .body .dd{ font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  color:var(--ink-soft); text-transform:uppercase; margin:0 0 11px; }
.card .body p{ margin:0 0 16px; color:var(--ink); font-size:15px; line-height:1.5; }
.card .view{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:8px;
  border-bottom:2px solid var(--accent); padding-bottom:2px; }

/* registration crosshair corners */
.regmark{ position:absolute; width:13px; height:13px; z-index:4; opacity:.5; pointer-events:none; }
.regmark::before,.regmark::after{ content:""; position:absolute; background:currentColor; }
.regmark::before{ left:6px; top:0; width:1px; height:13px; }
.regmark::after{ top:6px; left:0; height:1px; width:13px; }
.regmark.tl{ left:7px; top:7px; } .regmark.tr{ right:7px; top:7px; }
.regmark.bl{ left:7px; bottom:7px; } .regmark.br{ right:7px; bottom:7px; }

/* ---------- Filters ---------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.chip{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:8px 15px; border:2px solid var(--ink); background:var(--paper);
  color:var(--ink); border-radius:30px; cursor:pointer; display:flex; align-items:center; gap:7px;
  transition:background .12s, color .12s; }
.chip .n{ opacity:.5; }
.chip.active{ background:var(--ink); color:var(--paper); }
.chip.active .n{ color:var(--yellow); opacity:1; }
.chip:hover:not(.active){ background:var(--paper-2); }
@media (max-width:820px){ .chip{ cursor:pointer; } }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- Transition overlay (channel flip) ---------- */
.flip{ position:fixed; inset:0; z-index:9800; background:var(--ink); display:none;
  align-items:center; justify-content:center; overflow:hidden; }
.flip.on{ display:flex; }
.flip canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.85; }
.flip .label{ position:relative; z-index:2; text-align:center; color:var(--paper);
  font-family:var(--mono); }
.flip .label .big{ font-size:clamp(60px,16vw,180px); font-weight:700; line-height:1;
  letter-spacing:.04em; font-family:var(--sans); }
.flip .label .small{ font-size:14px; letter-spacing:.3em; text-transform:uppercase; margin-top:8px; }
.flip .hbar{ position:absolute; left:0; right:0; height:60px; z-index:1;
  background:rgba(255,255,255,.08); animation:hold 0.5s linear; }
@keyframes hold{ from{ top:-60px; } to{ top:100%; } }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:46px 28px 30px; }
.hero .screen{ position:relative; border:3px solid var(--ink); border-radius:14px;
  background:var(--ink); overflow:hidden; box-shadow:var(--shadow-hard);
  padding:54px 44px 48px; min-height:430px; display:flex; flex-direction:column;
  justify-content:center; }
.hero .screen canvas.static{ position:absolute; inset:0; width:100%; height:100%;
  opacity:.16; z-index:0; }
.hero .screen .barsrow{ position:absolute; top:0; left:0; right:0; z-index:1; }
.hero .glitch{ position:relative; z-index:2; color:var(--paper);
  font-size:clamp(48px,12vw,150px); font-weight:700; letter-spacing:-.03em; line-height:.86;
  margin:0; }
.hero .glitch .ln{ display:block; }
.hero .tagline{ position:relative; z-index:2; color:var(--paper); font-family:var(--mono);
  font-size:clamp(13px,2vw,17px); letter-spacing:.12em; text-transform:uppercase;
  margin:22px 0 30px; max-width:40ch; }
.hero .tagline b{ color:var(--yellow); }
.hero-by{ position:relative; z-index:2; margin:0 0 16px; color:var(--yellow);
  font-family:var(--mono); font-size:clamp(12px,1.6vw,15px); letter-spacing:.22em;
  text-transform:uppercase; }
.hero .cta-row{ position:relative; z-index:2; display:flex; gap:14px; flex-wrap:wrap; }
.hero .cta-row .btn{ box-shadow:4px 4px 0 rgba(0,0,0,.5); }
.hero .corner{ position:absolute; z-index:3; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; color:rgba(244,236,224,.6); }
.hero .corner.tr{ top:16px; right:18px; } .hero .corner.bl{ bottom:16px; left:18px; }
.hero .corner.br{ bottom:16px; right:18px; }
@media (max-width:600px){ .hero{ padding:30px 18px 24px; } }

/* rgb split glitch text */
.gtext{ position:relative; display:inline-block; }
.gtext::before,.gtext::after{ content:attr(data-t); position:absolute; left:0; top:0;
  width:100%; clip-path:inset(0); }
.gtext::before{ color:var(--red); transform:translate(-2px,0); mix-blend-mode:screen; }
.gtext::after{ color:var(--cyan); transform:translate(2px,0); mix-blend-mode:screen; }
.gtext.glitching::before{ animation:gl1 .4s steps(2) infinite; }
.gtext.glitching::after{ animation:gl2 .4s steps(2) infinite; }
@keyframes gl1{ 50%{ transform:translate(-4px,1px); } }
@keyframes gl2{ 50%{ transform:translate(4px,-1px); } }

/* ---------- Workbench (draggable badges) ---------- */
.bench{ position:relative; border:2px dashed var(--hairline); border-radius:10px;
  background:var(--paper-2); padding:14px 18px 18px; overflow:hidden; }
.bench .hint{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.bench-floor{ position:relative; height:172px; }
.badge{ position:absolute; font-family:var(--mono); font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:10px 14px; border:2px solid var(--ink);
  border-radius:6px; box-shadow:var(--shadow-hard-sm); cursor:grab; user-select:none;
  background:var(--paper); white-space:nowrap; color:var(--ink); -webkit-appearance:none; appearance:none;
  transition:box-shadow .12s ease; touch-action:none; }
.badge:hover{ box-shadow:var(--shadow-hard); }
.badge:active{ cursor:grabbing; }
.badge.r{ background:var(--red); color:var(--paper); }
.badge.b{ background:var(--blue); color:var(--paper); }
.badge.y{ background:var(--yellow); }
.badge.g{ background:var(--green); }

/* ---------- Stat / fact strip ---------- */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:2px solid var(--ink); border-radius:8px; overflow:hidden; background:var(--paper); }
.facts .f{ padding:20px 18px; border-right:2px solid var(--ink); }
.facts .f:last-child{ border-right:none; }
.facts .f .n{ font-size:36px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.facts .f .k{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:7px; }
@media (max-width:700px){ .facts{ grid-template-columns:repeat(2,1fr); }
  .facts .f:nth-child(2){ border-right:none; }
  .facts .f:nth-child(1),.facts .f:nth-child(2){ border-bottom:2px solid var(--ink); } }

/* ---------- Placeholder media ---------- */
.ph{ position:relative; background:
    repeating-linear-gradient(45deg, var(--paper-2) 0 11px, var(--paper) 11px 22px);
  border:2px solid var(--ink); border-radius:6px; display:flex; align-items:center;
  justify-content:center; overflow:hidden; }
.ph .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--paper); padding:5px 10px; border:1px solid var(--hairline);
  border-radius:3px; }

/* ---------- Photos gallery ---------- */
.gallery{ columns:3; column-gap:18px; }
@media (max-width:900px){ .gallery{ columns:2; } }
@media (max-width:560px){ .gallery{ columns:1; } }
.shot{ break-inside:avoid; margin-bottom:18px; border:2px solid var(--ink); border-radius:6px;
  overflow:hidden; box-shadow:var(--shadow-hard-sm); cursor:pointer; position:relative; background:var(--paper); }
.shot .ph{ border:none; border-radius:0; }
.shot:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-hard); }
.shot{ transition:transform .14s, box-shadow .14s; }
.shot .cap{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); padding:8px 10px; border-top:2px solid var(--ink); display:flex;
  justify-content:space-between; }
@media (max-width:820px){ .shot{ cursor:pointer; } }

/* draggable polaroids */
.polas{ position:relative; height:340px; border:2px dashed var(--hairline); border-radius:10px;
  background:var(--paper-2); overflow:hidden; margin-bottom:34px; }
.pola{ position:absolute; width:170px; background:var(--paper); border:1px solid var(--ink);
  padding:9px 9px 30px; box-shadow:var(--shadow-hard-sm); cursor:grab; user-select:none; }
.pola:active{ cursor:grabbing; }
.pola .ph{ aspect-ratio:1; border:none; border-radius:0; }
.pola .t{ position:absolute; bottom:8px; left:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:.06em; color:var(--ink-soft); }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:9700; background:rgba(20,16,12,.92);
  display:none; align-items:center; justify-content:center; padding:40px; }
.lightbox.on{ display:flex; }
.lightbox .lb-card{ position:relative; width:min(760px,92vw); background:var(--paper);
  border:3px solid var(--ink); border-radius:10px; padding:14px; box-shadow:var(--shadow-hard); }
.lightbox .lb-card .ph{ aspect-ratio:4/3; }
.lightbox .lb-desc{ font-size:15px; line-height:1.5; color:var(--ink); margin:14px 2px 0;
  text-wrap:pretty; }
.lightbox .lb-meta{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:12px; }
.lightbox .lb-close{ position:absolute; top:-16px; right:-16px; width:38px; height:38px;
  border-radius:50%; background:var(--red); color:var(--paper); border:2px solid var(--ink);
  font-size:18px; cursor:pointer; box-shadow:var(--shadow-hard-sm); }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px;
  background:var(--ink); color:var(--paper); border:none; border-radius:50%; cursor:pointer;
  font-size:18px; }
.lightbox .lb-nav.prev{ left:-21px; } .lightbox .lb-nav.next{ right:-21px; }

/* ---------- Forms ---------- */
.form{ display:grid; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); }
.field input,.field textarea,.field select{ font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:5px; padding:12px 14px;
  cursor:auto; }
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:3px solid var(--accent);
  outline-offset:1px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .row2{ grid-template-columns:1fr; } }
@media (max-width:820px){ .field input,.field textarea,.field select{ cursor:auto; } }
.formnote{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:.04em; }
.sent{ border:2px solid var(--green); background:color-mix(in oklch,var(--green) 16%,var(--paper));
  border-radius:6px; padding:16px; font-family:var(--mono); font-size:13px; }

/* info list */
.deflist{ list-style:none; padding:0; margin:0; border-top:2px solid var(--ink); }
.deflist li{ display:flex; gap:16px; padding:14px 2px; border-bottom:1px solid var(--hairline);
  align-items:baseline; }
.deflist li .ic{ font-family:var(--mono); font-size:11px; color:var(--accent); font-weight:700;
  width:26px; flex:none; }
.deflist li .tx{ font-size:16px; }

/* panel */
.panel{ background:var(--paper); border:2px solid var(--ink); border-radius:8px;
  box-shadow:var(--shadow-hard); padding:30px; }
.panel.dark{ background:var(--ink); color:var(--paper); }

/* ---------- Cool project demo stage ---------- */
.demo-stage{ position:relative; border:3px solid var(--ink); border-radius:14px; background:var(--ink);
  overflow:hidden; box-shadow:var(--shadow-hard); aspect-ratio:16/9; display:flex;
  align-items:center; justify-content:center; }
.demo-stage .barsrow{ position:absolute; top:0; left:0; right:0; z-index:2; }
.demo-static{ position:absolute; inset:0; width:100%; height:100%; opacity:.18; z-index:0; }
.demo-stage .corner{ position:absolute; z-index:3; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; color:rgba(244,236,224,.6); }
.demo-stage .corner.tr{ top:16px; right:18px; } .demo-stage .corner.bl{ bottom:16px; left:18px; }
.demo-center{ position:relative; z-index:2; text-align:center; color:var(--paper); padding:24px;
  display:flex; flex-direction:column; align-items:center; }
.demo-play{ width:74px; height:74px; border-radius:50%; border:3px solid var(--paper);
  background:var(--red); color:var(--paper); font-size:26px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; box-shadow:var(--shadow-hard-sm); padding-left:5px;
  transition:transform .14s ease; }
.demo-play:hover{ transform:scale(1.08); }
.demo-note{ font-family:var(--sans); font-weight:700; font-size:clamp(17px,2.4vw,24px);
  letter-spacing:-.01em; margin:18px 0 0; max-width:34ch; }
.demo-sub{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(244,236,224,.6);
  margin:10px 0 0; max-width:46ch; }

/* ---------- Footer ---------- */
.foot{ border-top:2px solid var(--ink); background:var(--paper); margin-top:60px; }
.foot-in{ max-width:var(--maxw); margin:0 auto; padding:30px 28px;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot .copy{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-soft);
  text-transform:uppercase; }
.foot .links{ display:flex; gap:18px; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; }
.foot .links a{ text-decoration:none; cursor:pointer; opacity:.7; }
.foot .links a:hover{ opacity:1; color:var(--accent); }
@media (max-width:820px){ .foot .links a{ cursor:pointer; } }

/* utility */
.mono{ font-family:var(--mono); }
.stack{ display:flex; flex-direction:column; }
.mt8{ margin-top:8px; } .mt16{ margin-top:16px; } .mt24{ margin-top:24px; }
.mt40{ margin-top:40px; } .mt60{ margin-top:60px; }
.mb0{ margin-bottom:0; }
.center{ text-align:center; }
.divider{ display:flex; align-items:center; gap:14px; margin:50px 0; }
.divider .ln{ flex:1; height:2px; background:var(--ink); }
.divider .tx{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); }

/* ---------- Progressive-enhancement: reveal only hides when JS is active ---------- */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(22px); }
html.js .reveal.in{ opacity:1; transform:none; }

/* server-rendered filter chips are links */
.filters a.chip{ text-decoration:none; }

/* empty-state */
.emptyfeed{ border:2px dashed var(--hairline); border-radius:10px; background:var(--paper-2);
  padding:30px; text-align:center; font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); }

/* alerts */
.alert{ border:2px solid var(--ink); border-radius:6px; padding:14px 16px; font-family:var(--mono);
  font-size:13px; margin-bottom:18px; }
.alert-success{ border-color:var(--green); background:color-mix(in oklch,var(--green) 16%,var(--paper)); }
.alert-danger{ border-color:var(--red); background:color-mix(in oklch,var(--red) 14%,var(--paper)); }

/* about rich content lists inherit deflist-ish styling */
.richtext p{ font-size:17px; line-height:1.6; margin:0 0 14px; }
.richtext ul{ list-style:none; padding:0; margin:0; border-top:2px solid var(--ink); }
.richtext li{ padding:12px 2px; border-bottom:1px solid var(--hairline); font-size:16px; }
.richtext a{ color:var(--red); }

/* ---------- Anchor-based nav (server-rendered) mirrors button styles ---------- */
.nav a.navbtn{ background:transparent; border:none; cursor:pointer; display:flex;
  flex-direction:column; align-items:flex-start; gap:2px; padding:6px 11px; border-radius:3px;
  color:var(--ink); text-align:left; text-decoration:none; }
.nav a.navbtn .ch{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--ink-soft); }
.nav a.navbtn .nm{ font-size:13px; font-weight:500; letter-spacing:.01em; }
.nav a.navbtn:hover{ background:var(--paper-2); }
.nav a.navbtn.active{ background:var(--ink); color:var(--paper); }
.nav a.navbtn.active .ch{ color:var(--yellow); }
@media (max-width:920px){ .nav a.navbtn .nm{ display:none; } .nav a.navbtn{ padding:6px 9px; } }
.remote-card a{ width:100%; display:flex; align-items:center; gap:10px; background:transparent;
  border:none; color:var(--paper); padding:11px 12px; border-radius:6px; cursor:pointer;
  text-align:left; text-decoration:none; }
.remote-card a .ch{ font-family:var(--mono); font-size:12px; color:var(--yellow); width:30px; }
.remote-card a .nm{ font-size:15px; font-weight:500; }
.remote-card a.active,.remote-card a:hover{ background:rgba(255,255,255,.1); }

/* lightbox image fill */
.lb-img.has-img{ background-size:cover; background-position:center; }
.lb-img.has-img .lbl{ display:none; }

/* ---------- Card/badge anchors must not look like text links ---------- */
a.card, a.card:hover, a.card:visited { text-decoration:none; color:inherit; }
a.card *, a.badge, a.badge:hover, a.shot, a.shot:hover { text-decoration:none; }
a.card .tt, a.card .dd, a.card p { text-decoration:none; }
/* cool card frames always sit on the panel tone */
.card .frame { background:var(--paper-2); }

/* ---------- Placeholder fills the card frame (match original design) ---------- */
.card .frame > .ph{ position:absolute; inset:0; width:100%; height:100%;
  border:none; border-radius:0; }
.card .frame > .ph .lbl{ z-index:2; }

/* ---------- Title card (image-less project frame) — dark, designed, like a TV ident ---------- */
.card .frame > .titlecard{ position:absolute; inset:0; width:100%; height:100%;
  background:var(--ink); color:var(--paper); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; overflow:hidden; padding:22px; }
.card .frame > .titlecard .bars{ position:absolute; top:0; left:0; right:0; height:10px; }
.card .frame > .titlecard .tc-title{ font-family:var(--sans); font-weight:700;
  font-size:clamp(20px,3vw,30px); letter-spacing:-.02em; line-height:1.05; text-align:center;
  color:var(--paper); }
.card .frame > .titlecard .tc-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--yellow); }
/* keep the title readable: soften the red gradient on title cards */
.card .frame:has(.titlecard)::before{ opacity:.18; }