/* STORM — page-specific layout
   Generic look-and-feel lives in components.css; this file only holds
   grid templates and structure unique to one page. */

/* ============================================================ SHARED */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-hairline); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }

/* ============================================================ HOME */
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.home-hero__eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.home-hero__actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.home-hero__formats { margin-top: 44px; display: flex; gap: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--text-label); }
.home-hero__formats span:nth-child(even) { color: var(--border-yellow-strong); }

.home-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }

.home-steps-head { padding: 80px 0 40px; }

.home-live__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.home-live__aside { display: flex; flex-direction: column; gap: 20px; }

.home-arena__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.home-crowd__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 60px; align-items: center; }
.home-crowd__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.home-crowd__tag { border: 1px solid rgba(9, 9, 11, 0.35); padding: 9px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.home-scorecard { background: var(--storm-black); color: var(--storm-white); padding: 30px; border: 1px solid rgba(9, 9, 11, 0.4); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.home-scorecard__head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--text-tertiary); text-transform: uppercase; }
.home-scorecard__score { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.home-scorecard__score-num { font-family: var(--font-display); font-size: 76px; line-height: 0.9; }

.home-econ__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.home-econ__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.home-econ__ticket { grid-column: span 2; border: 1px solid var(--border-default); background: var(--surface-02); padding: 22px; }
.home-econ__panel { border: 1px solid var(--border-default); background: var(--surface-02); padding: 20px; }
.home-econ__list { margin-top: 30px; }
.home-econ__list-row { background: var(--storm-black); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; }

.home-stream__grid { border: 1px solid var(--border-default); background: var(--surface-03); padding: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 26px; align-items: stretch; }
.home-stream__program { position: relative; background: linear-gradient(160deg, #151519, #0a0a0c); border: 1px solid var(--border-medium); min-height: 260px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.home-stream__program-content { position: relative; text-align: center; }
.home-stream__destinations { display: flex; flex-direction: column; gap: 12px; }

.home-lb__tabs-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 40px; }

.home-discover__cats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }

.home-creators__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.home-creators__actions { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-creators__action { border: 1px solid var(--border-medium); padding: 14px 16px; font-size: 14px; font-weight: 600; }
.home-creators__panel { position: relative; aspect-ratio: 4 / 3.4; background: linear-gradient(160deg, #16161a, #0a0a0c); border: 1px solid var(--border-default); overflow: hidden; }
.home-creators__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* ============================================================ HOW IT WORKS */
.hiw-hero__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.hiw-hero__meta-item { background: var(--surface-02); padding: 18px; }

.hiw-phase-head { display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 18px; }
.hiw-phase-head--tight { border-bottom: none; margin-bottom: 34px; }

.step-row--home { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 320px); }
.step-row--phase { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 400px); }
.step-row--home .step-row__num { font-size: 120px; }
.step-row--phase .step-row__num { font-size: 92px; }

.hiw-round-timeline { border: 1px solid var(--border-default); background: var(--surface-03); margin-bottom: 26px; }
.hiw-round-timeline__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-hairline); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--text-tertiary); }
.hiw-round-timeline__body { display: flex; flex-wrap: wrap; gap: 1px; background: var(--border-subtle); }

.hiw-live__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.hiw-live__crowd-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.hiw-result__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; align-items: start; }
.hiw-result__card { background: var(--storm-black); color: var(--storm-white); padding: 28px; border: 1px solid rgba(9, 9, 11, 0.35); }
.hiw-result__headline { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 18px; gap: 16px; flex-wrap: wrap; }
.hiw-result__winner { font-family: var(--font-display); font-size: clamp(38px, 5vw, 64px); line-height: 0.95; color: var(--storm-yellow); text-transform: uppercase; }
.hiw-result__score { font-family: var(--font-display); font-size: clamp(38px, 5vw, 64px); line-height: 0.95; white-space: nowrap; }
.hiw-result__stages { display: flex; flex-direction: column; gap: 14px; }
.hiw-result__stage { border: 1px solid rgba(9, 9, 11, 0.3); padding: 22px; background: rgba(9, 9, 11, 0.04); }
.hiw-result__stage-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }

/* ============================================================ CREATORS */
.creators-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.creators-hero__panel { position: relative; aspect-ratio: 4 / 3.2; background: linear-gradient(160deg, #16161a, #0a0a0c); border: 1px solid var(--border-default); overflow: hidden; }
.creators-hero__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }

.creators-profile { border: 1px solid var(--border-default); background: var(--surface-03); }
.creators-profile__banner { position: relative; height: 150px; overflow: hidden; border-bottom: 1px solid var(--border-hairline); }
.creators-profile__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.creators-profile__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; padding: 26px; }
.creators-profile__head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.creators-profile__avatar { width: 104px; height: 104px; flex: none; overflow: hidden; border: 1px solid var(--border-yellow-strong); }
.creators-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.creators-profile__name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.creators-profile__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.creators-profile__side { display: flex; flex-direction: column; gap: 14px; }
.creators-profile__ticket { border: 1px solid var(--border-yellow); padding: 16px; }
.creators-profile__record { border: 1px solid var(--border-default); padding: 16px; }
.record-row { display: flex; align-items: center; gap: 10px; }
.record-row__result { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; }
.record-row__title { flex: 1; min-width: 0; font-size: 13px; color: rgba(255, 255, 255, 0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-row__score { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-tertiary); white-space: nowrap; }

.creators-dashboard__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.creators-dashboard__row-a { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.creators-dashboard__row-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.growth-chart { border: 1px solid var(--border-default); background: var(--surface-03); padding: 22px; }
.growth-chart__bars { height: 180px; margin-top: 22px; }
.engagement-panel { border: 1px solid var(--border-default); background: var(--surface-03); padding: 22px; }
.engagement-row { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.engagement-row__meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; }
.event-setup { border: 1px solid var(--border-default); background: var(--surface-03); }
.event-setup__head { padding: 16px 20px; border-bottom: 1px solid var(--border-hairline); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.event-setup__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.event-setup__field-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--text-label); margin-bottom: 6px; text-transform: uppercase; }
.event-setup__field-static { border: 1px solid var(--border-medium); padding: 13px 14px; font-size: 15px; }
.event-setup__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.event-setup__format-toggle { display: flex; gap: 1px; background: var(--border-default); border: 1px solid var(--border-default); }
.event-setup__format-opt { flex: 1; text-align: center; background: var(--storm-black); padding: 11px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); }
.event-setup__format-opt--active { background: var(--storm-yellow); color: var(--text-on-yellow); }
.earnings-panel { border: 1px solid var(--border-default); background: var(--surface-03); padding: 20px; }
.earnings-list { display: flex; flex-direction: column; gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); margin-top: 16px; }
.earnings-row { background: var(--storm-black); padding: 15px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stream-out-panel { border: 1px solid var(--border-default); background: var(--surface-03); padding: 20px; }
.stream-out-panel__list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* ============================================================ DISCOVER */
.discover-header__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.discover-live-indicator { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; }
.discover-controls { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.discover-cats { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.discover-result-line { margin-top: 14px; }

.featured-clash { position: relative; border: 1px solid var(--border-yellow); background: var(--surface-03); overflow: hidden; }
.featured-clash__head { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-hairline); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--text-tertiary); }
.featured-clash__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.featured-clash__media { display: grid; grid-template-columns: 1fr 64px 1fr; border-right: 1px solid var(--border-hairline); }
.featured-clash__body { padding: 26px; display: flex; flex-direction: column; }
.featured-clash__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.featured-clash__tag { border: 1px solid var(--border-medium); padding: 7px 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; }
.featured-clash__tag--accent { border-color: var(--border-yellow); color: var(--storm-yellow); }
.featured-clash__actions { display: flex; gap: 10px; margin-top: auto; padding-top: 26px; flex-wrap: wrap; }

.creator-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* ============================================================ LEADERBOARD */
.lb-hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.lb-podium-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.lb-standings-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.lb-standings-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.lb-points__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.lb-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.lb-legend__item { background: var(--surface-02); padding: 20px; }
.lb-legend__value { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--storm-yellow); }

/* ============================================================ ABOUT */
.about-hero__bolt { position: absolute; left: 72%; top: -40px; width: 260px; height: 520px; }
.about-hero__lead { max-width: 15ch; }
.about-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
.about-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); margin-top: 50px; }
.pillar { padding: 34px 26px; min-height: 280px; display: flex; flex-direction: column; background: var(--surface-02); }
.pillar--yellow { background: var(--storm-yellow); color: var(--text-on-yellow); }
.pillar__title { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 38px); line-height: 1; margin: 14px 0 0; text-transform: uppercase; }
.pillar__desc { margin: 14px 0 0; font-size: 15px; line-height: 1.55; opacity: 0.72; }
.pillar__tag { margin-top: auto; padding-top: 22px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; opacity: 0.55; text-transform: uppercase; }
.pillar--yellow .pillar__tag { opacity: 0.75; }

.belief-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--border-subtle); align-items: baseline; }
.belief-row__num { font-family: var(--font-display); font-size: 38px; line-height: 0.9; color: var(--storm-yellow); }
.belief-row__title { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 34px); text-transform: uppercase; line-height: 1.05; }
.belief-row__desc { margin: 8px 0 0; max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }

.about-guardrails__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 50px; align-items: center; }
.editorial-panel { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--border-default); overflow: hidden; }
.editorial-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }