/* Illustrated picture-map layer: the hero poster, Around the Hill, stay-route stamps.
   Loaded after editorial.css. Mustard land, aqua water, navy and coral, cream paper. */
:root {
  --il-mustard: #F3C35B;
  --il-sand: #F8DA8C;
  --il-navy: #263A72;
  --il-coral: #E4573D;
  --il-cream: #FFF7E6;
  --il-ink: #232535;
  --font-hand: 'Patrick Hand', 'Comic Sans MS', cursive;
}

/* ── Hero poster: a sunset in light mode, the same view at night in dark mode ── */
html body #root section.ed-hero {
  --hx-ink: #263A72;
  --hx-mut: rgba(35, 37, 53, 0.82);
  --hx-dim: rgba(35, 37, 53, 0.68);
  --hx-coral: #E4573D;
  --hx-navy: #FFF7E6;
  --hx-line: rgba(38, 58, 114, 0.2);
  --hx-glass: #FFF7E6;
  --hx-glass-line: #263A72;
  --hx-shadow: none;
  background: #F6B3A6 !important;
}
html body #root .ed-hero-photo::after { display: none; }
.ed-hero-photo svg { display: block; width: 100%; height: 100%; }
.ed-hero-photo .il-hero-art.is-phone { display: none; }
.il-stars { display: none; }
html body #root .ed-hero-title .ed-fade { color: var(--il-ink); }

html body #root .ed-hero .ed-tag {
  background: var(--il-cream) !important;
  border: 2px solid var(--il-navy) !important;
  color: var(--il-navy) !important;
  font: 400 15px var(--font-hand) !important;
  letter-spacing: 0.06em !important;
  backdrop-filter: none !important;
}
html body #root .ed-hero .ed-ask-bar {
  background: var(--il-cream);
  border: 2.5px solid var(--il-navy);
  box-shadow: 4px 5px 0 var(--il-navy);
  backdrop-filter: none;
}
html body #root .ed-hero .ed-ask-bar:focus-within { border-color: var(--il-navy); box-shadow: 4px 5px 0 var(--il-coral); }
html body #root .ed-hero .ed-ask-results {
  background: var(--il-cream);
  border: 2.5px solid var(--il-navy);
  box-shadow: 4px 5px 0 var(--il-navy);
  backdrop-filter: none;
}
html body #root .ed-hero .ed-ask-chips button {
  background: var(--il-cream) !important;
  border: 2px solid var(--il-navy) !important;
  color: var(--il-navy) !important;
  font: 400 16px var(--font-hand) !important;
  backdrop-filter: none !important;
}
html body #root .ed-hero .ed-ask-chips button:hover { background: var(--il-sand) !important; }
html body #root .ed-hero .ed-ask-chips b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--il-coral);
  color: #fff;
  font: 600 11px var(--font-main);
}
html body #root .ed-hero .ed-btn {
  background: var(--il-navy) !important;
  color: var(--il-cream) !important;
  box-shadow: 4px 5px 0 var(--il-coral) !important;
}
html body #root .ed-hero .ed-btn:hover { box-shadow: 4px 7px 0 var(--il-coral) !important; }
html body #root .ed-hero .ed-ticker { background: var(--il-navy) !important; border: 0 !important; }
html body #root .ed-hero .ed-ticker-run li { color: var(--il-cream) !important; }
html body #root .ed-hero .ed-ticker-star { color: var(--il-mustard); }

@media (max-width: 760px) {
  /* a short drawn band (Needle and rooftop), then the column on cream */
  html body #root section.ed-hero { --hx-band: clamp(170px, 24svh, 200px); background: var(--il-cream) !important; }
  .ed-hero-photo .il-hero-art { display: none; }
  .ed-hero-photo .il-hero-art.is-phone { display: block; }
  html body #root .ed-hero-stage { padding-top: calc(var(--hx-band) - 16px); }
}

/* ── Around the Hill: the picture map stands in for the photo; every place is a numbered dot ── */
html body #root .around-map { position: sticky; top: 96px; margin: 0; }
.il-map-art { display: block; width: 100%; height: auto; }
html body #root .around-map figcaption { margin-top: 12px; }
html body #root .around-map figcaption p { margin: 0; font: 400 18px/1.35 var(--font-hand); color: var(--il-navy); }
html body #root .around-map .around-chips a,
html body #root .around-map .around-chips li > span {
  background: var(--il-cream) !important;
  border: 2px solid var(--il-navy);
  color: var(--il-navy) !important;
  backdrop-filter: none;
}
html body #root .around-map .around-chips a:hover { background: var(--il-sand) !important; }
.around-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--il-coral);
  color: #fff;
  font: 600 12px var(--font-main);
  transition: background 0.15s ease, transform 0.15s ease;
}
.around-num.is-off-map { background: transparent; color: var(--il-coral); border: 2px dashed var(--il-coral); font-size: 13px; }
a.around-row:hover .around-num:not(.is-off-map),
a.around-row:focus-visible .around-num:not(.is-off-map) { background: var(--il-navy); transform: scale(1.12); }
.il-stop circle { transition: r 0.2s ease; }
@media (max-width: 1024px) {
  html body #root .around-map { position: relative; top: 0; max-width: 560px; margin: 0 auto; }
  /* heading first, then the map, then the list */
  html body #root .around-layout > .around-main { display: contents; }
  html body #root .around-main > header { order: -1; }
}

/* ── Stay route on a mustard sheet: each picture is a postage stamp (perforated paper
   rim, slight tilt); the step and its links sit on the sheet below it ───────────── */
html body #root .stay-route { --il-sheet: var(--il-mustard); --il-paper: var(--il-cream); background: var(--il-sheet); border-radius: 28px; padding: 40px 36px 44px !important; }
html body #root .stay-route > article.stay-route-stop:nth-child(n) {
  --stop-ink: #263A72;
  --stop-row: rgba(255, 247, 230, 0.6);
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible;
}
html body #root .stay-route .stay-route-scene {
  flex: none;
  margin: 0 0 22px;
  border: 9px solid transparent;
  padding: 6px;
  background:
    linear-gradient(var(--il-paper), var(--il-paper)) padding-box,
    radial-gradient(circle 6px at 0 0, var(--il-sheet) 98%, var(--il-paper)) 0 0 / 18px 18px border-box;
  filter: drop-shadow(0 5px 0 rgba(38, 58, 114, 0.16));
}
html body #root .stay-route > article.stay-route-stop:nth-child(odd) .stay-route-scene { rotate: -2deg; }
html body #root .stay-route > article.stay-route-stop:nth-child(even) .stay-route-scene { rotate: 1.6deg; }
.stay-route-scene svg { display: block; width: 100%; height: auto; }
html body #root .stay-route .stay-route-links a.guide-directory-link:hover { background: var(--il-paper) !important; }
html body #root article.stay-route-stop .stay-route-marker span { color: var(--il-coral) !important; font-size: 34px !important; }
@media (max-width: 760px) {
  html body #root .stay-route { border-radius: 0; margin-left: -20px !important; margin-right: -20px !important; padding: 28px 20px 32px !important; }
  html body #root .stay-route > article.stay-route-stop:nth-child(odd) .stay-route-scene { rotate: -1deg; }
  html body #root .stay-route > article.stay-route-stop:nth-child(even) .stay-route-scene { rotate: 1deg; }
}
/* ── The guide: a wooden signpost on the hill, one plank per chapter. Desktop
   shows the whole post; phones turn each chapter card into a plank on a post
   running down the left. ─────────────────────────────────────────────── */
html body #root { --ci-sky: #CFE8EC; --ci-wood: #C98A4B; --ci-plank: var(--il-sand); --ci-land: var(--il-mustard); --ci-sun: var(--il-mustard); }
html body #root nav.chapter-index { position: relative; overflow: hidden; background: var(--ci-sky) !important; padding: 64px 0 120px !important; }
.chapter-index-scene { position: absolute; inset: 0; pointer-events: none; }
.chapter-index-scene svg { position: absolute; display: block; }
.ci-sun { top: 44px; right: 7%; width: 110px; }
.ci-sun circle { fill: var(--ci-sun); stroke: var(--il-navy); stroke-width: 3; }
.ci-cloud { left: 9%; top: 56%; width: 150px; }
.ci-hill { left: 0; bottom: 0; width: 100%; height: 140px; }
.ci-hill path { fill: var(--ci-land); stroke: var(--il-navy); stroke-width: 3; vector-effect: non-scaling-stroke; }
.ci-trees { left: 8%; bottom: 74px; width: 110px; }
html body #root .chapter-index-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); row-gap: 16px; align-items: center; }
.chapter-index-head { grid-column: 1; grid-row: 1; align-self: start; padding-bottom: 20px; }
html body #root .chapter-index h2 { margin: 12px 0 0 !important; color: var(--il-navy) !important; }
html body #root .chapter-index ul { display: contents !important; }
html body #root .chapter-index li:nth-child(odd) { grid-column: 3; justify-self: start; }
html body #root .chapter-index li:nth-child(even) { grid-column: 1; justify-self: end; }
html body #root .chapter-index li:nth-child(1) { grid-row: 1; }
html body #root .chapter-index li:nth-child(2) { grid-row: 2; }
html body #root .chapter-index li:nth-child(3) { grid-row: 3; }
html body #root .chapter-index li:nth-child(4) { grid-row: 4; }
html body #root .chapter-index li:nth-child(5) { grid-row: 5; }
.chapter-index-post { grid-column: 2; grid-row: 1 / 6; align-self: stretch; position: relative; margin: -34px 1px -110px; background: var(--ci-wood); border: 3px solid var(--il-navy); border-radius: 4px; }
.chapter-index-post::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -14px; width: 26px; height: 26px; translate: -50% 0; rotate: 45deg; background: var(--il-coral); border: 3px solid var(--il-navy); }

/* a plank: navy edge (::before) and painted board (::after), cut to an arrow */
html body #root nav.chapter-index li:nth-child(n) button,
html body #root .chapter-fold:nth-of-type(n) button.chapter-card {
  --plank: polygon(0 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%);
  --plank-in: polygon(0 0, calc(100% - 39px) 0, 100% 50%, calc(100% - 39px) 100%, 0 100%);
  --ch-ink: var(--il-navy); --cc-ink: var(--il-navy); --plank-fill: var(--ci-plank);
  position: relative; isolation: isolate;
  flex-direction: row !important; align-items: center; gap: 16px;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; outline: none !important; aspect-ratio: auto !important;
  text-align: left; cursor: pointer;
  filter: drop-shadow(0 6px 0 rgba(38, 58, 114, 0.2));
  transition: transform 0.25s ease;
}
html body #root nav.chapter-index li:nth-child(n) button::before, html body #root .chapter-fold:nth-of-type(n) button.chapter-card::before,
html body #root nav.chapter-index li:nth-child(n) button::after, html body #root .chapter-fold:nth-of-type(n) button.chapter-card::after { content: ""; position: absolute; z-index: -1; }
html body #root nav.chapter-index li:nth-child(n) button::before, html body #root .chapter-fold:nth-of-type(n) button.chapter-card::before { inset: 0; background: var(--il-navy); clip-path: var(--plank); }
html body #root nav.chapter-index li:nth-child(n) button::after, html body #root .chapter-fold:nth-of-type(n) button.chapter-card::after {
  inset: 3px; clip-path: var(--plank-in);
  background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(38, 58, 114, 0.08) 22px 24px), var(--plank-fill);
}
html body #root nav.chapter-index li:nth-child(n) button.is-open,
html body #root .chapter-fold:nth-of-type(n) button.chapter-card[aria-expanded="true"] { --plank-fill: var(--il-coral); --ch-ink: var(--il-cream); --cc-ink: var(--il-cream); }
html body #root nav.chapter-index li:nth-child(n) button:hover { transform: translateY(-3px); box-shadow: none !important; }
html body #root nav.chapter-index li:nth-child(n) button:focus-visible,
html body #root .chapter-fold:nth-of-type(n) button.chapter-card:focus-visible { outline: 3px solid var(--il-navy) !important; outline-offset: 4px; border-radius: 6px !important; }

html body #root nav.chapter-index li:nth-child(n) button { display: flex !important; width: min(460px, 100%); min-height: 104px; padding: 14px 58px 14px 22px !important; }
html body #root nav.chapter-index li:nth-child(even) button {
  --plank: polygon(40px 0, 100% 0, 100% 100%, 40px 100%, 0 50%);
  --plank-in: polygon(39px 0, 100% 0, 100% 100%, 39px 100%, 0 50%);
  flex-direction: row-reverse !important; text-align: right; padding: 14px 22px 14px 58px !important;
}
html body #root nav.chapter-index li:nth-child(1) button { rotate: -2deg; }
html body #root nav.chapter-index li:nth-child(2) button { rotate: 1.5deg; }
html body #root nav.chapter-index li:nth-child(3) button { rotate: 2deg; }
html body #root nav.chapter-index li:nth-child(4) button { rotate: -1.5deg; }
html body #root nav.chapter-index li:nth-child(5) button { rotate: -1deg; }
.chapter-index-badge, .chapter-card-badge { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--il-cream); border: 3px solid var(--il-navy); }
.chapter-index-badge svg { width: 44px; height: 44px; }
.chapter-index-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.chapter-index-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
html body #root nav.chapter-index li:nth-child(even) .chapter-index-row { justify-content: flex-end; }
html body #root nav.chapter-index li:nth-child(n) button .chapter-index-num { font-size: 26px; line-height: 1; margin: 0; color: var(--il-coral) !important; }
html body #root nav.chapter-index li:nth-child(n) button.is-open .chapter-index-num { color: var(--il-cream) !important; }
html body #root nav.chapter-index li:nth-child(n) button small,
html body #root .chapter-fold:nth-of-type(n) button.chapter-card small { font: 400 17px/1.1 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; opacity: 1 !important; margin: 0 !important; }
.chapter-index-hint { font: 400 15px/1.1 var(--font-hand); }
html body #root nav.chapter-index li:nth-child(n) button strong { font-size: clamp(24px, 2.4vw, 30px) !important; }

@media (max-width: 768px) {
  html body #root nav.chapter-index { display: block !important; padding: 36px 0 0 !important; }
  html body #root .chapter-index-scene, html body #root .chapter-index ul { display: none !important; }
  html body #root .chapter-index-inner { display: block; height: 196px; padding: 0 22px !important; }
  .chapter-index-post { position: absolute; left: 26px; bottom: 0; width: 22px; height: 34px; margin: 0; border-bottom: 0; border-radius: 4px 4px 0 0; }
  html body #root .chapter-fold[data-chapter] { --fold-bg: var(--ci-sky); position: relative; box-shadow: 0 1px 0 var(--ci-sky); }
  html body #root .chapter-fold::before { content: ""; position: absolute; left: 26px; top: 0; bottom: -1px; z-index: 1; width: 22px; box-sizing: border-box; background: var(--ci-wood); border: 3px solid var(--il-navy); border-width: 0 3px; }
  html body #root .chapter-fold.is-open::before { bottom: auto; height: 122px; border-bottom-width: 3px; border-radius: 0 0 4px 4px; }
  html body #root .chapter-fold:last-of-type:not(.is-open) { padding-bottom: 64px; background: linear-gradient(to top, var(--ci-land) 0 40px, var(--il-navy) 40px 43px, var(--ci-sky) 43px) !important; }
  html body #root .chapter-fold:last-of-type:not(.is-open)::before { bottom: 30px; }
  html body #root .chapter-fold:nth-of-type(n) button.chapter-card { display: flex !important; width: calc(100% - 68px) !important; height: 96px; margin: 0 20px 0 48px !important; padding: 0 46px 0 14px !important; gap: 12px; }
  html body #root .chapter-fold:nth-of-type(odd) .chapter-card { rotate: -1.2deg; }
  html body #root .chapter-fold:nth-of-type(even) .chapter-card { rotate: 1.2deg; }
  .chapter-card-badge { width: 52px; height: 52px; }
  .chapter-card-badge svg { width: 36px; height: 36px; }
  html body #root .chapter-card-text > span, html body #root .chapter-card-toggle { display: none !important; }
  html body #root .chapter-fold:nth-of-type(n) button.chapter-card small { font-size: 15px !important; }
  html body #root .chapter-card-text strong { font-size: 25px !important; line-height: 1.05 !important; }
}

/* ── Essentials: the house binder. Each topic is a cream paper card with a drawn
   icon; photos are taped-in snapshots and tips are notes stuck to the page. ── */
html body #root #essentials { --es-bg: var(--il-sand); --es-card: var(--il-cream); --es-ink: var(--il-ink); --es-head: var(--il-navy); --es-line: var(--il-navy); --es-note: #FCE7B0; --es-warn: #FBDCD2; background: var(--es-bg) !important; }
html body #root #essentials .section-title.ed-title { color: var(--es-head) !important; }
html body #root #essentials .section-title.ed-title em { color: var(--il-coral) !important; }
html body #root #essentials .section-subtitle.ed-lede { color: var(--es-ink) !important; }
html body #root #essentials .essentials-accordion { border: 0 !important; display: grid; gap: 16px; }
html body #root #essentials div.accordion-item {
  background: var(--es-card) !important; border: 2.5px solid var(--es-line) !important; border-radius: 20px !important;
  box-shadow: 4px 5px 0 var(--es-line) !important; overflow: hidden;
}
html body #root #essentials .accordion-item button.accordion-header {
  grid-template-columns: 64px minmax(0, 1fr) auto 38px !important; gap: 0 18px !important;
  padding: 14px 18px !important; background: none !important; border: 0 !important; color: var(--es-head) !important;
}
html body #root #essentials .accordion-item button.accordion-header:hover { background: rgba(243, 195, 91, .22) !important; }
html body #root #essentials .accordion-item button.accordion-header:focus-visible { outline: 3px solid var(--il-coral) !important; outline-offset: -6px !important; }
html body #root #essentials .accordion-item span.accordion-number { display: none !important; }
html body #root #essentials .accordion-badge {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--il-cream); border: 2.5px solid var(--il-navy); box-sizing: border-box;
}
html body #root #essentials .accordion-badge svg { width: 42px; height: 42px; }
html body #root #essentials .accordion-item span.accordion-title { color: var(--es-head) !important; font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important; }
html body #root #essentials .accordion-item span.accordion-count {
  font-family: var(--font-hand) !important; font-size: 18px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important;
  padding: 3px 14px !important; color: var(--il-navy) !important; background: var(--il-sand) !important; border: 2px solid var(--il-navy) !important;
}
html body #root #essentials .accordion-item.active span.accordion-count { color: var(--il-cream) !important; background: var(--il-coral) !important; }
html body #root #essentials .accordion-item svg.accordion-icon {
  width: 38px !important; height: 38px !important; padding: 8px; box-sizing: border-box; border-radius: 50%;
  color: var(--il-navy) !important; background: var(--il-cream); border: 2px solid var(--il-navy);
}
html body #root #essentials .accordion-item.active svg.accordion-icon { color: var(--il-cream) !important; background: var(--il-navy); }
html body #root #essentials .accordion-item.active div.accordion-content { border-top: 2px dashed rgba(38, 58, 114, .35); padding: 0 !important; }
html body #root #essentials div.essential-full-card { background: none !important; padding: clamp(18px, 2.6vw, 34px) !important; }
/* Snapshot taped into the binder */
html body #root #essentials div.essential-full-image {
  padding: 10px 10px 30px; background: #fff !important; border: 2.5px solid var(--il-navy); border-radius: 6px !important;
  box-shadow: 4px 5px 0 rgba(38, 58, 114, .2); transform: rotate(-1.5deg); box-sizing: border-box; overflow: visible;
}
html body #root #essentials div.essential-full-image::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 84px; height: 24px; margin-left: -42px;
  background: rgba(134, 198, 211, .75); transform: rotate(3deg); z-index: 1;
}
html body #root #essentials div.essential-full-image img { border-radius: 2px; }
html body #root #essentials .essential-full-info h4 { color: var(--es-head) !important; }
html body #root #essentials .essential-full-info p,
html body #root #essentials .essential-full-info li { color: var(--es-ink) !important; }
html body #root #essentials .essential-full-info strong { color: var(--es-head) !important; }
/* Notes stuck to the page */
html body #root #essentials .essential-full-info .local-tip,
html body #root #essentials .essential-full-info .pro-tip-inline,
html body #root #essentials .essential-full-info .walk-score-highlight,
html body #root #essentials .essential-full-info .note {
  background: var(--es-note) !important; color: var(--il-ink) !important; border: 2px solid var(--il-navy) !important;
  border-radius: 14px !important; padding: 14px 18px !important;
}
html body #root #essentials .essential-full-info .pro-tip-inline { background: #DCEEF1 !important; }
html body #root #essentials .essential-full-info .note { background: transparent !important; border-style: dashed !important; color: var(--es-ink) !important; }
html body #root #essentials .essential-full-info .warning-text { background: var(--es-warn) !important; color: var(--il-ink) !important; border: 2px solid var(--il-coral) !important; border-radius: 14px !important; padding: 14px 18px !important; }
html body #root #essentials .essential-full-info :is(.local-tip, .pro-tip-inline, .walk-score-highlight, .warning-text) :is(strong, em) { color: var(--il-ink) !important; }
html body #root #essentials .essential-full-info .sub-accordion-item { border-top: 2px dashed rgba(38, 58, 114, .3) !important; }
html body #root #essentials .essential-full-info button.sub-accordion-header h4 { color: var(--es-head) !important; }
html body #root #essentials .essential-full-info svg.sub-accordion-icon { color: var(--il-coral) !important; }
@media (max-width: 768px) {
  html body #root #essentials .accordion-item button.accordion-header { grid-template-columns: 48px minmax(0, 1fr) 34px !important; gap: 6px 14px !important; padding: 12px 14px !important; }
  html body #root #essentials .accordion-badge { width: 48px; height: 48px; grid-row: 1 / 3; }
  html body #root #essentials .accordion-badge svg { width: 32px; height: 32px; }
  html body #root #essentials .accordion-item span.accordion-title { font-size: 1.3rem !important; grid-column: 2; }
  html body #root #essentials .accordion-item span.accordion-count { grid-column: 2 !important; grid-row: 2 !important; font-size: 16px !important; padding: 1px 12px !important; }
  html body #root #essentials .accordion-item svg.accordion-icon { grid-column: 3 !important; grid-row: 1 / 3 !important; width: 34px !important; height: 34px !important; padding: 7px; }
  html body #root #essentials div.essential-full-image { transform: rotate(-1deg); }
}

/* ── Seasons & events: months as postage stamps, events as admission tickets
   with a coloured stub for the main tag, four per page (three on phones). ── */
html body #root #climate { --al-bg: var(--il-sand); --al-paper: var(--il-cream); --al-head: var(--il-navy); --al-ink: var(--il-ink); background: var(--al-bg) !important; color: var(--al-ink) !important; }
html body #root #climate .ed-title { color: var(--al-head) !important; }
html body #root #climate .ed-title em { color: var(--il-coral) !important; }
html body #root #climate p.almanac-season { padding: 8px 18px !important; border: 2.5px solid var(--il-navy) !important; border-radius: 999px; background: var(--il-cream) !important; box-shadow: 4px 5px 0 var(--il-navy); color: var(--il-navy) !important; font: 400 18px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #climate p.almanac-season > span { color: var(--il-coral) !important; }
/* Month stamps */
html body #root #climate li.almanac-card { margin-top: 0 !important; }
html body #root #climate span.almanac-card-arch {
  aspect-ratio: 3 / 3.5; border-radius: 0 !important; outline: 0 !important; overflow: visible;
  border: 9px solid transparent; padding: 6px; box-sizing: border-box;
  background: linear-gradient(var(--al-paper), var(--al-paper)) padding-box, radial-gradient(circle 6px at 0 0, var(--al-bg) 98%, var(--al-paper)) 0 0 / 18px 18px border-box !important;
  filter: drop-shadow(0 5px 0 rgba(38, 58, 114, .16)); transform: rotate(-2deg); transition: transform .25s ease;
}
html body #root #climate li.almanac-card:nth-child(even) span.almanac-card-arch { transform: rotate(1.6deg); }
html body #root #climate span.almanac-card-arch img { filter: none !important; transform: none !important; }
html body #root #climate button.almanac-card-button:hover span.almanac-card-arch { transform: rotate(0) translateY(-4px); }
html body #root #climate button.almanac-card-button.is-selected span.almanac-card-arch { background: linear-gradient(var(--al-paper), var(--al-paper)) padding-box, radial-gradient(circle 6px at 0 0, var(--al-bg) 98%, var(--il-coral)) 0 0 / 18px 18px border-box !important; }
html body #root #climate button.almanac-card-button:focus-visible span.almanac-card-arch { outline: 3px solid var(--il-navy) !important; outline-offset: 4px !important; }
html body #root #climate span.almanac-card-now { bottom: 10px; padding: 1px 10px 0; background: var(--il-navy) !important; color: var(--il-cream) !important; font: 400 15px/1.4 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #climate span.almanac-card-no { display: none !important; }
html body #root #climate span.almanac-card-name { margin-top: 14px; text-align: center; color: var(--al-head) !important; font-style: italic; }
html body #root #climate button.almanac-card-button.is-selected span.almanac-card-name { color: var(--il-coral) !important; }
html body #root #climate span.almanac-card-theme { text-align: center; color: var(--al-ink) !important; opacity: .8; font: 400 16px/1.25 var(--font-hand) !important; }
/* Month detail */
html body #root #climate div.almanac-detail-head > h3 { color: var(--al-head) !important; font: 800 clamp(30px, 3.4vw, 42px)/1 var(--font-poster, Syne, sans-serif) !important; text-transform: uppercase; letter-spacing: -.02em; }
html body #root #climate div.almanac-detail-head > h3 > span { color: var(--il-coral) !important; font: italic 400 .8em var(--font-display) !important; text-transform: none; letter-spacing: 0; }
html body #root #climate p.almanac-count { color: var(--al-head) !important; font: 400 18px var(--font-hand) !important; }
html body #root #climate div.almanac-filters > button { padding: 4px 14px 3px !important; border: 2px solid var(--il-navy) !important; background: var(--il-cream) !important; color: var(--il-navy) !important; font: 400 17px/1.3 var(--font-hand) !important; }
html body #root #climate div.almanac-filters > button.is-active { background: var(--il-navy) !important; color: var(--il-cream) !important; }
html body #root #climate div.almanac-filters > button:focus-visible { outline: 3px solid var(--il-coral) !important; outline-offset: 2px; }
/* Tickets */
html body #root #climate ol.almanac-events { gap: 18px; border: 0 !important; filter: drop-shadow(4px 5px 0 var(--il-navy)); }
html body #root #climate li.almanac-event {
  --stub: var(--il-mustard); --stub-w: 70px;
  grid-template-columns: var(--stub-w) minmax(0, 1fr) !important; padding: 0 !important;
  background: var(--il-cream) !important; border: 2.5px solid var(--il-navy) !important; border-radius: 14px; box-shadow: none !important;
  -webkit-mask: radial-gradient(circle 11px at var(--stub-w) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at var(--stub-w) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at var(--stub-w) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at var(--stub-w) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
html body #root #climate li.almanac-event[data-tag="food"] { --stub: var(--il-pink, #F6B3A6); }
html body #root #climate li.almanac-event[data-tag="sports"] { --stub: var(--il-aqua, #86C6D3); }
html body #root #climate li.almanac-event[data-tag="market"] { --stub: #BFDCB8; }
html body #root #climate li.almanac-event[data-tag="nature"] { --stub: #9FD0C4; }
html body #root #climate li.almanac-event[data-tag="family"] { --stub: var(--il-sand); }
html body #root #climate li.almanac-event[data-tag="festival"] { --stub: #F4A07F; }
html body #root #climate li.almanac-event[data-tag="free"] { --stub: #E6E0F2; }
html body #root #climate li.almanac-event.is-found { background: #FFE9B8 !important; }
html body #root #climate span.almanac-event-stub {
  /* vertical label reads bottom-to-top; the 180° turn puts the dashed tear line on the right */
  display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg);
  background: var(--stub); border-left: 2.5px dashed var(--il-navy); border-radius: 0 11px 11px 0;
  color: var(--il-navy); font: 400 18px var(--font-hand);
}
html body #root #climate li.almanac-event > div { padding: 18px 20px; }
html body #root #climate li.almanac-event > div > h4 { color: var(--il-navy) !important; font-style: italic; }
html body #root #climate li.almanac-event > div > p { color: var(--il-ink) !important; opacity: .85; }
html body #root #climate span.almanac-event-tags > span { border: 0 !important; background: var(--il-sand) !important; color: var(--il-navy) !important; font: 400 15px/1.4 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #climate div.almanac-event-foot > a { color: #B8402B !important; }
/* Pager */
html body #root #climate .almanac-pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 30px; }
html body #root #climate .almanac-pager button { cursor: pointer; border: 2.5px solid var(--il-navy); background: var(--il-cream); color: var(--il-navy); font: 400 18px/1 var(--font-hand); transition: transform .2s ease; }
html body #root #climate .almanac-pager-num { width: 42px; height: 42px; border-radius: 50%; }
html body #root #climate .almanac-pager-num.is-current { background: var(--il-navy); color: var(--il-cream); }
html body #root #climate .almanac-pager-step { white-space: nowrap; height: 42px; padding: 0 18px; border-radius: 999px; box-shadow: 3px 4px 0 var(--il-navy); }
html body #root #climate .almanac-pager-step:hover:not(:disabled) { transform: translateY(-2px); }
html body #root #climate .almanac-pager-step:disabled { opacity: .4; cursor: default; box-shadow: none; }
html body #root #climate .almanac-pager button:focus-visible { outline: 3px solid var(--il-coral); outline-offset: 3px; }
@media (max-width: 768px) {
  html body #root #climate li.almanac-event { --stub-w: 52px; }
  html body #root #climate li.almanac-event > div { padding: 14px 16px; }
  html body #root #climate .almanac-pager { gap: 6px; }
  html body #root #climate .almanac-pager-step { width: 42px; padding: 0; }
  html body #root #climate .almanac-pager-word { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body #root #climate span.almanac-card-arch, html body #root #climate .almanac-pager button { transition: none; }
}

/* ── Restaurants: each place is a drawn menu card with an arched window for the
   photo and our tip as a note stuck to it; controls are hand-lettered pills. ── */
html body #root #dining { --tb-bg: #FBDDD3; --tb-card: var(--il-cream); --tb-ink: var(--il-ink); --tb-head: var(--il-navy); --tb-line: var(--il-navy); --tb-shadow: var(--il-navy); background: var(--tb-bg) !important; color: var(--tb-ink) !important; }
html body #root #dining .ed-title { color: var(--tb-head) !important; }
html body #root #dining .ed-title em { color: #C8402A !important; }
html body #root #dining .ed-eyebrow { color: var(--il-navy) !important; background: var(--il-cream) !important; border: 2px solid var(--il-navy) !important; font: 400 17px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
/* Toolbar */
html body #root #dining span.place-select-label { color: var(--tb-head) !important; font: 400 19px/1 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #dining span.place-select-box > select {
  color: var(--il-navy) !important; background: var(--il-cream) !important; border: 2.5px solid var(--il-navy) !important;
  box-shadow: 4px 5px 0 var(--tb-shadow) !important; font: 400 19px/1.2 var(--font-hand) !important;
}
html body #root #dining span.place-select-box > svg { color: var(--il-navy) !important; }
html body #root #dining div.place-view-toggle { gap: 6px; padding: 0 !important; background: none !important; }
html body #root #dining div.place-view-toggle > button {
  color: var(--il-navy) !important; background: var(--il-cream) !important; border: 2.5px solid var(--il-navy) !important;
  box-shadow: 3px 4px 0 var(--tb-shadow) !important; font: 400 18px/1 var(--font-hand) !important;
}
html body #root #dining div.place-view-toggle > button.is-active { color: var(--il-cream) !important; background: var(--il-navy) !important; }
html body #root #dining div.place-view-toggle > button > svg { color: currentColor !important; }
/* Menu cards */
html body #root #dining ol.menu-cards { gap: 22px; }
html body #root #dining li.menu-card {
  background: var(--tb-card) !important; border: 2.5px solid var(--tb-line) !important; border-radius: 20px !important;
  box-shadow: 4px 5px 0 var(--tb-shadow) !important;
}
html body #root #dining li.menu-card.is-highlighted { box-shadow: 0 0 0 4px var(--il-coral), 6px 8px 0 4px var(--tb-shadow) !important; }
html body #root #dining div.menu-card-photo { margin: 14px 0 14px 14px; border: 2.5px solid var(--il-navy) !important; background: var(--il-sand) !important; }
html body #root #dining div.menu-card-photo > img { filter: none !important; }
html body #root #dining p.menu-card-kicker { color: #C8402A !important; font: 400 18px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #dining p.menu-card-kicker > span { display: none !important; }
html body #root #dining div.menu-card-body > h3 { color: var(--tb-head) !important; font-size: clamp(1.7rem, 2.4vw, 2.1rem) !important; }
html body #root #dining p.menu-card-desc { color: var(--tb-ink) !important; }
html body #root #dining p.menu-card-tip {
  color: var(--il-ink) !important; background: #FCE7B0 !important; border: 2px solid var(--il-navy) !important; border-radius: 12px;
  box-shadow: 3px 3px 0 rgba(38, 58, 114, .22); transform: rotate(-.6deg);
}
html body #root #dining p.menu-card-tip > span { color: #C8402A !important; font: 400 18px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #dining div.place-meta { border-top: 2px dashed rgba(38, 58, 114, .35) !important; }
html body #root #dining a.place-meta-address, html body #root #dining a.place-meta-site, html body #root #dining a.place-meta-site > span { color: var(--tb-head) !important; }
html body #root #dining a.place-meta-address > svg { color: var(--il-coral) !important; }
html body #root #dining button.place-more {
  color: var(--il-navy) !important; background: var(--il-cream) !important; border: 2.5px solid var(--il-navy) !important;
  box-shadow: 4px 5px 0 var(--tb-shadow) !important; font: 400 19px/1.2 var(--font-hand) !important;
}
@media (max-width: 768px) {
  html body #root #dining div.menu-card-photo { margin: 12px 12px 0; }
}

/* ── Explore Seattle: neighbourhoods as drawn cards with arched windows, the
   brief as a notebook page, sights as postcards with perforated stamps. ── */
html body #root #neighborhoods-explore { --ex-bg: #D3EBEF; --ex-card: var(--il-cream); --ex-ink: var(--il-ink); --ex-head: var(--il-navy); --ex-line: var(--il-navy); --ex-shadow: var(--il-navy); --ex-accent: #C8402A; background: var(--ex-bg) !important; color: var(--ex-ink) !important; }
html body #root #neighborhoods-explore .ed-title { color: var(--ex-head) !important; }
html body #root #neighborhoods-explore .ed-title em { color: var(--ex-accent) !important; }
html body #root #neighborhoods-explore .ed-eyebrow { color: var(--il-navy) !important; background: var(--il-cream) !important; border: 2px solid var(--il-navy) !important; font: 400 17px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #neighborhoods-explore p.curated-hint { color: var(--ex-ink) !important; font: 400 19px/1.4 var(--font-hand) !important; }
/* Neighbourhood cards */
html body #root #neighborhoods-explore button.curated-card-link {
  height: 100%; padding: 10px 10px 14px !important; box-sizing: border-box; background: var(--ex-card) !important; color: var(--ex-ink) !important;
  border: 2.5px solid var(--ex-line) !important; border-radius: 18px !important; box-shadow: 4px 5px 0 var(--ex-shadow) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
html body #root #neighborhoods-explore button.curated-card-link:hover { transform: translate(-2px, -2px); box-shadow: 6px 7px 0 var(--ex-shadow) !important; }
html body #root #neighborhoods-explore button.curated-card-link:focus-visible { outline: 3px solid var(--il-coral) !important; outline-offset: 3px !important; }
html body #root #neighborhoods-explore button.curated-card-link.is-selected { background: var(--il-mustard) !important; color: var(--il-ink) !important; }
html body #root #neighborhoods-explore .curated-card-link .curated-card-arch { outline: 0 !important; border: 2.5px solid var(--il-navy); box-sizing: border-box; background: var(--il-sand); }
html body #root #neighborhoods-explore .curated-card-link .curated-card-arch img { filter: none !important; }
html body #root #neighborhoods-explore span.explore-card-mood { color: var(--ex-accent) !important; font: 400 17px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #neighborhoods-explore span.curated-card-title { color: var(--ex-head) !important; }
html body #root #neighborhoods-explore span.curated-card-journey { color: var(--ex-ink) !important; opacity: .8; }
html body #root #neighborhoods-explore .curated-card-link.is-selected :is(span.explore-card-mood, span.curated-card-title, span.curated-card-journey) { color: var(--il-navy) !important; }
/* Home base stays the navy card */
html body #root #neighborhoods-explore .explore-home button.curated-card-link { background: var(--il-navy) !important; border-color: var(--il-navy) !important; box-shadow: 4px 5px 0 var(--il-coral) !important; }
html body #root #neighborhoods-explore .explore-home button.curated-card-link.is-selected { box-shadow: 0 0 0 4px var(--il-mustard), 6px 7px 0 4px var(--il-coral) !important; }
html body #root #neighborhoods-explore .explore-home .curated-card-arch { border-color: var(--il-cream); }
html body #root #neighborhoods-explore .explore-home button.curated-card-link span.explore-card-mood { color: var(--il-mustard) !important; }
html body #root #neighborhoods-explore .explore-home button.curated-card-link :is(span.curated-card-title, span.curated-card-journey) { color: var(--il-cream) !important; }
html body #root #neighborhoods-explore li.explore-track-note { color: var(--ex-head) !important; font: 400 18px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
/* The brief: a notebook page */
html body #root #neighborhoods-explore div.explore-brief {
  align-self: start; padding: clamp(20px, 2.6vw, 32px) !important; background: var(--ex-card) !important; border: 2.5px solid var(--ex-line);
  border-radius: 20px; box-shadow: 4px 5px 0 var(--ex-shadow);
}
html body #root #neighborhoods-explore p.explore-kicker { color: var(--ex-accent) !important; font: 400 19px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #neighborhoods-explore div.explore-brief > h3 { color: var(--ex-head) !important; }
html body #root #neighborhoods-explore p.explore-desc, html body #root #neighborhoods-explore div.explore-block > p, html body #root #neighborhoods-explore ul.explore-tips, html body #root #neighborhoods-explore ul.explore-tips > li { color: var(--ex-ink) !important; }
html body #root #neighborhoods-explore ul.explore-transit > li { background: var(--il-sand) !important; color: var(--il-navy) !important; border: 2px solid var(--il-navy); font: 400 17px/1.2 var(--font-hand) !important; }
html body #root #neighborhoods-explore ul.explore-transit > li > strong { color: var(--il-navy) !important; font-family: var(--font-main); font-size: 14px; }
html body #root #neighborhoods-explore div.explore-tip {
  background: #FCE7B0 !important; border: 2px solid var(--il-navy) !important; border-radius: 12px !important;
  box-shadow: 3px 3px 0 rgba(38, 58, 114, .22); transform: rotate(-.6deg);
}
html body #root #neighborhoods-explore div.explore-tip > p { color: var(--il-ink) !important; }
html body #root #neighborhoods-explore div.explore-tip > span { color: #C8402A !important; }
html body #root #neighborhoods-explore :is(div.explore-tip, div.explore-block) > span { font: 400 18px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #neighborhoods-explore div.explore-block > span { color: var(--ex-accent) !important; }
html body #root #neighborhoods-explore div.explore-block > strong { color: var(--ex-head) !important; }
html body #root #neighborhoods-explore div.explore-brief a.ed-link { color: var(--ex-head) !important; border-color: var(--ex-head) !important; }
/* View toggle (same pills as Restaurants) */
html body #root #neighborhoods-explore div.place-view-toggle { gap: 6px; padding: 0 !important; background: none !important; }
html body #root #neighborhoods-explore div.place-view-toggle > button {
  color: var(--il-navy) !important; background: var(--il-cream) !important; border: 2.5px solid var(--il-navy) !important;
  box-shadow: 3px 4px 0 var(--ex-shadow) !important; font: 400 18px/1 var(--font-hand) !important;
}
html body #root #neighborhoods-explore div.place-view-toggle > button.is-active { color: var(--il-cream) !important; background: var(--il-navy) !important; }
/* Postcards */
html body #root #neighborhoods-explore article.postcard { background: var(--ex-card) !important; border: 2.5px solid var(--ex-line) !important; border-radius: 10px !important; box-shadow: 4px 5px 0 var(--ex-shadow) !important; }
html body #root #neighborhoods-explore li.postcard-slot.is-highlighted article.postcard { box-shadow: 0 0 0 4px var(--il-coral), 6px 8px 0 4px var(--ex-shadow) !important; }
html body #root #neighborhoods-explore div.postcard-photo { border: 2px solid var(--il-navy); border-radius: 4px; }
html body #root #neighborhoods-explore div.postcard-photo > img { filter: none !important; }
html body #root #neighborhoods-explore span.postcard-stamp {
  width: 52px; height: 60px; outline: 0 !important; border: 7px solid transparent !important; box-sizing: border-box;
  background: linear-gradient(var(--il-cream), var(--il-cream)) padding-box, radial-gradient(circle 4.5px at 0 0, transparent 98%, var(--il-cream)) 0 0 / 13px 13px border-box !important;
  color: var(--il-coral) !important; font: 400 22px/1 var(--font-hand) !important; transform: rotate(4deg); filter: drop-shadow(0 2px 0 rgba(38, 58, 114, .35));
}
html body #root #neighborhoods-explore p.postcard-kicker { color: var(--ex-accent) !important; font: 400 17px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #neighborhoods-explore div.postcard-body > h3 { color: var(--ex-head) !important; }
html body #root #neighborhoods-explore p.postcard-desc { color: var(--ex-ink) !important; }
html body #root #neighborhoods-explore p.postcard-tip { color: var(--il-ink) !important; background: #DCEEF1 !important; border: 2px solid var(--il-navy) !important; border-radius: 12px; }
html body #root #neighborhoods-explore p.postcard-tip > span { color: #C8402A !important; font: 400 18px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #neighborhoods-explore div.place-meta { border-top: 2px dashed rgba(38, 58, 114, .35) !important; }
html body #root #neighborhoods-explore a.place-meta-address, html body #root #neighborhoods-explore a.place-meta-site, html body #root #neighborhoods-explore a.place-meta-site > span { color: var(--ex-head) !important; }
html body #root #neighborhoods-explore a.place-meta-address > svg { color: var(--il-coral) !important; }
@media (prefers-reduced-motion: reduce) {
  html body #root #neighborhoods-explore button.curated-card-link { transition: none; }
}

/* ── Place map (Explore sights, Restaurants): a framed drawn map with coral
   numbered pins, a navy home pin and popups as little cream cards. ── */
html body #root .place-map { --pm-line: var(--il-navy); --pm-shadow: var(--il-navy); --pm-paper: var(--il-cream); }
html body #root .place-map-canvas { border: 2.5px solid var(--pm-line); border-radius: 22px; box-shadow: 5px 6px 0 var(--pm-shadow); background: var(--il-sand); box-sizing: border-box; }
html body #root .place-map-canvas .mapboxgl-canvas { filter: saturate(1.05); }
html body #root .place-map-loading { color: var(--il-navy); font: 400 22px var(--font-hand); }
html body #root .place-map-fallback { background: var(--pm-paper); border: 2.5px dashed var(--pm-line); border-radius: 22px; }
html body #root .place-map-fallback p { color: var(--il-navy); }
html body #root .place-map-fallback span, html body #root .place-map-note { color: inherit; font: 400 18px/1.4 var(--font-hand); }
/* Pins */
html body #root .place-pin {
  width: 2.5rem; height: 2.5rem; color: var(--il-cream); background: var(--il-coral); border: 2.5px solid var(--il-navy);
  box-shadow: 2px 3px 0 var(--il-navy); font: 400 17px/1 var(--font-hand);
}
html body #root .place-pin:hover, html body #root .place-pin:focus-visible { background: #C8402A; outline: 3px solid var(--il-mustard); outline-offset: 2px; }
html body #root .place-pin--home { width: 2.9rem; height: 2.9rem; color: #F6B3A6; background: var(--il-navy); border-color: var(--il-cream); box-shadow: 0 0 0 2.5px var(--il-navy), 2px 3px 0 2.5px var(--il-coral); }
/* Zoom buttons */
html body #root .place-map .mapboxgl-ctrl-group { background: var(--il-cream); border: 2.5px solid var(--il-navy); border-radius: 12px; box-shadow: 2px 3px 0 var(--il-navy); overflow: hidden; }
html body #root .place-map .mapboxgl-ctrl-group button + button { border-top: 2px solid var(--il-navy); }
/* Popups */
html body #root .mapboxgl-popup-content:has(.place-popup) { background: var(--il-cream); border: 2.5px solid var(--il-navy); border-radius: 16px; box-shadow: 4px 5px 0 var(--il-navy); }
html body #root .place-popup-photo { border-bottom: 2.5px solid var(--il-navy); }
html body #root .place-popup-body strong { color: var(--il-navy); font-size: 1.35rem; }
html body #root .place-popup-body span { color: var(--il-ink); }
html body #root .place-popup-links { flex-wrap: wrap; border-top: 2px dashed rgba(38, 58, 114, .35); }
html body #root .place-popup-links a { white-space: nowrap; color: #C8402A; font: 400 18px/1.2 var(--font-hand); }
html body #root .place-popup-links a:hover { color: var(--il-navy); }
html body #root .mapboxgl-popup:has(.place-popup) .mapboxgl-popup-close-button { color: var(--il-cream); background: var(--il-navy); border: 2px solid var(--il-cream); line-height: 1; }
html body #root .mapboxgl-popup:has(.place-popup) .mapboxgl-popup-close-button:focus-visible { outline: 3px solid var(--il-mustard); }
html body #root .mapboxgl-popup:has(.place-popup):is(.mapboxgl-popup-anchor-bottom, .mapboxgl-popup-anchor-bottom-left, .mapboxgl-popup-anchor-bottom-right) .mapboxgl-popup-tip { border-top-color: var(--il-navy); }
html body #root .mapboxgl-popup:has(.place-popup):is(.mapboxgl-popup-anchor-top, .mapboxgl-popup-anchor-top-left, .mapboxgl-popup-anchor-top-right) .mapboxgl-popup-tip { border-bottom-color: var(--il-navy); }
html body #root .mapboxgl-popup:has(.place-popup).mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--il-navy); }
html body #root .mapboxgl-popup:has(.place-popup).mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--il-navy); }
@media (max-width: 768px) {
  html body #root .place-map-canvas { border-radius: 18px; box-shadow: 4px 5px 0 var(--pm-shadow); }
}

/* ── Inside the house: navy band, cream cards with drawn offset shadows ── */
html body #root #inside-the-house {
  --ih-band: var(--il-navy); --ih-card: var(--il-cream); --ih-ink: var(--il-navy); --ih-mut: #4A4D63;
  --ih-accent: var(--il-mustard); --ih-line: #11172F; --ih-paper-ink: var(--il-cream);
}
html body #root #inside-the-house .inside-house-heading h3 { color: var(--ih-paper-ink) !important; }
html body #root #inside-the-house .inside-house-heading h3 em { color: #F6B3A6 !important; }
html body #root #inside-the-house .inside-house-heading .guide-eyebrow {
  display: inline-block; padding: 5px 14px !important; border: 2px solid var(--il-mustard) !important; border-radius: 999px !important;
  font-family: var(--font-hand) !important; font-size: 1.05rem !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--il-mustard) !important;
}
html body #root #inside-the-house .inside-house-lede { color: rgba(255, 247, 230, 0.8) !important; font-family: var(--font-hand); font-size: 1.15rem; }

html body #root #inside-the-house .inside-floor-picker,
html body #root #inside-the-house .inside-tile,
html body #root #inside-the-house .inside-swipe-card,
html body #root #inside-the-house .inside-floor-photo {
  border: 2.5px solid var(--ih-line) !important; border-radius: 20px !important; box-shadow: 5px 6px 0 var(--ih-line) !important;
}
html body #root #inside-the-house .inside-floor-picker h4 { font-family: var(--font-hand) !important; font-style: normal !important; font-size: 1.35rem !important; color: var(--ih-ink) !important; }
html body #root #inside-the-house .inside-floor-list { border: 0 !important; }
html body #root #inside-the-house .inside-floor-btn {
  background: transparent !important; border: 2px dashed rgba(38, 58, 114, 0.35) !important; border-radius: 14px !important;
}
html body #root #inside-the-house .inside-floor-btn .inside-floor-name { font-family: var(--font-hand) !important; font-size: 1.15rem !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root #inside-the-house .inside-floor-btn .inside-floor-n,
html body #root #inside-the-house .inside-whole-cell i { border: 2px solid var(--il-navy) !important; background: var(--il-mustard) !important; color: var(--il-navy) !important; }
@media (hover: hover) {
  html body #root #inside-the-house .inside-floor-btn:not(.is-active):hover { background: #FCE7B0 !important; border-style: solid !important; }
}
html body #root #inside-the-house .inside-floor-btn.is-active { background: var(--il-navy) !important; border: 2px solid var(--il-navy) !important; box-shadow: 3px 4px 0 var(--il-coral) !important; }
html body #root #inside-the-house .inside-floor-btn.is-active span:not(.inside-floor-n),
html body #root #inside-the-house .inside-floor-btn.is-active small { color: var(--il-cream) !important; }
html body #root #inside-the-house .inside-floor-btn.is-active .inside-floor-n { border-color: var(--il-cream) !important; }

html body #root #inside-the-house .inside-tile h4 { font-family: var(--font-hand) !important; font-size: 1.3rem !important; line-height: 1.15 !important; }
html body #root #inside-the-house .inside-tile .guide-eyebrow,
html body #root #inside-the-house .inside-tile--whole .guide-eyebrow { font-family: var(--font-hand) !important; font-size: 1rem !important; letter-spacing: 0 !important; text-transform: none !important; opacity: 1; }
html body #root #inside-the-house .inside-tile .inside-num { font-family: var(--font-poster) !important; font-weight: 800 !important; color: var(--il-coral) !important; }
html body #root #inside-the-house .inside-tile--whole:nth-of-type(1) { background: #86C6D3 !important; --tile-ink: var(--il-navy); }
html body #root #inside-the-house .inside-tile--whole:nth-of-type(2) { background: var(--il-mustard) !important; --tile-ink: var(--il-navy); }
html body #root #inside-the-house .inside-tile--whole:nth-of-type(3) { background: var(--il-cream) !important; --tile-ink: var(--il-navy); }
html body #root #inside-the-house .inside-tile--whole:nth-of-type(4) { background: #F6B3A6 !important; --tile-ink: var(--il-navy); }
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--whole { border-radius: 20px !important; }
html body #root #inside-the-house .inside-floor-photo figcaption { border-top: 2.5px solid var(--ih-line); }
html body #root #inside-the-house .inside-floor-photo figcaption strong { font-family: var(--font-hand) !important; font-style: normal !important; }

html body #root #inside-the-house .inside-swipe-photo { border-bottom: 2.5px solid var(--ih-line); }
html body #root #inside-the-house .inside-swipe-body h4 { font-family: var(--font-hand) !important; font-style: normal !important; }
html body #root #inside-the-house .inside-swipe-badge { background: var(--il-cream) !important; color: var(--il-navy) !important; border: 2px solid var(--il-navy); font-family: var(--font-hand); }
html body #root #inside-the-house .inside-swipe-badge span { background: var(--il-mustard) !important; color: var(--il-navy) !important; }
html body #root #inside-the-house .inside-swipe-dots span { background: rgba(255, 247, 230, 0.35) !important; }
html body #root #inside-the-house .inside-swipe-dots span.is-active { background: var(--il-mustard) !important; }
html body #root #inside-the-house .inside-house-strip li { background: var(--il-cream) !important; border: 2px solid var(--ih-line); box-shadow: 3px 4px 0 var(--ih-line); color: var(--ih-mut) !important; }
html body #root #inside-the-house .inside-strip-mark { color: var(--il-coral) !important; }

/* ── Until next time: a drawn goodbye, then a postcard from the host ───── */
html body #root footer.site-footer.il-footer { background: var(--il-navy) !important; color: var(--il-navy); }

.il-footer-scene { width: 100%; overflow: hidden; aspect-ratio: 1280 / 320; min-height: 180px; max-height: 400px; background: #F3C35B; }
.il-footer-scene svg { display: block; width: 100%; height: 100%; }
.il-footer-ground { background: var(--il-mustard); padding: 8px var(--cz-gutter, 1.5rem) 72px; }
html body #root .il-postcard {
  position: relative;
  max-width: 1040px;
  margin: -24px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--il-paper, var(--il-cream));
  border: 2.5px solid var(--il-navy);
  border-radius: 6px;
  box-shadow: 6px 8px 0 var(--il-navy);
  rotate: -0.6deg;
  color: var(--il-navy);
}
.il-postcard-note, .il-postcard-side { padding: 40px 44px 44px; }
.il-postcard-side { position: relative; border-left: 2px dashed rgba(38, 58, 114, 0.35); }
html body #root .il-postcard h2.ed-title { margin: 0 0 20px; font-size: clamp(40px, 4.6vw, 60px) !important; color: var(--il-navy) !important; }
html body #root .il-postcard h2.ed-title em { color: var(--il-coral) !important; }
html body #root .il-postcard blockquote { margin: 0; padding: 0; border: 0; font: 400 clamp(20px, 2vw, 24px)/1.4 var(--font-hand); color: var(--il-navy); }
html body #root .il-postcard-sig { margin: 14px 0 0; font: 400 22px var(--font-hand); color: var(--il-coral); }
html body #root .il-postcard-sig::before { content: '— '; }
.il-postcard-help { margin-top: 32px; padding-top: 18px; border-top: 2px solid rgba(38, 58, 114, 0.14); }
html body #root .il-postcard-help h3 { margin: 0 0 4px; font: 600 15px var(--font-main); letter-spacing: 0; text-transform: none; color: var(--il-navy); }
html body #root .il-postcard-help p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(38, 58, 114, 0.8); }

/* stamp and postmark in the top-right corner */
.il-postcard-stamps { display: flex; justify-content: flex-end; align-items: center; margin: -12px -12px 18px 0; }
.il-postmark { width: 92px; height: 92px; margin-right: -26px; color: rgba(38, 58, 114, 0.55); rotate: -12deg; position: relative; z-index: 1; }
.il-postcard-stamp {
  width: 104px;
  border: 7px solid transparent;
  background:
    linear-gradient(var(--il-cream), var(--il-cream)) padding-box,
    radial-gradient(circle 5px at 0 0, var(--il-paper, var(--il-cream)) 98%, #fff) 0 0 / 14px 14px border-box;
  padding: 4px;
  rotate: 4deg;
  filter: drop-shadow(0 2px 0 rgba(38, 58, 114, 0.35));
}
.il-postcard-stamp svg { display: block; width: 100%; height: auto; }

/* Stay connected, written on the address lines */
html body #root .il-postcard .stay-connected h3 { margin: 0 0 8px; font: 400 30px var(--font-hand) !important; color: var(--il-navy) !important; }
html body #root .il-postcard .stay-connected-line { flex-direction: column; align-items: stretch; gap: 4px; }
html body #root .il-postcard .stay-connected-field {
  height: 48px;
  border-bottom: 2px solid rgba(38, 58, 114, 0.4) !important;
  color: var(--il-navy) !important;
  font: 400 20px var(--font-hand);
}
html body #root .il-postcard .stay-connected-field::placeholder { color: rgba(38, 58, 114, 0.5); }
html body #root .il-postcard .stay-connected-field:focus { border-bottom-color: var(--il-navy) !important; }
html body #root .il-postcard .stay-connected-pill {
  align-self: flex-start;
  margin-top: 18px;
  background: var(--il-coral) !important;
  color: #fff !important;
  box-shadow: 3px 4px 0 var(--il-navy);
}
html body #root .il-postcard .stay-connected-pill:focus-visible { outline: 3px solid var(--il-navy); }
html body #root .il-postcard .stay-connected--offer .stay-connected-pill { margin-top: 6px; }
html body #root .il-postcard .stay-connected-hint { color: rgba(38, 58, 114, 0.75); text-align: left; }
html body #root .il-postcard .stay-connected-hint strong { color: var(--il-navy); }
html body #root .il-postcard .stay-connected-error { color: #B23A24; }
html body #root .il-footer .site-footer-bar p { color: rgba(255, 247, 230, 0.7); }

@media (max-width: 760px) {
  .il-footer-ground { padding: 0 16px 40px; }
  html body #root .il-postcard { margin-top: 0; grid-template-columns: 1fr; rotate: 0deg; box-shadow: 4px 6px 0 var(--il-navy); }
  .il-postcard-note, .il-postcard-side { padding: 28px 22px 30px; }
  .il-postcard-side { border-left: 0; border-top: 2px dashed rgba(38, 58, 114, 0.35); }
  .il-postcard-stamps { margin: -8px -6px 8px 0; }
  html body #root .il-postcard .stay-connected-pill { width: 100%; }
}

/* ── Dark mode: night over the Hill. Navy sky, a moon, lit windows; navy paper for the UI ── */
@media (prefers-color-scheme: dark) {
  .il-sky-0 { stop-color: #141B3A; }
  .il-sky-1 { stop-color: #23306A; }
  .il-sky-2 { stop-color: #4A4E8C; }
  .il-sun { fill: #F6EBC8; }
  .il-sunglow { opacity: 0.35; }
  .il-stars { display: inline; }
  .il-hill { fill: #34407A; }
  .il-hill-shade { fill: #2A3468; }
  .il-hill-streets { opacity: 0.22; }

  html body #root section.ed-hero {
    --hx-ink: #FFF7E6;
    --hx-mut: rgba(255, 247, 230, 0.84);
    --hx-dim: rgba(255, 247, 230, 0.7);
    --hx-navy: #1B2348;
    --hx-line: rgba(255, 247, 230, 0.22);
    --hx-glass: #1B2348;
    --hx-glass-line: #FFF7E6;
    background: #1B2348 !important;
  }
  html body #root .ed-hero-title .ed-fade { color: var(--il-cream); }
  html body #root .ed-hero .ed-tag,
  html body #root .ed-hero .ed-ask-chips button {
    background: #1B2348 !important;
    border-color: var(--il-cream) !important;
    color: var(--il-cream) !important;
  }
  html body #root .ed-hero .ed-ask-chips button:hover { background: #2B3566 !important; }
  html body #root .ed-hero .ed-ask-bar,
  html body #root .ed-hero .ed-ask-results {
    background: #1B2348;
    border-color: var(--il-cream);
    box-shadow: 4px 5px 0 var(--il-mustard);
  }
  html body #root .ed-hero .ed-ask-bar:focus-within { border-color: var(--il-cream); }
  html body #root .ed-hero .ed-btn { background: var(--il-mustard) !important; color: #1B2348 !important; }
  html body #root .ed-hero .ed-ticker { background: #11172F !important; }

  html body #root .around-map figcaption p { color: var(--il-cream); }
  html body #root .around-map .around-chips a,
  html body #root .around-map .around-chips li > span {
    background: #1B2348 !important;
    border-color: rgba(255, 247, 230, 0.7);
    color: var(--il-cream) !important;
  }
  html body #root .around-map .around-chips a:hover { background: #2B3566 !important; }
  a.around-row:hover .around-num:not(.is-off-map),
  a.around-row:focus-visible .around-num:not(.is-off-map) { background: var(--il-mustard); color: #1B2348; }
  .around-num.is-off-map { color: #F08A73; border-color: #F08A73; }

  html body #root .stay-route { --il-sheet: #2B3566; --il-paper: #F3EAD3; }
  html body #root .stay-route > article.stay-route-stop:nth-child(n) { --stop-ink: #FFF7E6; --stop-row: rgba(255, 247, 230, 0.08); }
  html body #root .stay-route .stay-route-links a.guide-directory-link:hover { background: rgba(255, 247, 230, 0.16) !important; }
  html body #root article.stay-route-stop .stay-route-marker span { color: #F08A73 !important; }
  html body #root .stay-route .stay-route-scene { filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.3)); }
}
@media (prefers-color-scheme: dark) {
  .il-footer-scene, .il-footer-ground { background: #34407A; }
  html body #root .il-postcard { --il-paper: #F3EAD3; box-shadow: 6px 8px 0 #11172F; }
  html body #root footer.site-footer.il-footer { background: #11172F !important; }
}
@media (prefers-color-scheme: dark) and (max-width: 760px) {
  html body #root section.ed-hero { background: #1B2348 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .il-stop circle, .around-num { transition: none; }
}

/* The guide at night: navy sky, a moon, a dark hill; the planks stay paper */
@media (prefers-color-scheme: dark) {
  html body #root { --ci-sky: #1B2348; --ci-wood: #8E5F37; --ci-plank: #F3EAD3; --ci-land: #34407A; --ci-sun: #F3EAD3; }
  html body #root .chapter-index h2 { color: var(--il-cream) !important; }
  html body #root .chapter-fold[data-chapter] { background-color: var(--ci-sky) !important; }
  html body #root nav.chapter-index li:nth-child(n) button, html body #root .chapter-fold:nth-of-type(n) button.chapter-card { filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)); }
  html body #root nav.chapter-index li:nth-child(n) button:focus-visible, html body #root .chapter-fold:nth-of-type(n) button.chapter-card:focus-visible { outline-color: var(--il-cream) !important; }
}

@media (prefers-color-scheme: dark) {
  html body #root #essentials { --es-bg: #1B2348; --es-card: #2B3566; --es-ink: #F3EAD3; --es-head: #FFF7E6; --es-line: rgba(255, 247, 230, .55); }
  html body #root #essentials div.accordion-item { box-shadow: 4px 5px 0 #11172F !important; }
  html body #root #essentials .accordion-item button.accordion-header:hover { background: rgba(255, 247, 230, .06) !important; }
  html body #root #essentials .accordion-item.active div.accordion-content,
  html body #root #essentials .essential-full-info .sub-accordion-item { border-top-color: rgba(255, 247, 230, .25) !important; }
  html body #root #essentials .essential-full-info .note { border-color: rgba(255, 247, 230, .45) !important; }
  html body #root #essentials div.essential-full-image { background: #F3EAD3 !important; border-color: #11172F; box-shadow: 4px 5px 0 rgba(0, 0, 0, .3); }
  html body #root #essentials .accordion-item.active svg.accordion-icon { color: var(--il-navy) !important; background: var(--il-mustard); }
}

@media (prefers-color-scheme: dark) {
  html body #root #climate { --al-bg: #1B2348; --al-paper: #F3EAD3; --al-head: #FFF7E6; --al-ink: #F3EAD3; }
  html body #root #climate ol.almanac-events { filter: drop-shadow(4px 5px 0 #11172F); }
  html body #root #climate li.almanac-event { background: #F3EAD3 !important; }
  html body #root #climate span.almanac-card-arch { filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .3)); }
  html body #root #climate p.almanac-season, html body #root #climate .almanac-pager-step { box-shadow: 3px 4px 0 #11172F; }
  html body #root #climate .almanac-pager-num.is-current { background: var(--il-mustard); }
  html body #root #climate div.almanac-filters > button.is-active { background: var(--il-mustard) !important; color: var(--il-navy) !important; }
}

@media (prefers-color-scheme: dark) {
  html body #root #dining { --tb-bg: #1B2348; --tb-card: #2B3566; --tb-ink: #F3EAD3; --tb-head: #FFF7E6; --tb-line: rgba(255, 247, 230, .55); --tb-shadow: #11172F; }
  html body #root #dining .ed-title em, html body #root #dining p.menu-card-kicker { color: #F59A85 !important; }
  html body #root #dining div.place-view-toggle > button.is-active { color: var(--il-navy) !important; background: var(--il-mustard) !important; }
  html body #root #dining div.menu-card-photo { border-color: #11172F !important; }
  html body #root #dining div.place-meta { border-top-color: rgba(255, 247, 230, .25) !important; }
  html body #root #dining a.place-meta-address > svg { color: #F59A85 !important; }
}

@media (prefers-color-scheme: dark) {
  html body #root #neighborhoods-explore { --ex-bg: #1B2348; --ex-card: #2B3566; --ex-ink: #F3EAD3; --ex-head: #FFF7E6; --ex-line: rgba(255, 247, 230, .55); --ex-shadow: #11172F; --ex-accent: #F59A85; }
  html body #root #neighborhoods-explore .curated-card-link .curated-card-arch, html body #root #neighborhoods-explore div.postcard-photo { border-color: #11172F; }
  html body #root #neighborhoods-explore .explore-home button.curated-card-link { background: #11172F !important; border-color: rgba(255, 247, 230, .55) !important; }
  html body #root #neighborhoods-explore div.place-view-toggle > button.is-active { color: var(--il-navy) !important; background: var(--il-mustard) !important; }
  html body #root #neighborhoods-explore div.place-meta { border-top-color: rgba(255, 247, 230, .25) !important; }
  html body #root #neighborhoods-explore a.place-meta-address > svg { color: #F59A85 !important; }
  html body #root #neighborhoods-explore span.postcard-stamp { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }
}

@media (prefers-color-scheme: dark) {
  html body #root .place-map { --pm-line: rgba(255, 247, 230, .55); --pm-shadow: #11172F; --pm-paper: #2B3566; }
  html body #root .place-map-loading, html body #root .place-map-fallback p { color: #FFF7E6; }
  html body #root .mapboxgl-popup-content:has(.place-popup) { background: #F3EAD3; border-color: #11172F; box-shadow: 4px 5px 0 #11172F; }
  html body #root .place-pin { border-color: #11172F; box-shadow: 2px 3px 0 #11172F; }
}

/* Inside the house at night */
@media (prefers-color-scheme: dark) {
  html body #root #inside-the-house {
    --ih-band: #1B2348; --ih-card: #2B3566; --ih-ink: #F3EAD3; --ih-mut: rgba(243, 234, 211, 0.75); --ih-line: #11172F;
  }
  html body #root #inside-the-house .inside-floor-btn { border-color: rgba(255, 247, 230, 0.3) !important; }
  html body #root #inside-the-house .inside-floor-btn:not(.is-active) span,
  html body #root #inside-the-house .inside-floor-btn:not(.is-active) small { color: #F3EAD3 !important; }
  @media (hover: hover) {
    html body #root #inside-the-house .inside-floor-btn:not(.is-active):hover { background: rgba(255, 247, 230, 0.08) !important; }
  }
  html body #root #inside-the-house .inside-floor-btn.is-active { background: var(--il-mustard) !important; border-color: var(--il-mustard) !important; box-shadow: 3px 4px 0 #11172F !important; }
  html body #root #inside-the-house .inside-floor-btn.is-active span:not(.inside-floor-n),
  html body #root #inside-the-house .inside-floor-btn.is-active small { color: var(--il-navy) !important; }
  html body #root #inside-the-house .inside-floor-btn.is-active .inside-floor-n { background: var(--il-cream) !important; border-color: var(--il-navy) !important; }
  html body #root #inside-the-house .inside-tile .inside-num,
  html body #root #inside-the-house .inside-strip-mark { color: #F59A85 !important; }
  html body #root #inside-the-house .inside-tile--whole:nth-of-type(3) { background: #F3EAD3 !important; }
  html body #root #inside-the-house .inside-house-strip li { background: #2B3566 !important; }
  html body #root #inside-the-house .inside-swipe-badge { background: #F3EAD3 !important; }
}

/* ── /status check-in & check-out: postcard design ───────────────────────
   Pink sheet, two postage stamps over a drawn skyline, a guestbook card for
   the form, and a postcard postmarked today when done. Paper stays light at
   night; only the sheet and the type sitting on it change. */
html body #root .status-page {
  --st-bg: #F6B3A6; --st-paper: #FFF7E6; --st-ink: #232535; --st-head: #263A72; --st-sub: #4A4D63; --st-em: #C8402A; --st-line: #11172F;
  --font-main: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --font-display: 'Instrument Serif', Georgia, serif;
  background: var(--st-bg) !important; color: var(--st-ink) !important; font-family: var(--font-main);
}
html body #root .status-page .status-eyebrow,
html body #root .status-page .status-pin {
  align-self: flex-start; display: inline-block; margin: 0 0 12px !important; padding: 4px 12px 3px !important;
  border: 2px solid var(--il-navy) !important; border-radius: 999px !important; background: var(--st-paper) !important; color: var(--il-navy) !important;
  font: 400 15px/1.3 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important;
}
html body #root .status-page .status-pin i { display: none; }
html body #root .status-page .status-title {
  margin: 0 0 10px !important; color: var(--st-head) !important; font: 800 clamp(2.6rem, 12vw, 3rem)/.95 var(--font-poster) !important;
  text-transform: uppercase; letter-spacing: -.02em !important;
}
html body #root .status-page .status-title em {
  display: block; color: var(--st-em) !important; font: italic 400 1.05em/1 var(--font-display) !important; text-transform: none; letter-spacing: 0;
}
html body #root .status-page .status-title--form { font-size: clamp(2rem, 9.5vw, 2.3rem) !important; margin-bottom: 18px !important; }
html body #root .status-page .status-time { margin: 0 !important; color: var(--st-head) !important; font: 400 17px/1.3 var(--font-hand) !important; }
html body #root .status-page .status-time b { display: block; margin-top: 2px; font: 800 46px/1 var(--font-poster); letter-spacing: -.02em; }
html body #root .status-page .status-lede { margin: 6px 0 0 !important; color: var(--st-sub) !important; font-size: .95rem !important; }

/* Choose: two perforated stamps above the skyline */
html body #root .status-page .status-choose { padding-bottom: 170px; }
html body #root .status-page .status-cards { display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px !important; padding-top: 2rem !important; align-items: start; }
html body #root .status-page button.status-card {
  display: block !important; width: 100%; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  filter: drop-shadow(4px 5px 0 var(--st-line)); rotate: -3deg; transition: transform .2s ease; cursor: pointer; color: var(--il-navy) !important;
}
html body #root .status-page button.status-card:not(.status-card--primary) { rotate: 2.5deg; margin-top: 22px; }
@media (hover: hover) { html body #root .status-page button.status-card:hover { transform: translateY(-4px); } }
html body #root .status-page button.status-card:focus-visible { outline: 3px solid var(--il-navy) !important; outline-offset: 5px; }
html body #root .status-page .status-card-face,
html body #root .status-page .status-postcard-stamp {
  --stamp: var(--il-mustard);
  display: grid; justify-items: center; gap: 8px; padding: 26px 8px 22px; text-align: center;
  border: 7px solid transparent; background: linear-gradient(var(--stamp), var(--stamp)) padding-box, var(--st-paper) border-box;
  box-shadow: inset 0 0 0 2.5px var(--il-navy);
  -webkit-mask: radial-gradient(circle 5px at 50% 50%, transparent 98%, #000) -7px -7px / 14px 14px, linear-gradient(#000, #000) 7px 7px / calc(100% - 14px) calc(100% - 14px) no-repeat;
  mask: radial-gradient(circle 5px at 50% 50%, transparent 98%, #000) -7px -7px / 14px 14px, linear-gradient(#000, #000) 7px 7px / calc(100% - 14px) calc(100% - 14px) no-repeat;
}
html body #root .status-page .status-card--primary .status-card-face,
html body #root .status-page .status-done[data-status="arrived"] .status-postcard-stamp { --stamp: #86C6D3; }
html body #root .status-page .status-card-icon { width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; }
html body #root .status-page .status-card-icon svg { width: 54px; height: 54px; }
html body #root .status-page .status-card-text strong { display: block; color: var(--il-navy) !important; font: 400 22px/1 var(--font-hand) !important; }
html body #root .status-page .status-card-text small { display: block; margin-top: 4px; color: #4A4D63 !important; font-size: 11.5px !important; }
html body #root .status-page .status-skyline { position: fixed; z-index: -1; left: 50%; bottom: 0; width: 100%; max-width: 560px; height: auto; translate: -50% 0; }

/* Form: guestbook card */
html body #root .status-page .status-sheet {
  padding: 16px 18px 18px !important; background: var(--st-paper) !important; border: 2.5px solid var(--st-line) !important; border-radius: 10px !important;
  box-shadow: 5px 6px 0 var(--st-line) !important;
}
html body #root .status-page .status-sheet-note { margin: 0 0 4px; color: #C8402A; font: 400 16px var(--font-hand); }
html body #root .status-page .status-field label,
html body #root .status-page .status-moods legend {
  color: var(--il-navy) !important; font: 400 18px/1.3 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body #root .status-page .status-field label span { color: #6A6D82 !important; font: 400 15px var(--font-hand) !important; }
html body #root .status-page .status-field input {
  padding: 6px 2px !important; border: 0 !important; border-bottom: 2px solid var(--il-navy) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--st-ink) !important; font: 400 20px var(--font-hand) !important; box-shadow: none !important;
}
html body #root .status-page .status-field input:focus { outline: none; border-bottom-color: var(--il-coral) !important; box-shadow: 0 2px 0 var(--il-coral) !important; }
html body #root .status-page .status-field input:-webkit-autofill,
html body #root .status-page .status-offer input:-webkit-autofill { -webkit-text-fill-color: var(--st-ink) !important; -webkit-box-shadow: 0 0 0 1000px var(--st-paper) inset !important; }
html body #root .status-page .status-field-note { color: #5A5D72 !important; font-size: 12px !important; }
html body #root .status-page .status-moods button {
  display: grid; justify-items: center; gap: 3px; padding: 8px 0 6px !important; border: 2px dashed rgba(38, 58, 114, .35) !important; border-radius: 14px !important;
  background: transparent !important; color: var(--il-navy) !important; box-shadow: none !important;
}
html body #root .status-page .status-moods button small { color: var(--il-navy) !important; font: 400 15px var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root .status-page .status-moods button.is-selected { border: 2.5px solid var(--st-line) !important; background: #86C6D3 !important; box-shadow: 3px 4px 0 var(--st-line) !important; }
html body #root .status-page .status-submit {
  padding: 13px !important; border: 2.5px solid var(--st-line) !important; border-radius: 999px !important; background: var(--il-coral) !important;
  color: var(--il-cream) !important; font: 400 22px var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: 4px 5px 0 var(--st-line) !important;
}
@media (hover: hover) { html body #root .status-page .status-submit:hover { background: #C8402A !important; } }
html body #root .status-page .status-back { background: none !important; border: 0 !important; color: #5A5D72 !important; font: 400 17px var(--font-hand) !important; }
html body #root .status-page .status-back::before { content: "← "; }

/* Done: a postcard postmarked today */
html body #root .status-page .status-postcard {
  display: grid; grid-template-columns: 1fr 104px; gap: 14px; padding: 18px; rotate: -1.5deg;
  background: var(--st-paper); border: 2.5px solid var(--st-line); border-radius: 10px; box-shadow: 5px 6px 0 var(--st-line);
}
html body #root .status-page .status-postcard .status-title { color: var(--il-navy) !important; font-size: clamp(1.6rem, 7.5vw, 1.9rem) !important; }
html body #root .status-page .status-postcard .status-title em { color: #C8402A !important; }
html body #root .status-page .status-postcard .status-lede { color: #4A4D63 !important; font-size: .82rem !important; }
html body #root .status-page .status-postcard-address { display: grid; align-content: start; gap: 12px; padding-left: 14px; border-left: 2px dashed rgba(38, 58, 114, .35); }
html body #root .status-page .status-postcard-stamp { justify-self: end; width: 64px; padding: 6px 4px; }
html body #root .status-page .status-postcard-stamp svg { width: 34px; height: 34px; }
html body #root .status-page .status-postmark {
  justify-self: start; display: grid; place-content: center; width: 72px; height: 72px; margin-top: -16px; border: 2.2px solid #C8402A; border-radius: 50%;
  color: #C8402A; text-align: center; rotate: -10deg; font-family: var(--font-hand); line-height: 1.1;
}
html body #root .status-page .status-postmark b { font-weight: 400; font-size: 15px; }
html body #root .status-page .status-postmark small { font-size: 10.5px; }
html body #root .status-page .status-postcard-line { padding-bottom: 2px; border-bottom: 2px solid rgba(38, 58, 114, .35); color: var(--il-navy); font: 400 16px var(--font-hand); overflow-wrap: anywhere; }

html body #root .status-page .status-offer {
  margin: 26px 4px 0 !important; padding: 14px 16px !important; max-width: none !important; rotate: 1deg; background: #FCE7B0 !important;
  border: 2px solid var(--il-navy) !important; border-radius: 6px !important; box-shadow: 3px 4px 0 rgba(17, 23, 47, .85) !important;
}
html body #root .status-page .status-offer-eyebrow { color: #C8402A !important; font: 400 15px var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #root .status-page .status-offer h2 { margin: 2px 0 6px !important; color: var(--il-navy) !important; font: 800 21px/1 var(--font-poster) !important; text-transform: uppercase; }
html body #root .status-page .status-offer-hint { color: #4A4D63 !important; font-size: 12.5px !important; }
html body #root .status-page .status-offer input {
  padding: 10px 12px !important; border: 2.5px solid var(--st-line) !important; border-radius: 14px !important; background: #fff !important; color: var(--st-ink) !important; box-shadow: none !important;
}
html body #root .status-page .status-offer input:focus { border-color: var(--il-coral) !important; box-shadow: 0 0 0 3px rgba(228, 87, 61, .25) !important; }
html body #root .status-page .status-offer .status-submit { padding: 10px !important; font-size: 18px !important; }
html body #root .status-page .status-offer-error { color: #8E2F1C !important; }
html body #root .status-page .status-offer-done { color: var(--st-ink) !important; }
html body #root .status-page .status-offer-done > span[aria-hidden] { background: #86C6D3 !important; color: var(--il-navy) !important; border: 2px solid var(--il-navy); }
html body #root .status-page .status-ghost {
  align-self: center; margin-top: 18px !important; padding: 6px !important; border: 0 !important; background: none !important; color: var(--st-head) !important;
  font: 400 18px var(--font-hand) !important; text-decoration: underline; text-underline-offset: 4px;
}

@media (prefers-color-scheme: dark) {
  html body #root .status-page { --st-bg: #1B2348; --st-paper: #F3EAD3; --st-head: #F3EAD3; --st-sub: rgba(243, 234, 211, .75); --st-em: #F59A85; color-scheme: dark; }
  html body #root .status-page button.status-card:focus-visible { outline-color: var(--il-mustard) !important; }
}

/* ── /book direct booking: route map design ───────────────────────────────
   Skyline poster with a 15% sticker on the left, the three steps on a paper
   sheet on the right, drawn as stops on a dotted route that ends at the
   house. Paper stays light at night; the page and poster sky go dark. */
html body #root .book-page {
  --bk-bg: #FFF7E6; --bk-paper: #FFF7E6; --bk-head: #263A72; --bk-sub: #4A4D63; --bk-em: #C8402A; --bk-sky: #86C6D3; --bk-line: #11172F;
  --font-main: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --font-display: 'Instrument Serif', Georgia, serif;
  background: var(--bk-bg) !important; color: var(--il-ink) !important; font-family: var(--font-main);
}
html body #root .book-page .book-hero-eyebrow {
  display: inline-block !important; margin: 0 !important; padding: 4px 12px 3px !important; border: 2px solid var(--il-navy) !important; border-radius: 999px !important;
  background: var(--il-cream) !important; color: var(--il-navy) !important; font: 400 15px/1.3 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body #root .book-page .book-hero-eyebrow::before { display: none; }
html body #root .book-page .book-hero-title {
  margin: 14px 0 12px !important; color: var(--bk-head) !important; font: 800 clamp(2.5rem, 5vw, 4.2rem)/.95 var(--font-poster) !important;
  letter-spacing: -.02em !important; text-transform: uppercase;
}
html body #root .book-page .book-hero-title em {
  display: block; color: var(--bk-em) !important; font: italic 400 1.06em/1 var(--font-display) !important; letter-spacing: 0; text-transform: none;
}
html body #root .book-page .book-hero-poster {
  position: relative; height: 270px; margin: 22px 0 0; overflow: hidden; border: 2.5px solid var(--bk-line); border-radius: 16px;
  background: var(--bk-sky); box-shadow: 5px 6px 0 var(--bk-line);
}
html body #root .book-page .book-skyline { position: absolute; left: 0; bottom: -2px; width: 100%; height: 100%; }
html body #root .book-page .book-sticker {
  position: absolute; z-index: 1; left: 20px; top: 20px; display: grid; place-content: center; width: 104px; height: 104px; rotate: 12deg;
  border: 2.5px solid var(--il-line, #11172F); border-radius: 50%; background: var(--il-mustard); box-shadow: 4px 5px 0 #11172F; color: var(--il-navy); text-align: center;
}
html body #root .book-page .book-sticker b { font: 800 30px/1 var(--font-poster); }
html body #root .book-page .book-sticker small { font: 400 15px/1 var(--font-hand); }
html body #root .book-page .book-hero-note {
  margin: 22px 0 0 !important; padding: 6px 12px !important; border: 2px solid var(--il-navy) !important; border-radius: 8px !important; background: #FCE7B0 !important;
  color: #3A3D52 !important; font-size: .86rem !important; box-shadow: 3px 4px 0 rgba(17, 23, 47, .85) !important;
}

/* The sheet */
html body #root .book-page .book-form .booking-page .booking-sheet {
  background: var(--bk-paper) !important; color: var(--il-ink) !important; border: 2.5px solid #11172F !important; border-radius: 14px !important;
  box-shadow: 6px 7px 0 #11172F !important;
}
html body #root .book-page .booking-step-title {
  margin: 4px 0 0 !important; color: var(--il-navy) !important; font: 800 clamp(1.5rem, 2.6vw, 1.85rem)/1 var(--font-poster) !important; text-transform: uppercase; letter-spacing: -.01em !important;
}
html body #root .book-page .booking-label,
html body #root .book-page .booking-dates legend {
  color: var(--il-navy) !important; font: 400 18px/1.2 var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important;
}

/* Steps as stops on a route that ends at the house */
html body #root .book-page .booking-progress { position: relative; justify-content: space-between; gap: 0 !important; margin: 0 52px 6px 0 !important; padding: 0 !important; }
html body #root .book-page .booking-progress::before {
  content: ""; position: absolute; left: 14px; right: -38px; top: 14px; border-top: 3px dotted var(--il-navy);
}
html body #root .book-page .booking-progress::after {
  content: ""; position: absolute; right: -52px; top: -8px; width: 40px; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 20 20 7l14 13v15H6Z' fill='%23FFF7E6' stroke='%2311172F' stroke-width='2.5' stroke-linejoin='round'/%3E%3Crect x='16' y='24' width='8' height='11' fill='%23263A72' stroke='%2311172F' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body #root .book-page .booking-progress.is-arrived::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 20 20 7l14 13v15H6Z' fill='%23E4573D' stroke='%2311172F' stroke-width='2.5' stroke-linejoin='round'/%3E%3Crect x='16' y='24' width='8' height='11' fill='%23263A72' stroke='%2311172F' stroke-width='2'/%3E%3C/svg%3E");
}
html body #root .book-page .booking-progress li,
html body #root .book-page .booking-progress button {
  position: relative; flex-direction: column; gap: 2px !important; color: var(--il-navy) !important; font: 400 15px/1.1 var(--font-hand) !important;
}
html body #root .book-page .booking-progress li:not(.is-current):not(.is-done) { color: #6A6D82 !important; }
html body #root .book-page .booking-progress li::after { display: none !important; }
html body #root .book-page .booking-progress-dot {
  width: 28px !important; height: 28px !important; border: 2.5px solid #11172F !important; background: var(--il-cream) !important; color: var(--il-navy) !important;
  font: 400 15px/1 var(--font-hand) !important;
}
html body #root .book-page .booking-progress li.is-done .booking-progress-dot { background: #3E8E8A !important; color: var(--il-cream) !important; }
html body #root .book-page .booking-progress li.is-current .booking-progress-dot { background: var(--il-coral) !important; color: var(--il-cream) !important; box-shadow: 2px 3px 0 #11172F; }
html body #root .book-page .booking-progress button:focus-visible { outline: 2px solid var(--il-navy); outline-offset: 3px; border-radius: 6px; }
html body #root .book-page .booking-done .booking-progress { align-self: stretch; margin-bottom: 18px !important; }

/* Dates and calendar */
html body #root .book-page .booking-date {
  min-height: 54px; padding: 6px 4px !important; border: 0 !important; border-bottom: 2px solid var(--il-navy) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; color: var(--il-navy) !important;
}
html body #root .book-page .booking-date.is-active { border-bottom-color: var(--il-coral) !important; box-shadow: 0 2px 0 var(--il-coral) !important; }
html body #root .book-page .booking-date svg { color: var(--il-coral) !important; }
html body #root .book-page .booking-date small { color: #5A5D72 !important; }
html body #root .book-page .booking-date strong { color: var(--il-navy) !important; font: 400 20px var(--font-hand) !important; }
html body #root .book-page .booking-date strong.is-empty { color: #8A8C9C !important; }
html body #root .book-page .booking-date-arrow { color: var(--il-navy) !important; }
html body #root .book-page .cal-month-label { color: var(--il-navy) !important; font: 400 19px var(--font-hand) !important; }
html body #root .book-page .cal-hint { color: #C8402A !important; font: 400 16px var(--font-hand) !important; }
html body #root .book-page .cal-nav-btn { border: 2px solid var(--il-navy) !important; background: #fff !important; color: var(--il-navy) !important; }
html body #root .book-page .cal-weekday { color: #6A6D82 !important; font: 400 14px var(--font-hand) !important; letter-spacing: 0 !important; }
html body #root .book-page .cal-day { color: var(--il-ink) !important; background: transparent; }
html body #root .book-page .cal-day:disabled { color: #B5B7C4 !important; }
html body #root .book-page .cal-day.is-in-range { background: #F8DA8C !important; }
html body #root .book-page .cal-day.is-start.has-range { background: linear-gradient(90deg, transparent 50%, #F8DA8C 50%) !important; }
html body #root .book-page .cal-day.is-end.has-range { background: linear-gradient(90deg, #F8DA8C 50%, transparent 50%) !important; }
html body #root .book-page .cal-day:hover:not(:disabled) span { background: #F8DA8C !important; }
html body #root .book-page .cal-day.is-today span { box-shadow: inset 0 0 0 2px rgba(38, 58, 114, .45) !important; }
html body #root .book-page .cal-day.is-start span,
html body #root .book-page .cal-day.is-end span { background: var(--il-navy) !important; color: var(--il-cream) !important; box-shadow: 0 0 0 2px #11172F !important; }
html body #root .book-page .booking-nights { color: var(--il-navy) !important; font: 400 17px var(--font-hand) !important; }
html body #root .book-page .booking-nights button { color: #C8402A !important; font: inherit !important; }

/* Guests */
html body #root .book-page .booking-guests {
  padding: 12px 0 0 !important; border: 0 !important; border-top: 2px dashed rgba(38, 58, 114, .3) !important; border-radius: 0 !important; background: transparent !important;
}
html body #root .book-page .booking-guests small { color: #5A5D72 !important; }
html body #root .book-page .booking-stepper button {
  width: 38px !important; height: 38px !important; border: 2.5px solid #11172F !important; background: #fff !important; color: var(--il-navy) !important;
}
html body #root .book-page .booking-stepper output { color: var(--il-navy) !important; font: 400 24px var(--font-hand) !important; }

/* Airbnb price screenshot */
html body #root .book-page .booking-shot-drop,
html body #root .book-page .booking-shot-file {
  border: 2.5px dashed var(--il-navy) !important; border-radius: 14px !important; background: rgba(255, 255, 255, .6) !important; color: var(--il-navy) !important;
}
html body #root .book-page .booking-shot-file { border-style: solid !important; }
html body #root .book-page .booking-shot-drop svg { color: var(--il-navy) !important; }
html body #root .book-page .booking-shot-drop strong,
html body #root .book-page .booking-shot-file strong { color: var(--il-navy) !important; font: 400 19px/1.1 var(--font-hand) !important; }
html body #root .book-page .booking-shot-drop small,
html body #root .book-page .booking-shot-file small { color: #5A5D72 !important; }
html body #root .book-page .booking-shot-file button { border: 2px solid var(--il-navy) !important; background: #fff !important; color: var(--il-navy) !important; }

/* Your details */
html body #root .book-page .booking-field span { color: var(--il-navy) !important; font: 400 18px var(--font-hand) !important; }
html body #root .book-page .booking-field input {
  min-height: 0 !important; padding: 6px 2px !important; border: 0 !important; border-bottom: 2px solid var(--il-navy) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; color: var(--il-ink) !important; font: 400 20px var(--font-hand) !important;
}
html body #root .book-page .booking-field input::placeholder { color: #9A9CAB !important; }
html body #root .book-page .booking-field input:focus { border-bottom-color: var(--il-coral) !important; box-shadow: 0 2px 0 var(--il-coral) !important; }
html body #root .book-page .booking-field input:-webkit-autofill { -webkit-text-fill-color: var(--il-ink) !important; -webkit-box-shadow: 0 0 0 1000px var(--bk-paper) inset !important; }
html body #root .book-page .booking-confirm { color: #3A3D52 !important; font-size: .86rem !important; }
html body #root .book-page .booking-confirm input { accent-color: var(--il-navy); }

/* Buttons */
html body #root .book-page .booking-submit {
  border: 2.5px solid #11172F !important; background: var(--il-coral) !important; color: var(--il-cream) !important; box-shadow: 4px 5px 0 #11172F !important;
  font: 400 21px var(--font-hand) !important; letter-spacing: 0 !important;
}
@media (hover: hover) { html body #root .book-page .booking-submit:hover:not(:disabled) { background: #C8402A !important; } }
html body #root .book-page .booking-submit span[aria-hidden] { margin-left: 6px; }
html body #root .book-page .booking-submit:focus-visible { outline: 3px solid var(--il-navy) !important; }
html body #root .book-page .booking-back { color: #5A5D72 !important; font: 400 17px var(--font-hand) !important; background: none !important; }
html body #root .book-page .booking-error { background: #FCE0D9 !important; color: #8E2F1C !important; border: 2px solid #C8402A; }

/* Request sent */
html body #root .book-page .booking-done-mark { border: 2.5px solid #11172F; background: #86C6D3 !important; color: var(--il-navy) !important; box-shadow: 3px 4px 0 #11172F; }
html body #root .book-page .booking-done .booking-eyebrow {
  padding: 3px 12px 2px; border: 2px solid var(--il-navy); border-radius: 999px; color: var(--il-navy) !important; font: 400 15px var(--font-hand) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body #root .book-page .booking-done h2 { color: var(--il-navy) !important; font: 800 2rem/1 var(--font-poster) !important; text-transform: uppercase; }
html body #root .book-page .booking-done p { color: #4A4D63 !important; }
html body #root .book-page .booking-done strong { color: var(--il-navy) !important; }
html body #root .book-page .booking-done .booking-done-note { margin-top: 0; border: 2px solid var(--il-navy); border-radius: 8px !important; background: #FCE7B0 !important; color: #3A3D52 !important; }

@media (max-width: 900px) {
  html body #root .book-page .book-hero-title { font-size: clamp(2.3rem, 11vw, 3rem) !important; }
  html body #root .book-page .book-hero-poster { height: 170px; margin-top: 16px; }
  html body #root .book-page .book-sticker { width: 84px; height: 84px; left: auto; right: 16px; top: 12px; }
  html body #root .book-page .booking-step-title { font-size: 1.4rem !important; }
  html body #root .book-page .book-sticker b { font-size: 24px; }
  html body #root .book-page .book-sticker small { font-size: 13px; }
  html body #root .book-page .book-hero-note { margin-top: 16px !important; }
  html body #root .book-page .book-form .booking-page .booking-sheet { border-radius: 14px 14px 0 0 !important; border-bottom: 0 !important; box-shadow: 0 -2px 0 #11172F !important; }
  html body #root .book-page .book-layout { padding-top: 28px !important; }
}

@media (prefers-color-scheme: dark) {
  html body #root .book-page { --bk-bg: #1B2348; --bk-paper: #F3EAD3; --bk-head: #F3EAD3; --bk-sub: rgba(243, 234, 211, .78); --bk-em: #F59A85; --bk-sky: #34497F; --bk-line: #0B1024; color-scheme: dark; }
  html body #root .book-page .book-hero-poster { border-color: #F3EAD3; }
  /* The sheet stays paper at night, so keep the price box in its day colours */
  html body #root .book-page .booking-shot-guide { background: #ECECF7 !important; }
  html body #root .book-page .booking-shot-ask { color: #22264A !important; }
}
html body #root .book-page .booking-cal-wrap .cal { background: #fff !important; border: 2px solid var(--il-navy) !important; border-radius: 12px !important; box-shadow: 3px 4px 0 rgba(17, 23, 47, .85) !important; }