/* ============================================================
   EM Snow design system - "First Light"
   One token sheet, two themes:
     [data-theme="apres"]     night navy, fire-glow accents
     [data-theme="bluebird"]  snow white, glacier ice, sun shadows
   Semantic tokens only in components; raw ramps live here.
   ============================================================ */

/* ---------- metric-matched fallbacks (CLS guard) ----------
   These @font-face blocks register local Arial as a stand-in for each brand
   font with overrides tuned so capital-letter height and line-box height
   match. With font-display:swap the browser shows these instantly, then
   paints over them when the WOFF2 arrives — the swap is now imperceptible.
   Override derivation: see .superpowers/sdd/font-cls-plan.md §3.
   --------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('sans-serif');
  size-adjust: 92.14%;
  ascent-override: 125.90%;
  descent-override: 43.41%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Schibsted Grotesk Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('sans-serif');
  size-adjust: 98.16%;
  ascent-override: 124.46%;
  descent-override: 28.25%;
  line-gap-override: 0%;
}

/* ---------- fonts (self-hosted, latin subsets) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/schibsted-0.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/schibsted-1.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- scale tokens (theme-independent) ---------- */
:root {
  --font-display: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', system-ui, sans-serif;
  --font-text: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', system-ui, -apple-system, sans-serif;
  --font-data: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* 4px space grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 80px; --s10: 96px;

  --r1: 8px; --r2: 14px; --r3: 24px; --r-full: 999px;

  --t-quick: 160ms;
  --t-slow: 600ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* fluid type scale */
  --text-hero: clamp(2.6rem, 1.2rem + 6vw, 5.4rem);
  --text-h2: clamp(1.8rem, 1rem + 3vw, 3rem);
  --text-h3: clamp(1.15rem, 1rem + .8vw, 1.5rem);
  --text-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-small: .875rem;
  --text-micro: .75rem;

  /* piste-grade badge colours (shared both themes) */
  --piste-green: #2fa35c;
  --piste-blue: #2277cc;
  --piste-red: #d84a3a;
  --piste-black: #14181f;
}

/* ---------- APRÈS - night on the mountain ---------- */
[data-theme="apres"] {
  color-scheme: dark;
  --bg: #070c16;
  --bg-raise: #0b1320;
  --surface-base: #0d1626;
  --surface-mid: rgba(148, 184, 225, .06);
  --surface-summit: rgba(158, 194, 235, .11);
  --ink-1: #eef4fc;
  --ink-2: #a9bdd5;
  --ink-3: #7d93ad;
  --line: rgba(146, 180, 222, .14);
  --line-strong: rgba(146, 180, 222, .28);
  --accent-ice: #7fd8ff;
  --accent-ice-ink: #071018;         /* text on ice fills */
  --accent-fire: #ffb054;
  --ok: #7ee0a6; --warn: #ffcf5c; --danger: #ff6f6f;
  --contour: rgba(127, 216, 255, .09);
  --contour-strong: rgba(127, 216, 255, .2);
  --shadow-1: 0 1px 2px rgba(2, 6, 14, .5);
  --shadow-2: 0 12px 40px rgba(2, 6, 14, .55);
  --glow-fire: 0 0 64px rgba(255, 176, 84, .14);
  --hero-wash: radial-gradient(120% 90% at 70% -10%, rgba(58, 108, 178, .28), transparent 60%),
               radial-gradient(80% 60% at 10% 110%, rgba(255, 150, 60, .1), transparent 55%);
  --scrim: rgba(7, 12, 22, .72);
}

/* ---------- BLUEBIRD - sun on snow ---------- */
[data-theme="bluebird"] {
  color-scheme: light;
  --bg: #f2f6fb;
  --bg-raise: #ffffff;
  --surface-base: #ffffff;
  --surface-mid: rgba(255, 255, 255, .72);
  --surface-summit: rgba(255, 255, 255, .92);
  --ink-1: #0d1b2c;
  --ink-2: #43586f;
  --ink-3: #607790;
  --line: rgba(16, 42, 74, .12);
  --line-strong: rgba(16, 42, 74, .26);
  --accent-ice: #0d7abc;
  --accent-ice-ink: #ffffff;
  --accent-fire: #b65d0b;
  --ok: #16864a; --warn: #986e07; --danger: #c53a30;
  --contour: rgba(13, 126, 194, .1);
  --contour-strong: rgba(13, 126, 194, .24);
  --shadow-1: 0 1px 3px rgba(26, 55, 96, .1);
  --shadow-2: 0 18px 44px rgba(26, 55, 96, .14);
  --glow-fire: none;
  --hero-wash: linear-gradient(180deg, #dceafd 0%, rgba(242, 246, 251, 0) 70%),
               radial-gradient(90% 70% at 80% -20%, rgba(255, 214, 140, .35), transparent 55%);
  --scrim: rgba(242, 246, 251, .78);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* ---------- header-space reservation (CLS guard) ----------
     em-shell.js injects a fixed .em-topbar then calls syncH() to set
     body.style.paddingTop = max(0, headerHeight - 64)px. Without a
     CSS pre-reservation the inline-style change causes a ~0.10 CLS on
     mobile. These values mirror the measured topbar heights at each
     flex-wrap breakpoint (measured via Playwright getBoundingClientRect).
     The JS override is a no-op when CSS already holds the same value.
     Breakpoints must stay in sync with the topbar layout in em.css.
     ----------------------------------------------------------------- */
  padding-top: 0;          /* >=1125px: 1-row bar (63px, under 64 baseline) */
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .45s ease, color .45s ease;
}
/* 2% grain so nothing is dead-flat */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2147483000;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
p { margin: 0 0 var(--s4); color: var(--ink-2); }
a { color: var(--accent-ice); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent-ice); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent-ice); color: var(--accent-ice-ink); }

.em-container { max-width: 1160px; margin: 0 auto; padding: 0 var(--s5); }
.em-eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-fire);
  margin-bottom: var(--s3);
}
.em-display { font-size: var(--text-hero); font-weight: 640; font-stretch: 92%; }
.em-h2 { font-size: var(--text-h2); font-weight: 600; }
.em-h3 { font-size: var(--text-h3); font-weight: 600; }
.em-lede { font-size: calc(var(--text-body) * 1.15); max-width: 34em; }
.em-data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.em-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: 600 1rem var(--font-text);
  padding: 14px 26px;
  min-height: 44px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform var(--t-quick) var(--ease-out), box-shadow var(--t-quick), background var(--t-quick);
}
.em-btn:active { transform: scale(.97); }
.em-btn-primary { background: var(--accent-ice); color: var(--accent-ice-ink); box-shadow: var(--shadow-1); }
.em-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.em-btn-ghost { background: var(--surface-mid); color: var(--ink-1); border-color: var(--line-strong); backdrop-filter: blur(12px); }
.em-btn-ghost:hover { border-color: var(--accent-ice); transform: translateY(-2px); }

/* ---------- cards & chips ---------- */
.em-card {
  background: var(--surface-base);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s5);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-quick) var(--ease-out), box-shadow var(--t-quick), border-color var(--t-quick);
}
.em-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.em-chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 8px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface-mid);
  backdrop-filter: blur(10px);
  font-size: var(--text-small);
  color: var(--ink-2);
}
.em-badge {
  display: inline-flex; align-items: center;
  font: 700 var(--text-micro)/1 var(--font-text);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r1); color: #fff;
}
.em-badge.green { background: var(--piste-green); }
.em-badge.blue { background: var(--piste-blue); }
.em-badge.red { background: var(--piste-red); }
.em-badge.black { background: var(--piste-black); border: 1px solid rgba(255,255,255,.25); }

/* ---------- top bar ---------- */
.em-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: var(--s5);
  padding: calc(env(safe-area-inset-top, 0px) + var(--s3)) var(--s5) var(--s3);
  background: var(--scrim);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.em-brand {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.05rem;
  color: var(--ink-1); text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 10px;
}
.em-brand svg { display: block; }
.em-nav { display: flex; gap: var(--s4); margin-left: auto; align-items: center; }
.em-nav a { color: var(--ink-2); font-size: var(--text-small); font-weight: 500; }
.em-nav a:hover { color: var(--ink-1); text-decoration: none; }
.em-theme-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 36px; padding: 0 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  background: var(--surface-mid);
  color: var(--ink-1);
  font: 600 var(--text-micro) var(--font-data);
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.em-theme-btn:hover { border-color: var(--accent-ice); }

/* ---------- topbar resort search + location actions (shell v2) ---------- */
.em-search { position: relative; flex: 1; max-width: 520px; min-width: 140px; }
.em-search input {
  width: 100%; height: 38px; padding: 0 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  background: var(--surface-mid);
  color: var(--ink-1);
  font: 500 var(--text-small) var(--font-text);
}
.em-search input::placeholder { color: var(--ink-3); }
.em-search input:focus { outline: none; border-color: var(--accent-ice); }
.em-search-drop {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--r2); overflow: hidden;
  box-shadow: var(--shadow-2);
  z-index: 120;
}
.em-search-drop.open { display: block; }
.em-search-drop a {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: 10px 14px;
  color: var(--ink-1); text-decoration: none; font-size: var(--text-small);
}
.em-search-drop a:hover, .em-search-drop a.sel { background: var(--surface-mid); }
.em-search-drop .where { color: var(--ink-3); white-space: nowrap; }
.em-act {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  background: var(--surface-mid);
  color: var(--ink-1);
  font: 600 var(--text-small) var(--font-text);
  cursor: pointer; white-space: nowrap;
}
.em-act:hover { border-color: var(--accent-ice); }

/* ---------- footer ---------- */
.em-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--s10);
  padding: var(--s8) 0 calc(env(safe-area-inset-bottom, 0px) + var(--s8));
  color: var(--ink-3); font-size: var(--text-small);
}
.em-footer a { color: var(--ink-2); }

/* ---------- reveal choreography ---------- */
.em-reveal { opacity: 0; transform: translateY(22px); }
.em-reveal.in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .em-reveal { opacity: 1; transform: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 720px) {
  .em-topbar { flex-wrap: wrap; gap: var(--s2) var(--s3); }
  .em-nav a.em-nav-page { display: none; } /* page links hide on phones... */
  .em-nav a.em-flyby { display: inline; }  /* ...except Flyby: it carries the resort deep link */
  .em-brand span { display: none; }        /* glyph-only brand, room for the search box */
  .em-search { flex: 1 1 160px; }
  .em-container { padding: 0 var(--s4); }
}

/* ---------- header-space reservation media queries (CLS guard) ----------
   Must stay in sync with the topbar flex-wrap layout above.
   Breakpoints derived from Playwright measurements (2026-07-17):
     >=1125px  1 row  63px  padTop=0
     721-1124  ~1row  68px  padTop=4px
     522-720   2 rows 107px padTop=43px
     387-521   2 rows 109px padTop=45px
     <=386     3 rows 153px padTop=89px
   ----------------------------------------------------------------- */
@media (max-width: 1124px) { body { padding-top: 4px; } }
@media (max-width: 720px)  { body { padding-top: 43px; } }
@media (max-width: 521px)  { body { padding-top: 45px; } }
@media (max-width: 386px)  { body { padding-top: 89px; } }