/* Variant 1 — landing-page-design: floating nav, 680px hero measure, tagline
   reveal, IntersectionObserver scroll reveals. Layered over landing.css. */
:root { --base: cubic-bezier(.22, 1, .36, 1); }

/* Weights cap at bold */
.brand, .hero h1, .amount, .closer h2 { font-weight: 700; }

/* Floating nav: a translucent pill set off the ember hero, sized to its
   content. It scrolls away with the page (not sticky). */
.hero { border-image-outset: 88px 100vmax 0; }
body:has(main > .hero) > .nav {
  position: relative; z-index: 50; /* above the open menu panel */
  border-image: none;
  width: fit-content; max-width: calc(100% - 32px);
  height: 56px; margin: 16px auto; padding: 0 8px 0 24px; gap: 40px;
  border-radius: 9999px;
  background: rgb(168 56 10 / .9);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgb(255 248 243 / .18), 0 12px 32px -16px rgb(40 10 0 / .5);
}
body:has(main > .hero) > .nav nav { gap: 24px; font-size: .875rem; line-height: 1.25rem; }
body:has(main > .hero) > .nav .btn-sm { font-size: .875rem; font-weight: 600; padding: 8px 16px; }
.nav nav a, .nav-langs summary { transition: color .3s var(--base), background-color .3s var(--base); }

/* Menu toggle: two lines that turn into an X */
.menu-toggle { display: none; position: relative; flex: none; width: 40px; height: 40px; margin-left: 4px; border: 0; border-radius: 9999px; background: transparent; color: inherit; cursor: pointer; }
.menu-toggle span { position: absolute; left: 12px; right: 12px; top: 19px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--base); }
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
body.menu-open .menu-toggle span:first-child { transform: rotate(45deg); }
body.menu-open .menu-toggle span:last-child { transform: rotate(-45deg); }
.menu-toggle:focus-visible { outline: 3px solid #fff8f3; outline-offset: 2px; }
@media (max-width: 1080px) { .menu-toggle { display: block; } .nav nav { margin-left: auto; } }
@media (max-width: 640px) {
  body:has(main > .hero) > .nav { width: auto; margin: 12px; padding-left: 20px; gap: 8px; }
  body:has(main > .hero) > .nav .nav-langs { display: none; } /* languages live in the menu */
  body:has(main > .hero) > .nav .brand { font-size: 1.25rem; }
}

/* Mobile menu: full height panel, links arrive one after another */
.m-menu {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; gap: 8px;
  padding: 96px 24px 32px; overflow-y: auto; color: #fff8f3;
  background: rgb(194 65 12 / .94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  visibility: hidden; opacity: 0; transition: opacity .3s var(--base), visibility 0s .3s;
}
body.menu-open { overflow: hidden; }
body.menu-open .m-menu { visibility: visible; opacity: 1; transition: opacity .3s var(--base); }
.m-menu a { font: 600 1.875rem/2.25rem var(--display); letter-spacing: -0.02em; text-decoration: none; padding: 8px 0; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--base), transform .5s var(--base); }
.m-menu .m-langs { display: flex; gap: 16px; margin-top: auto; }
.m-menu .m-langs a { font: 600 1rem/1.5rem system-ui, sans-serif; }
.m-menu .m-langs a[aria-current] { text-decoration: underline; }
body.menu-open .m-menu a { opacity: 1; transform: none; transition-delay: calc(var(--i, 6) * 60ms); }

/* Hero: heading and subheading capped at 680px, light text gradient */
.hero h1 {
  max-width: 680px; font-size: 3.75rem; line-height: 1; letter-spacing: -0.04em; text-wrap: balance;
  background: linear-gradient(90deg, #fff, #ffd2bd); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 em { color: #1a0d06; -webkit-text-fill-color: #1a0d06; }
.hero-copy > p:not(.eyebrow):not(.cta-note) { max-width: 680px; font-size: 1.25rem; line-height: 1.75rem; text-wrap: pretty; }
@media (max-width: 900px) { .hero h1 { font-size: 3rem; } }
@media (max-width: 640px) { .hero h1 { font-size: 2.25rem; line-height: 2.5rem; } .hero-copy > p:not(.eyebrow):not(.cta-note) { font-size: 1.125rem; } }
p, li, summary { text-wrap: pretty; }
h2, h3 { text-wrap: balance; }

/* Tagline reveal: each word goes from muted to full as you scroll */
.tagline { padding: 96px 0 32px; }
.tagline-text { max-width: 680px; font: 700 3rem/1 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.tagline-text .w { color: color-mix(in srgb, var(--text) 28%, transparent); transition: color .5s var(--base); }
.tagline-text .w.on { color: var(--text); }
.tagline-text .w.on.hl { color: var(--accent); }
@media (max-width: 640px) { .tagline { padding-top: 64px; } .tagline-text { font-size: 2.25rem; line-height: 2.5rem; } }

/* Scroll reveals: rise 32px and fade, once. html.rv is set only without reduced motion. */
@media (prefers-reduced-motion: no-preference) { .reveal { animation: none; } }
html.rv .reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s var(--base), transform .7s var(--base); }
html.rv .reveal.in { opacity: 1; transform: none; }