/* ============================================================
   EM Snow "Sticker Press" look, S2: the home page.
   Plan: docs/design/2026-11-08-sticker-press-build-plan.md (S2). Loaded by home.html after
   em-press.css. Every rule but the first sits under html[data-look="press"], so the default
   look is untouched (the first rule only hides the press-only elements home.html adds).

   First screen: the one blue block (.press-block) with the sentence in white at display size,
   two square doors (ink, and ink-outlined: white under 24 px fails on #4896D1), the one pink
   stamp (today's date) and the mascot, small in the corner (the home page's brand moment).
   Below on snow: three ruled columns, the "Free. No account." line, then the rest of the page
   with its eyebrows, pills, cards and the old hero flattened (no wash, contours, stagger,
   two-tone headlines, blur, rounded corners).
   ============================================================ */

.press-only { display: none; }
html[data-look="press"] .press-hide { display: none !important; }   /* H1: the default sections the press home replaces */

/* ---------- the page ground ---------- */
html[data-look="press"] body[data-page="home"] .today {
  padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
  background: var(--bg);
  overflow: visible;
}
html[data-look="press"] body[data-page="home"] .hero { background: var(--bg); min-height: 0; padding: 96px 0 var(--s8); }
html[data-look="press"] body[data-page="home"] .hero-contours { display: none; }
html[data-look="press"] body[data-page="home"] .hero [data-stagger] { opacity: 1; transform: none; animation: none; }
html[data-look="press"] body[data-page="home"] .em-display em,
html[data-look="press"] body[data-page="home"] .em-h2 em { font-style: normal; color: inherit; }

/* ---------- the blue block (full bleed without overflow: border-image paints past the box) ---------- */
html[data-look="press"] .today-intro.press-block {
  position: relative;
  background: var(--p-blue);
  border-image: conic-gradient(var(--p-blue) 0 0) fill 0 // 0 100vmax;
  padding: 56px 0 60px;
  color: #FFFFFF;
}
html[data-look="press"] .press-block .em-eyebrow,
html[data-look="press"] .press-block .em-lede { display: none; }   /* the brand is in the header; the columns below say the lede */
html[data-look="press"] .press-block h1.em-display {
  margin: 0;
  max-width: calc(100% - 210px);
  font-family: var(--p-font-display);
  font-size: clamp(44px, 2.4rem + 2.6vw, 76px);
  font-weight: 900; font-stretch: 118%;
  line-height: .92; letter-spacing: -.02em;
  text-transform: uppercase;
  color: #FFFFFF;                     /* white only at display size (44 px and up) */
}
html[data-look="press"] .press-block .hero-ctas { margin: 36px 0 0; gap: 14px; }
html[data-look="press"] body[data-page="home"] .press-block .em-btn {
  min-height: 52px; padding: 0 26px;
  border-radius: var(--p-r); box-shadow: none; transform: none;
  font: 800 16px var(--p-font-text);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-look="press"] body[data-page="home"] .press-block .em-btn-primary { background: var(--p-block); color: var(--p-on-block); border: 2px solid var(--p-block); }
html[data-look="press"] body[data-page="home"] .press-block .em-btn-primary:hover { background: var(--p-ink-2); border-color: var(--p-ink-2); }
html[data-look="press"] body[data-page="home"] .press-block .em-btn-ghost { background: transparent; color: var(--p-on-fill); border: 2px solid var(--p-on-fill); }
html[data-look="press"] body[data-page="home"] .press-block .em-btn-ghost:hover { background: var(--p-block); color: var(--p-on-block); }
html[data-look="press"] body[data-page="home"] .press-block .em-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

/* the stamp: today's date in pink, ink lettering (the one stamp on the page) */
html[data-look="press"] .press-block .stamp {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: absolute; right: 0; top: 48px;
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--p-pink); color: var(--p-on-fill);
  transform: rotate(-8deg);
  text-align: center; text-transform: uppercase; line-height: 1.05;
}
html[data-look="press"] .stamp .st-a,
html[data-look="press"] .stamp .st-c { font: 600 13px var(--p-font-narrow); letter-spacing: .02em; }
html[data-look="press"] .stamp .st-b { font: 900 36px/1 var(--p-font-display); font-stretch: 112%; margin: 4px 0; white-space: nowrap; }
html[data-look="press"] .stamp.press-off { display: none; }
/* the mascot: Lee's winged snowboarder, small, bottom corner */
html[data-look="press"] .press-block .press-mascot {
  display: block;
  position: absolute; right: 8px; bottom: 22px;
  width: 132px; height: auto;
}

/* ---------- the rest of today's layer ---------- */
html[data-look="press"] body[data-page="home"] .today-date { display: none; }   /* the stamp carries the date */
html[data-look="press"] body[data-page="home"] .today h2.em-display {
  margin: 72px 0 16px; max-width: 18em;
  font: 900 clamp(34px, 1.8rem + 1.6vw, 52px)/.95 var(--p-font-display); font-stretch: 112%;
  letter-spacing: -.01em; text-transform: uppercase; color: var(--p-ink-1);
}
html[data-look="press"] body[data-page="home"] .today-lead { font: 400 17px/1.5 var(--p-font-text); color: var(--p-ink-2); }
/* eyebrows: sentence case labels, not mono caps */
html[data-look="press"] body[data-page="home"] .em-eyebrow {
  font: 800 20px/1.2 var(--p-font-text);
  letter-spacing: 0; text-transform: none;
  color: var(--p-ink-1);
}
html[data-look="press"] body[data-page="home"] .group-note { font-size: 15px; color: var(--p-ink-3); }

/* featured mountains: ruled rows, not cards */
html[data-look="press"] body[data-page="home"] .fcards {
  display: block; border-top: 1px solid var(--p-line-strong);
}
html[data-look="press"] body[data-page="home"] .fcard {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 4px 24px; align-items: baseline;
  padding: 16px 0;
  border: 0; border-bottom: 1px solid var(--p-line); border-radius: 0;
  background: none; transform: none;
}
html[data-look="press"] body[data-page="home"] .fcard:hover { transform: none; border-color: var(--p-line); }
html[data-look="press"] body[data-page="home"] .fcard:hover .rc-name { text-decoration: underline; text-underline-offset: 4px; }
html[data-look="press"] body[data-page="home"] .fcard .rc-name { font: 800 20px/1.2 var(--p-font-text); }
html[data-look="press"] body[data-page="home"] .fcard .rc-where { font: 600 14px var(--p-font-narrow); color: var(--p-ink-3); }
html[data-look="press"] body[data-page="home"] .fcard .rc-story { grid-column: 1 / -1; font-size: 15px; }
html[data-look="press"] body[data-page="home"] .fcard .rc-meta { margin: 0; font: 400 15px/1.4 var(--p-font-text); color: var(--p-ink-2); }
html[data-look="press"] body[data-page="home"] .fcards.skeleton .fcard-sk { min-height: 64px; border: 0; border-bottom: 1px solid var(--p-line); border-radius: 0; background: none; }
/* state is a coloured word, never a pill */
html[data-look="press"] body[data-page="home"] .rpill {
  padding: 0; border: 0; border-radius: var(--p-r-pill); background: none;
  font: 700 16px var(--p-font-narrow); letter-spacing: 0;
  white-space: normal;
}
html[data-look="press"] body[data-page="home"] .rpill + .rpill::before { content: '\00b7'; margin-right: 6px; color: var(--p-ink-3); }
html[data-look="press"] body[data-page="home"] .rpill.lifts { color: var(--p-ok); }
html[data-look="press"] body[data-page="home"] .rpill.guidance { color: var(--p-blue-text); }
html[data-look="press"] body[data-page="home"] .rpill.score { color: var(--p-ink-1); }
html[data-look="press"] body[data-page="home"] .rpill.unreported,
html[data-look="press"] body[data-page="home"] .rpill.lastreport { color: var(--p-ink-2); }
html[data-look="press"] body[data-page="home"] .rc-pills { gap: 6px; }
/* resort of the day: one ruled row at a larger size, no glass card */
html[data-look="press"] body[data-page="home"] .rotd-card {
  border: 0; border-top: 1px solid var(--p-line-strong); border-bottom: 1px solid var(--p-line); border-radius: 0;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 18px 0 20px; transform: none;
}
html[data-look="press"] body[data-page="home"] .rotd-card .rc-name { font: 900 32px/1.05 var(--p-font-display); }
html[data-look="press"] body[data-page="home"] .rotd-card .rc-meta { font-size: 15px; color: var(--p-ink-2); }
/* where everyone is looking */
html[data-look="press"] body[data-page="home"] .watching ol { border-top: 1px solid var(--p-line-strong); }
html[data-look="press"] body[data-page="home"] .watching .rank { font: 700 15px var(--p-font-narrow); color: var(--p-ink-3); }
html[data-look="press"] body[data-page="home"] .watching li a { font-size: 16px; }
/* my mountains (returning visitors) */
html[data-look="press"] body[data-page="home"] .mymountains .watch-card,
html[data-look="press"] body[data-page="home"] .season-lead { border-radius: var(--p-r); background: var(--p-raise); }
html[data-look="press"] body[data-page="home"] .mymountains .watch-pill { border: 0; border-radius: var(--p-r-pill); padding: 0; font: 700 14px var(--p-font-narrow); }
html[data-look="press"] body[data-page="home"] .mymountains .watch-pill.open { color: var(--p-ok); }
html[data-look="press"] body[data-page="home"] .mymountains-search { border-radius: var(--p-r); }

/* ---------- below the fold: flat, square, no blur ---------- */
html[data-look="press"] body[data-page="home"] .em-btn {
  border-radius: var(--p-r); box-shadow: none; transform: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-look="press"] body[data-page="home"] .em-btn-primary { background: var(--p-ink-1); color: var(--p-bg); }
html[data-look="press"] body[data-page="home"] .em-btn-ghost { background: transparent; color: var(--p-ink-1); border: 1px solid var(--p-ink-1); }
html[data-look="press"] body[data-page="home"] .em-chip,
html[data-look="press"] body[data-page="home"] .em-card {
  border-radius: var(--p-r); box-shadow: none; transform: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-look="press"] body[data-page="home"] .em-chip { background: none; border: 0; border-bottom: 1px solid var(--p-line); padding: 8px 0; margin-right: 16px; }
html[data-look="press"] body[data-page="home"] .liveboard .dot { border-radius: 0; box-shadow: none; }
/* the Globe door: a flat framed render, not a glass dome */
html[data-look="press"] body[data-page="home"] .gd-glass { border-radius: var(--p-r); border: 3px solid var(--p-ink-1); box-shadow: none; }
html[data-look="press"] body[data-page="home"] .gd-snow,
html[data-look="press"] body[data-page="home"] .gd-flakes,
html[data-look="press"] body[data-page="home"] .gd-shine,
html[data-look="press"] body[data-page="home"] .gd-base::before,
html[data-look="press"] body[data-page="home"] .gd-dome::after { display: none; }
html[data-look="press"] body[data-page="home"] .gd-dome:hover { transform: none; }
html[data-look="press"] body[data-page="home"] .gd-base {
  width: 100%; height: auto; min-height: 40px; margin: 0;
  border-radius: var(--p-r); box-shadow: none; background: var(--p-ink-1);
}
html[data-look="press"] body[data-page="home"] .gd-plate {
  position: static; transform: none; display: block; max-width: none;
  padding: 10px 12px; border-radius: var(--p-r); box-shadow: none; text-shadow: none; background: none;
  font: 700 15px var(--p-font-narrow); letter-spacing: 0; text-transform: none; color: var(--p-bg);
}
/* small labels: sentence case, not spaced capitals */
html[data-look="press"] body[data-page="home"] .story-stat .cap,
html[data-look="press"] body[data-page="home"] .databand .db-l { text-transform: none; letter-spacing: 0; font: 600 14px var(--p-font-narrow); }
/* the explainer "?" buttons and the funnel band: square */
html[data-look="press"] body[data-page="home"] .em-xp-btn,
html[data-look="press"] body[data-page="home"] .em-funnel { border-radius: var(--p-r); box-shadow: none; }

/* ---------- phone ---------- */
@media (max-width: 720px) {
  html[data-look="press"] body[data-page="home"] .today { padding-top: calc(env(safe-area-inset-top, 0px) + 56px); }
  html[data-look="press"] .today-intro.press-block {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
    padding: 32px 0 28px;
  }
  html[data-look="press"] .press-block h1.em-display,
  html[data-look="press"] .press-block .hero-ctas { grid-column: 1 / -1; max-width: none; }
  html[data-look="press"] .press-block .hero-ctas { margin-top: 28px; }
  html[data-look="press"] body[data-page="home"] .press-block .em-btn { flex: 1 1 auto; justify-content: center; }
  html[data-look="press"] .press-block .press-mascot { position: static; grid-column: 1; width: 104px; margin-top: 24px; }
  html[data-look="press"] .press-block .stamp {
    position: static; grid-column: 2; grid-row: 3; margin-top: 20px;
    width: 104px; height: 104px;
  }
  html[data-look="press"] .stamp .st-a, html[data-look="press"] .stamp .st-c { font-size: 11px; }
  html[data-look="press"] .stamp .st-b { font-size: 26px; }
  html[data-look="press"] body[data-page="home"] .fcard { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   H1: the whole home page (build plan v2, H1). The hero gains the one search and two text doors; below it,
   ruled sections as drawn: My mountains, Lifts turning today, Opening soon, the Globe (Resort of the day), and
   Plan it. Ride it. Relive it. The default sections carry .press-hide (above) and stay in the DOM.
   ============================================================ */
html[data-look="press"] body[data-page="home"] .today { padding-bottom: 0; }

/* the search, in the blue block: a white field and an ink button, square */
html[data-look="press"] .pf { display: flex; margin: 32px 0 0; max-width: 640px; }
html[data-look="press"] .pf-slot { flex: 1 1 auto; min-width: 0; position: relative; }
html[data-look="press"] .pf-slot .em-search { flex: none; max-width: none; width: 100%; height: 100%; position: relative; }
html[data-look="press"] .pf-in,
html[data-look="press"] .pf-slot .em-search input {
  width: 100%; height: 56px; box-sizing: border-box;
  padding: 0 40px 0 16px;
  border: 2px solid var(--p-raise); border-radius: var(--p-r); background: var(--p-raise); color: var(--p-ink-1);
  font: 400 17px var(--p-font-text);
}
html[data-look="press"] .pf-in::placeholder,
html[data-look="press"] .pf-slot .em-search input::placeholder { color: var(--p-ink-3); }
html[data-look="press"] .pf-in:focus,
html[data-look="press"] .pf-slot .em-search input:focus { outline: 3px solid var(--p-on-fill); outline-offset: 0; }
html[data-look="press"] .pf-slot .em-search-clear { top: 50%; transform: translateY(-50%); }
html[data-look="press"] .pf-slot .em-search-drop { z-index: 30; color: var(--p-ink-1); }
html[data-look="press"] .pf-go {
  flex: none; height: 56px; padding: 0 24px;
  border: 2px solid var(--p-block); border-radius: var(--p-r); background: var(--p-block); color: var(--p-on-block);
  font: 700 16px var(--p-font-text); cursor: pointer;
}
html[data-look="press"] .pf-go:hover { background: var(--p-ink-2); border-color: var(--p-ink-2); }
html[data-look="press"] .pf-go:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
/* Popular this week: links under the search, white at 19 px bold (the contrast rule), names only */
html[data-look="press"] .ppop { display: block; margin: 18px 0 0; max-width: 46em; font: 700 19px/1.5 var(--p-font-text); color: #FFFFFF; }
/* the names are a wrapped row with a gap, not a sentence: no dangling dots at a line end on a phone */
html[data-look="press"] .ppop #pressPopList { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 6px; }
html[data-look="press"] .ppop .pd-dot { display: none; }
@media (min-width: 721px) {
  html[data-look="press"] .ppop { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  html[data-look="press"] .ppop #pressPopList { margin-top: 0; }
}
html[data-look="press"] .ppop[hidden] { display: none; }
html[data-look="press"] .ppop a { white-space: nowrap; color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
html[data-look="press"] .ppop a:hover { color: var(--p-on-fill); }
html[data-look="press"] .ppop a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
html[data-look="press"] .ppop + .pdoors { margin-top: 12px; }
/* the two doors: white text at 19 px bold (the only size white may sit on the blue below 24 px) */
html[data-look="press"] .pdoors { display: block; margin: 20px 0 0; font: 700 19px/1.35 var(--p-font-text); color: #FFFFFF; }
html[data-look="press"] .pdoors a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
html[data-look="press"] .pdoors a:hover { color: var(--p-on-fill); }
html[data-look="press"] .pdoors a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

/* ruled sections */
html[data-look="press"] .ph { display: block; }
html[data-look="press"] .ph-sec { margin: 0; padding: 0; }
html[data-look="press"] .ph-sec[hidden] { display: none; }
html[data-look="press"] .ph-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  margin: 72px 0 20px; padding-top: 14px; border-top: 3px solid var(--p-ink-1);
}
html[data-look="press"] .ph-sec:first-child .ph-head,
html[data-look="press"] .ph-sec[hidden] + .ph-sec .ph-head { margin-top: 48px; }
html[data-look="press"] .ph-head h2 { margin: 0; font: 800 26px/1.15 var(--p-font-display); color: var(--p-ink-1); letter-spacing: 0; text-transform: none; }
html[data-look="press"] .ph-cap { font: 600 13px/1.3 var(--p-font-narrow); color: var(--p-ink-3); text-align: right; }
html[data-look="press"] .ph-cap b { font-weight: 600; }
html[data-look="press"] .ph-explain {
  display: inline; margin: 0 0 0 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 14px var(--p-font-narrow); color: var(--p-blue-text);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
html[data-look="press"] .ph-explain:hover { color: var(--p-ink-1); }
html[data-look="press"] .ph-explain-body { max-width: 46em; margin: -6px 0 18px; font: 400 15px/1.5 var(--p-font-text); color: var(--p-ink-2); }
html[data-look="press"] .ph-rows { border-top: 1px solid var(--p-line-strong); }
html[data-look="press"] .ph-row {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--p-line);
  color: var(--p-ink-1); text-decoration: none;
}
html[data-look="press"] a.ph-row:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
html[data-look="press"] .ph-row.ph-sk { min-height: 50px; }
html[data-look="press"] .ph-row h3 { margin: 0; font: 700 22px/1.2 var(--p-font-display); color: var(--p-ink-1); }
html[data-look="press"] .ph-row h3 a { color: inherit; text-decoration: none; }
html[data-look="press"] .ph-row h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
html[data-look="press"] .ph-num { white-space: nowrap; }
html[data-look="press"] .ph-num .n { font: 900 44px/1 var(--p-font-display); font-stretch: 112%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html[data-look="press"] .ph-num .u { margin-left: 6px; font: 600 16px var(--p-font-narrow); }
html[data-look="press"] .ph-word { font: 800 26px/1.1 var(--p-font-display); }
html[data-look="press"] .ph-fact p { margin: 0; font: 400 16px/1.5 var(--p-font-text); color: var(--p-ink-1); }
html[data-look="press"] .ph-fact p + p { margin-top: 2px; }
html[data-look="press"] .ph-muted,
html[data-look="press"] .ph-fact .ph-muted { color: var(--p-ink-3); font: 400 15px/1.5 var(--p-font-text); }
html[data-look="press"] .ph-none { margin: 0; padding: 22px 0; border-bottom: 1px solid var(--p-line); font: 400 17px/1.5 var(--p-font-text); color: var(--p-ink-2); }
html[data-look="press"] .ph-after { margin: 12px 0 0; font: 400 16px/1.5 var(--p-font-text); color: var(--p-ink-3); }
html[data-look="press"] .ph a { color: var(--p-blue-text); text-underline-offset: 3px; }
html[data-look="press"] .ph a:hover { color: var(--p-ink-1); }
html[data-look="press"] .ph a.ph-row { color: var(--p-ink-1); }

/* outlined square buttons; the ink one for the main door */
html[data-look="press"] .ph-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
html[data-look="press"] .ph a.ph-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px;
  border: 1px solid var(--p-ink-1); background: transparent; color: var(--p-ink-1);
  font: 600 16px var(--p-font-text); text-decoration: none;
}
html[data-look="press"] .ph a.ph-btn:hover { background: var(--p-ink-1); color: var(--p-bg); }
html[data-look="press"] .ph a.ph-btn-ink { background: var(--p-block); color: var(--p-on-block); }
html[data-look="press"] .ph a.ph-btn-ink:hover { background: var(--p-ink-2); border-color: var(--p-ink-2); }

/* the Globe: the biggest picture on the page, the pick's name on it */
html[data-look="press"] .pg { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
html[data-look="press"] .ph a.pg-pic {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border: 4px solid var(--p-ink-1); background: var(--p-on-fill); color: #FFFFFF; text-decoration: none;
}
html[data-look="press"] .pg-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-look="press"] .pg-on {
  position: absolute; left: 24px; right: 24px; bottom: 24px; color: #FFFFFF;
  font: 900 clamp(28px, 3vw, 44px)/1 var(--p-font-display); font-stretch: 112%; letter-spacing: -.02em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(7, 9, 8, .45);
}
html[data-look="press"] .pg-big {
  margin: 0; font: 900 clamp(34px, 1.8rem + 1.6vw, 52px)/.92 var(--p-font-display); font-stretch: 112%;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--p-ink-1);
}
html[data-look="press"] .pg-lead { margin: 20px 0 0; font: 500 19px/1.4 var(--p-font-text); color: var(--p-ink-1); }
html[data-look="press"] .pg .ph-btns { margin-top: 28px; }
html[data-look="press"] .pg .ph-after { margin-top: 20px; }

/* ask for a Snow Globe: a square search and the shared request button, squared under press */
/* the links under the Globe lead: a muted question, then a ruled list one link per line (the stray dots and commas sit in the zero-size text) */
html[data-look="press"] .pg .ph-after { display: flex; flex-direction: column; align-self: stretch; width: 100%; max-width: 480px; font-size: 0; }
html[data-look="press"] .pg .ph-after .pg-aq { display: block; margin-bottom: 8px; font: 400 16px/1.5 var(--p-font-text); color: var(--p-ink-3); }
html[data-look="press"] .pg .ph-after > :is(a, button) { display: block; position: relative; min-height: 44px; box-sizing: border-box; margin: 0; padding: 11px 28px 11px 0; border: 0; border-top: 1px solid var(--p-line); background: none; font: 600 16px/1.3 var(--p-font-text); color: var(--p-ink-1); text-decoration: none; text-align: left; white-space: normal; cursor: pointer; }
html[data-look="press"] .pg .ph-after > :is(a, button):last-of-type { border-bottom: 1px solid var(--p-line); }
html[data-look="press"] .pg .ph-after > :is(a, button)::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: "\2192"; color: var(--p-blue-text); }
html[data-look="press"] .pg .ph-after > :is(a, button)::first-letter { text-transform: uppercase; }
html[data-look="press"] .pg .ph-after > :is(a, button):hover { color: var(--p-blue-text); }
html[data-look="press"] .pg .ph-after > #pgMore { display: none; }
html[data-look="press"] .pg .ph-after > #pgMore:not([hidden]) { display: block; margin-top: 8px; font: 400 15px/1.5 var(--p-font-text); color: var(--p-ink-3); }
html[data-look="press"] .ph-after .pg-ask-btn { display: inline; margin: 0; font: 400 16px var(--p-font-text); white-space: normal; }
html[data-look="press"] .pg-ask { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--p-line); }
html[data-look="press"] .pg-ask-l { display: block; margin-bottom: 8px; font: 700 16px var(--p-font-text); color: var(--p-ink-1); }
html[data-look="press"] .pg-ask-q {
  width: 100%; max-width: 420px; height: 44px; box-sizing: border-box; padding: 0 12px;
  border: 1px solid var(--p-ink-1); border-radius: var(--p-r); background: var(--p-raise); color: var(--p-ink-1); font: 400 16px var(--p-font-text);
}
html[data-look="press"] .pg-ask-q:focus { outline: 2px solid var(--p-blue); outline-offset: -2px; }
html[data-look="press"] .pg-ask-hits { max-width: 420px; }
html[data-look="press"] .pg-ask-hit {
  display: block; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--p-line); background: none;
  text-align: left; cursor: pointer; color: var(--p-ink-1); font: 400 15px var(--p-font-text);
}
html[data-look="press"] .pg-ask-hit span { color: var(--p-ink-3); font: 600 13px var(--p-font-narrow); }
html[data-look="press"] .pg-ask-hit:hover b { text-decoration: underline; }
html[data-look="press"] .pg-ask-req { margin-top: 12px; font: 400 15px/1.5 var(--p-font-text); color: var(--p-ink-2); }
html[data-look="press"] .pg-ask-req .emgr-btn { border-radius: var(--p-r); border: 1px solid var(--p-ink-1); color: var(--p-ink-1); font: 600 16px var(--p-font-text); }
html[data-look="press"] .pg-ask-req .emgr-btn:hover { background: var(--p-ink-1); color: var(--p-bg); }

/* plan it, ride it, relive it: three ruled columns */
html[data-look="press"] .pw3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-look="press"] .pw3 > div { padding: 24px 24px 24px 0; border-top: 1px solid var(--p-line); }
html[data-look="press"] .pw3 > div + div { padding-left: 24px; border-left: 1px solid var(--p-line); }
html[data-look="press"] .pw3 h3 { margin: 0; font: 700 22px/1.2 var(--p-font-display); color: var(--p-ink-1); }
html[data-look="press"] .pw3 p { margin: 10px 0 0; font: 400 16px/1.5 var(--p-font-text); color: var(--p-ink-1); }
html[data-look="press"] .pw3 .pw-links { margin-top: 14px; }
html[data-look="press"] .pw3 .ph-muted { margin-top: 8px; }
html[data-look="press"] .pw-links .ph-explain { display: inline; margin: 0; font: 400 16px var(--p-font-text); white-space: normal; text-align: left; }
html[data-look="press"] .pw-links .ph-explain[disabled] { color: var(--p-ink-3); text-decoration: none; cursor: default; }
html[data-look="press"] .pw-ios { margin: 10px 0 0; padding-left: 20px; font: 400 15px/1.5 var(--p-font-text); color: var(--p-ink-2); }
html[data-look="press"] .ph-row3 .pw-links { margin: 0; font: 400 16px/1.5 var(--p-font-text); }

@media (max-width: 900px) {
  html[data-look="press"] .ph-head { flex-direction: column; gap: 6px; margin-top: 48px; }
  html[data-look="press"] .ph-cap { text-align: left; }
  html[data-look="press"] .ph-explain { display: block; margin: 4px 0 0; }
  html[data-look="press"] .ph-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
  html[data-look="press"] .ph-num .n { font-size: 40px; }
  html[data-look="press"] .ph-row h3 { font-size: 20px; }
  html[data-look="press"] .pg { grid-template-columns: 1fr; gap: 24px; }
  html[data-look="press"] .pw3 { grid-template-columns: 1fr; }
  html[data-look="press"] .pw3 > div,
  html[data-look="press"] .pw3 > div + div { padding: 20px 0; border-left: 0; }
  html[data-look="press"] .ph a.ph-btn { width: 100%; }
}
@media (max-width: 720px) {
  html[data-look="press"] .pf { flex-direction: column; grid-column: 1 / -1; margin-top: 24px; }
  html[data-look="press"] .pf-go { width: 100%; }
  html[data-look="press"] .pdoors { grid-column: 1 / -1; }
  html[data-look="press"] .pdoors a { display: block; padding: 4px 0; }
  html[data-look="press"] .pdoors .pd-dot { display: none; }
  /* as drawn on a phone: the stamp and the mascot first, side by side, then the sentence, the search, the doors */
  html[data-look="press"] .press-block .stamp { grid-column: 1; grid-row: 1; margin: 0 0 20px; justify-self: start; }
  html[data-look="press"] .press-block .press-mascot { grid-column: 2; grid-row: 1; align-self: start; width: 96px; margin: 0; }
  html[data-look="press"] .press-block h1.em-display { grid-row: 2; }
  html[data-look="press"] .press-block .pf { grid-row: 3; }
  html[data-look="press"] .press-block .ppop { grid-row: 4; grid-column: 1 / -1; }
  html[data-look="press"] .press-block .pdoors { grid-row: 5; }
}