/* ==========================================================================
   Editorial redesign — "travel journal" look (mockup C, panorama hero)
   Type: Syne (poster caps) + Instrument Serif (italic accents, display)
         + DM Sans (text). Colours: the site's own palette (bone, ink, clay,
   ochre, moss, lavender, navy band) with matching dark-mode values.
   Loaded after corazon-earth.css and inside-the-house.css, so it wins ties;
   rules that must beat the generated dark-mode rules use #root + !important.
   ========================================================================== */

/* New type applies to the guide only (.App); /status and /book keep theirs. */
.App {
  --font-main: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-heading: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-family: var(--font-main);
}
:root {
  --font-poster: 'Syne', 'Arial Black', 'Helvetica Neue', sans-serif;

  --ed-bg: #FBF9F4;
  --ed-ink: #232535;
  --ed-mut: #5F6273;
  --ed-accent: #D4553A;          /* italic accents, buttons */
  --ed-accent-ink: #FFFFFF;
  --ed-btn: #C4492F;
  --ed-accent-text: #B8452C;
  --ed-card: #FFFFFF;
  --ed-line: rgba(35, 37, 53, 0.14);
  --ed-shadow: rgba(34, 38, 74, 0.16);
  --ed-pill: #FFFFFF;
  --ed-pill-ink: #232535;
  --ed-pill-lead: #2D3060;
  --ed-pill-lead-ink: #FFFFFF;

  /* colour fills for cards, with the text colour that sits on each */
  --ed-f-lav: #E3E5F2;  --ed-on-lav: #22264A;
  --ed-f-sun: #E0A43C;  --ed-on-sun: #232535;
  --ed-f-moss: #5C7A4E; --ed-on-moss: #FBF9F4;
  --ed-f-clay: #C4492F; --ed-on-clay: #FFFFFF;
  --ed-f-navy: #2D3060; --ed-on-navy: #FFFFFF;
  --ed-f-paper: #FFFFFF; --ed-on-paper: #232535;

  --ed-tick: #232535;  --ed-tick-ink: #FBF9F4;  --ed-tick-star: #E0A43C;
  --ed-foot: #C4492F;  --ed-foot-ink: #FFF7F2;  --ed-foot-acc: #22264A;
  --ed-foot-bar: #2D3060;
  --ed-radius: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ed-bg: #14162B;
    --ed-ink: #ECECF7;
    --ed-mut: #A3A7C7;
    --ed-accent: #FF9C80;
    --ed-accent-ink: #14162B;
    --ed-btn: #FF9C80;
    --ed-accent-text: #FF9C80;
    --ed-card: #1F2240;
    --ed-line: rgba(236, 236, 247, 0.14);
    --ed-shadow: rgba(0, 0, 0, 0.45);
    --ed-pill: #1F2240;
    --ed-pill-ink: #ECECF7;
    --ed-pill-lead: #ECECF7;
    --ed-pill-lead-ink: #14162B;

    --ed-f-lav: #2A2E52;  --ed-on-lav: #ECECF7;
    --ed-f-sun: #E0A43C;  --ed-on-sun: #1A1C33;
    --ed-f-moss: #4B6A40; --ed-on-moss: #F1F3E8;
    --ed-f-clay: #C4492F; --ed-on-clay: #FFFFFF;
    --ed-f-navy: #272B58; --ed-on-navy: #ECECF7;
    --ed-f-paper: #1F2240; --ed-on-paper: #ECECF7;

    --ed-tick: #0E1022;  --ed-tick-ink: #ECECF7;  --ed-tick-star: #F0B85A;
    --ed-foot: #B8472E;  --ed-foot-ink: #FFF4EE;  --ed-foot-acc: #14162B;
    --ed-foot-bar: #0E1022;
  }
}

.App { font-synthesis: none; }

/* Shared poster heading: big Syne caps with an italic serif line under it. */
html body #root .section-title,
html body #root .ed-title,
html body #root .chapter-index h2,
html body #root .inside-house-heading h3,
html body #root .site-footer-hero h2 {
  font-family: var(--font-poster) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em !important;
  line-height: 0.9 !important;
}
html body #root .section-title em,
html body #root .ed-title em,
html body #root .chapter-index h2 em,
html body #root .inside-house-heading h3 em,
html body #root .site-footer-hero h2 em {
  display: block;
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none;
  letter-spacing: -0.01em !important;
  font-size: 1.08em;
  line-height: 0.95;
  margin-top: 0.02em;
}
html body #root .section-title em,
html body #root .ed-title em { color: var(--ed-accent) !important; }
html body #root .ed-title {
  font-size: clamp(40px, 4.4vw, 64px) !important;
  color: var(--ed-ink) !important;
}
html body #root .section-title::after,
html body #root .section-title::before { display: none !important; }

html body #root .guide-eyebrow,
html body #root .ed-eyebrow,
html body #root .site-footer-eyebrow,
html body #root .ed-tag {
  display: inline-block;
  font-family: var(--font-main) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  padding: 7px 13px !important;
  border: 1.5px solid currentColor;
  border-radius: 40px;
  line-height: 1.2 !important;
}
html body #root .guide-eyebrow::before,
html body #root .ed-eyebrow::before,
html body #root .site-footer-eyebrow::before,
html body #root .ed-tag::before { display: none !important; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
html body #root .ed-hero {
  position: relative;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--ed-bg) !important;
  color: var(--ed-ink) !important;
  overflow: visible !important;
  text-align: left !important;
}
html body #root .ed-hero::before,
html body #root .ed-hero::after { display: none !important; }

.ed-masthead,
.ed-hero-copy,
.ed-pano {
  max-width: var(--cz-max, 1240px);
  margin: 0 auto;
  padding: 0 var(--cz-gutter, clamp(1rem, 4vw, 3.5rem));
}
.ed-masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 22px;
}
html body #root .ed-logo {
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ed-ink) !important;
  text-decoration: none;
}
.ed-logo i { font-family: var(--font-display); font-style: normal; font-weight: 400; color: var(--ed-accent); }
.ed-masthead-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
html body #root .ed-masthead-nav a {
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 40px;
  background: var(--ed-pill) !important;
  color: var(--ed-pill-ink) !important;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--ed-line);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
html body #root .ed-masthead-nav a:hover { transform: translateY(-1px); }
html body #root .ed-masthead-nav a.is-lead {
  background: var(--ed-pill-lead) !important;
  color: var(--ed-pill-lead-ink) !important;
  box-shadow: none;
}

.ed-hero-copy { padding-top: clamp(10px, 2vw, 30px); }
html body #root .ed-hero .ed-tag { color: var(--ed-accent-text) !important; margin: 0 !important; }
html body #root .ed-hero-title {
  font-family: var(--font-poster) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em !important;
  font-size: clamp(54px, 6vw, 86px) !important;
  line-height: 0.9 !important;
  color: var(--ed-ink) !important;
  margin: 22px 0 0 !important;
  text-align: left !important;
  text-shadow: none !important;
  max-width: none !important;
}
html body #root .ed-hero-title em {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 1.1em;
  color: var(--ed-accent) !important;
  white-space: nowrap;
}
.ed-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin: 22px 0 56px;
}
html body #root .ed-hero .hero-subtitle {
  font-family: var(--font-main) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
  margin: 0 !important;
  color: var(--ed-ink) !important;
  opacity: 0.88;
  text-align: left !important;
  text-shadow: none !important;
}
html body #root .ed-btn {
  flex: none;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background: var(--ed-btn) !important;
  color: var(--ed-accent-ink) !important;
  font-weight: 600;
  font-size: 15px;
  padding: 16px 26px;
  border-radius: 40px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
html body #root .ed-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--ed-shadow); }

.ed-pano { position: relative; margin-bottom: 64px; }
.ed-pano-frame {
  position: relative;
  height: clamp(300px, 34vw, 480px);
  border-radius: 32px;
  overflow: hidden;
  margin: 0;
  background: #2D3060;
}
.ed-pano-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
html body #root .ed-pano-frame figcaption {
  position: absolute;
  right: 28px;
  text-align: right;
  bottom: 22px;
  margin: 0;
  color: #fff !important;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
html body #root .ed-stamp {
  position: absolute;
  left: max(16px, calc(var(--cz-gutter, 3.5rem) - 30px));
  bottom: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--ed-f-sun);
  color: var(--ed-on-sun) !important;
  display: grid;
  place-content: center;
  text-align: center;
  z-index: 3;
  transform: rotate(-10deg);
}
.ed-stamp b { font-family: var(--font-poster); font-weight: 800; font-size: 38px; line-height: 0.9; display: block; }
.ed-stamp small { font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* facts strip */
html body #root .ed-ticker {
  background: var(--ed-tick) !important;
  color: var(--ed-tick-ink) !important;
  overflow: hidden;
  padding: 16px 0;
}
.ed-ticker-track { display: flex; width: max-content; animation: ed-ticker 48s linear infinite; }
.ed-ticker:hover .ed-ticker-track { animation-play-state: paused; }
.ed-ticker-run { display: flex; list-style: none; margin: 0; padding: 0; }
html body #root .ed-ticker-run li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-poster);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--ed-tick-ink) !important;
  margin: 0;
}
html body #root .ed-ticker-run li.is-aside {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 23px;
  color: var(--ed-tick-star) !important;
}
.ed-ticker-star { margin: 0 22px; color: var(--ed-tick-star); font-family: var(--font-display); font-size: 20px; }
@keyframes ed-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ed-ticker-track { animation: none; }
  .ed-ticker { overflow-x: auto; }
}

/* ── Stay route ───────────────────────────────────────────────────────── */
html body #root .guest-guide-overview { background: var(--ed-bg) !important; }
html body #root .guest-guide-heading {
  text-align: left !important;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title tag" "sub sub";
  align-items: end;
  column-gap: 24px;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body #root .guest-guide-heading .guide-eyebrow { grid-area: tag; justify-self: end; color: var(--ed-ink) !important; margin: 0 0 6px !important; }
html body #root .guest-guide-heading .section-title {
  grid-area: title;
  text-align: left !important;
  font-size: clamp(48px, 6.2vw, 86px) !important;
  color: var(--ed-ink) !important;
  margin: 0 !important;
}
html body #root .guest-guide-heading .section-subtitle {
  grid-area: sub;
  text-align: left !important;
  margin: 22px 0 0 !important;
  max-width: 560px !important;
  color: var(--ed-mut) !important;
}

html body #root .stay-route { padding-top: 0 !important; margin-top: 44px !important; }
html body #root .stay-route::before,
html body #root .stay-route-marker::before,
html body #root .stay-route-marker::after { display: none !important; }
html body #root article.stay-route-stop {
  border-radius: var(--ed-radius) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 26px 22px 22px !important;
  display: flex !important;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
html body #root article.stay-route-stop:nth-child(1) { background: var(--ed-f-lav) !important;  --stop-ink: var(--ed-on-lav);  --stop-row: rgba(255,255,255,.62); }
html body #root article.stay-route-stop:nth-child(2) { background: var(--ed-f-sun) !important;  --stop-ink: var(--ed-on-sun);  --stop-row: rgba(255,255,255,.42); }
html body #root article.stay-route-stop:nth-child(3) { background: var(--ed-f-moss) !important; --stop-ink: var(--ed-on-moss); --stop-row: rgba(0,0,0,.2); }
html body #root article.stay-route-stop:nth-child(4) { background: var(--ed-f-clay) !important; --stop-ink: var(--ed-on-clay); --stop-row: rgba(0,0,0,.18); }
@media (prefers-color-scheme: dark) {
  html body #root article.stay-route-stop:nth-child(1) { --stop-row: rgba(255,255,255,.08); }
  html body #root article.stay-route-stop:nth-child(2) { --stop-row: rgba(255,255,255,.34); }
}
html body #root article.stay-route-stop,
html body #root article.stay-route-stop *,
html body #root article.stay-route-stop .stay-route-links a.guide-directory-link,
html body #root article.stay-route-stop .stay-route-links a.guide-directory-link strong,
html body #root article.stay-route-stop .stay-route-links a.guide-directory-link small,
html body #root article.stay-route-stop .stay-route-links a.guide-directory-link span,
html body #root article.stay-route-stop a.stay-route-cta,
html body #root article.stay-route-stop a.stay-route-cta span { color: var(--stop-ink) !important; }
html body #root .stay-route-marker {
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  display: block !important;
}
html body #root .stay-route-marker span {
  font-family: var(--font-poster) !important;
  font-weight: 800 !important;
  font-size: 64px !important;
  line-height: 0.8 !important;
  letter-spacing: -0.02em;
  background: none !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
html body #root p.stay-route-step {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 14px 0 0 !important;
}
html body #root .stay-route-copy h3 {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  line-height: 1.02 !important;
  margin: 8px 0 8px !important;
  letter-spacing: -0.005em;
}
html body #root .stay-route-copy > p { font-size: 14.5px !important; line-height: 1.5 !important; opacity: 0.88; }
html body #root ul.stay-route-links { border: 0 !important; margin-top: 16px !important; display: grid; gap: 6px; padding: 0 !important; }
html body #root ul.stay-route-links > li { border: 0 !important; }
html body #root .stay-route-links a.guide-directory-link,
html body #root article.stay-route-stop .stay-route-copy .stay-route-links a.guide-directory-link {
  background: var(--stop-row) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
}
html body #root .stay-route-links a.guide-directory-link small { opacity: 0.82; }
html body #root .stay-route-links a.guide-directory-link:hover strong { color: var(--stop-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
html body #root a.stay-route-cta { font-weight: 700 !important; letter-spacing: 0.08em !important; margin-top: 14px !important; text-decoration: underline; text-underline-offset: 4px; }
html body #root .stay-route-dots span { background: var(--ed-line) !important; }
html body #root .stay-route-dots span.is-active { background: var(--ed-accent) !important; }

/* ── Inside the house: rounded navy card + coloured stat tiles ───────── */
html body #root #inside-the-house .inside-house-heading h3 {
  font-size: clamp(46px, 5.6vw, 80px) !important;
  color: var(--ih-ink, #fff) !important;
}
html body #root #inside-the-house .inside-house-heading h3 em { color: var(--ih-accent, #FFB8A3) !important; }
html body #root #inside-the-house .inside-house-heading .guide-eyebrow { color: var(--ih-accent, #FFB8A3) !important; }
html body #root #inside-the-house .inside-display {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
html body #root #inside-the-house .inside-floor-n,
html body #root #inside-the-house .inside-floor-btn .inside-floor-n,
html body #root #inside-the-house .inside-floor-btn:not(.is-active) .inside-floor-n {
  font-family: var(--font-poster) !important;
  font-weight: 800 !important;
  background: var(--ed-f-sun) !important;
  color: var(--ed-on-sun) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  display: grid !important;
  place-items: center;
  font-size: 15px !important;
}
html body #root #inside-the-house .inside-tile--whole {
  border: 0 !important;
  border-radius: 24px !important;
}
html body #root #inside-the-house .inside-tile--whole:nth-of-type(1) { background: #E3E5F2 !important; --tile-ink: #22264A; }
html body #root #inside-the-house .inside-tile--whole:nth-of-type(2) { background: var(--ed-f-sun) !important; --tile-ink: var(--ed-on-sun); }
html body #root #inside-the-house .inside-tile--whole:nth-of-type(3) { background: var(--ed-f-moss) !important; --tile-ink: var(--ed-on-moss); }
html body #root #inside-the-house .inside-tile--whole:nth-of-type(4) { background: var(--ed-f-clay) !important; --tile-ink: var(--ed-on-clay); }
@media (prefers-color-scheme: dark) {
  html body #root #inside-the-house .inside-tile--whole:nth-of-type(1) { background: #D6D9F0 !important; }
}
html body #root #inside-the-house .inside-tile--whole,
html body #root #inside-the-house .inside-tile--whole *,
html body #root #inside-the-house .inside-tile.inside-tile--whole h4,
html body #root #inside-the-house .inside-tile.inside-tile--whole p,
html body #root #inside-the-house .inside-tile.inside-tile--whole .guide-eyebrow,
html body #root #inside-the-house .inside-tile.inside-tile--whole .inside-num { color: var(--tile-ink) !important; }
html body #root #inside-the-house .inside-tile.inside-tile--whole p { opacity: 0.85; }
html body #root #inside-the-house .inside-tile--whole .guide-eyebrow {
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  opacity: 0.75;
  font-size: 10.5px !important;
}
html body #root #inside-the-house .inside-tile--whole .inside-num {
  font-family: var(--font-poster) !important;
  font-weight: 800 !important;
}

/* ── Chapter index: coloured tiles ─────────────────────────────────────── */
html body #root nav.chapter-index { background: var(--ed-bg) !important; }
html body #root .chapter-index .ed-eyebrow { color: var(--ed-ink) !important; }
html body #root .chapter-index h2 {
  font-size: clamp(48px, 6vw, 84px) !important;
  color: var(--ed-ink) !important;
  margin: 18px 0 34px !important;
}
html body #root .chapter-index h2 em { display: inline; color: var(--ed-accent) !important; margin-left: 0.12em; }
html body #root .chapter-index ul { gap: 14px !important; }
html body #root .chapter-index button {
  border-radius: 22px !important;
  padding: 22px 20px 20px !important;
  aspect-ratio: 1 / 1.08;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
html body #root .chapter-index li:nth-child(1) button { background: var(--ed-f-lav) !important;   --ch-ink: var(--ed-on-lav); }
html body #root .chapter-index li:nth-child(2) button { background: var(--ed-f-sun) !important;   --ch-ink: var(--ed-on-sun); }
html body #root .chapter-index li:nth-child(3) button { background: var(--ed-f-moss) !important;  --ch-ink: var(--ed-on-moss); }
html body #root .chapter-index li:nth-child(4) button { background: var(--ed-f-paper) !important; --ch-ink: var(--ed-on-paper); box-shadow: 0 0 0 1px var(--ed-line); }
html body #root .chapter-index li:nth-child(5) button { background: var(--ed-f-clay) !important;  --ch-ink: var(--ed-on-clay); }
html body #root .chapter-index button,
html body #root .chapter-index button * { color: var(--ch-ink) !important; }
html body #root .chapter-index button:hover { transform: translateY(-4px); box-shadow: 0 14px 30px var(--ed-shadow); }
html body #root .chapter-index button.is-open { outline: 3px solid var(--ed-ink) !important; outline-offset: 4px; }
.chapter-index-num {
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 0.8;
  margin-bottom: auto;
}
html body #root .chapter-index button small {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0 !important;
}
html body #root .chapter-index button strong {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  line-height: 1 !important;
  margin: 0 !important;
}
html body #root .chapter-index-summary { font-size: 13px !important; line-height: 1.4 !important; opacity: 0.85; }

/* Phones: chapter cards in the same colours */
html body #root .chapter-fold:nth-of-type(1) .chapter-card { --cc-bg: var(--ed-f-lav);   --cc-ink: var(--ed-on-lav); }
html body #root .chapter-fold:nth-of-type(2) .chapter-card { --cc-bg: var(--ed-f-sun);   --cc-ink: var(--ed-on-sun); }
html body #root .chapter-fold:nth-of-type(3) .chapter-card { --cc-bg: var(--ed-f-moss);  --cc-ink: var(--ed-on-moss); }
html body #root .chapter-fold:nth-of-type(4) .chapter-card { --cc-bg: var(--ed-f-paper); --cc-ink: var(--ed-on-paper); }
html body #root .chapter-fold:nth-of-type(5) .chapter-card { --cc-bg: var(--ed-f-clay);  --cc-ink: var(--ed-on-clay); }
html body #root button.chapter-card {
  background: var(--cc-bg, var(--ed-card)) !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: none !important;
}
html body #root button.chapter-card,
html body #root button.chapter-card * { color: var(--cc-ink, var(--ed-ink)) !important; }
html body #root .chapter-card-text strong {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 26px !important;
}
html body #root .chapter-card-toggle {
  font-family: var(--font-poster) !important;
  font-weight: 800 !important;
  border-color: currentColor !important;
  background: transparent !important;
}

/* ── Footer: clay sign-off, navy contact bar ──────────────────────────── */
html body #root footer.site-footer { background: var(--ed-foot-bar) !important; }
html body #root .site-footer-hero {
  background: var(--ed-foot) !important;
  text-align: left !important;
  padding: clamp(70px, 9vw, 120px) clamp(18px, 6vw, 120px) clamp(50px, 6vw, 72px) !important;
  min-height: 0 !important;
  display: block !important;
}
html body #root .site-footer-hero::before,
html body #root .site-footer-hero::after { display: none !important; }
html body #root .site-footer-hero > * { max-width: 1184px; margin-left: auto !important; margin-right: auto !important; }
html body #root .site-footer-hero .site-footer-eyebrow { display: table; color: var(--ed-foot-ink) !important; margin-left: 0 !important; }
@media (min-width: 1300px) {
  html body #root .site-footer-hero .site-footer-eyebrow { margin-left: calc((100% - 1184px) / 2) !important; }
}
html body #root .site-footer-hero h2 {
  font-size: clamp(64px, 10.4vw, 150px) !important;
  color: var(--ed-foot-ink) !important;
  margin-top: 22px !important;
  margin-bottom: 0 !important;
  text-align: left !important;
  text-shadow: none !important;
}
html body #root .site-footer-hero h2 em { color: var(--ed-foot-acc) !important; }
html body #root .site-footer-hero blockquote {
  color: var(--ed-foot-ink) !important;
  text-align: left !important;
  font-size: clamp(16px, 1.3vw, 18px) !important;
  line-height: 1.6 !important;
  margin-top: 28px !important;
  max-width: 1184px;
}
html body #root .site-footer-hero blockquote .tr-mask:last-child { margin-right: 0; }
html body #root .site-footer-sig {
  color: var(--ed-foot-ink) !important;
  opacity: 0.85;
  text-align: left !important;
  letter-spacing: 0.16em !important;
}
html body #root .stay-connected-pill { background: var(--ed-f-clay) !important; color: #fff !important; }

/* ── Phones ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .ed-masthead { padding-top: 16px; padding-bottom: 16px; }
  html body #root .ed-masthead-nav a:not(.is-lead) { display: none; }
  html body #root .ed-hero-title { font-size: clamp(50px, 15.5vw, 66px) !important; }
  html body #root .ed-hero-title em { display: block; }
  .ed-hero-row { display: block; margin: 18px 0 56px; }
  html body #root .ed-hero .hero-subtitle { font-size: 16px !important; margin-bottom: 22px !important; }
  .ed-pano { margin-bottom: 50px; }
  .ed-pano-frame { height: 300px; border-radius: 24px; }
  .ed-pano-frame img { object-position: 30% 42%; }
  html body #root .ed-pano-frame figcaption { font-size: 15px; left: 18px; bottom: 16px; right: auto; text-align: left; }
  html body #root .ed-stamp { width: 92px; height: 92px; left: auto; right: 8px; bottom: auto; top: -46px; }
  .ed-stamp b { font-size: 27px; }
  .ed-stamp small { font-size: 8px; }
  html body #root .ed-ticker-run li { font-size: 15px; }
  html body #root .ed-ticker-run li.is-aside { font-size: 19px; }
  .ed-ticker-star { margin: 0 16px; }

  html body #root .guest-guide-heading { grid-template-columns: 1fr; grid-template-areas: "title" "tag" "sub"; }
  html body #root .guest-guide-heading .guide-eyebrow { justify-self: start; margin: 16px 0 0 !important; }
  html body #root .stay-route-marker span { font-size: 52px !important; }
  html body #root .stay-route-copy h3 { font-size: 28px !important; }


  html body #root .site-footer-hero h2 { font-size: clamp(56px, 18vw, 76px) !important; }
  html body #root .ed-title { font-size: clamp(24px, 7vw, 40px) !important; }
  html body #root .chapter-index h2,
  html body #root .guest-guide-heading .section-title { font-size: clamp(44px, 13vw, 56px) !important; }
}

/* Mosaic floor numbers in the same yellow discs as the floor list */
html body #root #inside-the-house .inside-whole-cell i {
  background: var(--ed-f-sun) !important;
  color: var(--ed-on-sun) !important;
  font-family: var(--font-poster) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  border: 0 !important;
}

/* Visible keyboard focus on the new controls */
html body #root .ed-logo:focus-visible,
html body #root .ed-masthead-nav a:focus-visible,
html body #root .ed-btn:focus-visible,
html body #root .chapter-index button:focus-visible,
html body #root button.chapter-card:focus-visible {
  outline: 3px solid var(--ed-accent) !important;
  outline-offset: 3px !important;
  border-radius: 40px;
}
html body #root .chapter-index button:focus-visible,
html body #root button.chapter-card:focus-visible { border-radius: 22px !important; }

/* Tablets and small laptops: route cards two by two so link labels fit */
@media (min-width: 769px) and (max-width: 1180px) {
  html body #root .stay-route {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  html body #root .stay-route-stop,
  html body #root .stay-route-stop + .stay-route-stop,
  html body #root .stay-route-stop:nth-child(n+3) { margin-top: 0 !important; }
}
/* Chapter tiles stay in one row of five down to 900px */
@media (min-width: 900px) and (max-width: 1024px) {
  html body #root .chapter-index ul { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body #root .chapter-index button { padding: 18px 14px 16px !important; }
  html body #root .chapter-index-summary { display: none; }
}
@media (min-width: 769px) and (max-width: 899px) {
  html body #root .chapter-index button { aspect-ratio: auto; min-height: 190px; }
}


/* ── Design QA pass ───────────────────────────────────────────────────── */
/* One content column everywhere: the site container (1240px, --cz-gutter). */
html body #root section.the-table { padding-left: 0 !important; padding-right: 0 !important; }
html body #root .the-table-inner {
  max-width: var(--cz-max, 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--cz-gutter, 3.5rem) !important;
  padding-right: var(--cz-gutter, 3.5rem) !important;
}
@media (min-width: 769px) {
  html body #root .guest-guide-container {
    max-width: var(--cz-max, 1240px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--cz-gutter, 3.5rem) !important;
    padding-right: var(--cz-gutter, 3.5rem) !important;
  }
}
html body #root #essentials > .container {
  max-width: var(--cz-max, 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--cz-gutter, 3.5rem) !important;
  padding-right: var(--cz-gutter, 3.5rem) !important;
  width: 100% !important;
  box-sizing: border-box;
}
html body #root .site-footer-hero {
  padding-left: max(var(--cz-gutter, 3.5rem), calc((100% - var(--cz-max, 1240px)) / 2 + var(--cz-gutter, 3.5rem))) !important;
  padding-right: max(var(--cz-gutter, 3.5rem), calc((100% - var(--cz-max, 1240px)) / 2 + var(--cz-gutter, 3.5rem))) !important;
}
html body #root .site-footer-hero > *,
html body #root .site-footer-hero .site-footer-eyebrow { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
html body #root .site-footer-hero blockquote { max-width: 760px !important; }

/* Headlines wrap into even lines instead of leaving one word behind. */
html body #root .ed-hero-title,
html body #root .section-title,
html body #root .ed-title,
html body #root .site-footer-hero h2 { text-wrap: balance; }

/* Skyline caption stays readable over the city. */
.ed-pano-frame::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(20, 22, 43, 0) 0%, rgba(20, 22, 43, 0.55) 100%);
  pointer-events: none;
}
html body #root .ed-pano-frame figcaption { z-index: 1; }

/* Seasons month heading uses the same accent as every other heading. */
html body #root .almanac-detail-head h3 span {
  color: var(--ed-accent-text) !important;
  font-style: italic;
}

/* Dark mode: the white "paper" chapter tile/card keeps an edge so it
   doesn't merge with the lavender one; the facts strip gets hairlines. */
@media (prefers-color-scheme: dark) {
  html body #root .chapter-index li:nth-child(4) button,
  html body #root .chapter-fold:nth-of-type(4) .chapter-card { box-shadow: inset 0 0 0 1.5px rgba(236, 236, 247, 0.22) !important; }
  html body #root .ed-ticker { box-shadow: inset 0 1px 0 rgba(236, 236, 247, 0.08), inset 0 -1px 0 rgba(236, 236, 247, 0.08); }
}

/* Phones: stay-route cards read left-aligned, like everything else. */
@media (max-width: 768px) {
  html body #root .stay-route-marker,
  html body #root p.stay-route-step { text-align: left !important; justify-self: start !important; align-self: start; }
  html body #root .stay-route-marker span { display: block !important; text-align: left !important; }
}
html body #root .site-footer-cols,
html body #root .site-footer-bar {
  max-width: var(--cz-max, 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--cz-gutter, 3.5rem) !important;
  padding-right: var(--cz-gutter, 3.5rem) !important;
  box-sizing: border-box;
}