/* ============================================================
   EM Snow "Sticker Press" look (S1: tokens, type, the shell header; P0: header, consent, toast, footer)
   Plan: docs/design/2026-11-08-sticker-press-build-plan.md (sections 2, 3, S1).
   PREVIEW ONLY until the flip (S10): every rule below sits under
   html[data-look="press"], which em-theme.js (and the no-FOUC snippet in each
   page's head) sets for ?look=press or a stored em-look=press. Without that
   attribute this file changes nothing, so the default look is untouched.

   How it is scoped:
   - The press palette and fonts are defined as --p-* tokens on <html>, per theme.
   - On ordinary shell pages, body maps the site's generic tokens (--bg, --ink-1,
     --font-text ...) onto the --p-* set, so global type and colours follow.
   - On header-only pages (resortinfo, body[data-em-shell="header"]) the generic
     tokens are left alone in S1 (the resort page is S3 to S5); only the header,
     which reads the --p-* tokens directly, takes the new look.
   Contrast: white on #4896D1 is 3.2:1, so it is used only at 24 px+ or 19 px
   bold+; the header never puts text on blue (it sits on snow, Lee 2026-11-08).
   ============================================================ */

/* ---------- Archivo + Archivo Narrow (Google Fonts files, OFL, self-hosted:
   the site CSP allows fonts from 'self' only, and the phone app's CSP forbids
   Google's servers; latin + latin-ext subsets as Google cuts them) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo.woff2') format('woff2');
  font-weight: 400 900; font-stretch: 100% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-ext.woff2') format('woff2');
  font-weight: 400 900; font-stretch: 100% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('fonts/archivo-narrow.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('fonts/archivo-narrow-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched stand-ins (CLS guard, as em.css does for the old fonts): local Arial
   scaled to Archivo's advance widths (102.3 %, 82.2 % for Narrow) with its line box. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 102.32%; ascent-override: 85.81%; descent-override: 20.52%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Narrow Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 82.15%; ascent-override: 125.99%; descent-override: 37.98%; line-gap-override: 0%;
}

/* ---------- press tokens (plan section 3) ---------- */
html[data-look="press"] {
  --p-font-display: 'Archivo', 'Archivo Fallback', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --p-font-text: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  --p-font-narrow: 'Archivo Narrow', 'Archivo Narrow Fallback', 'Arial Narrow', system-ui, sans-serif;
  --p-blue: #4896D1;            /* fills only: the one block, the tab underline, chart bars */
  --p-pink: #F6AECD;            /* stamps and marks only; text on it is always ink */
  --p-on-fill: #070908;         /* text on blue or pink under 24 px (6.5:1 on blue) */
}
/* Light snow ground under press whatever the theme (Lee, 2026-11-08: Apres follows later), so the apres theme
   takes the bluebird set too. The ink-ground set stays below, unused, for when Apres is drawn. */
html[data-look="press"][data-theme="bluebird"],
html[data-look="press"][data-theme="apres"] {
  --p-bg: #F2F6FA;
  --p-raise: #FFFFFF;
  --p-ink-1: #070908;
  --p-ink-2: #221F20;
  --p-ink-3: rgba(7, 9, 8, .62);
  --p-line: rgba(7, 9, 8, .15);
  --p-line-strong: rgba(7, 9, 8, .34);
  --p-blue-text: #2A6AA3;       /* links and state words on snow (5.2:1) */
  --p-ok: #2F7D4F; --p-warn: #A86A00; --p-danger: #B3261E;
}
html[data-look="press"][data-theme="apres-later"] {
  --p-bg: #070908;
  --p-raise: #221F20;
  --p-ink-1: #FFFFFF;
  --p-ink-2: rgba(255, 255, 255, .78);
  --p-ink-3: rgba(255, 255, 255, .6);
  --p-line: rgba(255, 255, 255, .18);
  --p-line-strong: rgba(255, 255, 255, .38);
  --p-blue-text: #8FC1EA;       /* lifted so it reads on ink */
  --p-ok: #5DB27F; --p-warn: #E0A030; --p-danger: #F07167;
}

/* The site's generic tokens follow the press set on ordinary shell pages (not on
   header-only pages: the resort page keeps its own until S3). */
html[data-look="press"] body:not([data-em-shell="header"]) {
  --font-display: var(--p-font-display);
  --font-text: var(--p-font-text);
  --font-narrow: var(--p-font-narrow);
  --font-data: var(--p-font-narrow);   /* every old mono site turns narrow, not mono */
  --bg: var(--p-bg);
  --bg-raise: var(--p-raise);
  --surface-base: var(--p-raise);
  --surface-mid: var(--p-raise);
  --surface-summit: var(--p-raise);
  --ink-1: var(--p-ink-1);
  --ink-2: var(--p-ink-2);
  --ink-3: var(--p-ink-3);
  --line: var(--p-line);
  --line-strong: var(--p-line-strong);
  --accent-ice: var(--p-blue);
  --accent-ice-ink: var(--p-on-fill);
  --blue: var(--p-blue);
  --blue-text: var(--p-blue-text);
  --pink: var(--p-pink);
  --ok: var(--p-ok); --warn: var(--p-warn); --danger: var(--p-danger);
  --r1: 0; --r2: 0; --r3: 0; --r-full: 0;
  --shadow-1: none; --shadow-2: none; --glow-fire: none; --hero-wash: none;
  --contour: transparent; --contour-strong: transparent;
  --scrim: var(--p-bg);
}

/* ---------- global type and colour (shell pages) ---------- */
html[data-look="press"] body:not([data-em-shell="header"]) { font-weight: 400; line-height: 1.5; }
html[data-look="press"] body:not([data-em-shell="header"])::after { content: none; } /* no grain: flat print */
/* :where() keeps these at em.css's own weight (one element), so any page rule that
   styles a link as a button still wins, as it does today. */
:where(html[data-look="press"] body:not([data-em-shell="header"])) :where(h1, h2, h3, h4) { letter-spacing: -.01em; }
:where(html[data-look="press"] body:not([data-em-shell="header"])) a { color: var(--p-blue-text); }
:where(html[data-look="press"] body:not([data-em-shell="header"])) ::selection { background: var(--p-blue); color: var(--p-on-fill); }
:where(html[data-look="press"] body:not([data-em-shell="header"])) :focus-visible { outline-color: var(--p-blue-text); border-radius: 0; }

/* ---------- the shell header, on snow (every page incl. resortinfo) ----------
   P0 (build plan v2, M11): one line at 1440 on the 1180 px column: brand, a 300 px search, the five words
   (Resorts, Snow Globe, Your day, Apps, Field manual), Units and Theme as Narrow text. Under 900 px: brand,
   search, Menu. The current page gets the blue underline; nothing underlines on hover. */
html[data-look="press"] .em-topbar {
  min-height: 64px;
  gap: 28px;
  padding: env(safe-area-inset-top, 0px) max(24px, calc((100% - 1180px) / 2 + 24px)) 0;
  white-space: nowrap;
  background: var(--p-bg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--p-line);
  font-family: var(--p-font-text);
  color: var(--p-ink-1);
}
html[data-look="press"] .em-brand {
  flex: none;
  font-family: var(--p-font-display);
  font-weight: 900; font-stretch: 112%;
  font-size: 22px; letter-spacing: -.02em; line-height: 1;
  text-transform: uppercase;
  color: var(--p-ink-1);
}
html[data-look="press"] .em-brand span { display: inline; }
html[data-look="press"] .em-brand svg { color: var(--p-ink-1); }
/* My location and Best nearby live in the Resorts group (and the phone menu) under press */
html[data-look="press"] .em-topbar > .em-act { display: none; }
html[data-look="press"] .em-nav { gap: 0; margin-left: auto; }
html[data-look="press"] .em-nav-links { display: flex; align-items: center; gap: 22px; }
html[data-look="press"] .em-nav a,
html[data-look="press"] .em-pgroup-btn {
  font: 600 15px var(--p-font-text);
  color: var(--p-ink-1);
  padding: 6px 0 3px;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  background: none;
  text-decoration: none;              /* the resort page underlines every link; the header does not */
  cursor: pointer;
}
html[data-look="press"] .em-nav a:hover,
html[data-look="press"] .em-pgroup-btn:hover { color: var(--p-ink-1); text-decoration: none; }
html[data-look="press"] .em-nav-links > a[aria-current="page"],
html[data-look="press"] .em-pgroup-btn[data-current] {
  color: var(--p-ink-1); font-weight: 700;
  border-bottom-color: var(--p-blue);   /* the current page: a blue underline, nothing else */
}
/* the two groups: a word that opens a ruled list under it */
html[data-look="press"] .em-pgroup { position: relative; }
html[data-look="press"] .em-pgroup-h { display: none; }
html[data-look="press"] .em-pgroup-panel {
  display: none;
  position: absolute; top: calc(100% + 14px); left: -14px; z-index: 140;
  min-width: 240px;
  background: var(--p-raise);
  border: 1px solid var(--p-ink-1);
}
html[data-look="press"] .em-pgroup.open .em-pgroup-panel { display: block; }
html[data-look="press"] .em-pgroup-panel a,
html[data-look="press"] .em-pgroup-panel .em-act {
  display: block; width: 100%; height: auto;
  padding: 11px 14px;
  border: 0; border-bottom: 1px solid var(--p-line);
  background: none; text-align: left;
  font: 600 15px var(--p-font-text);
  color: var(--p-ink-1);
  text-decoration: none;
}
html[data-look="press"] .em-pgroup-panel > :last-child { border-bottom: 0; }
html[data-look="press"] .em-pgroup-panel a:hover,
html[data-look="press"] .em-pgroup-panel .em-act:hover { background: var(--p-bg); }
html[data-look="press"] .em-pgroup-panel a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--p-blue); font-weight: 700; }
/* Units and Theme: Narrow text, not pills */
html[data-look="press"] .em-putils { display: flex; align-items: center; gap: 18px; margin-left: 10px; }
html[data-look="press"] .em-theme-btn {
  min-width: 0; height: auto; padding: 6px 0;
  border: 0; border-radius: 0; background: none;
  color: var(--p-ink-2);
  font: 600 14px var(--p-font-narrow);
  letter-spacing: 0; text-transform: none;
  text-decoration: none;
  cursor: pointer;
}
html[data-look="press"] .em-theme-btn:hover { color: var(--p-ink-1); }
/* the search: a square 300 px field, never cut */
html[data-look="press"] .em-search { flex: 0 0 300px; max-width: 300px; min-width: 0; }
html[data-look="press"] .em-search input {
  height: 40px;
  padding: 0 34px 0 12px;
  border-radius: 0;
  border: 1px solid var(--p-ink-1);
  background: var(--p-raise);
  color: var(--p-ink-1);
  font: 400 15px var(--p-font-text);
  text-overflow: ellipsis;
}
html[data-look="press"] .em-search input::placeholder { color: var(--p-ink-3); }
html[data-look="press"] .em-search input:focus { outline: 2px solid var(--p-blue); outline-offset: -2px; border-color: var(--p-ink-1); }
html[data-look="press"] .em-search-clear { border-radius: 0; color: var(--p-ink-3); }
html[data-look="press"] .em-search-clear:hover { color: var(--p-ink-1); background: none; }
/* the drop: the whole name, the region on its own line under it (no "Northern A") */
html[data-look="press"] .em-search-drop {
  top: calc(100% + 4px);
  min-width: 100%; width: max-content; max-width: min(440px, calc(100vw - 32px));
  background: var(--p-raise);
  border: 1px solid var(--p-ink-1);
  border-radius: 0; box-shadow: none;
}
html[data-look="press"] .em-search-drop a {
  flex-direction: column; justify-content: flex-start; gap: 2px;
  padding: 10px 14px;
  white-space: normal;
  color: var(--p-ink-1); font: 400 15px var(--p-font-text);
  border-bottom: 1px solid var(--p-line);
}
html[data-look="press"] .em-search-drop a b { font-weight: 700; }
html[data-look="press"] .em-search-drop a:last-child { border-bottom: 0; }
html[data-look="press"] .em-search-drop a:hover,
html[data-look="press"] .em-search-drop a.sel { background: var(--p-bg); text-decoration: none; }
html[data-look="press"] .em-search-drop .where { white-space: normal; color: var(--p-ink-3); font: 600 13px var(--p-font-narrow); }
/* Menu: a word, shown under 900 px */
html[data-look="press"] .em-nav-burger {
  display: none;
  width: auto; height: 40px; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--p-ink-1);
  font: 600 15px var(--p-font-text);
  cursor: pointer;
}
html[data-look="press"] .em-nav-burger:hover { background: none; }
html[data-look="press"] .em-nav-burger[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--p-blue); }

@media (max-width: 899.98px) {
  html[data-look="press"] .em-topbar { gap: 10px; padding-left: 16px; padding-right: 16px; }
  /* the word alone on a phone, so the search keeps its whole placeholder */
  html[data-look="press"] .em-brand { font-size: 19px; gap: 0; }
  html[data-look="press"] .em-brand svg { display: none; }
  html[data-look="press"] .em-search { flex: 1 1 auto; max-width: none; }
  html[data-look="press"] .em-search input { padding: 0 30px 0 10px; font-size: 14px; }
  html[data-look="press"] .em-nav-burger { display: inline-flex; align-items: center; }
  html[data-look="press"] .em-nav-links { display: none; }
  /* the menu sheet: full width under the bar, ruled rows, the groups open under their names */
  html[data-look="press"] .em-nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: var(--em-bar-h, 64px); left: 0; right: 0; bottom: auto; min-width: 0;
    max-height: calc(100vh - var(--em-bar-h, 64px)); overflow-y: auto;
    padding: 4px 16px 20px;
    background: var(--p-bg);
    border: 0; border-bottom: 3px solid var(--p-ink-1); border-radius: 0; box-shadow: none;
    white-space: normal;
    z-index: 130;
  }
  html[data-look="press"] .em-nav-links.open a.em-nav-page,
  html[data-look="press"] .em-nav-links.open .em-menu-act {
    display: block; width: 100%; height: auto;
    padding: 13px 0; border: 0; border-bottom: 1px solid var(--p-line); border-radius: 0;
    background: none; text-align: left;
    font: 600 17px var(--p-font-text); color: var(--p-ink-1);
  }
  html[data-look="press"] .em-nav-links.open a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--p-blue); padding-left: 12px; font-weight: 700; }
  html[data-look="press"] .em-nav-links.open a:hover { background: none; }
  html[data-look="press"] .em-pgroup-btn { display: none; }
  html[data-look="press"] .em-pgroup-h {
    display: block; padding: 18px 0 4px;
    border-bottom: 2px solid var(--p-ink-1);
    font: 600 13px var(--p-font-narrow); color: var(--p-ink-3);
  }
  html[data-look="press"] .em-pgroup-panel,
  html[data-look="press"] .em-pgroup.open .em-pgroup-panel {
    display: block; position: static; min-width: 0;
    border: 0; background: none;
  }
  /* the sheet's order: the plain pages, then the Resorts and Apps sections under their names, then Units and Theme */
  html[data-look="press"] #emShellGResorts { order: 1; }
  html[data-look="press"] #emShellGApps { order: 2; }
  html[data-look="press"] .em-putils { order: 3; margin: 0; padding-top: 14px; gap: 24px; }
  html[data-look="press"] .em-nav-links.open .em-theme-btn { padding: 8px 0; font-size: 16px; }
}

/* ---------- consent (P0, L1): the ink strip, square buttons, once per session ---------- */
/* z-index matches the default banner: over the chrome, under the resort page's Get me down stack */
html[data-look="press"] .em-pconsent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: #070908; color: #FFFFFF;
  font: 700 19px/1.35 var(--p-font-text);
}
html[data-look="press"] .em-pconsent-in {
  max-width: 1132px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
}
html[data-look="press"] .em-pconsent a { color: #8FC1EA; text-decoration: underline; text-underline-offset: 3px; }
html[data-look="press"] .em-pconsent-btns { display: flex; gap: 10px; }
html[data-look="press"] .em-pconsent button {
  height: 40px; padding: 0 18px;
  border-radius: 0; border: 2px solid #FFFFFF;
  font: 600 15px var(--p-font-text); white-space: nowrap; cursor: pointer;
}
html[data-look="press"] #emConsentNo { background: #FFFFFF; color: #070908; }
html[data-look="press"] #emConsentYes { background: #070908; color: #FFFFFF; }
html[data-look="press"] .em-pconsent button:focus-visible { outline: 3px solid var(--p-blue); outline-offset: 2px; }
@media (max-width: 600px) {
  html[data-look="press"] .em-pconsent { font-size: 17px; }
  html[data-look="press"] .em-pconsent-btns { flex: 1 0 100%; flex-direction: column; }
  html[data-look="press"] .em-pconsent button { width: 100%; height: 44px; }
}

/* ---------- the toast (P0, M6): EMToast() in em-shell.js ---------- */
html[data-look="press"] .em-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(24px + var(--em-consent-h, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 1300;
  display: flex; align-items: center; gap: 12px 20px;
  width: max-content; max-width: min(1132px, calc(100vw - 32px));
  padding: 14px 16px 14px 20px;
  background: #070908; color: #FFFFFF;
}
html[data-look="press"] .em-toast-msg { font: 700 19px/1.3 var(--p-font-text); white-space: normal; overflow-wrap: anywhere; }
html[data-look="press"] .em-toast-link {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 15px var(--p-font-narrow); color: #FFFFFF; text-decoration: none;
}
html[data-look="press"] .em-toast-link:hover { text-decoration: underline; }
html[data-look="press"] .em-toast button {
  flex: none; height: 40px; padding: 0 14px;
  border-radius: 0; border: 2px solid #FFFFFF;
  font: 600 15px var(--p-font-text); cursor: pointer; white-space: nowrap;
}
html[data-look="press"] .em-toast-copy { background: #FFFFFF; color: #070908; }
html[data-look="press"] .em-toast-close { background: #070908; color: #FFFFFF; }
html[data-look="press"] .em-toast button:focus-visible { outline: 3px solid var(--p-blue); outline-offset: 2px; }
@media (max-width: 600px) {
  /* at the top on a phone, clear of the consent strip and the resort page's Get me down and SOS */
  html[data-look="press"] .em-toast {
    left: 16px; right: 16px; transform: none; width: auto; max-width: none;
    top: calc(var(--em-top-h, 64px) + 12px); bottom: auto;
    flex-wrap: wrap; padding: 14px 16px;
  }
  html[data-look="press"] .em-toast-msg { flex: 1 0 100%; }
  html[data-look="press"] .em-toast-link { flex: 1 0 100%; }
}

/* ---------- footer (P0, M10): heritage line, a ruled two-column list; no coffee button, no nag ---------- */
html[data-look="press"] .em-footer {
  margin-top: 96px;
  padding: 32px max(16px, calc((100% - 1180px) / 2 + 24px)) calc(56px + env(safe-area-inset-bottom, 0px));
  border-top: 3px solid var(--p-ink-1);
  background: var(--p-bg); color: var(--p-ink-1);
  font-family: var(--p-font-text);
}
html[data-look="press"] .em-pfoot { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
html[data-look="press"] .em-pfoot p { margin: 0; }
html[data-look="press"] .em-pfoot-lead { font: 500 19px/1.4 var(--p-font-text); }
html[data-look="press"] .em-pfoot-note { margin-top: 10px !important; color: var(--p-ink-3); }
html[data-look="press"] .em-pfoot-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
html[data-look="press"] .em-pfoot-list li { break-inside: avoid; padding: 6px 0; }
html[data-look="press"] .em-pfoot-list a,
html[data-look="press"] .em-pfoot-list .em-theme-btn {
  padding: 0; height: auto;
  font: 600 15px var(--p-font-text); color: var(--p-ink-1);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
html[data-look="press"] .em-pfoot-list a:hover,
html[data-look="press"] .em-pfoot-list .em-theme-btn:hover { color: var(--p-blue-text); }
@media (max-width: 899.98px) {
  html[data-look="press"] .em-footer { margin-top: 64px; }
  html[data-look="press"] .em-pfoot { grid-template-columns: 1fr; gap: 28px; }
}
html[data-look="press"] .em-coffee-fab,
html[data-look="press"] #coffeeNag { display: none !important; }