/* ============================================================
   DANILA — site stylesheet
   Concept: V2 "Broadcast Guide" (analog-TV look, C4 skin)
   Body type: Newsreader (the C5 choice), self-hosted.
   Rules kept everywhere:
     - artwork frame never exceeds half the viewport
       (except .viewing — the dedicated full look / lightbox)
     - text never sits on top of artwork
   To restyle: most knobs live in :root below. Change once, applies site-wide.
   ============================================================ */

/* ---- self-hosted fonts (no external CDN; privacy + stability) ---- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/newsreader-400.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/newsreader-500.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/newsreader-600.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/newsreader-italic-400.woff2") format("woff2")}
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/bebasneue-400.woff2") format("woff2")}
@font-face{font-family:"Special Elite";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/specialelite-400.woff2") format("woff2")}

:root{
  /* palette */
  --ink:#070707; --panel:#101012; --panel2:#16161a;
  --bone:#ece7db; --bone-dim:#9b968b; --line:#2a2a26;
  --red:#c4222a; --red-hot:#ff3326;
  /* type */
  --f-disp:"Bebas Neue",Impact,sans-serif;           /* headlines */
  --f-body:"Newsreader",Georgia,serif;               /* body */
  --f-chrome:"Special Elite",ui-monospace,monospace; /* tiny TV chrome */
  /* layout */
  --maxw:1180px;
  /* motion (set to 0s to globally disable, or rely on prefers-reduced-motion) */
  --blink:1.4s; --roll:7s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--f-body);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 80% at 50% -10%,#16140f 0%,#070707 60%);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* skip link (a11y) */
.skip{position:absolute;left:-999px;top:0;z-index:400;background:var(--red);color:#fff;
  font-family:var(--f-chrome);font-size:.8rem;padding:.6rem .9rem}
.skip:focus{left:.5rem;top:.5rem}

/* ---- film grain + scanline wash (chrome only) ---- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:200}
.fx .scan{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,#000 2px 3px)}
.fx .grain{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;
  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)' opacity='0.5'/%3E%3C/svg%3E")}

/* ---- top channel bar / nav (a tuner) ---- */
.tuner{position:sticky;top:0;z-index:150;display:flex;align-items:center;gap:1.1rem;
  flex-wrap:wrap;padding:.6rem clamp(1rem,4vw,2.4rem);
  background:rgba(7,7,7,.82);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  font-family:var(--f-chrome);font-size:.72rem;letter-spacing:.14em}
.tuner .brand{color:var(--bone);letter-spacing:.22em}
.tuner nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.tuner .rec{display:flex;align-items:center;gap:.45rem;color:var(--bone-dim);margin-left:auto}
.tuner .rec .dot{width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 9px var(--red-hot);animation:blink var(--blink) steps(1) infinite}
.tuner a{color:var(--bone-dim)} .tuner a:hover,.tuner a:focus-visible{color:var(--red)}
@keyframes blink{50%{opacity:.18}}

/* ---- contained CRT screen — the ONLY artwork container ---- */
.screen{position:relative;background:#000;border-radius:14px/10px;overflow:hidden;
  box-shadow:inset 0 0 55px rgba(0,0,0,.7),0 0 0 9px #1a1a1a,0 0 0 11px #2b2b2b,
             0 26px 60px rgba(0,0,0,.6)}
.screen>img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(1.02)}
.screen .vig{position:absolute;inset:0;pointer-events:none;border-radius:14px/10px;
  background:radial-gradient(125% 125% at 50% 45%,transparent 64%,rgba(0,0,0,.5))}
.screen .lines{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.45;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.55) 2px 3px)}
.screen .roll{position:absolute;left:0;right:0;height:22%;pointer-events:none;mix-blend-mode:screen;
  opacity:.10;background:linear-gradient(rgba(255,255,255,.6),transparent);
  animation:roll var(--roll) linear infinite}
@keyframes roll{0%{top:-25%}100%{top:120%}}
.screen .osd{position:absolute;left:5%;top:6%;font-family:var(--f-chrome);font-size:.7rem;
  letter-spacing:.16em;color:#fff;text-shadow:0 1px 3px #000}
.screen .rec{position:absolute;right:6%;top:6%;display:flex;align-items:center;gap:.4rem;
  font-family:var(--f-chrome);font-size:.7rem;color:#fff;text-shadow:0 1px 3px #000}
.screen .rec .dot{width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 8px var(--red-hot);animation:blink var(--blink) steps(1) infinite}
/* size caps so a screen is never more than half the viewport */
.screen.band{aspect-ratio:21/9;width:min(var(--maxw),92vw);max-height:46vh}
.screen.set{aspect-ratio:4/3;width:min(46vw,560px);max-height:50vh}

/* ---- copy blocks (text never on art) ---- */
.kicker{font-family:var(--f-chrome);font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--bone-dim)}
.bar{display:inline-block;background:var(--red);color:#fff;font-family:var(--f-chrome);
  font-size:.66rem;letter-spacing:.2em;padding:.32rem .6rem}
h1,h2,h3{font-family:var(--f-disp);font-weight:400;line-height:.92;letter-spacing:.01em}
h1{font-size:clamp(2.8rem,8vw,6rem)}
h2{font-size:clamp(2rem,5vw,3.4rem)}
h3{font-size:clamp(1.3rem,3vw,1.9rem)}
.lede{font-size:1.18rem;color:var(--bone)}
p{color:#d8d3c7;max-width:64ch}
.muted{color:var(--bone-dim)}
.red{color:var(--red)}
.btn{display:inline-block;font-family:var(--f-chrome);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.7rem 1.1rem;border:1px solid var(--red);color:var(--bone);
  background:transparent;cursor:pointer;transition:background .15s,color .15s}
.btn:hover,.btn:focus-visible{background:var(--red);color:#fff}
.btn.ghost{border-color:var(--line);color:var(--bone-dim)}
.btn.ghost:hover{border-color:var(--bone);color:var(--bone)}
.badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-chrome);
  font-size:.68rem;letter-spacing:.16em;color:var(--bone-dim);border:1px solid var(--line);padding:.4rem .7rem}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--red)}

/* ---- layout helpers ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.4rem)}
section{padding-block:clamp(3rem,8vw,6rem)}

/* ---- HERO ---- */
.stage{display:grid;justify-items:center;gap:1rem;padding-top:1.6rem}
.hero-copy{max-width:var(--maxw);text-align:center;display:grid;gap:.7rem;justify-items:center}

/* visually hidden (kept for screen readers / SEO; replace #hero-h with the chosen headline) */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- HERO: the Watcher portrait (whole face in frame, red ground, no scanlines) ---- */
.watcher{position:relative;display:inline-block;line-height:0;border-radius:14px/10px;
  box-shadow:0 0 0 9px #1a1a1a,0 0 0 11px #2b2b2b,0 26px 60px rgba(0,0,0,.6)}
.watcher img{display:block;width:auto;height:auto;max-width:min(420px,86vw);max-height:66vh;
  border-radius:14px/10px;will-change:transform}
.watcher .vfx{position:absolute;inset:0;pointer-events:none;overflow:visible}
/* smouldering cigarette ember (positions tuned to gs_jm.jpg) */
.watcher .ember{position:absolute;left:46.5%;top:68.5%;width:3%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);mix-blend-mode:screen;
  background:radial-gradient(closest-side,#fff,var(--red-hot) 45%,transparent 72%);
  animation:ember 2.4s ease-in-out infinite}
@keyframes ember{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.85)}
  50%{opacity:.95;transform:translate(-50%,-50%) scale(1.15)}}
/* glint sweeping the red lenses */
.watcher .glint{position:absolute;left:26%;top:50%;width:34%;height:9%;transform:translate(0,-50%);
  mix-blend-mode:screen;opacity:0;border-radius:6px;
  background:linear-gradient(105deg,transparent 30%,rgba(255,210,200,.85) 50%,transparent 70%);
  animation:glint 6s ease-in-out infinite}
@keyframes glint{0%,82%,100%{opacity:0}88%{opacity:.8}92%{opacity:.8}96%{opacity:0}}
/* living smoke trail, drawn over his own drawn smoke (SVG stroke that keeps re-drawing) */
.watcher .trail{position:absolute;left:38%;top:18%;width:42%;height:54%;overflow:visible}
.watcher .trail path{fill:none;stroke:#f3efe6;stroke-width:2;stroke-linecap:round;opacity:0;
  stroke-dasharray:520;stroke-dashoffset:520;filter:drop-shadow(0 0 1px rgba(0,0,0,.4))}
.watcher .trail path.s1{animation:rise 5.5s linear infinite}
.watcher .trail path.s2{animation:rise 7s linear infinite;animation-delay:1.6s}
@keyframes rise{0%{stroke-dashoffset:520;opacity:0}12%{opacity:.55}70%{opacity:.4}
  100%{stroke-dashoffset:0;opacity:0}}

/* ---- TV-GUIDE listing (the core, extensible pattern) ---- */
.guide{border:1px solid var(--line);background:rgba(16,16,18,.6)}
.guide .gh{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);
  font-family:var(--f-chrome);font-size:.72rem;letter-spacing:.16em;color:var(--bone-dim)}
.guide .gh .now{color:var(--red)}
.prog{display:grid;grid-template-columns:84px 168px minmax(0,1fr) auto;gap:1.2rem;align-items:center;
  padding:1rem;border-bottom:1px solid var(--line)}
.prog:last-child{border-bottom:0}
.prog .time{font-family:var(--f-chrome);font-size:.8rem;letter-spacing:.1em;color:var(--bone-dim)}
.prog .time b{display:block;color:var(--red);font-size:.7rem;letter-spacing:.18em;margin-top:.3rem}
.prog .screen{width:168px;aspect-ratio:16/10}
.prog .info h3{margin-bottom:.3rem}
.prog .info p{font-size:.98rem;margin:0}
.prog .go{justify-self:end}

/* film-strip of small page thumbnails under a description (each opens a lightbox) */
.strip{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.strip .screen{width:54px;aspect-ratio:3/4;border-radius:7px/5px;
  box-shadow:inset 0 0 18px rgba(0,0,0,.6),0 0 0 3px #1a1a1a,0 0 0 4px #2b2b2b}

/* caption under a screen (never over it) */
.cap{margin-top:.7rem;font-family:var(--f-chrome);font-size:.72rem;letter-spacing:.08em;color:var(--bone-dim)}
.cap b{color:var(--bone)}

/* ---- viewing mode: the one allowed full-size look ---- */
.viewing{position:fixed;inset:0;z-index:300;background:rgba(4,4,4,.96);
  display:none;place-items:center;padding:3vmin}
.viewing:target{display:grid}
.viewing img{max-width:94vw;max-height:88vh;width:auto;height:auto;
  filter:grayscale(1) contrast(1.1);box-shadow:0 0 0 1px var(--line)}
.viewing .close{position:absolute;top:3vmin;right:4vmin;font-family:var(--f-chrome);
  font-size:.8rem;letter-spacing:.14em;color:var(--bone);border:1px solid var(--line);padding:.5rem .8rem}
.viewing .lines{position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,#000 2px 3px)}

footer{padding:3rem clamp(1rem,4vw,2.4rem);border-top:1px solid var(--line);
  font-family:var(--f-chrome);font-size:.72rem;letter-spacing:.1em;color:var(--bone-dim);
  display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center}
footer a:hover{color:var(--red)}

/* ---- responsive ---- */
@media (max-width:780px){
  .prog{grid-template-columns:1fr;gap:.6rem}
  .prog .screen{width:min(80vw,360px)}
  .prog .go{justify-self:start}
  .screen.band{max-height:38vh}
  .tuner nav{display:none}            /* compact nav on phones; brand + ON AIR stay */
}

/* ---- accessibility: motion off ---- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
}