/* ============================================================
   EUGENE L. ROCKET — "DEEP SPACE BROADCAST / TRANSMISSION ARCHIVE"
   Cool bi-chrome CRT instrument frame; the artwork supplies the color.
   space blue-black · amber phosphor · cyan oscilloscope
   ============================================================ */

/* Self-hosted fonts (formerly Google Fonts; variable woff2, latin subset —
   removes the render-blocking CSS chain flagged by PageSpeed) */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(fonts/big-shoulders-display-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/inter-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/martian-mono-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --space:#07090f;
  --space-2:#0c1018;
  --panel:#10151f;
  --panel-2:#141b27;
  --amber:#e8a23d;
  --cyan:#4fd2d9;
  --ink:#e7eaf3;
  --ink-dim:#737c91;
  --line:rgba(120,165,185,.16);
  --line-2:rgba(120,165,185,.28);

  --f-disp:"Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-tele:"Martian Mono", ui-monospace, monospace;
  --f-body:"Inter", system-ui, sans-serif;

  --maxw:1320px;
  --gut:clamp(18px,4vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--space);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:
    radial-gradient(80% 55% at 78% -8%, rgba(79,210,217,.10), transparent 60%),
    radial-gradient(70% 50% at 6% 4%, rgba(232,162,61,.08), transparent 58%);
  background-attachment:fixed;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2{margin:0;font-weight:700}

.tele{font-family:var(--f-tele);text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;color:var(--ink-dim)}
::selection{background:var(--cyan);color:var(--space)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* CRT scanlines + vignette */
.scan{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px)}
.vignette{position:fixed;inset:0;z-index:59;pointer-events:none;
  box-shadow:inset 0 0 200px 40px rgba(0,0,0,.6)}

.tele .dot,.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);vertical-align:middle;margin-right:4px;animation:blip 1.8s steps(1) infinite}
@keyframes blip{50%{opacity:.25}}

/* ---------------- top bar ---------------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px var(--gut);
  background:color-mix(in srgb,var(--space) 78%, transparent);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line)}
.bar__sig{display:flex;align-items:center;gap:11px;font-family:var(--f-disp);font-weight:800;
  font-size:1.32rem;letter-spacing:.14em}
.bar__logo{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(79,210,217,.5))}
.bar__nav{display:flex;gap:clamp(14px,2.4vw,30px)}
.bar__nav a{font-family:var(--f-tele);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);transition:color .2s var(--ease)}
.bar__nav a:hover{color:var(--cyan)}

/* ---------------- hero ---------------- */
.hero{min-height:100svh;display:grid;align-items:center;padding:120px var(--gut) 60px;
  max-width:var(--maxw);margin-inline:auto}
.hero__grid{display:grid;gap:clamp(14px,2.2vh,26px);max-width:900px}
.hero__eyebrow{color:var(--cyan);font-size:.72rem}
.hero__title{font-family:var(--f-disp);font-weight:900;line-height:.82;letter-spacing:.005em;
  font-size:clamp(4.5rem,18vw,13rem);display:grid;text-transform:uppercase}
.hero__title span{display:block}
.hero__title-2{color:transparent;-webkit-text-stroke:2px var(--amber);text-stroke:2px var(--amber)}
.hero__role{font-size:.92rem;color:var(--ink);letter-spacing:.32em;margin-top:6px}
.hero__role span{color:var(--amber)}
.hero__desc{font-size:clamp(1rem,1.5vw,1.18rem);color:#aeb4c6;max-width:54ch}

/* oscilloscope signature */
.scope{position:relative;margin-top:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--space-2));
  box-shadow:inset 0 0 40px rgba(79,210,217,.06)}
.scope__svg{display:block;width:100%;height:96px}
.scope__wave path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.scope__wave--cyan path{stroke:var(--cyan);filter:drop-shadow(0 0 5px rgba(79,210,217,.6))}
.scope__wave--amber path{stroke:var(--amber);opacity:.5}
.scope__wave{animation:scroll-wave 7s linear infinite}
.scope__wave--amber{animation-duration:11s;animation-direction:reverse}
@keyframes scroll-wave{from{transform:translateX(0)}to{transform:translateX(-1200px)}}
.scope__readout{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;gap:10px;
  padding:7px 12px;font-size:.6rem;color:var(--ink-dim);border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--space) 60%, transparent)}
.scope__readout span:nth-child(2){color:var(--cyan)}

.hero__enter{display:inline-flex;align-items:center;gap:10px;color:var(--amber);font-size:.7rem;margin-top:4px}
.hero__enter .arr{transition:transform .3s var(--ease)}
.hero__enter:hover .arr{transform:translateY(4px)}

/* ---------------- section head ---------------- */
.sec-head{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  border-bottom:1px solid var(--line);padding-bottom:18px}
.sec-head__t{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.8rem,4.5vw,3.2rem);line-height:1}
.sec-head__meta{white-space:nowrap}

/* ---------------- archive / masonry ---------------- */
.archive{padding:clamp(60px,9vw,110px) 0}
.grid{max-width:var(--maxw);margin:clamp(22px,3vw,40px) auto 0;padding:0 var(--gut);
  column-count:4;column-gap:14px}
@media(max-width:1100px){.grid{column-count:3}}
@media(max-width:760px){.grid{column-count:2}}
@media(max-width:460px){.grid{column-count:1}}

.cell{break-inside:avoid;margin-bottom:14px;position:relative;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;cursor:pointer;background:var(--panel);
  opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .25s,box-shadow .25s}
.cell.in{opacity:1;transform:none}
.cell img{width:100%;display:block;transition:transform .6s var(--ease)}
.cell:hover{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 18px 40px -20px rgba(0,0,0,.9)}
.cell:hover img{transform:scale(1.04)}
.cell__ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  padding:12px;opacity:0;transition:opacity .25s var(--ease);
  background:linear-gradient(0deg, rgba(7,9,15,.92) 0%, rgba(7,9,15,.4) 40%, transparent 70%)}
.cell:hover .cell__ov,.cell:focus-visible .cell__ov{opacity:1}
.cell__tx{font-family:var(--f-tele);font-size:.58rem;letter-spacing:.16em;color:var(--cyan)}
.cell__nm{font-family:var(--f-disp);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.05rem;line-height:1;color:var(--ink)}
.cell__live{position:absolute;top:9px;right:9px;font-family:var(--f-tele);font-size:.5rem;letter-spacing:.14em;
  color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);border-radius:3px;
  padding:2px 5px;background:rgba(7,9,15,.6)}

/* ---------------- operator ---------------- */
.operator{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,7vw,90px) var(--gut)}
.operator__card{display:grid;grid-template-columns:300px 1fr;gap:clamp(24px,4vw,56px);align-items:center;
  border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,40px);
  background:linear-gradient(160deg,var(--panel),var(--space-2))}
.operator__portrait{position:relative;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.operator__portrait img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(.25) contrast(1.05)}
.operator__tag{position:absolute;top:10px;left:10px;font-size:.56rem;color:var(--cyan);
  background:rgba(7,9,15,.7);border:1px solid var(--line);border-radius:3px;padding:3px 7px}
.operator__name{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(2rem,5vw,3.2rem);line-height:.95}
.operator__role{color:var(--amber);margin-top:8px;font-size:.74rem}
.operator__desc{color:#aeb4c6;margin:16px 0 22px;max-width:52ch}
.operator__links{display:flex;flex-wrap:wrap;gap:12px}
.chan{display:grid;gap:3px;border:1px solid var(--line);border-radius:8px;padding:12px 16px;
  background:var(--space-2);transition:border-color .2s,background .2s}
.chan:hover{border-color:var(--cyan);background:var(--panel-2)}
.chan__k{font-size:.56rem;color:var(--ink-dim)}
.chan__v{font-family:var(--f-tele);font-size:.78rem;color:var(--ink);text-transform:none;letter-spacing:.02em}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line);max-width:var(--maxw);margin:0 auto;
  padding:30px var(--gut);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.foot__v{color:color-mix(in srgb,var(--ink-dim) 70%,transparent)}

/* ---------------- lightbox ---------------- */
.view{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(16px,4vw,54px);
  background:color-mix(in srgb,var(--space) 94%, black);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.view.open{opacity:1;visibility:visible}
.view__fig{margin:0;display:grid;gap:12px;justify-items:center;max-width:100%}
.view__fig img{max-width:100%;max-height:82vh;object-fit:contain;border:1px solid var(--line-2);
  border-radius:6px;box-shadow:0 30px 90px -30px #000;transform:scale(.97);transition:transform .35s var(--ease)}
.view.open .view__fig img{transform:scale(1)}
.view__cap{color:var(--cyan)}
.view__x{position:absolute;top:16px;right:20px;background:none;border:0;color:var(--ink);font-size:34px;
  line-height:1;cursor:pointer;transition:color .2s}
.view__x:hover{color:var(--cyan)}
.view__nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(7,9,15,.6);color:var(--ink);font-size:18px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.view__nav:hover{border-color:var(--cyan);color:var(--cyan)}
.view__prev{left:clamp(10px,3vw,28px)}.view__next{right:clamp(10px,3vw,28px)}

/* ---------------- scroll to top ---------------- */
.totop{position:fixed;right:20px;bottom:20px;z-index:55;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:1px solid var(--line-2);color:var(--ink);
  background:var(--panel);box-shadow:0 12px 28px -12px #000;font-size:18px;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s,border-color .2s,color .2s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------------- responsive ---------------- */
@media(max-width:720px){
  .bar__nav a:not(:last-child){display:none}
  .operator__card{grid-template-columns:1fr}
  .operator__portrait{max-width:260px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .cell{opacity:1;transform:none}
}