/* Academy landing page: live HyperFrames sections (2026-09-24). Tokens come from styles.css. */
.landing main.wrap { padding-top: 24px; }
.landing .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark, #8F7229); margin: 0 0 8px; }
.landing h1 { font-family: var(--serif, "Fraunces", serif); font-weight: 500; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 14px; }
.landing h2 { font-family: var(--serif, "Fraunces", serif); font-weight: 500; font-size: clamp(24px, 3vw, 36px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 12px; }
.landing .lede { font-size: 1.08rem; line-height: 1.55; max-width: 62ch; margin: 0 0 18px; }
.landing .note, .landing .fine { font-size: .88rem; line-height: 1.5; color: var(--muted, #6b655c); }
.landing .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.landing .hf-copy p { line-height: 1.55; margin: 0 0 12px; }

/* frames: fixed-aspect boxes the player fills; poster paints first, the composition plays on top */
.hf-frame { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #F6F2EA; border: 1px solid rgba(23,21,18,.10); }
.hf-frame hyperframes-player { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hf-frame-hero { aspect-ratio: 4 / 5; margin: 0 0 22px; }
.hf-frame-tall { aspect-ratio: 4 / 5; }
.hf-frame-phone { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; border-radius: 28px; border: 8px solid #171512; background: #171512; }

.hf-hero { margin: 0 0 52px; }
.hf-row, .hf-close { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 0 0 56px; align-items: center; }

@media (min-width: 900px) {
  .hf-frame-hero { aspect-ratio: 16 / 9; margin-bottom: 30px; }
  .hf-row, .hf-close { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 48px; margin-bottom: 84px; }
  .hf-row-flip .hf-frame { order: 2; }
  .hf-row-flip .hf-copy { order: 1; }
  .hf-hero { margin-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-frame::after { content: ""; }
}