/* ============================================================================
   Phenome, redesign layer (comparison copy on :57322)

   Loaded after every page's own stylesheets. It keeps her design system and
   changes what reads as
   "not quite": the typeface, the chrome (nav, flyouts, footer), and the
   components the rebuilt pages use (.ap-*). Everything here is additive; a
   page that uses none of the .ap- classes only picks up the type and chrome.
   ========================================================================== */

@import url('/site/apple/fonts/inter.css');

:root {
  --ap-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ph-font: var(--ap-font);
  --ap-ink: #1d1d1f;
  --ap-ink-2: #6e6e73;
  --ap-ink-3: #86868b;
  --ap-line: #d2d2d7;
  --ap-bg: #ffffff;
  --ap-bg-2: #f5f5f7;
  --ap-dark: #000000;
  --ap-dark-2: #161617;
  --ap-dark-3: #1d1d1f;
  --ap-on-dark: #f5f5f7;
  --ap-on-dark-2: #86868b;
  /* Phenome Blue, as her homepage uses it (#203A85, the logo's own blue). */
  --ap-blue: #203a85;
  --ap-blue-hover: #2a4bab;
  --ap-link: #203a85;
  --ap-link-dark: #aebdff;
  --ap-green: #34c759;
  --ap-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ap-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ap-nav-h: 44px;
  --ap-max: 980px;
  --ap-wide: 1440px;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body, .ph-site-root, .ph-nav, .ph-footer, button, input, select, textarea {
  font-family: var(--ap-font) !important;
  font-optical-sizing: auto;
  font-feature-settings: 'cv11', 'ss01';
}
.ph-site-root h1, .ph-site-root h2 { letter-spacing: -0.022em; }
.ph-site-root h3 { letter-spacing: -0.014em; }

/* ---- global nav: a 44px glass bar ------------------------------------------ */
.ph-nav {
  background: rgba(251, 251, 253, 0.8) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: none !important;
  border-bottom: 0 !important;
  transition: background-color 0.3s var(--ap-ease);
}
/* The bar's own 12px row is a desktop measure; the drawer below 901 sets its own
   sizes (see THE DRAWER at the end of this file). */
@media (min-width: 901px) {
  .ph-nav .ph-trigger,
  .ph-nav .ph-links > a,
  .ph-nav .ph-item > a {
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
  }
}
.ph-nav .ph-trigger,
.ph-nav .ph-links > a,
.ph-nav .ph-item > a {
  color: rgba(0, 0, 0, 0.8) !important;
  transition: color 0.24s var(--ap-ease);
}
.ph-nav .ph-trigger:hover, .ph-nav .ph-item > a:hover { color: #000 !important; }
.ph-nav .ph-brand img { height: 21px !important; width: auto !important; }
.ph-nav .ph-panel {
  background: rgba(251, 251, 253, 0.96) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.18) !important;
}
.ph-nav .ph-panel-col.is-lead a {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: var(--ap-ink) !important;
}
.ph-nav .ph-panel-col-t { color: var(--ap-ink-2) !important; letter-spacing: 0 !important; }
.ph-nav .ph-panel-col:not(.is-lead) a { color: #333336 !important; }
/* On the desktop sheet: the section's own doors large, its other links at 14
   (they were 12 at 600, a jump from 24 that read as two different menus). */
@media (min-width: 901px) {
  .ph-nav .ph-panel-col.is-lead a { font-size: 24px !important; }
  .ph-nav .ph-panel-col-t { font-size: 12px !important; }
  .ph-nav .ph-panel-col:not(.is-lead) a { font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important; }
}

/* Pages that open on black wear the dark bar. The page behind
   the bar is black too, or the see-through bar reads as grey over white. */
body.ap-nav-dark { background: #000; }
body.ap-nav-dark .ph-nav { background: rgba(22, 22, 23, 0.8) !important; }
body.ap-nav-dark .ph-nav .ph-trigger,
body.ap-nav-dark .ph-nav .ph-item > a { color: rgba(255, 255, 255, 0.8) !important; }
body.ap-nav-dark .ph-nav .ph-trigger:hover { color: #fff !important; }
body.ap-nav-dark .ph-nav .ph-brand img,
body.ap-nav-dark .ph-nav .ph-nav-icon svg,
body.ap-nav-dark .ph-nav .ph-nav-icon img { filter: brightness(0) invert(1); opacity: 0.85; }
body.ap-nav-dark .ph-nav .ph-nav-icon { color: rgba(255, 255, 255, 0.85) !important; }
body.ap-nav-dark .ph-nav .ph-burger span { background: rgba(255, 255, 255, 0.85); }
body.ap-nav-dark .ph-nav .ph-panel { background: rgba(22, 22, 23, 0.96) !important; }
body.ap-nav-dark .ph-nav .ph-panel a { color: #e8e8ed !important; }
body.ap-nav-dark .ph-nav .ph-panel-col.is-lead a { color: #f5f5f7 !important; }
body.ap-nav-dark .ph-nav .ph-panel-col-t { color: #86868b !important; }

/* Over a white section the bar turns light again (motion.js sets data-ap-over
   from the section under it), so it is never a grey band over white. */
body.ap-nav-dark[data-ap-over='light'] .ph-nav { background: rgba(251, 251, 253, 0.8) !important; }
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-trigger,
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-item > a { color: rgba(0, 0, 0, 0.8) !important; }
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-trigger:hover { color: #000 !important; }
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-brand img,
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-nav-icon svg,
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-nav-icon img { filter: none; opacity: 1; }
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-nav-icon { color: rgba(0, 0, 0, 0.8) !important; }
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-burger span { background: rgba(0, 0, 0, 0.8); }
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-panel { background: rgba(251, 251, 253, 0.96) !important; }
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-panel a { color: #1d1d1f !important; }
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-panel-col.is-lead a { color: #1d1d1f !important; }
body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-panel-col-t { color: #6e6e73 !important; }

/* Dark nav, open panel: the nav's words stay readable on every ground. The
   mega menu in shared.css sets the
   Testing / Supplements / Devices titles and products to #000 !important with
   an #id selector, which beat the dark-nav rules above, so on a dark page those
   panels went black on near-black. These win on specificity and only while the
   nav is dark; over a light section the light rules above still apply. */
body.ap-nav-dark:not([data-ap-over='light']) .ph-nav .ph-panel .ph-panel-col a { color: #e8e8ed !important; }
body.ap-nav-dark:not([data-ap-over='light']) .ph-nav :is(#phPanel-supplements, #phPanel-testing, #phPanel-devices, .ph-panel.is-ranges) .ph-panel-col a.ph-panel-col-t.is-link,
body.ap-nav-dark:not([data-ap-over='light']) .ph-nav :is(#phPanel-supplements, #phPanel-testing, #phPanel-devices, .ph-panel.is-ranges) .ph-panel-col.is-shop a,
body.ap-nav-dark:not([data-ap-over='light']) .ph-nav :is(#phPanel-supplements, #phPanel-testing, #phPanel-devices, .ph-panel.is-ranges) .ph-panel-col.is-shop a:hover,
body.ap-nav-dark:not([data-ap-over='light']) .ph-nav :is(#phPanel-supplements, #phPanel-testing, #phPanel-devices, .ph-panel.is-ranges) .ph-panel-col.is-shop .ph-panel-label { color: #f5f5f7 !important; }
body.ap-nav-dark:not([data-ap-over='light']) .ph-nav .ph-panel .ph-panel-note { color: var(--ph-on-brand, #8fb8ea) !important; }

/* ---- the menu, open and closing ------------------------------------------------
   While a panel is open the bar wears the panel's own ground, so the two read as
   one sheet (the bar is see-through and blurs what is under it, so it read
   lighter than the panel). Under the dark bar the veil below the panel darkens
   the page instead of frosting it white. Closing, the panel rolls back up and
   the veil fades (shared.js keeps both until the roll ends). */
html.ph-menu-open .ph-nav { background: rgba(251, 251, 253, 0.96) !important; }
html.ph-menu-open body.ap-nav-dark .ph-nav { background: rgba(22, 22, 23, 0.96) !important; }
html.ph-menu-open body.ap-nav-dark[data-ap-over='light'] .ph-nav { background: rgba(251, 251, 253, 0.96) !important; }
body.ap-nav-dark:not([data-ap-over='light']) .ph-menu-scrim,
body.ap-nav-dark:not([data-ap-over='light']) .ph-search-scrim { background: rgba(0, 0, 0, 0.45); }
@keyframes ph-panel-lift { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes ph-veil-out { from { opacity: 1; } to { opacity: 0; } }
.ph-nav .ph-panel.is-closing { animation: ph-panel-lift 0.3s cubic-bezier(0.4, 0, 0.6, 1) both !important; }
.ph-nav .ph-panel.is-closing .ph-panel-eyebrow,
.ph-nav .ph-panel.is-closing .ph-panel-cards,
.ph-nav .ph-panel.is-closing .ph-panel-cols { animation: none; }
.ph-menu-scrim.is-closing { animation: ph-veil-out 0.3s ease both; }

/* ---- footer: a small grey directory ------------------------------------------ */
.ph-footer { background: var(--ap-bg-2) !important; color: var(--ap-ink-2) !important; font-size: 12px !important; }
.ph-footer p { font-size: 12px !important; line-height: 1.34 !important; color: var(--ap-ink-2) !important; }
.ph-footer .col-t { font-size: 12px !important; font-weight: 600 !important; color: var(--ap-ink) !important; letter-spacing: -0.01em !important; }
.ph-footer .col a { font-size: 12px !important; line-height: 1.34 !important; color: #424245 !important; }
.ph-footer .col a:hover { text-decoration: underline; color: var(--ap-ink) !important; }
/* On a phone the market's three selects wrap under each other; the region
   would not shrink (shared.css flex: none) and pushed the page sideways. */
@media (max-width: 733px) {
  .ph-footer .ph-region.is-foot { flex: 1 1 auto; min-width: 0; max-width: 100%; align-items: flex-start; }
  .ph-footer .ph-market { max-width: 100%; }
}

/* ============================================================================
   Components for the rebuilt pages
   ========================================================================== */

.ap { color: var(--ap-ink); background: var(--ap-bg); overflow-x: clip; }
.ap *, .ap *::before, .ap *::after { box-sizing: border-box; }
.ap img, .ap video { display: block; max-width: 100%; }
.ap a { color: inherit; }

/* type */
.ap-eyebrow { margin: 0 0 8px; font-size: 17px; line-height: 1.24; font-weight: 600; letter-spacing: -0.022em; color: var(--ap-ink-2); }
.ap-h1 { margin: 0; font-size: clamp(40px, 6.2vw, 96px); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; }
.ap-h2 { margin: 0; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -0.028em; }
.ap-h3 { margin: 0; font-size: clamp(28px, 2.9vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.024em; }
.ap-h4 { margin: 0; font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: -0.02em; }
.ap-tag { margin: 6px 0 0; font-size: clamp(21px, 2vw, 28px); line-height: 1.14; font-weight: 400; letter-spacing: -0.012em; }
.ap-lede { margin: 0; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.42; font-weight: 500; letter-spacing: -0.015em; color: var(--ap-ink-2); }
.ap-lede b, .ap-lede strong { color: var(--ap-ink); font-weight: 600; }
.ap-small { font-size: 14px; line-height: 1.43; color: var(--ap-ink-2); letter-spacing: -0.01em; }
.ap-price { margin: 14px 0 0; font-size: 17px; line-height: 1.24; color: var(--ap-ink-2); letter-spacing: -0.02em; }

/* surfaces */
.ap-dark { background: var(--ap-dark); color: var(--ap-on-dark); }
.ap-dark .ap-eyebrow, .ap-dark .ap-lede, .ap-dark .ap-small, .ap-dark .ap-price { color: var(--ap-on-dark-2); }
.ap-dark .ap-lede b, .ap-dark .ap-lede strong { color: var(--ap-on-dark); }
.ap-grey { background: var(--ap-bg-2); }
.ap-wrap { width: min(var(--ap-max), calc(100% - 44px)); margin: 0 auto; }
.ap-wrap-wide { width: min(1260px, calc(100% - 44px)); margin: 0 auto; }

/* buttons: pills */
.ap-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; }
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; padding: 11px 21px; border-radius: 980px;
  font: 400 17px/1.18 var(--ap-font); letter-spacing: -0.022em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  color: #fff !important; background: var(--ap-blue); border: 1px solid var(--ap-blue);
  transition: background-color 0.2s var(--ap-ease), color 0.2s var(--ap-ease), transform 0.2s var(--ap-ease);
}
.ap-btn:hover { background: var(--ap-blue-hover); border-color: var(--ap-blue-hover); }
.ap-btn:active { transform: scale(0.98); }
.ap-btn-ghost { background: transparent; color: var(--ap-blue) !important; }
.ap-btn-ghost:hover { background: var(--ap-blue); color: #fff !important; }
/* On dark ground her outline pill is frosted glass: white words, a soft white edge. */
.ap-dark .ap-btn-ghost { color: #fff !important; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ap-dark .ap-btn-ghost:hover { background: #fff; color: #203a85 !important; border-color: #fff; }
.ap-btn-sm { padding: 8px 15px; font-size: 14px; }
.ap-btn[aria-disabled='true'] { display: none; }
.ap-link { color: var(--ap-link); text-decoration: none; font-size: 17px; letter-spacing: -0.022em; }
.ap-link::after { content: ' \203A'; }
.ap-link:hover { text-decoration: underline; }
.ap-dark .ap-link { color: var(--ap-link-dark); }

/* reveal: once, on arrival, a short fade and rise (time based, never tied to
   the scroll position). Photographs only fade, so they are never resampled. */
[data-ap-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.9s var(--ap-ease), transform 0.9s var(--ap-spring); transition-delay: var(--ap-delay, 0s); }
[data-ap-reveal].is-in { opacity: 1; transform: none; }
[data-ap-reveal='fade'] { transform: none; transition-duration: 1.2s; }
.ap-cover { width: 100%; height: 100%; object-fit: cover; }

/* video controls: a small round play/pause */
.ap-vidctl {
  position: absolute; right: 22px; bottom: 22px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  color: #1d1d1f; background: rgba(210, 210, 215, 0.64);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color 0.2s var(--ap-ease);
}
.ap-vidctl:hover { background: rgba(223, 223, 227, 0.8); }
.ap-vidctl svg { width: 14px; height: 14px; }
.ap-vidctl .ap-i-play { display: none; }
.ap-vidctl.is-paused .ap-i-play { display: block; }
.ap-vidctl.is-paused .ap-i-pause { display: none; }

/* scroll-lit words (motion.js wraps each word) */
[data-ap-words] .ap-w { color: var(--ap-dim, #86868b); transition: color 0.35s var(--ap-ease); }
[data-ap-words] .ap-w.on { color: var(--ap-lit, #1d1d1f); }
.ap-dark [data-ap-words] { --ap-dim: #424245; --ap-lit: #f5f5f7; }

/* big numbers */
.ap-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; }
.ap-stat { border-top: 1px solid var(--ap-line); padding-top: 18px; }
.ap-dark .ap-stat { border-color: #424245; }
.ap-stat-k { display: block; font-size: 14px; line-height: 1.3; color: var(--ap-ink-2); letter-spacing: -0.01em; }
.ap-stat-v { display: block; margin: 4px 0; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.ap-stat-l { display: block; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; }
.ap-dark .ap-stat-k { color: var(--ap-on-dark-2); }
@media (max-width: 833px) { .ap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* horizontal gallery ("Get the highlights") */
.ap-gallery { position: relative; }
.ap-gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.ap-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(1080px, 82vw); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 max(22px, calc((100vw - 1260px) / 2)); scroll-padding: 0 max(22px, calc((100vw - 1260px) / 2));
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ap-track::-webkit-scrollbar { display: none; }
.ap-card {
  position: relative; scroll-snap-align: start; overflow: hidden;
  border-radius: 28px; background: #000; min-height: min(620px, 72vh);
  transform: translateZ(0);
}
.ap-card > video, .ap-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-card-cap {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  padding: 44px 48px 0; max-width: 620px;
  font-size: clamp(19px, 1.9vw, 28px); line-height: 1.18; font-weight: 600; letter-spacing: -0.02em; color: #f5f5f7;
}
.ap-card-cap span { color: #a1a1a6; }
.ap-card.is-light { background: #f5f5f7; }
.ap-card.is-light .ap-card-cap { color: #1d1d1f; }
.ap-card.is-light .ap-card-cap span { color: #6e6e73; }
.ap-dots {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 28px auto 0; padding: 14px 20px; width: max-content; border-radius: 980px;
  background: rgba(66, 66, 69, 0.72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.ap-light .ap-dots { background: rgba(232, 232, 237, 0.72); }
.ap-dot { width: 8px; height: 8px; border-radius: 980px; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, 0.42); transition: width 0.4s var(--ap-ease), background-color 0.3s; }
.ap-light .ap-dot { background: rgba(0, 0, 0, 0.3); }
.ap-dot.is-on { width: 40px; background: rgba(255, 255, 255, 0.92); }
.ap-light .ap-dot.is-on { background: rgba(0, 0, 0, 0.8); }
.ap-arrows { display: flex; gap: 14px; }
.ap-arrow {
  width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(210, 210, 215, 0.64); color: rgba(0, 0, 0, 0.56); transition: opacity 0.2s, background-color 0.2s;
}
.ap-dark .ap-arrow { background: #333336; color: rgba(255, 255, 255, 0.8); }
.ap-arrow:disabled { opacity: 0.36; cursor: default; }
.ap-arrow svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  [data-ap-reveal] { opacity: 1; transform: none; transition: none; }
  .ap-zoom > img, .ap-zoom > video { transform: none !important; }
  .ap-track { scroll-behavior: auto; }
}

/* ---- THE DRAWER, below 901 (2026-09-29 by request) -------------------------
   The menu on a phone: the full screen under the bar, sliding in from the side
   (shared.css moves it), the page behind held still, the sections at a size a
   thumb and an eye can use, each section's links folding open rather than
   appearing, and the rows arriving one after another. The burger turns into a
   close mark on the same clock. */
@media (max-width: 900px) {
  html:has(#phLinks.open) { overflow: hidden; }
  /* The closed drawer waits off the right edge; clip it there so a sideways
     swipe cannot scroll the page onto it. */
  .ph-nav { overflow-x: clip; }
  /* Solid: a filter cannot see through the bar it sits in, and page copy showing
     behind the rows is unreadable. */
  .ph-nav .ph-links { background: #fbfbfd !important; }
  body.ap-nav-dark .ph-nav .ph-links { background: #161617 !important; }
  .ph-nav .ph-links .ph-panel-feat { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 12px !important; }
  .ph-nav .ph-links .ph-panel-feat > * { width: auto !important; min-width: 0; }
  /* Inside the drawer a section is part of the sheet, not a card on it. */
  .ph-nav .ph-links .ph-panel { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ph-nav .ph-links .ph-trigger,
  .ph-nav .ph-links > a { font-size: 26px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; padding: 14px 0 !important; }
  body.ap-nav-dark .ph-nav .ph-links .ph-trigger { color: #f5f5f7 !important; }
  /* Under a white bar (over a light section) the drawer is white too. */
  body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-links { background: #fbfbfd !important; }
  body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-links .ph-trigger,
  body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-links > a,
  body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-links .ph-panel a,
  body.ap-nav-dark[data-ap-over='light'] .ph-nav .ph-links .ph-feat-name { color: #1d1d1f !important; }
  .ph-nav .ph-links .ph-item { border-bottom: 0; }
  .ph-nav .ph-panel-col.is-lead a { font-size: 20px !important; }
  .ph-nav .ph-panel-col-t { font-size: 13px !important; }
  .ph-nav .ph-panel-col:not(.is-lead) a { font-size: 17px !important; font-weight: 500 !important; }
  /* A section's links fold open and shut; the panel stays laid out so its
     height can move. */
  .ph-nav .ph-links .ph-panel {
    display: grid !important; grid-template-rows: 1fr; opacity: 1;
    transition: grid-template-rows .36s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, visibility 0s;
  }
  .ph-nav .ph-links .ph-panel[hidden] {
    grid-template-rows: 0fr; opacity: 0; visibility: hidden; padding-bottom: 0;
    transition: grid-template-rows .36s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, visibility 0s linear .36s;
  }
  .ph-nav .ph-links .ph-panel > .ph-panel-inner { min-height: 0; overflow: hidden; }
  .ph-nav .ph-toggle svg { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  .ph-nav .ph-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  /* The rows arrive one after another as the sheet slides in. */
  .ph-nav .ph-links > * { opacity: 0; transform: translateX(24px); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
  .ph-nav .ph-links.open > * { opacity: 1; transform: none; }
  .ph-nav .ph-links.open > :nth-child(1) { transition-delay: .08s; }
  .ph-nav .ph-links.open > :nth-child(2) { transition-delay: .11s; }
  .ph-nav .ph-links.open > :nth-child(3) { transition-delay: .14s; }
  .ph-nav .ph-links.open > :nth-child(4) { transition-delay: .17s; }
  .ph-nav .ph-links.open > :nth-child(5) { transition-delay: .20s; }
  .ph-nav .ph-links.open > :nth-child(6) { transition-delay: .23s; }
  .ph-nav .ph-links.open > :nth-child(7) { transition-delay: .26s; }
  .ph-nav .ph-links.open > :nth-child(n+8) { transition-delay: .29s; }
  /* The burger's two lines cross into a close mark. */
  .ph-nav .ph-burger span { transition: transform .32s cubic-bezier(.2, .8, .2, 1); transform-origin: center; }
  .ph-nav .ph-burger[aria-expanded="true"] span:first-child { transform: translateY(2.8px) rotate(45deg); }
  .ph-nav .ph-burger[aria-expanded="true"] span:last-child { transform: translateY(-2.8px) rotate(-45deg); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .ph-nav .ph-links, .ph-nav .ph-links > *, .ph-nav .ph-links .ph-panel, .ph-nav .ph-burger span { transition: none !important; }
}

/* The menu's pictures fade in once loaded (shared.js fetches them while the page
   is idle), never popping into an open panel. */
.ph-feat-img img { opacity: 0; transition: opacity .35s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.ph-feat-img img.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ph-feat-img img { transition: none; } }