/* The existing pixel theatre, arranged around when and how to play. */
.homepage ::selection{color:var(--bg);background:var(--mint)}
.homepage{scrollbar-color:var(--line) var(--bg)}
.homepage button:focus-visible,.homepage video:focus-visible{outline:3px solid var(--amber);outline-offset:5px}
.homepage .opening{grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;padding:52px 0 48px}
.homepage h1{font-size:clamp(28px,2.9vw,41px);line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.homepage .opening-copy>p{max-width:46ch;margin-top:22px;font-size:18px;line-height:1.65}
.next-show{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.next-show h2{font-size:16px;line-height:1.5;letter-spacing:0;color:var(--muted);font-weight:600}
.next-show .show-date{margin-top:5px;font-size:24px;line-height:1.4;font-weight:700;color:var(--ink);text-wrap:balance}
.show-date time{font-variant-numeric:tabular-nums}
.next-show .show-warmup{font-size:15px;margin-top:7px;line-height:1.55}
.next-show .show-pacific{font-size:13px;margin-top:6px;line-height:1.6}
.homepage .hero-actions{margin-top:20px;gap:14px 22px}
.homepage .hero-actions .button{min-height:48px;justify-content:center}
.registration-link{font-size:14px;padding:12px 0}
.next-show .play-note{font-size:13px;margin-top:14px;color:var(--muted)}
.play-note strong{color:var(--ink);font-weight:600}
.schedule-tools{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:13px}
.schedule-tools button{background:none;border:0;padding:0;color:var(--mint);text-decoration:underline;text-underline-offset:5px;cursor:pointer;font:inherit}
.schedule-tools button:hover,.support-link:hover{color:var(--ink)}
.schedule-tools button:disabled{opacity:.65;cursor:wait}
.schedule-feedback{font-size:13px;margin-top:8px;max-width:50ch}
.schedule-feedback:empty{display:none}
.gameplay-preview{min-width:0;margin:0;align-self:center}
.gameplay-preview .theatre{height:380px}
.gameplay-preview .stage-sign{font-size:11px}
.gameplay-preview video{width:100%;aspect-ratio:16/9;display:block;object-fit:contain;background:#25263d;border:1px solid var(--line)}
.gameplay-preview figcaption{display:flex;flex-direction:column;gap:5px;margin-top:14px;color:var(--ink);font-size:15px;line-height:1.55}
.gameplay-preview .preview-availability,.media-feedback{color:var(--muted);font-size:13px}
.homepage .how-it-works{display:block;padding:36px 0 40px}
.joining-heading{display:flex;justify-content:space-between;align-items:start;gap:28px;margin-bottom:28px}
.homepage .joining-heading h2{font-size:27px;line-height:1.25}
.homepage .joining-heading p{margin-top:0;font-size:15px;max-width:46ch}
.joining-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin:0;padding-left:22px;counter-reset:join}
.joining-steps li{padding-left:5px}
.joining-steps li::marker{font:18px Silkscreen,monospace;color:var(--mint)}
.joining-steps h3{font-size:17px;line-height:1.4}
.homepage .joining-steps p{font-size:14px;line-height:1.7;margin-top:9px}
.joining-steps code{font-size:1em;font-family:inherit;font-weight:700;color:var(--mint)}
.homepage .support-link{display:inline-block;margin-top:18px;padding:8px 0;font-size:15px}
.homepage .coming-next p{max-width:70ch}
.next-show[data-live="true"] h2{color:var(--mint)}
@media(max-width:1050px){.homepage .opening{gap:30px;grid-template-columns:1fr 1fr}.homepage h1{font-size:31px}.gameplay-preview .theatre{height:355px}.joining-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}.next-show .show-date{font-size:22px}}
@media(max-width:760px){.homepage .opening{grid-template-columns:1fr;gap:32px;padding-top:34px}.homepage h1{font-size:clamp(29px,5.2vw,38px)}.homepage .opening-copy>p{max-width:60ch}.gameplay-preview .theatre{height:325px}.gameplay-preview .theatre canvas{width:280px;height:298px}.joining-heading{display:block}.homepage .joining-heading p{margin-top:14px}.gameplay-preview figcaption{font-size:14px}}
@media(max-width:480px){.homepage .opening-copy>p{font-size:16px}.next-show{margin-top:22px;padding-top:18px}.next-show .show-date{font-size:21px}.homepage .hero-actions{gap:6px}.homepage .hero-actions .button{width:100%}.registration-link{padding:12px 0}.joining-steps{grid-template-columns:1fr;gap:24px}.gameplay-preview .theatre{height:310px}.homepage .how-it-works{padding-top:30px}.next-show .play-note{max-width:34ch}}
