:root {
  --emi-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
}
.has-mobile-chapters {
  --mc-header: calc(64px + env(safe-area-inset-top));
  scroll-behavior: auto;
}
.has-mobile-chapters.mc-ready { scroll-snap-type: y mandatory; }
.has-mobile-chapters .hd-depth-scene,
.has-mobile-chapters .rooms-journey { display: none; }

.has-mobile-chapters .site-header {
  background: var(--mc-header-fallback, rgb(247 241 230 / 85%));
  border-bottom: 1px solid rgb(255 255 255 / 40%);
  box-shadow: 0 2px 8px rgb(31 53 87 / 6%);
  transform: none;
}
.has-mobile-chapters .mc-header-dark {
  --mc-header-fallback: rgb(20 36 59 / 85%);
  --mc-header-glass: rgb(20 36 59 / 45%);
}
.has-mobile-chapters .mc-header-dark .hd-logo {
  color: var(--emi-cream);
  text-shadow: 0 1px 3px var(--emi-navy-dark);
}
.has-mobile-chapters .mc-header-dark .hd-menu-toggle,
.has-mobile-chapters .mc-header-dark .hd-menu-toggle:hover {
  color: var(--emi-cream);
  background: rgb(20 36 59 / 74%);
  border-color: rgb(255 255 255 / 40%);
}
.has-mobile-chapters .site-header .hd-navigation {
  box-sizing: border-box;
  min-height: calc(var(--mc-header) - 1px);
  padding: calc(7px + env(safe-area-inset-top)) 16px 7px;
  justify-content: space-between;
}
.has-mobile-chapters .hd-logo { font-size: 28px; }
.has-mobile-chapters .hd-nav-links,
.has-mobile-chapters .hd-nav-action { display: none; }
.has-mobile-chapters .hd-menu-toggle { min-height: 44px; font-size: 13px; }
.mc-video-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid var(--emi-border);
  border-radius: 999px;
  background: rgb(250 246 238 / 85%);
  color: var(--emi-navy);
}
.mc-video-toggle[hidden] { display: none; }

.mc-chapter, .mc-reading { scroll-snap-align: start; }
.mc-chapter {
  --mc-top: calc(var(--mc-header) + 48px);
  --mc-art-width: max(100vw, 56.25svh);
  --mc-art-height: max(100svh, 177.778vw);
  box-sizing: border-box;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(160px, 1fr) auto;
  padding: var(--mc-top) 16px max(16px, env(safe-area-inset-bottom));
  overflow: clip;
  scroll-snap-stop: always;
  background: var(--emi-cream);
}
.mc-chapter:first-child { --mc-top: var(--mc-header); }
.mc-picture, .mc-picture img, .mc-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mc-picture { z-index: -1; }
.mc-picture img, .mc-video { object-fit: cover; object-position: center; }
.mc-video {
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}
.mc-video-playing { opacity: 1; transition: opacity .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .mc-video { display: none; }
}
.mc-visual { position: relative; }
.mc-bottles {
  position: absolute;
  /* Match the center crop and keep the bottle foot above the reading card. */
  left: calc(50% + var(--mc-x) * var(--mc-art-width));
  top: min(100%, calc(50svh + var(--mc-y) * var(--mc-art-height) - var(--mc-top)));
  translate: -50% -100%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: min(2vw, 12px);
}
.mc-bottle {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.mc-bottle::before {
  content: '';
  position: absolute;
  inset: auto 10% -3px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #21181182 8%, transparent 74%);
}
.mc-bottle img {
  position: relative;
  display: block;
  height: clamp(95px, 22svh, 205px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
}
.mc-lineup .mc-bottle img { height: clamp(82px, 15svh, 155px); }
.mc-lineup [data-product="rua-chen"] img { height: clamp(92px, 17svh, 174px); }
.mc-lineup [data-product="binh-sua"] img { height: clamp(72px, 13svh, 140px); }
.mc-chapter:first-child .mc-lineup { gap: 0; }
.mc-chapter:first-child .mc-bottle img { height: clamp(75px, 12.5svh, 130px); }
.mc-chapter:first-child [data-product="rua-chen"] img { height: clamp(85px, 14svh, 145px); }

.mc-card {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 440px);
  justify-self: center;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 60%);
  background: rgb(250 246 238 / 85%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
  color: var(--emi-navy);
  font-size: 13px;
  line-height: 1.5;
}
.mc-card h1, .mc-card h2 {
  margin: 0;
  font-family: var(--emi-serif);
  font-weight: 400;
  line-height: 1.05;
}
.mc-card h1 { font-size: clamp(43px, 11.5vw, 62px); letter-spacing: -.045em; }
.mc-card h2 { font-size: clamp(23px, 6.2vw, 31px); letter-spacing: -.025em; }
.mc-card h2 em { color: var(--emi-navy-light); }
.mc-card p, .mc-card ul { margin: 8px 0 12px; }
.mc-card ul { padding-inline-start: 17px; }
.mc-card li + li { margin-top: 2px; }

.mc-cta, .mc-nav a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.mc-cta {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--emi-navy);
  color: var(--emi-cream);
}
.mc-nav {
  position: fixed;
  top: calc(var(--mc-header) + 6px);
  z-index: 89;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  width: max-content;
  height: 36px;
  padding: 0 4px;
  border: 1px solid rgb(255 255 255 / 60%);
  border-radius: 999px;
  background: rgb(247 241 230 / 85%);
  box-shadow: 0 2px 8px rgb(31 53 87 / 8%);
}
.mc-nav[hidden] { display: none; }
.mc-nav a { padding: 0 9px; position: relative; isolation: isolate; color: var(--emi-navy); }
.mc-nav a[aria-current] { color: var(--emi-cream); }
.mc-nav a[aria-current]::before {
  content: '';
  position: absolute;
  inset: 7px 2px;
  z-index: -1;
  border-radius: 999px;
  background: var(--emi-navy);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media not (prefers-reduced-transparency: reduce) {
    .has-mobile-chapters .site-header {
      background: var(--mc-header-glass, rgb(247 241 230 / 35%));
      -webkit-backdrop-filter: blur(18px) saturate(1.4);
      backdrop-filter: blur(18px) saturate(1.4);
    }
    .mc-card {
      background: rgb(250 246 238 / var(--mc-glass-alpha, 55%));
      -webkit-backdrop-filter: blur(20px) saturate(1.3);
      backdrop-filter: blur(20px) saturate(1.3);
    }
    .mc-nav {
      background: rgb(247 241 230 / 67%);
      -webkit-backdrop-filter: blur(14px) saturate(1.3);
      backdrop-filter: blur(14px) saturate(1.3);
    }
  }
}
@media (prefers-reduced-transparency: reduce) {
  .has-mobile-chapters .site-header,
  .has-mobile-chapters .hd-menu-toggle { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.mc-chapters a:focus-visible, .mc-nav a:focus-visible {
  outline: 2px solid var(--emi-sky-dark);
  outline-offset: 2px;
}
.mc-reading :is(section, footer)[id] { scroll-margin-top: var(--mc-header); }
.mc-reading { padding-top: var(--mc-header); }
.mc-motion-debug {
  position: fixed;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: 8px;
  z-index: 91;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--emi-navy);
  color: var(--emi-cream);
  font: 13px/1.4 monospace;
  pointer-events: none;
}

.has-mobile-chapters :is(.menu-hours, .home-link, .contact-columns h3, .contact-columns p,
  .contact-columns a, .contact-action, .contact-legal) { font-size: 13px; }
.has-mobile-chapters .em-dose-link { display: inline-flex; }
/* Touch tablets are wider than the 760px footer rules but still need 44px targets. */
.has-mobile-chapters :is(.contact-columns a, .contact-legal a) { min-height: 44px; display: flex; align-items: center; }
.has-mobile-chapters :is(.home-link, .em-dose-link, .em-dose-chips button, .contact-action) {
  min-height: 44px;
  align-items: center;
}


/* Reading content stays readable before any scroll or reveal callback. */
.has-mobile-chapters .home-reveal {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}
.has-mobile-chapters .em-why-list li { opacity: 1; transition: none; }
.has-mobile-chapters .em-why-visual { --why-p: 1; --why-done: 1; }