/* Marquee Nocturne: black velvet, amber bulbs, cream signage type. */
:root {
  --velvet: #0C0A09; --panel: #15120F; --line: #2A2420; --cream: #F3E9D2; --muted: #A2957E;
  --amber: #FFB627; --amber-2: #8C6414; --ox: #A3312B;
  --disp: 'Big Shoulders Display', sans-serif; --serif: 'Instrument Serif', serif; --ui: 'Archivo', sans-serif; --mono: 'IBM Plex Mono', monospace;
  --pitch: 18px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--velvet); color: var(--cream); font: 15px/1.45 var(--ui);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a { color: inherit; text-decoration: none; }
.k { font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---- bulbs: a dim bulb every pitch, a bright one every third, the bright ones hop ---- */
.bulbs::after, .marquee .b.t, .marquee .b.bm {
  content: ""; pointer-events: none;
  background:
    radial-gradient(circle at 6px 6px, var(--amber) 0 3.2px, transparent 4px) 0 0 / calc(var(--pitch) * 3) 12px repeat-x,
    radial-gradient(circle at 6px 6px, var(--amber-2) 0 2.6px, transparent 3.4px) 0 0 / var(--pitch) 12px repeat-x;
  animation: chase 1.8s steps(3, end) infinite;
}
.marquee .b.l, .marquee .b.r {
  background:
    radial-gradient(circle at 6px 6px, var(--amber) 0 3.2px, transparent 4px) 0 0 / 12px calc(var(--pitch) * 3) repeat-y,
    radial-gradient(circle at 6px 6px, var(--amber-2) 0 2.6px, transparent 3.4px) 0 0 / 12px var(--pitch) repeat-y;
  animation: chasey 1.8s steps(3, end) infinite;
}
@keyframes chase { to { background-position: calc(var(--pitch) * 3) 0, 0 0; } }
@keyframes chasey { to { background-position: 0 calc(var(--pitch) * 3), 0 0; } }

/* ---- top ---- */
.top { position: relative; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.bulbs::after { position: absolute; left: clamp(16px, 3vw, 40px); right: clamp(16px, 3vw, 40px); bottom: -7px; height: 12px; }
.wordmark { font: 900 28px/1 var(--disp); letter-spacing: .03em; text-transform: uppercase; }
.spacer { flex: 1; }
.btn { border: 1px solid var(--cream); padding: 6px 14px; height: 34px; display: inline-flex; align-items: center; white-space: nowrap; font-size: 14px; transition: background .12s, color .12s; }
.btn.pri { background: var(--amber); color: var(--velvet); border-color: var(--amber); font-weight: 600; }
.btn:hover { background: var(--cream); color: var(--velvet); border-color: var(--cream); }

/* ---- main ---- */
main { display: grid; grid-template-columns: minmax(300px, 2fr) 3fr; gap: clamp(16px, 3vw, 48px); padding: clamp(18px, 3vh, 36px) clamp(16px, 3vw, 40px) clamp(12px, 2.5vh, 32px); min-height: 0; }
main > * { min-width: 0; }
.copy { display: grid; grid-template-rows: auto auto auto; align-content: start; gap: clamp(12px, 2.4vh, 26px); min-height: 0; }
h1 { font: 900 clamp(36px, 6.4vh, 80px)/.9 var(--disp); text-transform: uppercase; margin: 0; max-width: 12ch; animation: warm 1.6s steps(1, end) 1; }
@keyframes warm { 0% { opacity: 0; } 6% { opacity: 1; } 9% { opacity: .15; } 13% { opacity: 1; } 17% { opacity: .35; } 22% { opacity: 1; } 46% { opacity: 1; } 49% { opacity: .5; } 52% { opacity: 1; } 100% { opacity: 1; } }
.lede { margin: 0; font: italic 400 clamp(17px, 2.5vh, 24px)/1.3 var(--serif); max-width: 40ch; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(5px, 1.1vh, 12px); border-top: 1px solid var(--line); padding-top: clamp(8px, 1.4vh, 14px); }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: baseline; font-size: clamp(12px, 1.7vh, 15px); color: var(--cream); }
.steps b { font-weight: 600; }
.steps a { border-bottom: 1px solid var(--amber); }
.steps a:hover { color: var(--amber); }
.steps .k { color: var(--amber); }

/* ---- the marquee ---- */
.preview { display: grid; grid-template-rows: auto auto auto; align-content: start; gap: 12px; min-height: 0; }
.controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.seg { display: inline-flex; border: 1px solid var(--line); background: var(--panel); }
.seg button { font: inherit; color: var(--muted); background: none; border: 0; padding: 5px 12px; height: 30px; cursor: pointer; transition: color .12s; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--cream); }
.seg button[aria-pressed="true"] { background: var(--cream); color: var(--velvet); }
.marquee { position: relative; min-height: 0; min-width: 0; overflow: hidden; display: grid; place-items: center; padding: 20px; background: var(--panel); border: 1px solid var(--line); box-sizing: border-box; justify-self: center; align-self: center; }
.marquee .b { position: absolute; pointer-events: none; }
.marquee .b.t, .marquee .b.bm { left: 20px; right: 20px; height: 12px; }
.marquee .b.t { top: 4px; }
.marquee .b.bm { bottom: 4px; }
.marquee .b.l, .marquee .b.r { top: 20px; bottom: 20px; width: 12px; }
.marquee .b.l { left: 4px; }
.marquee .b.r { right: 4px; }
.frame { position: relative; overflow: hidden; background: #000; box-sizing: content-box; }
.frame iframe { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; pointer-events: none; background: #000; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.caption { margin: 0; }
.bottom { display: flex; justify-content: space-between; gap: 12px; padding: 10px clamp(16px, 3vw, 40px); border-top: 1px solid var(--line); flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; } }

@media (max-width: 860px) {
  body { font-size: 14px; }
  .top { height: 48px; gap: 8px; }
  .bulbs::after { left: 16px; right: 16px; }
  .tagline { display: none; }
  .wordmark { font-size: 22px; }
  main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; padding: 14px 16px 10px; }
  .preview { grid-row: 1; grid-template-rows: auto auto auto; gap: 8px; }
  .marquee { padding: 12px; }
  .marquee .b.t, .marquee .b.bm { left: 12px; right: 12px; }
  .marquee .b.t { top: 0; } .marquee .b.bm { bottom: 0; }
  .marquee .b.l, .marquee .b.r { top: 12px; bottom: 12px; }
  .marquee .b.l { left: 0; } .marquee .b.r { right: 0; }
  .caption { display: none; }
  .controls { gap: 6px; justify-content: flex-start; }
  .seg button { padding: 3px 7px; height: 26px; font-size: 12px; }
  .copy { grid-template-rows: auto auto; gap: 10px; }
  h1 { font-size: clamp(24px, 4.2vh, 34px); max-width: none; }
  .lede { display: none; }
  .steps li { font-size: clamp(11px, 1.6vh, 13px); }
  .bottom { padding: 8px 16px; }
  .bottom span:last-child { display: none; }
  .hide-sm { display: none; }
}