:root{
  --concrete:#dcdee2; --concrete-deep:#cfd1d6; --ink:#111214; --acid:#d4ee2b;
  --gutter:clamp(1.125rem,4vw,4rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  min-height:100svh;background:var(--concrete);color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif;overflow-x:clip;
  display:flex;flex-direction:column;
}
::selection{background:var(--acid);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* grain */
body::after{
  content:"";position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.17;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}16%{transform:translate(-2%,1%)}33%{transform:translate(1%,-2%)}
  50%{transform:translate(-1%,2%)}66%{transform:translate(2%,1%)}83%{transform:translate(-2%,-1%)}
}

/* dashed guide lines */
.guides{
  position:fixed;inset:0;z-index:1;pointer-events:none;display:grid;grid-template-columns:repeat(4,1fr);
  padding-inline:var(--gutter);max-width:1680px;margin-inline:auto;
}
.guides span{border-left:1px dashed rgba(17,18,20,.16)}
.guides span:first-child{border-left:0}

/* header */
.bar{
  position:relative;z-index:5;width:100%;max-width:1680px;margin-inline:auto;
  padding:clamp(1rem,2vw,1.5rem) var(--gutter);
  display:flex;justify-content:space-between;align-items:flex-start;
}
.logo{
  color:inherit;text-decoration:none;font-weight:700;text-transform:uppercase;
  font-size:clamp(13px,1.1vw,15px);line-height:1.05;letter-spacing:-.01em;
}
.badge{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--acid);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:.55rem 1rem;font:600 .75rem/1 "JetBrains Mono",monospace;letter-spacing:.04em;
}
.badge i{width:.5rem;height:.5rem;border-radius:50%;background:var(--ink);animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* fallback: thumbnail link, shown only if the embed fails */
.fallback{position:absolute;inset:0;z-index:2;display:block;background:var(--ink);color:var(--ink);text-decoration:none}
.fallback img{width:100%;height:100%;object-fit:cover;display:block}
.fallback span{
  position:absolute;right:1rem;bottom:1rem;background:var(--acid);border:1px solid var(--ink);
  padding:.6rem 1rem;font:600 .75rem/1 "JetBrains Mono",monospace;letter-spacing:.04em;
}
.fallback[hidden]{display:none}

/* hero */
main{position:relative;z-index:5;flex:1;display:grid;align-items:center}
.hero{
  width:100%;max-width:1680px;margin-inline:auto;
  padding:clamp(1rem,3vw,2.5rem) var(--gutter) clamp(1.5rem,4vw,3.5rem);
}
.player{
  position:relative;aspect-ratio:16/9;width:min(100%,calc((100svh - 11rem)*16/9));margin-inline:auto;
  background:var(--ink);border:1px solid var(--ink);box-shadow:clamp(8px,1vw,14px) clamp(8px,1vw,14px) 0 var(--acid);
}
.player iframe,.player #reel{position:absolute;inset:0;width:100%;height:100%;border:0}
.caption{
  width:min(100%,calc((100svh - 11rem)*16/9));margin:1.5rem auto 0;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font:500 .75rem/1.2 "JetBrains Mono",monospace;letter-spacing:.04em;
}

#sound{
  background:var(--acid);color:var(--ink);border:1px solid var(--ink);cursor:pointer;
  padding:.4rem .75rem;font:600 .75rem/1 "JetBrains Mono",monospace;letter-spacing:.04em;
  box-shadow:3px 3px 0 var(--ink);transition:transform .18s ease,box-shadow .18s ease;
}
#sound:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
#sound[hidden]{display:none}

@media (max-width:600px){
  .badge{padding:.5rem .75rem;font-size:.6875rem;box-shadow:3px 3px 0 var(--ink)}
  .player{width:100%}.caption{width:100%}
}
@media (prefers-reduced-motion:reduce){
  body::after,.badge i{animation:none}
}