/* HEAT 01 · registration landing · v1.3. Layout only: colour, type, spacing and motion come from design-system tokens and h-* components. Prefix l-. Mobile first. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100svh; }
.l-skip { position: absolute; left: 16px; top: -60px; z-index: 20; padding: 12px 16px; background: var(--accent); color: var(--on-accent); }
.l-skip:focus { top: 12px; }
.l-wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.l-section { padding-block: var(--space-section); border-top: var(--hairline) solid var(--border); }
.l-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); max-width: var(--measure); min-width: 0; }
.l-head > *, .l-hero__copy > * { min-width: 0; overflow-wrap: anywhere; }
.l-head .h-display-l, .l-hero__title, #pack-h { font-size: clamp(2.25rem, 1.4rem + 3vw, 4.5rem); }
.l-head .h-display-l { text-transform: uppercase; font-weight: 900; letter-spacing: var(--track-display-xl); }

/* top bar */
.l-top { position: sticky; top: 0; z-index: 10; background: oklch(from var(--bg) l c h / .88); backdrop-filter: blur(10px); border-bottom: var(--hairline) solid var(--border); }
.l-top__in { display: flex; align-items: center; gap: var(--space-5); min-height: 64px; }
.l-top .h-mark { width: 88px; }
.l-top nav { display: none; gap: var(--space-5); }
.l-top nav a { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; color: var(--muted); }
.l-top nav a:hover { color: var(--fg); }
.l-top .h-level { display: none; margin-left: auto; }
.l-top .h-btn { margin-left: auto; }
.l-top .h-level + .h-btn { margin-left: 0; }
@media (min-width: 860px) { .l-top nav { display: flex; } .l-top .h-level { display: inline-flex; } }

/* hero */
.l-hero { padding-block: var(--space-7) var(--space-8); display: grid; gap: var(--space-7); align-items: center; }
.l-hero__copy { display: grid; gap: var(--space-5); }
.l-lockup { container-type: inline-size; display: grid; gap: 6cqw; width: 100%; max-width: 560px; }
.l-lockup .h-mark-filled { width: 100%; }
.l-lockup .l-desc { display: flex; justify-content: space-between; font-family: var(--font-label); font-weight: 600; font-size: 11cqw; line-height: 1; text-transform: uppercase; color: var(--fg); }
.l-hero__title { text-transform: uppercase; font-weight: 900; letter-spacing: var(--track-display-xl); max-width: 14ch; }
.l-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.l-hero__meta { color: var(--muted); }
.l-court { aspect-ratio: 2 / 1; border: var(--hairline) solid var(--border); background: var(--bg); position: relative; overflow: hidden; isolation: isolate; }
.l-court canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.l-court__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 5% 10%; background-position: -1px -1px; }
.l-court__safe { position: absolute; inset: 6%; display: grid; grid-template-rows: auto 1fr auto; }
.l-court__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.l-court__msg { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label-l); letter-spacing: var(--track-label); text-transform: uppercase; }
@media (min-width: 960px) { .l-hero { grid-template-columns: 1.15fr 1fr; min-height: min(calc(100svh - 64px), 860px); gap: var(--space-8); } }
@media (max-width: 639px) { .l-court__msg { font-size: var(--text-label); } .l-court__row .h-code { font-size: .75rem; white-space: nowrap; } .l-court__safe { inset: 5%; } }

/* facts */
.l-facts { display: grid; gap: 1px; background: var(--border); border: var(--hairline) solid var(--border); }
.l-fact { background: var(--bg); padding: var(--space-5) var(--space-5) var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.l-fact .h-display-l { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 640px) { .l-facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .l-facts { grid-template-columns: repeat(3, 1fr); } }
.l-venue { display: grid; gap: var(--space-6); margin-top: var(--space-8); align-items: end; }
.l-venue .h-photo { aspect-ratio: 4 / 5; max-height: 560px; }
.l-venue__copy { display: grid; gap: var(--space-4); }
.l-venue__copy .h-display-s { text-transform: uppercase; font-weight: 700; }
@media (min-width: 860px) { .l-venue { grid-template-columns: 5fr 7fr; } .l-venue .h-photo { aspect-ratio: 4 / 5; } }

/* calendar */
.l-cal { display: grid; }
.l-cal__row { display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-5); padding: var(--space-4) var(--space-4); border-top: var(--hairline) solid var(--border); border-left: 3px solid transparent; transition: background var(--dur) var(--ease); }
.l-cal__row:last-child { border-bottom: var(--hairline) solid var(--border); }
.l-cal__row.is-current { background: var(--surface); border-left-color: var(--lvl, var(--accent)); }
.l-cal__row.is-past { color: var(--muted); }
.l-cal__row.is-past .h-level { opacity: .55; }
.l-cal__date { font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: var(--track-data); }
.l-cal__date small { display: block; color: var(--muted); font-size: .75rem; margin-top: 2px; }
.l-cal__msg { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label-l); letter-spacing: var(--track-label); text-transform: uppercase; }
.l-cal__what { color: var(--muted); font-size: var(--text-body-s); }
.l-cal__row.is-current .l-cal__what { color: var(--fg); }
@media (min-width: 860px) { .l-cal__row { grid-template-columns: 150px 220px 1fr; align-items: baseline; } .l-cal__what { grid-column: 3; } .l-cal__msg { grid-column: 3; } .l-cal__lvl { grid-column: 2; grid-row: 1 / 3; } .l-cal__date { grid-row: 1 / 3; } }

/* categories */
.l-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); border-top: var(--hairline) solid var(--border); border-left: var(--hairline) solid var(--border); }
.l-cat { background: var(--bg); padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-2); text-align: left; border: 0; border-right: var(--hairline) solid var(--border); border-bottom: var(--hairline) solid var(--border); color: var(--fg); font: inherit; cursor: pointer; transition: background var(--dur) var(--ease); }
.l-cat:hover { background: var(--surface); }
.l-cat.is-selected { background: oklch(from var(--accent) l c h / 0.12); box-shadow: inset 0 0 0 1px var(--accent); }
.l-cat b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); letter-spacing: var(--track-display-l); line-height: 1; white-space: nowrap; }
@media (min-width: 960px) { .l-cats { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); } }
.l-cat span { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.l-cats__note { margin-top: var(--space-5); color: var(--muted); max-width: var(--measure); }

/* welcome pack */
.l-pack { display: grid; gap: var(--space-7); align-items: center; }
.l-pack__copy { display: grid; gap: var(--space-4); }
.l-pack__items { display: grid; gap: var(--space-4); }
.l-tee { position: relative; background: var(--surface); border: var(--hairline) solid var(--border); padding: var(--space-6); display: grid; grid-template-columns: 1fr; justify-items: center; }
.l-tee__back { position: relative; width: min(100%, 260px); aspect-ratio: 2 / 3; }
.l-tee__back canvas { width: 100%; height: 100%; display: block; }
.l-tee__back svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.l-tee__back svg * { fill: none; stroke: var(--fg); stroke-width: .06; opacity: .7; }
.l-tee__name { margin-top: var(--space-4); display: grid; gap: 4px; text-align: center; width: 100%; }
.l-tee__name b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.l-tee__name span { font-family: var(--font-mono); font-size: var(--text-data); color: var(--muted); letter-spacing: var(--track-data); }
@media (min-width: 960px) { .l-pack { grid-template-columns: 1fr 1fr; } }

/* register */
.l-reg { display: grid; gap: var(--space-7); }
.l-form { display: grid; gap: var(--space-5); }
/* the form is a container: two players side by side only when the form itself is wide enough */
.l-form { container-type: inline-size; }
.l-fs { display: grid; gap: var(--space-4); min-width: 0; }
.l-team { display: grid; gap: var(--space-6); min-width: 0; }
.l-person { display: grid; gap: var(--space-4); align-content: start; min-width: 0; padding-top: var(--space-4); border-top: var(--hairline) solid var(--border); }
.l-person__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.l-person__name { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label-l); letter-spacing: var(--track-label); text-transform: uppercase; }
.l-person__tag { font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--muted); text-align: right; }
.l-person__tag.is-set { color: var(--accent); }
.l-catgroups { display: grid; gap: var(--space-3); }
.l-catgroup { display: grid; gap: var(--space-2); align-items: center; }
.l-catgroup__name { font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--muted); }
@container (min-width: 440px) { .l-catgroup { grid-template-columns: 104px 1fr; } }
@container (min-width: 560px) { .l-team { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
/* locked form (before 21.10 and after 09.01): the notice is the first thing, the fields are visibly inactive */
.l-form__lock { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: var(--hairline) solid var(--accent); border-left-width: 4px; }
.l-form__lock b { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label-l); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); }
.l-form__lock span { color: var(--muted); font-size: var(--text-body-s); }
.l-form.is-locked .l-fs, .l-form.is-locked .l-team, .l-form.is-locked > .h-field__hint { opacity: 0.38; }
.l-form.is-locked .h-input, .l-form.is-locked .h-choice, .l-form.is-locked .h-btn { cursor: not-allowed; }
.l-form.is-locked .h-btn { opacity: 0.5; }
/* errors live under the field they belong to */
.is-invalid > label, .is-invalid > .h-field__label, .is-invalid > .l-person__head .l-person__name { color: var(--heat-4); }
.is-invalid .h-input { border-color: var(--heat-4); }
.is-invalid .h-choice:not(:has(input:checked)) { border-color: oklch(from var(--heat-4) l c h / 0.55); }
.l-form__foot { display: grid; gap: var(--space-4); }
.l-form__fee { margin: 0; font-family: var(--font-mono); font-size: var(--text-data); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.l-form__status { color: var(--muted); font-size: var(--text-body-s); min-height: 1.5em; }
.l-form__status.is-error { color: var(--heat-4); }
.l-steps { display: grid; align-content: start; }
.l-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-top: var(--hairline) solid var(--border); }
.l-step:last-child { border-bottom: var(--hairline) solid var(--border); }
.l-step i { font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--muted); font-size: 1.25rem; line-height: 1.2; }
.l-step b { display: block; font-family: var(--font-label); font-weight: 600; font-size: var(--text-label-l); letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 4px; }
.l-step p { margin: 0; color: var(--muted); font-size: var(--text-body-s); }
@media (min-width: 960px) { .l-reg { grid-template-columns: 7fr 5fr; gap: var(--space-9); } }


/* faq */
.l-faq { border-top: var(--hairline) solid var(--border); }
.l-faq:last-child { border-bottom: var(--hairline) solid var(--border); }
.l-faq summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; font-weight: 500; font-size: var(--text-body); }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--muted); font-size: 1.25rem; text-align: center; }
.l-faq[open] summary::after { content: "−"; }
.l-faq summary:hover { color: var(--accent); }
.l-faq p { margin: 0 0 var(--space-4); color: var(--muted); max-width: var(--measure); }
.l-faq p:last-child { margin-bottom: var(--space-5); }

/* fans: secondary audience, one ghost link; the pass preview is the shared mock fans/fanpass.css */
.l-fans__in { display: grid; gap: var(--space-7); align-items: center; }
.l-fans__copy { display: grid; gap: var(--space-4); max-width: var(--measure); min-width: 0; }
.l-fans__copy > * { min-width: 0; overflow-wrap: anywhere; }
.l-fans__copy .h-display-l { text-transform: uppercase; font-weight: 900; letter-spacing: var(--track-display-xl); font-size: clamp(2.25rem, 1.4rem + 3vw, 4.5rem); }
.l-fans__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 960px) { .l-fans__in { grid-template-columns: 7fr 5fr; gap: var(--space-9); } }
[data-fans="done"] .l-fans__cta { display: none; }

/* partners, footer */
.l-partners[hidden] { display: none; }
.l-foot { border-top: var(--hairline) solid var(--border); padding-block: var(--space-8) var(--space-6); }
.l-foot__in { display: grid; gap: var(--space-6); }
.l-foot img { width: 160px; height: auto; }
.l-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); }
.l-foot nav a { font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; color: var(--muted); }
.l-foot nav a:hover { color: var(--fg); }
.l-foot__line { color: var(--muted); font-size: var(--text-body-s); display: grid; gap: var(--space-2); }
@media (min-width: 860px) { .l-foot__in { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--space-9); } .l-foot__line { grid-column: 2; } }

/* state hooks */
[data-state="soon"] .l-only-open, [data-state="closed"] .l-only-open, [data-state="draw"] .l-only-open, [data-state="live"] .l-only-open, [data-state="done"] .l-only-open { display: none; }

/* ---------- registration service (dev.heatseries.com, 2026-10-12): honeypot, sending state, confirmation ---------- */
.l-form[hidden], .l-form__lock[hidden], .l-done[hidden] { display: none; }
.l-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.l-form.is-sending .h-btn { opacity: 0.6; cursor: progress; }
.l-done { display: grid; gap: var(--space-5); align-content: start; outline: none; animation: l-done-in var(--dur, 300ms) var(--ease, ease-out) both; }
.l-done__kicker { color: var(--accent); }
.l-done__team { border-top: var(--hairline) solid var(--border); }
.l-done__row { display: grid; grid-template-columns: minmax(9ch, auto) 1fr; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--border); }
.l-done__row b { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: var(--track-display-s); text-transform: uppercase; overflow-wrap: anywhere; }
.l-done__row .h-label { color: var(--muted); }
@keyframes l-done-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .l-done { animation: none; } }