/* HEAT · Fan Pass mock (.fp-*) · a static preview of the Fan Pass day state, shared by the landing, the fans page and the hub. Colours and type from tokens; the field is drawn by heat.js (data-field on the canvas). */
.fp-wrap { display: grid; gap: var(--space-3); justify-items: center; width: 100%; }
.fp { position: relative; width: min(375px, 100%); background: #090909; color: #f2f0ec; border: var(--hairline) solid var(--border); border-radius: 14px; overflow: hidden; isolation: isolate; box-shadow: 0 30px 60px -30px oklch(0% 0 0 / .8); }
.fp small { display: block; font-family: var(--font-label); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.fp b { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-display-l); line-height: 1; }
.fp__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 14px 16px 12px; }
.fp__top .h-mark { width: 92px; }
.fp__hdr { text-align: right; display: grid; gap: 2px; }
.fp__hdr b { font-size: 1.125rem; }
.fp__strip { position: relative; aspect-ratio: 375 / 123; isolation: isolate; }
.fp__strip canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.fp__strip::after { content: ""; position: absolute; inset: 42% 0 0; z-index: -1; background: linear-gradient(to top, rgba(9,9,9,.82), rgba(9,9,9,0)); }
.fp__primary { position: absolute; left: 16px; right: 16px; bottom: 12px; display: grid; gap: 4px; }
.fp__primary b { font-size: clamp(1.75rem, 8cqw, 2.25rem); }
.fp__rows { padding: 14px 16px 18px; display: grid; gap: 12px; }
.fp__row b, .fp__aux b { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-data-l); letter-spacing: var(--track-data); margin-top: 3px; }
.fp__aux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fp__note { color: var(--muted); font-size: .6875rem; }