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

/* top bar */
.f-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); }
.f-top__in { display: flex; align-items: center; gap: var(--space-5); min-height: 64px; }
.f-top .h-mark { width: 88px; }
.f-top nav { display: none; gap: var(--space-5); }
.f-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); }
.f-top nav a:hover { color: var(--fg); }
.f-top .h-level { display: none; margin-left: auto; }
.f-top .h-btn { margin-left: auto; }
.f-top .h-level + .h-btn { margin-left: 0; }
@media (min-width: 860px) { .f-top nav { display: flex; } .f-top .h-level { display: inline-flex; } }

/* hero: copy left, the pass right */
.f-hero { padding-block: var(--space-7) var(--space-8); display: grid; gap: var(--space-7); align-items: center; }
.f-hero__copy { display: grid; gap: var(--space-5); }
.f-hero__title { max-width: 14ch; }
.f-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.f-hero__meta { color: var(--muted); }
.f-hero .fp-wrap { container-type: inline-size; }
@media (min-width: 960px) { .f-hero { grid-template-columns: 1.15fr 1fr; min-height: min(calc(100svh - 64px), 820px); gap: var(--space-8); } }

/* steps */
.f-steps { display: grid; }
.f-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); padding: var(--space-5) 0; border-top: var(--hairline) solid var(--border); }
.f-step:last-child { border-bottom: var(--hairline) solid var(--border); }
.f-step i { font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--muted); font-size: 1.25rem; line-height: 1.2; }
.f-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; }
.f-step p { margin: 0; color: var(--muted); max-width: var(--measure); }
@media (min-width: 860px) { .f-steps { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); } .f-step:nth-last-child(2) { border-bottom: var(--hairline) solid var(--border); } }

/* missions: rows with points on the right */
.f-rows .h-row { --row-cols: 1fr auto; align-items: start; }
.f-rows .h-row > span:first-child { display: grid; gap: 2px; }
.f-rows small { font-size: var(--text-body-s); }
.f-rows .h-data { font-size: var(--text-data-l); white-space: nowrap; }
@media (min-width: 860px) { .f-missions { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-9); align-items: start; } .f-missions .f-head { margin-bottom: 0; } }

/* ladder */
.f-ladder { display: grid; gap: 1px; background: var(--border); border: var(--hairline) solid var(--border); }
.f-lvl { background: var(--bg); padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; border-top: 3px solid var(--c); }
.f-lvl .h-data { font-size: var(--text-data-l); }
.f-lvl p { margin: 0; color: var(--muted); font-size: var(--text-body-s); }
@media (min-width: 640px) { .f-ladder { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .f-ladder { grid-template-columns: repeat(5, 1fr); } }

/* sign up */
.f-signup { display: grid; gap: var(--space-7); }
.f-form { display: grid; gap: var(--space-5); }
.f-consents { display: grid; gap: var(--space-3); }
.f-consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: var(--text-body-s); color: var(--muted); cursor: pointer; }
.f-consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.f-consent:has(input:checked) { color: var(--fg); }
.f-form__foot { display: grid; gap: var(--space-3); justify-items: start; }
.f-form__fee { margin: 0; color: var(--muted); font-size: var(--text-body-s); }
.f-form__status { margin: 0; min-height: 1.5em; font-size: var(--text-body-s); color: var(--muted); }
.f-form__status.is-error { color: var(--heat-4); }
.f-aside { display: grid; gap: var(--space-4); align-content: start; }
.f-card { display: grid; gap: var(--space-3); justify-items: start; }
.f-card p { margin: 0; color: var(--muted); }
.f-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: var(--hairline) solid var(--border); }
.f-facts > div { background: var(--bg); padding: var(--space-4); display: grid; gap: 6px; }
@media (min-width: 960px) { .f-signup { grid-template-columns: 7fr 5fr; gap: var(--space-9); } }

/* faq */
.f-faq { border-top: var(--hairline) solid var(--border); }
.f-faq:last-child { border-bottom: var(--hairline) solid var(--border); }
.f-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); }
.f-faq summary::-webkit-details-marker { display: none; }
.f-faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--muted); font-size: 1.25rem; text-align: center; }
.f-faq[open] summary::after { content: "−"; }
.f-faq summary:hover { color: var(--accent); }
.f-faq p { margin: 0 0 var(--space-4); color: var(--muted); max-width: var(--measure); }
.f-faq p:last-child { margin-bottom: var(--space-5); }

/* footer */
.f-foot { border-top: var(--hairline) solid var(--border); padding-block: var(--space-8) var(--space-6); }
.f-foot__in { display: grid; gap: var(--space-6); }
.f-foot img { width: 160px; height: auto; }
.f-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); }
.f-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); }
.f-foot nav a:hover { color: var(--fg); }
.f-foot__line { color: var(--muted); font-size: var(--text-body-s); display: grid; gap: var(--space-2); }
@media (min-width: 860px) { .f-foot__in { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--space-9); } .f-foot__line { grid-column: 2; } }

/* state hooks: soon = before dates.fanPass, done = after day 2 */
[data-state="soon"] .f-only-open, [data-state="done"] .f-only-open { display: none; }