/* =====================================================================
   PONSANIME — shared design system.
   One stylesheet drives every page so the chrome never drifts between
   them. Page-specific blocks live at the bottom under a page heading.
   Palette is sampled straight out of the brand art in /assets.
   ===================================================================== */

:root{
  /* surfaces */
  --void:#08080b;
  --panel:#0e0e12;
  --panel-2:#121217;

  /* brand */
  --red:#c12a0c;
  --red-dk:#93200a;
  --red-dim:#8a4437;
  --red-lit:#d94a29;

  /* ink */
  --cream:#e8e3d9;
  --cream-dim:#b5ac97;
  --cream-mute:#9a917d;
  --faint:#6f695b;
  --faint-2:#57513f;

  /* strokes */
  --line:rgba(232,227,217,.10);
  --line-soft:rgba(232,227,217,.06);
  --line-hard:rgba(232,227,217,.22);

  /* type */
  --body:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* rhythm — the page gutter shrinks with the viewport, and every
     full-width block reads from these two so nothing drifts. */
  --gut:36px;
  --gut-l:56px;

  --topbar-h:66px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--void);
  color:var(--cream);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
}
::selection{background:var(--red);color:var(--cream)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,video{display:block;max-width:100%}
input,button,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* A skip link that stays 1px while focused is invisible to the sighted
   keyboard user it exists for, so focusing one un-hides it. */
.sr-only:focus,.sr-only:focus-visible{
  position:fixed;top:10px;left:10px;z-index:200;
  width:auto;height:auto;margin:0;padding:12px 20px;overflow:visible;
  clip:auto;clip-path:none;
  background:var(--red);color:var(--cream);border-radius:4px;
  font-size:13.5px;font-weight:600;
}

/* ── shared atoms ─────────────────────────────────────────────────── */

.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--red);
}
.mono-note{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}
.rec{
  width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;
  box-shadow:0 0 10px var(--red);animation:blink 1.4s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.btn{
  font-size:13.5px;font-weight:500;letter-spacing:.05em;padding:11px 26px;
  border-radius:4px;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;transition:background .18s,border-color .18s,color .18s,transform .18s;
  min-height:44px;
}
.btn.primary{background:var(--red);color:var(--cream)}
.btn.primary:hover{background:var(--red-dk);transform:translateY(-1px)}
.btn.outline{border:1px solid var(--line-hard);color:#ded3ba}
.btn.outline:hover{border-color:rgba(232,227,217,.5);color:var(--cream)}

/* ── top bar ──────────────────────────────────────────────────────── */

.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:26px;
  padding:13px var(--gut);
  background:rgba(8,8,11,.94);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:32px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.sitenav{display:flex;gap:24px;font-size:14px}
.sitenav a{
  color:var(--cream-mute);padding:4px 0;
  border-bottom:2px solid transparent;transition:color .15s;
}
.sitenav a:hover{color:var(--cream)}
.sitenav a.on{color:var(--cream);border-bottom-color:var(--red)}
.spacer{flex:1}

.search{position:relative;flex:none;width:min(280px,30vw)}
.search input{
  width:100%;background:rgba(232,227,217,.05);
  border:1px solid rgba(232,227,217,.18);border-radius:4px;
  color:var(--cream);font-size:13.5px;padding:9px 12px 9px 36px;
  transition:border-color .15s,background .15s;
}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none;border-color:var(--red);background:rgba(232,227,217,.08)}
.search svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:var(--cream-mute);fill:none;stroke-width:2;
  pointer-events:none;
}

.socialicons{display:flex;align-items:center;gap:15px;flex:none}
.socialicons a{color:var(--cream-mute);display:flex;transition:color .15s;padding:2px}
.socialicons a:hover{color:var(--cream)}
.socialicons svg{width:16px;height:16px;fill:currentColor}

.live{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;color:var(--cream);opacity:.85;
  flex:none;transition:opacity .15s;
}
.live:hover{opacity:1}

.menubtn{
  display:none;flex:none;width:38px;height:34px;
  border:1px solid var(--line);border-radius:4px;color:var(--cream-dim);
  align-items:center;justify-content:center;
}
.menubtn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;
  fill:none;stroke-linecap:round}

/* ── footer ───────────────────────────────────────────────────────── */

footer{border-top:1px solid var(--line);margin-top:56px}
.fcols{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:24px;
  padding:34px var(--gut) 26px var(--gut-l);max-width:1100px;
}
.fbrand img{height:28px;width:auto;margin-bottom:12px}
.fbrand p{font-size:12.5px;line-height:1.7;color:var(--cream-mute);max-width:26ch}
.fh{
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);margin-bottom:12px;
}
.fcol a{display:block;font-size:13px;color:var(--cream-dim);padding:4px 0;transition:color .15s}
.fcol a:hover{color:var(--cream)}
.fbase{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px var(--gut-l);border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint-2);
}
.fbase a{color:inherit;transition:color .15s}
.fbase a:hover{color:var(--cream-mute)}

/* The credit line points at the presenter, so at 9px mono it needs to read
   as a link without shouting: a hairline rule that warms to red on hover. */
.credit{
  color:inherit;border-bottom:1px solid rgba(232,227,217,.24);
  padding-bottom:2px;transition:color .15s,border-color .15s;
}
.credit:hover,.credit:focus-visible{color:var(--cream);border-bottom-color:var(--red)}

/* =====================================================================
   PAGE — landing (index.html)
   ===================================================================== */

body.landing{height:100vh;height:100dvh;overflow:hidden}

.stage{
  position:relative;height:100vh;height:100dvh;width:100%;overflow:hidden;
  background:var(--void) url("./assets/poster.jpg") center/cover no-repeat;
}
.stage .bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
}
.stage .grade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(8,8,11,.97) 0%,  rgba(8,8,11,.94) 26%, rgba(8,8,11,.74) 44%,
      rgba(8,8,11,.30) 68%, rgba(8,8,11,.16) 82%, rgba(8,8,11,.44) 100%),
    linear-gradient(0deg,rgba(8,8,11,.88) 0%,transparent 45%),
    radial-gradient(120% 80% at 50% 50%,transparent 40%,rgba(8,8,11,.55) 100%);
}
.stage .grain{
  position:absolute;inset:0;z-index:1;opacity:.06;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.6) 3px 4px);
}

.stage .top{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 40px;padding-top:max(26px,env(safe-area-inset-top));
}
.stage .top .watch{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);display:flex;align-items:center;gap:9px;opacity:.85;
  transition:opacity .2s;margin-left:auto;
}
.stage .top .watch:hover{opacity:1}
.stage .top .rec{box-shadow:0 0 12px var(--red);animation-duration:1.3s}

.stage .content{
  position:absolute;z-index:5;left:0;top:0;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 40px 0 64px;max-width:660px;
}
.stage .logo{
  width:clamp(280px,36vw,480px);margin-bottom:30px;
  /* The width/height attributes on the tag are presentational hints, so
     without this the attribute height wins as a fixed pixel box and the
     wordmark is stretched to fill it. They stay on the tag to reserve
     layout space; height:auto hands the aspect back to the file. */
  height:auto;
  filter:drop-shadow(0 8px 34px rgba(0,0,0,.55));
}
.stage .eyebrow{
  font-size:12px;letter-spacing:.32em;margin-bottom:18px;
  display:flex;align-items:center;gap:14px;
}
.stage .eyebrow::before{content:"";width:34px;height:2px;background:var(--red);flex:none}
.stage .tag{
  font-size:clamp(20px,2.4vw,30px);font-weight:500;line-height:1.28;
  color:var(--cream);max-width:17ch;margin-bottom:40px;
}
.stage .tag b{color:var(--red);font-weight:600}
.stage .actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.stage .cta{
  font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 40px;background:var(--red);color:var(--cream);
  display:inline-flex;align-items:center;gap:12px;transition:.2s;min-height:52px;
  clip-path:polygon(0 0,100% 0,97% 100%,3% 100%);
}
.stage .cta:hover{background:var(--red-dk);transform:translateY(-2px)}
.stage .alt{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-dim);display:inline-flex;align-items:center;gap:9px;
  transition:color .2s;min-height:44px;
}
.stage .alt:hover{color:var(--cream)}
.stage .alt svg{width:14px;height:14px;fill:currentColor}

.stage .foot{
  position:absolute;bottom:0;left:0;right:0;z-index:5;
  display:flex;justify-content:space-between;gap:12px;
  padding:22px 40px;padding-bottom:max(22px,env(safe-area-inset-bottom));
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream-dim);opacity:.7;
}

/* =====================================================================
   PAGE — watch (app.html)
   ===================================================================== */

.tabsbar{
  display:flex;align-items:center;gap:8px;
  padding:12px var(--gut);
  border-bottom:1px solid var(--line-soft);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tabsbar::-webkit-scrollbar{display:none}
.tab{
  font-size:13px;color:var(--cream-mute);
  border:1px solid rgba(232,227,217,.14);border-radius:4px;
  padding:7px 16px;white-space:nowrap;transition:.15s;min-height:36px;
}
.tab:hover{color:var(--cream);border-color:var(--line-hard)}
.tab.on{background:var(--red);border-color:var(--red);color:var(--cream)}
.filecount{
  margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;padding-left:12px;
}

/* billboard */
.billboard{position:relative;height:62vh;min-height:400px;overflow:hidden}
.billboard .art{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:bbfade .4s ease;
}
@keyframes bbfade{from{opacity:0}to{opacity:1}}
.billboard .grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,8,11,.92) 0%,rgba(8,8,11,.58) 40%,rgba(8,8,11,.06) 72%),
    linear-gradient(0deg,var(--void) 0%,transparent 30%);
}
.billboard .inner{
  position:relative;z-index:2;height:100%;max-width:560px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gut) 48px var(--gut-l);
  animation:bbfade .4s ease;
}
.billboard .eyebrow{margin-bottom:12px}
.billboard h1{
  font-size:clamp(30px,4vw,50px);font-weight:600;letter-spacing:.01em;
  line-height:1.05;text-transform:uppercase;margin-bottom:12px;
}
.billboard .syn{
  font-size:15px;line-height:1.6;color:var(--cream-dim);
  max-width:46ch;margin-bottom:10px;
}
.billboard .meta{font-size:13px;color:var(--cream-mute);margin-bottom:22px}
.billboard .actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* rows */
main{padding-bottom:64px}
.row{margin-top:36px}
.rowhead{display:flex;align-items:baseline;gap:10px;padding:0 var(--gut) 12px var(--gut-l)}
.rowhead h2{font-size:16px;font-weight:500}
.rowhead .count{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}
.rowhead .seeall{margin-left:auto;font-size:12px;color:var(--cream-mute);transition:color .15s}
.rowhead .seeall:hover{color:var(--cream)}
/* One mechanism at every width: a left-aligned flex rail whose cards are
   exactly one fifth of the row on desktop. A row holding fewer than five
   titles then reads as deliberate whitespace instead of empty grid cells,
   and there is no desktop-grid rule left to leak into the swipe strip. */
.strip{
  display:flex;gap:12px;
  padding:4px var(--gut) 16px var(--gut-l);
  overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(232,227,217,.2) transparent;
}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:rgba(232,227,217,.15);border-radius:3px}
.strip .card{flex:0 0 calc((100% - 48px) / 5)}

/* cards */
.card{
  position:relative;flex:0 0 min(300px,70vw);scroll-snap-align:start;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;transition:transform .18s,border-color .18s;
}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--red)}
.card .thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .thumb img{transform:scale(1.04)}
.card .rt{
  position:absolute;bottom:14px;left:14px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(232,227,217,.85);background:rgba(8,8,11,.72);
  padding:4px 9px;border-radius:3px;white-space:nowrap;
}
.card .play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(8,8,11,.28);opacity:0;transition:opacity .18s;
}
.card:hover .play,.card:focus-visible .play{opacity:1}
.play .tri{
  width:44px;height:44px;border-radius:50%;background:var(--red);
  display:grid;place-items:center;
}
.play .tri::after{
  content:"";margin-left:3px;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--cream);
}
.card .body{display:block;padding:16px 18px 18px}
.card h3{
  font-size:14px;font-weight:500;margin-bottom:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sigid{
  display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-dim);transition:color .18s;
}
.card:hover .sigid{color:#b45340}
.sigid .sep{color:var(--faint)}

/* grid mode */
.gridwrap{padding:30px var(--gut) 0 var(--gut-l);display:none}
.gridwrap.on{display:block}
.gridhead{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.gridhead h2{font-size:18px;font-weight:500}
.gridhead .count{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.grid .card{flex:none;width:auto}
.empty{
  font-size:14px;color:var(--cream-mute);border:1px dashed var(--line);
  border-radius:6px;padding:44px;text-align:center;line-height:1.9;
}
.empty .m{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);display:block;margin-top:6px;
}

/* player */
.player{
  position:fixed;inset:0;z-index:100;background:var(--void);display:none;
  grid-template-columns:1fr 350px;grid-template-rows:auto 1fr;
}
.player.on{display:grid}
.pbar{
  grid-column:1/-1;display:flex;align-items:center;gap:16px;
  padding:14px 24px;padding-top:max(14px,env(safe-area-inset-top));
  border-bottom:1px solid var(--line);
}
.pbar .sig{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);display:flex;align-items:center;gap:9px;white-space:nowrap;flex:none;
}
.pbar .ptitle{
  font-size:13.5px;color:var(--cream-dim);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pbar .close{
  margin-left:auto;font-size:12.5px;color:var(--cream-mute);
  padding:9px 16px;border:1px solid var(--line);border-radius:4px;
  transition:.15s;flex:none;min-height:40px;
}
.pbar .close:hover{color:var(--cream);border-color:var(--red)}
.screen{position:relative;background:#000;display:grid;place-items:center;overflow:hidden}
.screen video{width:100%;height:100%;max-height:calc(100vh - 62px);object-fit:contain}
.rail{
  border-left:1px solid var(--line);background:var(--panel);
  overflow-y:auto;padding:30px 28px 44px;
}
.rail .eyebrow{margin-bottom:8px}
.rail h2{font-size:21px;font-weight:600;text-transform:uppercase;margin-bottom:6px}
.rail .meta{font-size:12.5px;color:var(--cream-mute);margin-bottom:14px}
.rail .syn{font-size:14px;line-height:1.6;color:var(--cream-dim);margin-bottom:22px}
.eph{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.eph::after{content:"";flex:1;height:1px;background:var(--line)}
.ep{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px;border:1px solid transparent;border-radius:4px;transition:.15s;
  min-height:48px;
}
.ep:hover{background:rgba(232,227,217,.05)}
.ep.on{border-color:var(--red);background:rgba(193,42,12,.09)}
.ep .num{font-family:var(--mono);font-size:10px;color:var(--red-dim);width:24px;flex:none}
.ep.on .num{color:var(--red)}
.ep .t{font-size:13px;font-weight:500;flex:1}
.ep .rtm{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--faint)}

/* =====================================================================
   PAGE — interior pages (about / connect / careers / merch / contest)
   ===================================================================== */

.page{padding:0 var(--gut) 0 var(--gut-l);max-width:1100px}
.pagehead{padding:56px var(--gut) 30px var(--gut-l);max-width:900px}
.pagehead .eyebrow{margin-bottom:14px}
.pagehead h1{
  font-size:clamp(30px,4.4vw,52px);font-weight:600;line-height:1.06;
  text-transform:uppercase;letter-spacing:.01em;
}
.pagehead h1 b{color:var(--red);font-weight:600}
.pagehead .lede{
  font-size:clamp(15px,1.5vw,17px);line-height:1.68;color:var(--cream-dim);
  max-width:58ch;margin-top:18px;
}

.prose{max-width:62ch;font-size:15px;line-height:1.75;color:var(--cream-dim)}
.prose p+p{margin-top:16px}
.prose strong{color:var(--cream);font-weight:600}

.cards3{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
}
.tile{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:24px 24px 26px;transition:border-color .18s,transform .18s;
}
.tile:hover{border-color:var(--red);transform:translateY(-2px)}
.tile .n{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-dim);display:block;margin-bottom:12px;
}
.tile h3{font-size:17px;font-weight:600;margin-bottom:8px}
.tile p{font-size:13.5px;line-height:1.7;color:var(--cream-mute);margin-bottom:14px}
.tile .link{
  font-size:13px;color:var(--cream);border-bottom:1px solid var(--red);
  padding-bottom:2px;display:inline-block;
}

.callout{
  border:1px solid var(--line);border-left:3px solid var(--red);border-radius:4px;
  background:var(--panel);padding:26px 28px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.callout .txt{flex:1;min-width:240px}
.callout h3{font-size:18px;font-weight:600;margin-bottom:6px}
.callout p{font-size:13.5px;line-height:1.7;color:var(--cream-mute)}

.divider{height:1px;background:var(--line-soft);margin:44px 0}
.sechead{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.sechead h2{font-size:19px;font-weight:600}
.sechead .count{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);
}

/* channel list (connect) */
.chan{
  display:flex;align-items:center;gap:20px;padding:22px 0;
  border-bottom:1px solid var(--line-soft);flex-wrap:wrap;
}
.chan .no{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-dim);width:92px;flex:none;
}
.chan .who{flex:1;min-width:200px}
.chan .who h3{font-size:16px;font-weight:600;margin-bottom:4px}
.chan .who p{font-size:13px;color:var(--cream-mute);line-height:1.6}
.chan .addr{
  font-family:var(--mono);font-size:12.5px;color:var(--cream);
  border-bottom:1px solid var(--red);padding-bottom:2px;white-space:nowrap;
}

/* frequency grid (connect) */
.freqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.freq{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  transition:border-color .18s,transform .18s;min-height:56px;
}
.freq:hover{border-color:var(--red);transform:translateY(-2px)}
.freq svg{width:18px;height:18px;fill:var(--cream-mute);flex:none;transition:fill .18s}
.freq:hover svg{fill:var(--red)}
.freq span{font-size:13.5px}

/* roles (careers) */
.job{
  display:flex;align-items:center;gap:18px;padding:20px 0;
  border-bottom:1px solid var(--line-soft);flex-wrap:wrap;
}
.job .t{flex:1;min-width:220px}
.job .t h3{font-size:16px;font-weight:600;margin-bottom:5px}
.job .t .m{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
}
.job .apply{
  font-size:12.5px;color:var(--cream);border:1px solid var(--line-hard);
  border-radius:4px;padding:10px 20px;transition:.15s;min-height:40px;
  display:inline-flex;align-items:center;
}
.job .apply:hover{border-color:var(--red);background:var(--red)}

/* product grid (merch) */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.prod{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;text-align:left;transition:transform .18s,border-color .18s;
  display:flex;flex-direction:column;
}
.prod:hover{transform:translateY(-3px);border-color:var(--red)}
.prod .shot{
  aspect-ratio:1/1;background:var(--panel-2);display:grid;place-items:center;
  position:relative;overflow:hidden;
}
.prod .shot img{width:56%;height:auto;opacity:.9}
.prod .shot .flag{
  position:absolute;top:12px;left:12px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(8,8,11,.78);color:var(--cream-dim);padding:4px 8px;border-radius:3px;
}
.prod .info{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.prod .info h3{font-size:14px;font-weight:500;margin-bottom:5px}
.prod .info .sub{font-size:12px;color:var(--cream-mute);margin-bottom:12px;flex:1}
.prod .info .price{font-family:var(--mono);font-size:13px;color:var(--cream)}

/* prize / spec blocks (contest) */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.spec{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:22px 24px;
}
.spec h3{font-size:15px;font-weight:600;margin-bottom:12px}
.spec ul{list-style:none;font-size:13.5px;line-height:1.9;color:var(--cream-mute)}
.spec li{padding-left:16px;position:relative}
.spec li::before{
  content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;
  background:var(--red-dim);border-radius:50%;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line-hard);border-radius:100px;padding:7px 15px;
  color:var(--cream-dim);
}
.pill.hot{border-color:var(--red);color:var(--red)}

/* =====================================================================
   RESPONSIVE
   The reference collapses in three steps; the phone step below also
   fixes real touch ergonomics (44px targets, safe areas, no hover-only
   affordances) rather than just shrinking the desktop layout.
   ===================================================================== */

@media(max-width:1100px){
  :root{--gut:28px;--gut-l:36px}
  .strip .card{flex:0 0 calc((100% - 36px) / 4)}
}

/* Between the fold point and a roomy desktop the bar fits only if it is
   compacted: measured, the full-size bar wants 1209px of content. Tightening
   the gaps and the search field buys back ~180px, which is what lets the
   desktop layout survive all the way down to the fold at 1080. */
@media(max-width:1240px){
  .topbar{gap:16px}
  .sitenav{gap:14px;font-size:13px}
  .search{width:min(200px,22vw)}
  .socialicons{gap:12px}
}

@media(max-width:1024px){
  .strip .card{flex:0 0 min(300px,70vw)}
}

/* The desktop bar needs about 1010px to lay out brand, six nav links, the
   search field, the social glyph and the Live chip side by side. Below that
   it silently overflows the viewport rather than wrapping usefully, so the
   whole header folds to the hamburger layout here, well above phone width. */
@media(max-width:1080px){
  /* Phone chrome is two rows, not three: brand and controls on one line,
     search underneath. The desktop .spacer would otherwise eat the rest
     of row one and bounce Live onto a line of its own, so it is retired
     here and Live is pushed right with an auto margin instead.
     Every control is padded out to 44px rather than sized to its glyph. */
  .topbar{padding:8px var(--gut);gap:10px;flex-wrap:wrap}
  .spacer{display:none}
  .brand{padding:6px 0;order:1}
  .live{order:2;margin-left:auto;padding:15px 0}
  .menubtn{display:inline-flex;order:3;width:44px;height:44px}
  .menubtn svg{width:18px;height:18px}
  .sitenav{
    display:none;width:100%;order:5;flex-direction:column;gap:0;
    padding:8px 0 4px;border-top:1px solid var(--line-soft);
  }
  .sitenav.open{display:flex}
  .sitenav a{padding:13px 4px;border-bottom:none;font-size:15.5px;min-height:44px}
  .sitenav a.on{color:var(--red)}
  .socialicons{display:none;order:6;width:100%;justify-content:center;gap:26px;padding:8px 0 6px}
  .sitenav.open ~ .socialicons{display:flex}
  .socialicons a{padding:12px}
  .socialicons svg{width:20px;height:20px}
  .search{order:4;width:100%}
  .search input{padding-top:11px;padding-bottom:11px;font-size:16px} /* 16px stops iOS zoom-on-focus */
}

@media(max-width:920px){
  .player{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;
    align-content:start;overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .screen{aspect-ratio:16/9;width:100%}
  .screen video{max-height:none;height:100%}
  .rail{border-left:none;border-top:1px solid var(--line);overflow:visible;
    padding-bottom:max(44px,env(safe-area-inset-bottom))}
  .fcols{grid-template-columns:1fr 1fr;padding:30px var(--gut) 22px}
  .stage .content{padding-left:40px}
}

@media(max-width:760px){
  :root{--gut:20px;--gut-l:20px}

  .brand img{height:23px}


  .tabsbar{padding:11px var(--gut);gap:7px}
  .tab{padding:10px 15px;min-height:40px}
  .filecount{display:none}

  /* the billboard's left-side text column becomes a bottom sheet */
  .billboard{height:auto;min-height:0}
  .billboard .art{
    position:relative;height:auto;aspect-ratio:16/9;
    -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 46%);
    mask-image:linear-gradient(0deg,transparent 0,#000 46%);
  }
  .billboard .grade{
    background:linear-gradient(0deg,var(--void) 30%,rgba(8,8,11,.45) 62%,transparent 100%);
  }
  .billboard .inner{
    position:relative;max-width:100%;height:auto;
    margin-top:-19%;padding:0 var(--gut) 30px;
  }
  .billboard h1{font-size:clamp(26px,7.4vw,36px)}
  .billboard .syn{
    font-size:14px;margin-bottom:12px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .billboard .meta{font-size:12px;margin-bottom:18px}
  .billboard .actions .btn{flex:1 1 44%}

  .row{margin-top:28px}
  .rowhead{padding:0 var(--gut) 11px}
  .strip{padding:4px var(--gut) 14px}
  .strip .card{flex:0 0 78vw}
  .gridwrap{padding:24px var(--gut) 0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}

  /* touch devices never get the hover overlay, so show the runtime chip
     and keep the tap target the whole card */
  .card .play{display:none}
  .card .body{padding:14px 15px 16px}

  .pbar{padding:12px var(--gut)}
  .pbar .sig{font-size:9px}
  .pbar .ptitle{display:none}
  .rail{padding:24px var(--gut) 40px;
    padding-bottom:max(40px,env(safe-area-inset-bottom))}
  .rail h2{font-size:19px}

  /* landing */
  .stage .top{padding:18px var(--gut);padding-top:max(18px,env(safe-area-inset-top))}
  .stage .content{
    max-width:100%;padding:0 var(--gut);
    justify-content:flex-end;padding-bottom:118px;
  }
  .stage .grade{
    background:linear-gradient(0deg,
      rgba(8,8,11,.97) 0%,  rgba(8,8,11,.95) 44%, rgba(8,8,11,.74) 63%,
      rgba(8,8,11,.32) 83%, rgba(8,8,11,.58) 100%);
  }
  .stage .logo{width:min(88vw,340px);margin-bottom:22px}
  .stage .tag{max-width:22ch;margin-bottom:30px;font-size:clamp(19px,5.2vw,25px)}
  .stage .actions{gap:14px}
  .stage .cta{padding:15px 32px;flex:1 1 auto;justify-content:center}
  .stage .foot{
    flex-direction:column;align-items:center;gap:5px;text-align:center;
    padding:14px var(--gut);padding-bottom:max(14px,env(safe-area-inset-bottom));
    font-size:9.5px;letter-spacing:.12em;
  }

  /* interior pages */
  .page{padding:0 var(--gut)}
  .pagehead{padding:38px var(--gut) 24px}
  .fcols{grid-template-columns:1fr;padding:26px var(--gut) 18px;gap:26px}
  .fcol a{padding:13px 0;font-size:14px}
  .tile .link{padding:8px 0}
  .fbase{padding:6px var(--gut);justify-content:center;text-align:center;
    padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .fbase .credit{display:inline-block;padding:17px 2px 15px}
  .stage .foot .credit{display:inline-block;padding:13px 2px 12px}
  .chan .no{width:auto}
  .callout{padding:22px}
}

@media(max-width:400px){
  .stage .tag{font-size:20px}
  .strip .card{flex:0 0 84vw}
  .billboard .actions .btn{flex:1 1 100%}
}

/* short landscape phones: the landing must not clip its own CTA */
@media(max-height:520px) and (orientation:landscape){
  .stage .content{justify-content:center;padding-bottom:0;padding-top:56px}
  .stage .logo{width:min(30vw,220px);margin-bottom:14px}
  .stage .eyebrow{margin-bottom:10px}
  .stage .tag{font-size:17px;margin-bottom:18px}
  .stage .cta{padding:12px 26px;min-height:44px}
  .stage .foot{display:none}
}

@media(hover:none){
  .card:hover{transform:none}
  .card:hover .thumb img{transform:none}
  .tile:hover,.freq:hover,.prod:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}