/* ==========================================================================
   Corazón — "Adobe & Cedar" homepage theme
   Loaded after styles.css. Re-tones the whole guide in earth colours,
   swaps in an editorial type pairing, and styles the new homepage
   sections (welcome note, The House, curated areas).
   ========================================================================== */

:root {
    /* Earth palette */
    --cz-bone: #F4EDE2;
    --cz-linen: #EBE1D2;
    --cz-sand: #D8C6AC;
    --cz-clay: #B65A34;
    --cz-clay-deep: #8E3F22;
    --cz-ochre: #C8954A;
    --cz-moss: #5B6644;
    --cz-umber: #5A3E2B;
    --cz-espresso: #241810;
    --cz-ink: #2A2019;
    --cz-muted: #6F6052;
    --cz-hair: rgba(42, 32, 25, 0.14);
    --cz-hair-light: rgba(244, 237, 226, 0.18);

    /* Re-map the existing design tokens */
    --white: #FFFDF9;
    --light: var(--cz-bone);
    --off-white: var(--cz-bone);
    --dark: var(--cz-ink);
    --text-primary: #3D3128;
    --text-secondary: var(--cz-muted);
    --accent: var(--cz-clay);
    --accent-light: #CC7A52;
    --accent-dark: var(--cz-clay-deep);
    --accent-hover: #7A361C;
    --primary: var(--cz-umber);
    --primary-light: #7A5840;
    --primary-dark: #3A281C;
    --gray: #8A7B6D;
    --gray-light: #E4D9C9;
    --gray-medium: #D3C5B1;
    --gray-dark: #6F6052;
    --border-color: #D3C5B1;
    --gradient-primary: linear-gradient(135deg, #5A3E2B 0%, #3A281C 100%);
    --gradient-accent: linear-gradient(135deg, #B65A34 0%, #C8954A 100%);
    --gradient-dark: linear-gradient(180deg, rgba(36, 24, 16, 0.95) 0%, rgba(36, 24, 16, 0.98) 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(36, 24, 16, 0.2) 0%, rgba(36, 24, 16, 0.65) 100%);
    --gradient-hero: linear-gradient(180deg, rgba(36, 24, 16, 0.35) 0%, rgba(36, 24, 16, 0.85) 100%);
    --motion-glow-cyan: 200, 149, 74;
    --motion-glow-gold: 182, 90, 52;

    /* Editorial type */
    --font-main: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Gloock', Georgia, 'Times New Roman', serif;
    --font-heading: 'Gloock', Georgia, 'Times New Roman', serif;

    --cz-gutter: clamp(1rem, 4vw, 3.5rem);
    --cz-max: 1240px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    background: var(--cz-bone);
    color: var(--text-primary);
    font-weight: 400;
    letter-spacing: 0.005em;
}

/* Fine paper grain over everything — quiet texture, never in the way */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    opacity: 0.07;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .15 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
    background: rgba(182, 90, 52, 0.22);
    color: var(--cz-ink);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--cz-ink);
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

h1 { font-weight: 300; }
h2 { font-weight: 400; line-height: 1.05; }
h3 { font-weight: 500; }
h4 { font-weight: 600; }

h2 em, h3 em, h1 em {
    font-style: italic;
    font-weight: 300;
}

.section-title {
    color: var(--cz-ink);
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 300;
}

.section-subtitle,
.seasonal-subtitle {
    color: var(--cz-muted);
    font-size: 1.08rem;
    font-weight: 300;
    max-width: 620px;
}

/* Replace the cyan sweep under headings with a hand-drawn-feeling rule */
.motion-heading-sweep::after {
    width: 4.5rem;
    height: 1px;
    border-radius: 0;
    background: var(--cz-clay);
    box-shadow: none;
}

/* Shared editorial primitives ------------------------------------------- */

.ed-eyebrow,
.hero-eyebrow,
.guide-eyebrow {
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.ed-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 1.4rem;
    color: var(--cz-clay);
}

.ed-eyebrow::before {
    content: '';
    width: 2.25rem;
    height: 1px;
    background: currentColor;
}

.ed-title {
    margin: 0 0 1.25rem;
    color: var(--cz-ink);
    font-size: clamp(2.5rem, 5.6vw, 4.75rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.ed-title em {
    display: block;
    color: var(--cz-umber);
}

.ed-lede {
    max-width: 34rem;
    margin: 0;
    color: var(--cz-muted);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.75;
}

.ed-header {
    max-width: var(--cz-max);
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.ed-header--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.ed-header--split .ed-title {
    max-width: 16ch;
    margin-bottom: 0;
}

.ed-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.3rem;
    color: var(--cz-clay-deep);
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid currentColor;
    transition: color 0.25s ease, gap 0.35s var(--ease-out-expo);
}

.ed-link:hover,
.ed-link:focus-visible {
    color: var(--cz-ink);
    gap: 0.9rem;
}

.ed-link:focus-visible {
    outline: 2px solid var(--cz-clay);
    outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Hero — full-bleed, bottom-anchored, editorial
   -------------------------------------------------------------------------- */

.confirmed-guest-hero {
    min-height: 760px;
    height: 100svh;
    align-items: flex-end;
    justify-content: flex-start;
    background: var(--cz-espresso);
}

.hero-scenes {
    background: var(--cz-espresso);
}

/* Warm the photography so it sits in the palette */
.hero-scene {
    filter: sepia(0.22) saturate(0.82) contrast(1.04) brightness(0.96);
}

.topo-background-canvas {
    opacity: 0.55;
    mix-blend-mode: soft-light;
}

.guest-hero-scrim {
    background:
        radial-gradient(ellipse 80% 70% at 12% 100%, rgba(36, 24, 16, 0.55) 0%, transparent 70%);
}

.guest-hero-content {
    width: 100%;
    max-width: none;
    align-items: flex-start;
    text-align: left;
    padding: 0 var(--cz-gutter) clamp(2rem, 5vh, 3.5rem) calc(var(--cz-gutter) + 48px);
}

.hero-eyebrow {
    padding: 0;
    gap: 0.9rem;
    color: rgba(244, 226, 198, 0.9);
    background: none;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hero-eyebrow::before {
    content: '';
    width: 2.75rem;
    height: 1px;
    background: currentColor;
}

.guest-hero-content .hero-title {
    max-width: none;
    margin: 0.9rem 0 1.1rem;
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 8.6vw, 8.25rem);
    font-weight: 300;
    line-height: 0.88;
    letter-spacing: -0.035em;
    text-shadow: 0 2px 40px rgba(20, 12, 6, 0.35);
}

.hero-title-accent {
    display: block;
    margin-left: clamp(1.5rem, 9vw, 9rem);
    color: #F1D3AE;
    font-style: italic;
    font-weight: 300;
}

.guest-hero-content .hero-subtitle {
    max-width: 30rem;
    margin: 0 0 clamp(1.75rem, 4vh, 3rem);
    color: rgba(251, 244, 234, 0.84);
    font-family: var(--font-main);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    font-weight: 300;
    line-height: 1.7;
    text-shadow: none;
}

/* Highlights become a numbered index along the bottom edge */
.hero-trust-strip {
    counter-reset: cz-hero;
    width: 100%;
    max-width: none;
    margin-top: 0;
    gap: 0;
    background: none;
    border: 0;
    border-top: 1px solid rgba(244, 226, 198, 0.28);
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.hero-highlight,
.hero-highlight:first-child,
.hero-highlight:last-child {
    counter-increment: cz-hero;
    padding: 1.15rem 1.5rem 0.25rem 0;
    border-right: 0;
    border-radius: 0;
    color: rgba(244, 226, 198, 0.62);
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 300;
    text-align: left;
    background: none;
}

.hero-highlight::before {
    content: counter(cz-hero, upper-roman) '.';
    display: block;
    margin-bottom: 0.45rem;
    color: rgba(241, 211, 174, 0.7);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-style: italic;
}

.hero-highlight::after {
    top: -1px;
    right: auto;
    bottom: auto;
    left: 0;
    width: 3.5rem;
    height: 1px;
    border-radius: 0;
    background: #F1D3AE;
    box-shadow: none;
    transform-origin: left center;
}

.hero-highlight .hero-highlight-icon {
    display: none;
}

.hero-highlight strong {
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
}

.hero-highlight span {
    margin-top: 0.3rem;
}

.hero-highlight:hover,
.hero-highlight.is-active {
    color: rgba(251, 244, 234, 0.9);
    background: none;
}

.hero-highlight:focus-visible {
    outline: 1px solid #F1D3AE;
    outline-offset: 4px;
}

/* Vertical coordinates on the right edge */
.hero-marginalia {
    position: absolute;
    top: 50%;
    right: clamp(0.75rem, 2vw, 2rem);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(244, 226, 198, 0.66);
    font-family: var(--font-main);
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: translateY(-50%);
}

.hero-marginalia-rule {
    width: 1px;
    height: 3.5rem;
    background: currentColor;
}

/* Slowly turning seal — the "eccentric" signature */
.hero-seal {
    position: absolute;
    top: clamp(1.5rem, 6vh, 4rem);
    right: clamp(3rem, 7vw, 7rem);
    z-index: 10;
    width: clamp(92px, 9vw, 128px);
    aspect-ratio: 1;
    color: #F1D3AE;
}

.hero-seal svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hero-seal text {
    fill: currentColor;
    font-family: var(--font-main);
    font-size: 8.6px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero-seal svg > text {
    transform-origin: 60px 60px;
    animation: cz-seal-turn 38s linear infinite;
}

.hero-seal-heart {
    fill: none;
    stroke: var(--cz-ochre);
    stroke-width: 1.1;
}

@keyframes cz-seal-turn {
    to { transform: rotate(360deg); }
}

.scroll-indicator {
    display: none;
}

/* --------------------------------------------------------------------------
   Welcome note
   -------------------------------------------------------------------------- */

.host-note {
    position: relative;
    padding: clamp(5rem, 11vw, 9.5rem) var(--cz-gutter);
    background: var(--cz-bone);
    scroll-margin-top: 20px;
}

.host-note-inner {
    max-width: var(--cz-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: center;
}

.host-note-figure {
    margin: 0;
}

.host-note-arch {
    aspect-ratio: 4 / 5.2;
    overflow: hidden;
    border-radius: 999px 999px 4px 4px;
    background: var(--cz-linen);
    box-shadow: 0 40px 80px -40px rgba(58, 40, 28, 0.45);
}

.host-note-arch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.12) saturate(0.9);
    transition: transform 1.6s var(--ease-out-expo);
}

.host-note-figure:hover .host-note-arch img {
    transform: scale(1.04);
}

.host-note-figure figcaption {
    margin-top: 1rem;
    color: var(--cz-muted);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-style: italic;
    text-align: center;
}

.host-note-lede {
    max-width: 34rem;
    margin: 0 0 2.5rem;
    color: var(--cz-muted);
    font-size: 1.08rem;
    font-weight: 300;
    line-height: 1.8;
}

.host-note-ledger {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--cz-hair);
}

.host-note-ledger-row {
    padding: 1.25rem 1.25rem 1.25rem 0;
    border-bottom: 1px solid var(--cz-hair);
}

.host-note-ledger-row:nth-child(odd) {
    border-right: 1px solid var(--cz-hair);
}

.host-note-ledger-row:nth-child(even) {
    padding-left: 1.5rem;
}

.host-note-ledger dt {
    margin-bottom: 0.4rem;
    color: var(--cz-clay);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.host-note-ledger dd {
    margin: 0;
}

.host-note-ledger strong {
    display: block;
    color: var(--cz-ink);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 400;
    line-height: 1.1;
}

.host-note-ledger span {
    color: var(--cz-muted);
    font-size: 0.86rem;
    font-weight: 300;
}

/* --------------------------------------------------------------------------
   Stay route (existing Overview) — calmer, editorial
   -------------------------------------------------------------------------- */

.overview-section,
.guest-guide-overview {
    background: var(--cz-linen);
    padding: clamp(5rem, 10vw, 8.5rem) 0;
}

.guest-guide-container {
    max-width: var(--cz-max);
    padding: 0 var(--cz-gutter);
}

.guest-guide-heading {
    max-width: 720px;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.guide-eyebrow {
    color: var(--cz-clay);
}

.guest-guide-heading .section-title {
    color: var(--cz-ink);
    font-size: clamp(2.8rem, 6vw, 4.75rem);
    font-weight: 300;
}

.guest-guide-heading .section-subtitle {
    color: var(--cz-muted);
}

.stay-route {
    gap: 0;
    margin-bottom: clamp(3.5rem, 7vw, 6rem);
    border-top: 1px solid var(--cz-hair);
}

.stay-route::before {
    display: none;
}

.stay-route-stop {
    padding: 2rem 1.75rem 0 0;
}

.stay-route-stop + .stay-route-stop {
    padding-left: 1.75rem;
    border-left: 1px solid var(--cz-hair);
}

.stay-route-marker,
.stay-route-stop:nth-child(2) .stay-route-marker,
.stay-route-stop:nth-child(3) .stay-route-marker,
.stay-route-stop:nth-child(4) .stay-route-marker {
    width: auto;
    height: auto;
    margin-bottom: 1.25rem;
    display: block;
    color: var(--cz-clay);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.stay-route-marker span {
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-style: italic;
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1;
}

.stay-route-copy h3 {
    color: var(--cz-ink);
    font-size: 1.65rem;
    font-weight: 500;
}

.stay-route-copy p {
    color: var(--cz-muted);
    font-size: 0.95rem;
    font-weight: 300;
}

.stay-route-copy a {
    color: var(--cz-clay-deep);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.stay-route-copy a:hover,
.stay-route-copy a:focus-visible {
    color: var(--cz-ink);
}

/* Inside your guide — a dark, cedar-panelled index */
.guide-directory {
    padding: clamp(2rem, 5vw, 4rem);
    color: #F4E8D8;
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(182, 90, 52, 0.28) 0%, transparent 60%),
        linear-gradient(160deg, #3A281C 0%, var(--cz-espresso) 100%);
    border-radius: 4px;
    box-shadow: 0 50px 90px -50px rgba(36, 24, 16, 0.7);
}

.guide-directory-heading {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--cz-hair-light);
}

.guide-directory-heading .guide-eyebrow {
    color: var(--cz-ochre);
}

.guide-directory-heading h3 {
    color: #FBF4EA;
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-style: italic;
    font-weight: 300;
}

.guide-directory-grid {
    gap: 0;
}

.guide-directory-link {
    padding: 1.4rem 1.25rem 1.4rem 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--cz-hair-light);
    border-radius: 0;
}

.guide-directory-link:hover,
.guide-directory-link:focus-visible {
    background: none;
    border-color: rgba(200, 149, 74, 0.6);
    transform: translateX(4px);
}

.guide-directory-link:focus-visible {
    outline: 1px solid var(--cz-ochre);
}

.guide-directory-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: none;
    border: 1px solid rgba(244, 226, 198, 0.24);
    filter: sepia(0.6) saturate(0.6);
}

.guide-directory-link strong {
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
}

.guide-directory-link small {
    color: rgba(244, 226, 198, 0.6);
    font-size: 0.78rem;
    font-weight: 300;
}

.guide-directory-arrow {
    color: var(--cz-ochre);
}

/* --------------------------------------------------------------------------
   The House — exclusive amenities
   -------------------------------------------------------------------------- */

.the-house {
    padding: clamp(5rem, 11vw, 9.5rem) var(--cz-gutter);
    background: var(--cz-bone);
    scroll-margin-top: 20px;
}

.the-house-inner {
    max-width: var(--cz-max);
    margin: 0 auto;
}

.the-house .ed-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.the-house .ed-title {
    max-width: 14ch;
}

.house-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 300px 300px auto;
    grid-template-areas:
        "roof roof kitchen"
        "roof roof park"
        "living keys climate";
    gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.house-tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
}

.house-tile--roof { grid-area: roof; border-radius: 4px 4px 4px 220px; }
.house-tile--kitchen { grid-area: kitchen; }
.house-tile--living { grid-area: living; min-height: 340px; }
.house-tile--park { grid-area: park; }
.house-tile--keys { grid-area: keys; }
.house-tile--climate { grid-area: climate; }

.house-tile--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.18) saturate(0.85);
    transition: transform 1.8s var(--ease-out-expo);
}

.house-tile--image:hover img {
    transform: scale(1.045);
}

.house-tile--image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(36, 24, 16, 0) 40%, rgba(36, 24, 16, 0.78) 100%);
    pointer-events: none;
}

.house-tile--image figcaption {
    position: absolute;
    left: clamp(1.25rem, 2.5vw, 2rem);
    right: clamp(1.25rem, 2.5vw, 2rem);
    bottom: clamp(1.25rem, 2.5vw, 2rem);
    z-index: 1;
    color: rgba(251, 244, 234, 0.82);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.5;
}

.house-tile--roof figcaption {
    left: auto;
    max-width: 22rem;
    text-align: right;
}

.house-tile--image figcaption strong {
    display: block;
    margin: 0.15rem 0 0.35rem;
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 400;
    line-height: 1;
}

.house-tile--roof figcaption strong {
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    font-style: italic;
    font-weight: 300;
}

.house-tile-index {
    color: #F1D3AE;
    font-family: var(--font-display);
    font-size: 1rem;
    font-style: italic;
}

.house-tile--text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
    background: var(--cz-linen);
    border: 1px solid var(--cz-hair);
}

.house-tile--park {
    color: #F4E8D8;
    background: var(--cz-moss);
    border-color: transparent;
}

.house-tile--keys {
    background: #E3D2BB;
}

.house-tile-icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: auto;
    color: var(--cz-clay);
    border: 1px solid currentColor;
    border-radius: 50%;
}

.house-tile--park .house-tile-icon {
    color: #F1D3AE;
}

.house-tile-label {
    margin: 1.75rem 0 0.4rem;
    color: var(--cz-clay);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.house-tile--park .house-tile-label {
    color: #F1D3AE;
}

.house-tile--text h3 {
    margin: 0 0 0.6rem;
    color: inherit;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    font-weight: 500;
    line-height: 1.1;
}

.house-tile--text:not(.house-tile--park) h3 {
    color: var(--cz-ink);
}

.house-tile-body {
    margin: 0 0 1.25rem;
    color: var(--cz-muted);
    font-size: 0.93rem;
    font-weight: 300;
    line-height: 1.65;
}

.house-tile--park .house-tile-body {
    color: rgba(244, 232, 216, 0.8);
}

.house-tile--park .ed-link {
    color: #F1D3AE;
}

.house-amenity-strip {
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--cz-hair);
    border-bottom: 1px solid var(--cz-hair);
}

.house-amenity-strip li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.25rem 1.5rem 0;
}

.house-amenity-strip li + li {
    padding-left: 1.25rem;
    border-left: 1px solid var(--cz-hair);
}

.house-amenity-strip .house-tile-icon {
    flex: 0 0 auto;
    margin: 0;
    border: 0;
    width: auto;
    height: auto;
}

.house-amenity-strip strong {
    display: block;
    color: var(--cz-ink);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
}

.house-amenity-strip small {
    display: block;
    color: var(--cz-muted);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Curated areas — arched windows onto the city
   -------------------------------------------------------------------------- */

.curated-areas {
    padding: clamp(5rem, 10vw, 8.5rem) 0;
    background: var(--cz-espresso);
    color: #F4E8D8;
    scroll-margin-top: 20px;
    overflow: hidden;
}

.curated-areas .ed-header {
    padding: 0 var(--cz-gutter);
}

.curated-areas .ed-eyebrow,
.curated-areas .ed-link {
    color: var(--cz-ochre);
}

.curated-areas .ed-link:hover,
.curated-areas .ed-link:focus-visible {
    color: #FBF4EA;
}

.curated-areas .ed-title {
    color: #FBF4EA;
}

.curated-areas .ed-title em {
    color: #E8C9A2;
}

.curated-track {
    margin: 0;
    padding: 0.5rem max(var(--cz-gutter), calc((100vw - var(--cz-max)) / 2)) 1.5rem;
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(240px, 24vw, 310px);
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--cz-gutter), calc((100vw - var(--cz-max)) / 2));
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 149, 74, 0.5) transparent;
}

.curated-card {
    scroll-snap-align: start;
}

.curated-card:nth-child(even) {
    margin-top: 3rem;
}

.curated-card-link {
    display: block;
    color: inherit;
}

.curated-card-arch {
    position: relative;
    aspect-ratio: 3 / 4.2;
    overflow: hidden;
    border-radius: 999px 999px 3px 3px;
    background: #3A281C;
}

.curated-card-arch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.25) saturate(0.8) brightness(0.92);
    transition: transform 1.6s var(--ease-out-expo), filter 0.6s ease;
}

.curated-card-link:hover .curated-card-arch img,
.curated-card-link:focus-visible .curated-card-arch img {
    transform: scale(1.06);
    filter: sepia(0.08) saturate(0.95) brightness(1);
}

.curated-card-link:focus-visible {
    outline: 1px solid var(--cz-ochre);
    outline-offset: 6px;
}

.curated-card-mood {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    padding: 0.4rem 0.85rem;
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: 1rem;
    font-style: italic;
    white-space: nowrap;
    background: rgba(36, 24, 16, 0.55);
    border: 1px solid rgba(244, 226, 198, 0.3);
    border-radius: 999px;
    transform: translateX(-50%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.curated-card-no {
    display: block;
    margin: 1.25rem 0 0.25rem;
    color: var(--cz-ochre);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-style: italic;
}

.curated-card h3 {
    margin: 0 0 0.5rem;
    color: #FBF4EA;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.1;
}

.curated-card-journey {
    margin: 0 0 0.35rem;
    color: rgba(244, 232, 216, 0.8);
    font-size: 0.86rem;
    font-weight: 300;
}

.curated-card-first {
    margin: 0;
    color: rgba(244, 232, 216, 0.55);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.curated-card-first span {
    color: #E8C9A2;
    letter-spacing: 0.04em;
    text-transform: none;
    font-family: var(--font-display);
    font-size: 1rem;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Existing sections — re-toned
   -------------------------------------------------------------------------- */

.dining-section {
    background: var(--cz-linen);
}

.neighborhoods-explore-section {
    background: var(--cz-bone);
}

.essentials-section {
    background: var(--cz-linen);
}

.view-toggle-btn {
    background: transparent;
    border: 1px solid var(--cz-hair);
    border-radius: 999px;
    color: var(--cz-ink);
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.view-toggle-btn:hover {
    background: rgba(90, 62, 43, 0.06);
    border-color: rgba(90, 62, 43, 0.35);
    box-shadow: none;
}

.view-toggle-btn.active {
    color: #FBF4EA;
    background: var(--cz-umber);
    border-color: var(--cz-umber);
    box-shadow: none;
}

.accordion-header {
    border-bottom: 1px solid var(--cz-hair);
}

.accordion-header:hover {
    background: rgba(90, 62, 43, 0.04);
}

.accordion-item.active .accordion-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--cz-clay);
    box-shadow: none;
}

.accordion-title {
    color: var(--cz-ink);
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 500;
}

.accordion-count {
    color: var(--cz-muted);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
}

.accordion-icon {
    color: var(--cz-clay);
}

/* Metro rail — thinner, umber */
.page-track-line {
    width: 1px;
    background: rgba(90, 62, 43, 0.45);
}

/* Bottom navigation — espresso glass instead of blue */
.bottom-nav {
    background: rgba(36, 24, 16, 0.82);
    border-top: 1px solid rgba(244, 226, 198, 0.14);
    box-shadow: 0 -10px 40px rgba(36, 24, 16, 0.25);
}

.bottom-nav-tab {
    color: rgba(244, 226, 198, 0.55);
    font-family: var(--font-main);
}

.bottom-nav-tab.active {
    color: #F1D3AE;
    text-shadow: none;
}

/* Mobile menu */
.mobile-menu {
    background: rgba(36, 24, 16, 0.96);
}

.mobile-menu-title,
.mobile-menu-link {
    font-family: var(--font-display);
}

/* --------------------------------------------------------------------------
   Footer — the last page of the guide
   -------------------------------------------------------------------------- */

.footer {
    background: var(--cz-espresso);
}

.footer-hero {
    height: clamp(460px, 70vh, 640px);
}

.seattle-skyline {
    background:
        linear-gradient(180deg, rgba(36, 24, 16, 0.25) 0%, rgba(36, 24, 16, 0.85) 100%),
        url('images/property-seattle-skyline.webp') center/cover no-repeat;
    filter: sepia(0.2) saturate(0.85);
}

.footer-overlay {
    background: none;
}

.footer-overlay h2 {
    color: #FBF4EA;
    font-size: clamp(3rem, 7vw, 6rem);
    font-style: italic;
    font-weight: 300;
}

.footer-overlay p,
.footer-contact {
    max-width: 38rem;
    color: rgba(244, 232, 216, 0.85);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
}

.footer-bottom {
    background: #1A110B;
}

.footer-bottom p {
    color: rgba(244, 226, 198, 0.6);
    font-size: 0.82rem;
    font-weight: 300;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .house-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 320px 260px auto auto;
        grid-template-areas:
            "roof roof"
            "kitchen living"
            "park keys"
            "climate climate";
    }

    .house-tile--roof { border-radius: 4px 4px 4px 160px; }
    .house-tile--living { min-height: 0; }

    .house-amenity-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .house-amenity-strip li:nth-child(3) {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--cz-hair);
    }

    .house-amenity-strip li:nth-child(4) {
        border-top: 1px solid var(--cz-hair);
    }
}

@media (max-width: 900px) {
    .stay-route {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stay-route-stop:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .stay-route-stop:nth-child(n + 3) {
        border-top: 1px solid var(--cz-hair);
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .confirmed-guest-hero {
        min-height: 680px;
    }

    .guest-hero-content {
        padding: 0 1rem 6.5rem;
    }

    .guest-hero-content .hero-title {
        font-size: clamp(3rem, 15vw, 4.6rem);
    }

    .hero-title-accent {
        margin-left: 2.25rem;
    }

    .hero-trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0.25rem;
    }

    .hero-highlight,
    .hero-highlight:first-child,
    .hero-highlight:last-child {
        padding: 0.9rem 0.75rem 0.4rem 0;
    }

    .hero-highlight:nth-child(n + 3) {
        border-top: 1px solid rgba(244, 226, 198, 0.2);
    }

    .hero-highlight strong {
        font-size: 1.1rem;
    }

    .hero-highlight > span:last-child {
        font-size: 0.74rem;
    }

    .hero-marginalia {
        display: none;
    }

    .hero-seal {
        top: 1rem;
        right: auto;
        left: 1rem;
        width: 84px;
    }

    .host-note-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .host-note-figure {
        max-width: 300px;
        width: 78%;
        margin: 0 auto;
    }

    .host-note-ledger {
        grid-template-columns: minmax(0, 1fr);
    }

    .host-note-ledger-row,
    .host-note-ledger-row:nth-child(even) {
        padding: 1.1rem 0;
        border-right: 0;
    }

    .host-note-ledger-row:nth-child(odd) {
        border-right: 0;
    }

    .stay-route {
        grid-template-columns: minmax(0, 1fr);
    }

    .stay-route-stop,
    .stay-route-stop + .stay-route-stop,
    .stay-route-stop:nth-child(3) {
        padding: 1.75rem 0 0;
        margin-top: 0;
        border-left: 0;
    }

    .stay-route-stop + .stay-route-stop {
        margin-top: 1.75rem;
        border-top: 1px solid var(--cz-hair);
    }

    .stay-route-copy p {
        min-height: 0;
    }

    .ed-header--split {
        flex-direction: column;
        align-items: flex-start;
    }

    .house-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-rows: auto;
        grid-template-areas:
            "roof"
            "kitchen"
            "park"
            "living"
            "keys"
            "climate";
    }

    .house-tile--image {
        aspect-ratio: 4 / 3.4;
    }

    .house-tile--roof {
        aspect-ratio: 4 / 4.6;
        border-radius: 4px 4px 4px 120px;
    }

    .house-tile--roof figcaption {
        left: 1.25rem;
    }

    .house-tile-icon {
        margin-bottom: 0;
    }

    .house-amenity-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .house-amenity-strip li,
    .house-amenity-strip li + li,
    .house-amenity-strip li:nth-child(3),
    .house-amenity-strip li:nth-child(4) {
        padding: 1.15rem 0;
        border-left: 0;
        border-top: 0;
    }

    .house-amenity-strip li + li {
        border-top: 1px solid var(--cz-hair);
    }

    .curated-track {
        grid-auto-columns: 72vw;
    }

    .curated-card:nth-child(even) {
        margin-top: 1.5rem;
    }

    .footer-overlay {
        left: 0;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-seal svg > text {
        animation: none;
    }

    .host-note-arch img,
    .house-tile--image img,
    .curated-card-arch img {
        transition: none;
    }
}

/* --- polish pass --- */
.stay-route-copy a { white-space: nowrap; }
.the-house .ed-title { max-width: 18ch; }
.ed-header--split .ed-title { max-width: 20ch; }
.accordion-count { font-family: var(--font-main); }

.hero-seal::before {
    content: '';
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36, 24, 16, 0.5) 0%, rgba(36, 24, 16, 0.28) 55%, transparent 72%);
}

.hero-seal svg { position: relative; }

@media (max-width: 768px) {
    .guest-hero-scrim {
        background: linear-gradient(180deg, rgba(36, 24, 16, 0.25) 0%, rgba(36, 24, 16, 0.5) 38%, rgba(28, 18, 11, 0.88) 100%);
    }

    .guest-hero-content .hero-subtitle {
        padding-right: 1.5rem;
        font-size: 0.98rem;
    }
}


/* ==========================================================================
   Type system: Gloock (display) + Familjen Grotesk (text)
   Gloock is a single-weight, high-contrast display serif with no italic,
   so accent phrases are set apart by colour rather than style. Body copy
   gets a larger floor on phones so everything reads comfortably.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.section-title,
.ed-title,
.guest-hero-content .hero-title,
.accordion-title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
}

h1 em, h2 em, h3 em,
.ed-title em,
.hero-title-accent {
    font-style: normal;
    font-weight: 400;
}

/* Decorative labels that were serif italics become small grotesk caps */
.hero-highlight::before,
.house-tile-index,
.curated-card-no,
.host-note-figure figcaption {
    font-family: var(--font-main);
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.curated-card-mood,
.curated-card-first span,
.footer-overlay p,
.footer-contact {
    font-family: var(--font-main);
    font-style: normal;
}

.stay-route-marker span,
.guide-directory-heading h3,
.house-tile--roof figcaption strong,
.footer-overlay h2 {
    font-style: normal;
    font-weight: 400;
}

/* Body text a touch larger and steadier */
body {
    font-size: 17px;
    letter-spacing: 0;
}

.ed-lede,
.host-note-lede,
.section-subtitle,
.seasonal-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.7;
}

.stay-route-copy p,
.house-tile-body {
    font-size: 1rem;
    font-weight: 400;
}

.guest-hero-content .hero-subtitle,
.hero-highlight,
.host-note-ledger span,
.house-amenity-strip small,
.guide-directory-link small,
.curated-card-journey {
    font-weight: 400;
}

/* Hero */
.guest-hero-content .hero-title {
    font-size: clamp(3rem, 7.6vw, 7.4rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
}

.hero-title-accent {
    margin-left: clamp(1.25rem, 7vw, 7rem);
}

.hero-highlight strong {
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    letter-spacing: 0;
}

.hero-highlight span {
    font-size: 0.9rem;
}

/* Titles */
.section-title,
.guest-guide-heading .section-title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    letter-spacing: -0.02em;
}

.ed-title {
    font-size: clamp(2.3rem, 4.8vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.ed-title em {
    color: var(--cz-clay);
}

.curated-areas .ed-title em {
    color: var(--cz-ochre);
}

.the-house .ed-title,
.ed-header--split .ed-title {
    max-width: 20ch;
}

.ed-eyebrow,
.hero-eyebrow,
.guide-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.ed-link,
.stay-route-copy a {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

/* Welcome note */
.host-note-ledger dt,
.house-tile-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.host-note-ledger strong {
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
}

.host-note-ledger span {
    font-size: 0.95rem;
}

/* Stay route */
.stay-route-marker span {
    font-size: 3.2rem;
    letter-spacing: -0.02em;
}

.stay-route-copy h3 {
    font-size: 1.5rem;
}

.guide-directory-heading h3 {
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
}

.guide-directory-link strong {
    font-size: 1.15rem;
}

.guide-directory-link small {
    font-size: 0.85rem;
}

/* The House */
.house-tile--image figcaption {
    font-size: 0.98rem;
    font-weight: 400;
}

.house-tile--image figcaption strong {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.house-tile--roof figcaption strong {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.house-tile--text h3 {
    font-size: clamp(1.4rem, 2vw, 1.7rem);
}

.house-amenity-strip strong {
    font-size: 1.12rem;
}

.house-amenity-strip small {
    font-size: 0.92rem;
}

/* Curated areas */
.curated-card h3 {
    font-size: 1.55rem;
}

.curated-card-journey {
    font-size: 0.98rem;
}

.curated-card-first {
    font-size: 0.75rem;
}

.curated-card-mood {
    font-size: 0.85rem;
    font-weight: 500;
}

.curated-card-first span {
    font-size: 0.95rem;
    font-weight: 500;
}

/* Existing sections */
.accordion-title {
    font-size: 1.3rem;
    letter-spacing: 0;
}

.accordion-count {
    font-size: 0.72rem;
}

/* Footer */
.footer-overlay h2 {
    font-size: clamp(2.6rem, 6vw, 5.2rem);
    letter-spacing: -0.02em;
}

.footer-overlay p,
.footer-contact {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 400;
}

/* ---------- Phones: readable first ---------- */
@media (max-width: 768px) {
    body {
        font-size: 17px;
    }

    p {
        font-size: 1.0625rem;
        line-height: 1.7;
    }

    .guest-hero-content .hero-title {
        font-size: clamp(2.9rem, 14vw, 3.9rem);
        line-height: 0.98;
    }

    .hero-title-accent {
        margin-left: 1.25rem;
    }

    .guest-hero-content .hero-subtitle {
        font-size: 1.0625rem;
        line-height: 1.6;
        color: rgba(251, 244, 234, 0.92);
    }

    .hero-highlight,
    .hero-highlight:first-child,
    .hero-highlight:last-child {
        color: rgba(244, 226, 198, 0.82);
    }

    .hero-highlight strong {
        font-size: 1.12rem;
        line-height: 1.2;
    }

    .hero-highlight > span:last-child {
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .section-title,
    .guest-guide-heading .section-title,
    .ed-title {
        font-size: clamp(2.15rem, 9.5vw, 2.7rem);
        line-height: 1.08;
    }

    .ed-lede,
    .host-note-lede,
    .section-subtitle,
    .seasonal-subtitle,
    .stay-route-copy p,
    .house-tile-body {
        font-size: 1.0625rem;
        line-height: 1.7;
    }

    .ed-eyebrow,
    .hero-eyebrow,
    .guide-eyebrow {
        font-size: 0.78rem;
        letter-spacing: 0.16em;
    }

    .ed-link,
    .stay-route-copy a {
        font-size: 0.875rem;
        letter-spacing: 0.08em;
    }

    .host-note-ledger strong {
        font-size: 1.6rem;
    }

    .host-note-ledger span,
    .house-amenity-strip small,
    .guide-directory-link small {
        font-size: 0.95rem;
    }

    .stay-route-copy h3,
    .house-tile--text h3,
    .curated-card h3 {
        font-size: 1.55rem;
    }

    .guide-directory-link strong {
        font-size: 1.15rem;
        white-space: normal;
    }

    .guide-directory-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .house-tile--image figcaption {
        font-size: 1rem;
    }

    .house-tile--roof figcaption strong {
        font-size: 2.3rem;
    }

    .house-amenity-strip strong {
        font-size: 1.15rem;
    }

    .curated-card-journey {
        font-size: 1rem;
    }

    .curated-card-first {
        font-size: 0.78rem;
    }

    .curated-card-first span {
        font-size: 1rem;
    }

    .accordion-title {
        font-size: 1.2rem;
    }

    .footer-overlay h2 {
        font-size: 2.6rem;
    }

    .footer-overlay p,
    .footer-contact {
        font-size: 1.0625rem;
    }
}

/* Larger text needs the bento rows to grow rather than clip */
@media (min-width: 1025px) {
    .house-bento {
        grid-template-rows: minmax(300px, auto) minmax(300px, auto) auto;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .house-bento {
        grid-template-rows: 320px 260px auto auto;
    }
}

/* ==========================================================================
   Restaurants & attractions — data-driven homepage sections
   ========================================================================== */

.the-table,
.things-to-do {
    padding: clamp(5rem, 10vw, 8.5rem) var(--cz-gutter);
    scroll-margin-top: 20px;
}

.the-table { background: var(--cz-linen); }
.things-to-do { background: var(--cz-bone); }

.the-table-inner,
.things-to-do-inner {
    max-width: var(--cz-max);
    margin: 0 auto;
}

/* Category tabs — a single scrollable row of quiet pills */
.place-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding-bottom: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.place-tabs::-webkit-scrollbar { display: none; }

.place-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
    color: var(--cz-ink);
    font-family: var(--font-main);
    font-size: 0.92rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid rgba(90, 62, 43, 0.22);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.place-tab:hover {
    border-color: var(--cz-umber);
}

.place-tab.is-active {
    color: #FBF4EA;
    background: var(--cz-umber);
    border-color: var(--cz-umber);
}

.place-tab:focus-visible {
    outline: 2px solid var(--cz-clay);
    outline-offset: 2px;
}

.place-tab-count {
    min-width: 1.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    text-align: center;
    border-radius: 999px;
    background: rgba(90, 62, 43, 0.1);
}

.place-tab.is-active .place-tab-count {
    background: rgba(251, 244, 234, 0.18);
}

/* Shared address / website row */
.place-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--cz-hair);
    font-size: 0.9rem;
}

.place-meta a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.place-meta a:hover,
.place-meta a:focus-visible {
    color: var(--cz-clay);
}

.place-meta-address svg {
    color: var(--cz-clay);
    flex: 0 0 auto;
}

.place-meta-site {
    margin-left: auto;
    color: var(--cz-clay-deep) !important;
    font-weight: 600;
}

/* Card entrance when switching categories */
@keyframes cz-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.menu-card,
.postcard-slot {
    animation: cz-card-in 520ms var(--ease-out-expo) both;
    animation-delay: calc(var(--card-index, 0) * 55ms);
}

/* Restaurants: horizontal "menu cards" */
.menu-cards {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.menu-card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    min-height: 280px;
    overflow: hidden;
    background: #FBF6EE;
    border: 1px solid rgba(90, 62, 43, 0.1);
    border-radius: 4px;
    box-shadow: 0 18px 40px -30px rgba(58, 40, 28, 0.45);
}

.menu-card-photo {
    position: relative;
    margin: 0.75rem 0 0.75rem 0.75rem;
    overflow: hidden;
    border-radius: 999px 999px 3px 3px;
    background: var(--cz-sand);
}

.menu-card-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.12) saturate(0.92);
    transition: transform 1.2s var(--ease-out-expo);
}

.menu-card:hover .menu-card-photo img {
    transform: scale(1.05);
}

.menu-card-body {
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1.4rem 1.2rem;
}

.menu-card-kicker,
.postcard-kicker {
    display: flex;
    gap: 0.6rem;
    margin: 0 0 0.45rem;
    color: var(--cz-clay);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.menu-card-kicker span {
    color: var(--cz-muted);
}

.menu-card h3,
.postcard-body h3 {
    margin: 0 0 0.5rem;
    color: var(--cz-ink);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    font-weight: 400;
    line-height: 1.12;
}

.menu-card-desc,
.postcard-desc {
    margin: 0 0 0.9rem;
    color: var(--cz-muted);
    font-size: 0.96rem;
    line-height: 1.55;
}

.menu-card-tip,
.postcard-tip {
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.85rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    background: rgba(200, 149, 74, 0.12);
    border-left: 2px solid var(--cz-ochre);
}

.menu-card-tip > span,
.postcard-tip > span {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--cz-clay);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Attractions: tilted postcards */
.postcards {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.75rem, 3.5vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
}

.postcard-slot:nth-child(3n + 2) {
    padding-top: 2.25rem;
}

.postcard {
    --tilt: -1.4deg;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.8rem 0.8rem 1rem;
    background: #FBF6EE;
    border: 1px solid rgba(90, 62, 43, 0.1);
    border-radius: 3px;
    box-shadow:
        0 1px 2px rgba(58, 40, 28, 0.08),
        0 22px 40px -24px rgba(58, 40, 28, 0.45);
    transform: rotate(var(--tilt));
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease;
}

.postcard-slot:nth-child(3n + 2) .postcard { --tilt: 1.1deg; }
.postcard-slot:nth-child(3n) .postcard { --tilt: -0.7deg; }

.postcard:hover,
.postcard:focus-within {
    transform: rotate(0deg) translateY(-6px);
    box-shadow:
        0 1px 2px rgba(58, 40, 28, 0.08),
        0 34px 60px -28px rgba(58, 40, 28, 0.55);
}

.postcard-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--cz-sand);
}

.postcard-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.18) saturate(0.88);
}

.postcard-stamp {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 3rem;
    color: var(--cz-clay);
    font-family: var(--font-display);
    font-size: 1.05rem;
    background: #FBF6EE;
    outline: 2px dashed #FBF6EE;
    outline-offset: 2px;
    border: 1px solid rgba(182, 90, 52, 0.45);
}

.postcard-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.1rem 0.35rem 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .menu-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .postcards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .postcard-slot:nth-child(3n + 2) {
        padding-top: 0;
    }

    .postcard-slot:nth-child(even) {
        padding-top: 2rem;
    }
}

@media (max-width: 768px) {
    .place-tabs {
        margin-left: calc(var(--cz-gutter) * -1);
        margin-right: calc(var(--cz-gutter) * -1);
        padding-left: var(--cz-gutter);
        padding-right: var(--cz-gutter);
    }

    .place-tab {
        font-size: 0.95rem;
        padding: 0.7rem 1.05rem;
    }

    .menu-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .menu-card-photo {
        margin: 0.75rem 0.75rem 0;
        aspect-ratio: 4 / 3;
    }

    .menu-card-body {
        padding: 1.25rem 1.15rem 1.1rem;
    }

    .menu-card h3,
    .postcard-body h3 {
        font-size: 1.6rem;
    }

    .menu-card-desc,
    .postcard-desc,
    .menu-card-tip,
    .postcard-tip {
        font-size: 1.0625rem;
    }

    .place-meta {
        font-size: 1rem;
    }

    .postcards {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .postcard-slot:nth-child(even) {
        padding-top: 0;
    }

    .postcard { --tilt: -0.7deg; }
    .postcard-slot:nth-child(even) .postcard { --tilt: 0.7deg; }
}

@media (prefers-reduced-motion: reduce) {
    .menu-card,
    .postcard-slot {
        animation: none;
    }

    .postcard,
    .menu-card-photo img {
        transition: none;
    }
}

/* ==========================================================================
   List / Map toggle + themed map
   ========================================================================== */

.place-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.place-toolbar .place-tabs {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding-bottom: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
}

.place-view-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 0.25rem;
    background: rgba(90, 62, 43, 0.08);
    border-radius: 999px;
}

.place-view-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    color: var(--cz-muted);
    font-family: var(--font-main);
    font-size: 0.88rem;
    font-weight: 600;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.place-view-toggle button.is-active {
    color: var(--cz-ink);
    background: #FBF6EE;
    box-shadow: 0 2px 8px rgba(58, 40, 28, 0.12);
}

.place-view-toggle button:focus-visible {
    outline: 2px solid var(--cz-clay);
    outline-offset: 2px;
}

.place-map {
    position: relative;
    animation: cz-card-in 520ms var(--ease-out-expo) both;
}

.place-map-canvas {
    width: 100%;
    height: clamp(420px, 62vh, 620px);
    overflow: hidden;
    border-radius: 4px 4px 4px 140px;
    background: var(--cz-sand);
    box-shadow: 0 30px 70px -40px rgba(58, 40, 28, 0.55);
}

/* Warm the base map tiles only — pins and popups keep their true colours */
.place-map-canvas .mapboxgl-canvas {
    filter: sepia(0.22) saturate(0.85);
}

.place-map-loading,
.place-map-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 0.4rem;
    color: var(--cz-muted);
    font-size: 1rem;
    text-align: center;
}

.place-map-fallback {
    position: relative;
    min-height: 320px;
    padding: 2rem;
    background: #FBF6EE;
    border: 1px dashed rgba(90, 62, 43, 0.3);
    border-radius: 4px;
}

.place-map-fallback p {
    margin: 0;
    color: var(--cz-ink);
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.place-map-note {
    margin: 0.9rem 0 0;
    color: var(--cz-muted);
    font-size: 0.9rem;
}

/* Numbered pins that match the card numbers */
.place-pin {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: 0.9rem;
    line-height: 1;
    background: var(--cz-clay);
    border: 2px solid #FBF6EE;
    border-radius: 50% 50% 50% 4px;
    box-shadow: 0 6px 14px rgba(58, 40, 28, 0.35);
    cursor: pointer;
    transform-origin: bottom left;
    transition: transform 0.2s ease, background 0.2s ease;
}

.place-pin:hover,
.place-pin:focus-visible {
    background: var(--cz-clay-deep);
    transform: scale(1.12);
    outline: none;
}

.place-pin--home {
    width: 2.6rem;
    height: 2.6rem;
    color: #F1D3AE;
    background: var(--cz-espresso);
    border-radius: 50%;
}

/* Popups */
.mapboxgl-popup-content:has(.place-popup) {
    padding: 0;
    overflow: hidden;
    background: #FBF6EE;
    border-radius: 6px;
    box-shadow: 0 18px 40px -16px rgba(58, 40, 28, 0.45);
}

.place-popup {
    width: 260px;
    font-family: var(--font-main);
}

.place-popup-photo {
    height: 120px;
    background-size: cover;
    background-position: center;
}

.place-popup-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem 1rem;
}

.place-popup-body strong {
    color: var(--cz-ink);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.15;
}

.place-popup-body span {
    color: var(--cz-muted);
    font-size: 0.88rem;
}

.place-popup-links {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--cz-hair);
}

.place-popup-links a {
    color: var(--cz-clay-deep);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.place-popup-links a:hover {
    color: var(--cz-ink);
}

.mapboxgl-popup-close-button {
    width: 28px;
    height: 28px;
    color: var(--cz-ink);
    font-size: 18px;
    background: rgba(251, 246, 238, 0.85);
    border-radius: 50%;
    top: 6px;
    right: 6px;
}

@media (max-width: 768px) {
    .place-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

    .place-toolbar .place-tabs {
        margin-left: calc(var(--cz-gutter) * -1);
        margin-right: calc(var(--cz-gutter) * -1);
        padding-left: var(--cz-gutter);
        padding-right: var(--cz-gutter);
    }

    .place-view-toggle {
        align-self: flex-start;
    }

    .place-view-toggle button {
        padding: 0.6rem 1.1rem;
        font-size: 0.95rem;
    }

    .place-map-canvas {
        height: 68vh;
        max-height: 540px;
        border-radius: 4px 4px 4px 80px;
    }

    .place-pin {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
}

/* ==========================================================================
   Side rail — seven chapters, compact and centred instead of a full-height
   string of dots
   ========================================================================== */

.page-metro-track {
    display: flex;
    align-items: center;
    width: 56px;
}

.page-track-line {
    display: none;
}

.page-metro-stops {
    width: 100%;
    height: auto;
    padding: 0;
    gap: 1.6rem;
    justify-content: center;
}

.page-metro-stops::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 1px;
    background: rgba(90, 62, 43, 0.25);
    transform: translateX(-50%);
}

.page-metro-stop {
    height: 12px;
    padding: 0;
    margin: 0;
}

.page-stop-node,
.page-metro-stop-start .page-stop-node,
.page-metro-stop-end .page-stop-node {
    top: 50%;
    width: 7px;
    height: 7px;
    background: var(--cz-bone);
    border: 1px solid rgba(90, 62, 43, 0.55);
    box-shadow: none;
    transform: translate(-50%, -50%);
    transition: height 0.35s var(--ease-out-expo), background 0.25s ease, border-color 0.25s ease;
}

.page-metro-stop:hover .page-stop-node {
    background: var(--cz-clay);
    border-color: var(--cz-clay);
    transform: translate(-50%, -50%);
}

.page-metro-stop.active .page-stop-node,
.page-metro-stop-start.active .page-stop-node,
.page-metro-stop-end.active .page-stop-node {
    width: 7px;
    height: 22px;
    background: var(--cz-clay);
    border-color: var(--cz-clay);
    border-radius: 999px;
    box-shadow: none;
    transform: translate(-50%, -50%);
}

.page-stop-label {
    left: calc(50% + 16px);
    padding: 0.5rem 0.9rem;
    background: rgba(251, 246, 238, 0.97);
    border: 1px solid var(--cz-hair);
    border-radius: 999px;
    box-shadow: 0 10px 24px -12px rgba(58, 40, 28, 0.4);
}

.page-stop-label::before {
    display: none;
}

.page-stop-name {
    color: var(--cz-ink);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0;
    text-shadow: none;
}

.page-stop-subtitle {
    color: var(--cz-muted);
    font-size: 0.75rem;
}

.page-metro-stop:hover .page-stop-label {
    background: #FBF6EE;
    border-color: var(--cz-hair);
    box-shadow: 0 10px 24px -12px rgba(58, 40, 28, 0.4);
}

/* ==========================================================================
   Seasons & events — "Twelve months of Seattle"
   ========================================================================== */

.almanac {
    padding: clamp(5rem, 10vw, 8.5rem) 0;
    color: #F4E8D8;
    background: var(--cz-espresso);
    scroll-margin-top: 20px;
    overflow: hidden;
}

.almanac .ed-header {
    padding: 0 var(--cz-gutter);
}

.almanac .ed-eyebrow { color: var(--cz-ochre); }
.almanac .ed-title { color: #FBF4EA; }
.almanac .ed-title em { color: var(--cz-ochre); }

.almanac-season {
    margin: 0;
    padding-bottom: 0.3rem;
    color: var(--cz-ochre);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid currentColor;
}

.almanac-season span {
    color: #FBF4EA;
}

/* Month row */
.almanac-track {
    margin: 0;
    padding: 0.75rem max(var(--cz-gutter), calc((100vw - var(--cz-max)) / 2)) 1.5rem;
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(170px, 16vw, 220px);
    gap: clamp(1.25rem, 2.2vw, 2rem);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: max(var(--cz-gutter), calc((100vw - var(--cz-max)) / 2));
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 149, 74, 0.5) transparent;
}

.almanac-card {
    scroll-snap-align: start;
}

.almanac-card:nth-child(even) {
    margin-top: 2.5rem;
}

.almanac-card-button {
    display: block;
    width: 100%;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.almanac-card-arch {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4.2;
    overflow: hidden;
    border-radius: 999px 999px 3px 3px;
    background: #3A281C;
    outline: 2px solid transparent;
    outline-offset: 6px;
    transition: outline-color 0.3s ease;
}

.almanac-card-arch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.25) saturate(0.8) brightness(0.72);
    transition: transform 1.4s var(--ease-out-expo), filter 0.5s ease;
}

.almanac-card-button:hover .almanac-card-arch img {
    transform: scale(1.05);
    filter: sepia(0.15) saturate(0.9) brightness(0.9);
}

.almanac-card-button.is-selected .almanac-card-arch {
    outline-color: var(--cz-ochre);
}

.almanac-card-button.is-selected .almanac-card-arch img {
    filter: sepia(0.12) saturate(0.95) brightness(1);
}

.almanac-card-button:focus-visible {
    outline: none;
}

.almanac-card-button:focus-visible .almanac-card-arch {
    outline-color: #FBF4EA;
}

.almanac-card-now {
    position: absolute;
    left: 50%;
    bottom: 0.9rem;
    padding: 0.3rem 0.8rem;
    color: var(--cz-espresso);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--cz-ochre);
    border-radius: 999px;
    transform: translateX(-50%);
}

.almanac-card-no {
    display: block;
    margin-top: 1.1rem;
    color: var(--cz-ochre);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.almanac-card-name {
    display: block;
    margin: 0.2rem 0 0.15rem;
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.1;
}

.almanac-card-theme {
    display: block;
    color: rgba(244, 232, 216, 0.68);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Selected month */
.almanac-detail {
    max-width: var(--cz-max);
    margin: clamp(3rem, 6vw, 4.5rem) auto 0;
    padding: 0 var(--cz-gutter);
}

.almanac-detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.almanac-detail-head h3 {
    margin: 0;
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    font-weight: 400;
    line-height: 1.1;
}

.almanac-detail-head h3 span {
    color: var(--cz-ochre);
}

.almanac-count {
    margin: 0;
    color: rgba(244, 232, 216, 0.6);
    font-size: 0.92rem;
}

.almanac-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.almanac-filters button {
    padding: 0.5rem 1rem;
    color: rgba(244, 232, 216, 0.85);
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid rgba(244, 226, 198, 0.24);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.almanac-filters button:hover {
    border-color: rgba(244, 226, 198, 0.55);
}

.almanac-filters button.is-active {
    color: var(--cz-espresso);
    background: var(--cz-ochre);
    border-color: var(--cz-ochre);
}

.almanac-filters button:focus-visible,
.almanac-more:focus-visible {
    outline: 2px solid #FBF4EA;
    outline-offset: 2px;
}

.almanac-events {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    border-top: 1px solid var(--cz-hair-light);
}

.almanac-event {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--cz-hair-light);
    animation: cz-card-in 480ms var(--ease-out-expo) both;
    animation-delay: calc(var(--card-index, 0) * 45ms);
}

.almanac-event-no {
    padding-top: 0.25rem;
    color: var(--cz-ochre);
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.almanac-event h4 {
    margin: 0 0 0.35rem;
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.15;
}

.almanac-event p {
    margin: 0 0 0.75rem;
    color: rgba(244, 232, 216, 0.72);
    font-size: 0.98rem;
    line-height: 1.55;
}

.almanac-event-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.almanac-event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.almanac-event-tags span {
    padding: 0.2rem 0.55rem;
    color: var(--cz-ochre);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(200, 149, 74, 0.6);
    border-radius: 999px;
}

.almanac-event-foot a {
    color: #F1D3AE;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.almanac-event-foot a:hover,
.almanac-event-foot a:focus-visible {
    color: #FBF4EA;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.almanac-more {
    display: block;
    margin: 1.75rem auto 0;
    padding: 0.75rem 1.5rem;
    color: #FBF4EA;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid rgba(244, 226, 198, 0.35);
    border-radius: 999px;
    cursor: pointer;
}

.almanac-more:hover {
    border-color: var(--cz-ochre);
    color: var(--cz-ochre);
}

.almanac-tip {
    max-width: 44rem;
    margin: 2.5rem 0 0;
    padding: 1rem 1.25rem;
    color: rgba(244, 232, 216, 0.88);
    font-size: 1rem;
    line-height: 1.55;
    background: rgba(200, 149, 74, 0.12);
    border-left: 2px solid var(--cz-ochre);
}

.almanac-tip > span {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--cz-ochre);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .almanac-track {
        grid-auto-columns: 44vw;
        gap: 1rem;
    }

    .almanac-card:nth-child(even) {
        margin-top: 1.5rem;
    }

    .almanac-card-name {
        font-size: 1.4rem;
    }

    .almanac-card-theme {
        font-size: 0.92rem;
    }

    .almanac-events {
        grid-template-columns: minmax(0, 1fr);
    }

    .almanac-event {
        grid-template-columns: 2.4rem minmax(0, 1fr);
    }

    .almanac-event h4 {
        font-size: 1.45rem;
    }

    .almanac-event p,
    .almanac-tip {
        font-size: 1.0625rem;
    }

    .almanac-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-left: calc(var(--cz-gutter) * -1);
        margin-right: calc(var(--cz-gutter) * -1);
        padding: 0 var(--cz-gutter);
        scrollbar-width: none;
    }

    .almanac-filters button {
        flex: 0 0 auto;
        font-size: 0.95rem;
        padding: 0.6rem 1.05rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .almanac-event { animation: none; }
    .almanac-card-arch img { transition: none; }
}

/* The side rail is a desktop-only control (phones use the bottom nav) */
@media (max-width: 1024px) {
    .page-metro-track {
        display: none;
    }
}

/* ==========================================================================
   Curated areas — selectable cards + neighborhood guide panel
   ========================================================================== */

.curated-hint {
    margin: 0;
    color: rgba(244, 232, 216, 0.6);
    font-size: 0.92rem;
}

button.curated-card-link {
    width: 100%;
    padding: 0;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.curated-card-link .curated-card-arch {
    display: block;
    outline: 2px solid transparent;
    outline-offset: 6px;
    transition: outline-color 0.3s ease;
}

.curated-card-link.is-selected .curated-card-arch {
    outline-color: var(--cz-ochre);
}

.curated-card-link:not(.is-selected) .curated-card-arch img {
    filter: sepia(0.28) saturate(0.75) brightness(0.78);
}

.curated-card-title {
    display: block;
    margin: 0 0 0.5rem;
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1.1;
}

.curated-card-journey,
.curated-card-first {
    display: block;
}

.curated-detail {
    max-width: var(--cz-max);
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    padding: clamp(1.75rem, 4vw, 3rem) var(--cz-gutter);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    border-top: 1px solid var(--cz-hair-light);
    animation: cz-card-in 520ms var(--ease-out-expo) both;
}

.curated-detail-kicker {
    margin: 0 0 0.5rem;
    color: var(--cz-ochre);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.curated-detail-main h3 {
    margin: 0 0 0.9rem;
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    font-weight: 400;
    line-height: 1.05;
}

.curated-detail-desc {
    margin: 0 0 1.75rem;
    color: rgba(244, 232, 216, 0.8);
    font-size: 1.05rem;
    line-height: 1.65;
}

.curated-transit {
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.curated-transit li {
    display: flex;
    flex-direction: column;
    min-width: 6.5rem;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--cz-hair-light);
    border-radius: 4px;
}

.curated-transit span {
    color: var(--cz-ochre);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.curated-transit strong {
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 400;
}

.curated-detail-side {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.curated-detail-block {
    padding: 1.1rem 1.25rem;
    background: rgba(244, 226, 198, 0.05);
    border: 1px solid var(--cz-hair-light);
    border-radius: 4px;
}

.curated-detail-block--tip {
    background: rgba(200, 149, 74, 0.12);
    border: 0;
    border-left: 2px solid var(--cz-ochre);
    border-radius: 0;
}

.curated-detail-block > span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--cz-ochre);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.curated-detail-block > strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #FBF4EA;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
}

.curated-detail-block p {
    margin: 0;
    color: rgba(244, 232, 216, 0.82);
    font-size: 1rem;
    line-height: 1.55;
}

.curated-tips {
    margin: 0;
    padding: 0;
    list-style: none;
}

.curated-tips li {
    position: relative;
    padding: 0.45rem 0 0.45rem 1.1rem;
    color: rgba(244, 232, 216, 0.82);
    font-size: 1rem;
    line-height: 1.5;
}

.curated-tips li + li {
    border-top: 1px dashed var(--cz-hair-light);
}

.curated-tips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.05em;
    width: 5px;
    height: 5px;
    background: var(--cz-ochre);
    border-radius: 50%;
}

.curated-sights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.curated-sights a {
    padding: 0.4rem 0.85rem;
    color: #F4E8D8;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid rgba(244, 226, 198, 0.28);
    border-radius: 999px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.curated-sights a:hover,
.curated-sights a:focus-visible {
    color: var(--cz-ochre);
    border-color: var(--cz-ochre);
}

/* Attraction postcard flagged from "Our picks nearby" */
.postcard-slot.is-highlighted .postcard {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 0 0 3px var(--cz-ochre), 0 34px 60px -28px rgba(58, 40, 28, 0.55);
}

@media (max-width: 900px) {
    .curated-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .curated-hint {
        font-size: 0.95rem;
    }

    .curated-card-title {
        font-size: 1.5rem;
    }

    .curated-transit li {
        min-width: calc(50% - 0.3rem);
    }

    .curated-detail-desc,
    .curated-detail-block p,
    .curated-tips li {
        font-size: 1.0625rem;
    }
}

/* ==========================================================================
   Colour scheme: Rainier Wildflower
   Light lupine-lavender feature sections, deep lupine headings, Indian-
   paintbrush red accent, meadow-green details. Overrides the earlier
   espresso feature sections so the page reads light and summery.
   ========================================================================== */
:root{
 --cz-bone:#FBF9F4; --cz-linen:#F2F0EA; --cz-sand:#E2DED3; --cz-clay:#D4553A; --cz-clay-deep:#AE3F28; --cz-ochre:#E0A43C;
 --cz-moss:#5C7A4E; --cz-umber:#4A4F8C; --cz-ink:#232535; --cz-muted:#5F6273; --cz-espresso:#E3E5F2;
 --accent:#D4553A; --primary:#4A4F8C; --off-white:#FBF9F4;
 --feat-bg:#E3E5F2; --feat-ink:#22264A; --feat-muted:#555A78; --feat-accent:#4B53A0; --feat-hair:rgba(34,38,74,.15); --feat-card:rgba(255,255,255,.55);
}
body{background:var(--cz-bone)}
.the-house{background:var(--cz-bone)} .the-table,.guest-guide-overview,.essentials-section{background:var(--cz-linen)} .things-to-do,.host-note{background:var(--cz-bone)}
/* feature sections */
.curated-areas,.almanac{background:var(--feat-bg);color:var(--feat-ink)}
.curated-areas .ed-title,.almanac .ed-title,.curated-card-title,.curated-detail-main h3,.curated-detail-block>strong,.almanac-card-name,.almanac-detail-head h3,.almanac-event h4,.curated-transit strong,.almanac-season span{color:var(--feat-ink)}
.curated-areas .ed-title em,.almanac .ed-title em,.curated-areas .ed-eyebrow,.almanac .ed-eyebrow,.curated-card-no,.almanac-card-no,.curated-detail-kicker,.curated-transit span,.curated-detail-block>span,.almanac-detail-head h3 span,.almanac-event-no,.almanac-season,.almanac-tip>span,.curated-card-first span,.almanac-event-tags span{color:var(--feat-accent)}
.almanac-event-tags span{border-color:var(--feat-accent)}
.curated-hint,.curated-card-journey,.curated-card-first,.curated-detail-desc,.curated-detail-block p,.curated-tips li,.almanac-card-theme,.almanac-count,.almanac-event p,.almanac-tip{color:var(--feat-muted)}
.curated-detail,.almanac-events,.almanac-event,.curated-tips li+li{border-color:var(--feat-hair)}
.curated-transit li,.curated-detail-block{border-color:var(--feat-hair);background:var(--feat-card)}
.curated-detail-block--tip,.almanac-tip{background:color-mix(in srgb,var(--feat-accent) 14%,transparent);border-left-color:var(--feat-accent)}
.curated-tips li::before{background:var(--feat-accent)}
.curated-sights a,.almanac-filters button,.almanac-more{color:var(--feat-ink);border-color:var(--feat-hair)}
.almanac-filters button.is-active{background:var(--feat-accent);border-color:var(--feat-accent);color:var(--feat-bg)}
.almanac-event-foot a{color:var(--cz-clay-deep)}
.curated-card-link.is-selected .curated-card-arch,.almanac-card-button.is-selected .almanac-card-arch{outline-color:var(--feat-accent)}
.curated-card-link:not(.is-selected) .curated-card-arch img,.almanac-card-arch img{filter:sepia(.12) saturate(.9) brightness(1)}
.almanac-card-now{background:var(--feat-accent);color:var(--feat-bg)}
.curated-card-mood{background:rgba(255,255,255,.75);color:var(--cz-ink);border-color:transparent}
/* guide directory panel */
.guide-directory{background:linear-gradient(160deg,#ECEEF7,#DCDFF0);color:var(--feat-ink);box-shadow:0 40px 80px -50px rgba(0,0,0,.25)}
.guide-directory-heading h3,.guide-directory-link strong{color:var(--feat-ink)}
.guide-directory-heading .guide-eyebrow,.guide-directory-arrow{color:var(--feat-accent)}
.guide-directory-link small{color:var(--feat-muted)}
.guide-directory-heading,.guide-directory-link{border-color:var(--feat-hair)}
.guide-directory-icon{border-color:var(--feat-hair)}
/* hero: lighter veil */
.confirmed-guest-hero{--hero-overlay:linear-gradient(180deg,rgba(24,26,50,.12) 0%,rgba(24,26,50,.02) 40%,rgba(24,26,50,.55) 100%) !important}
.hero::before{background:linear-gradient(180deg,rgba(24,26,50,.12) 0%,rgba(24,26,50,.02) 40%,rgba(24,26,50,.55) 100%)}
.guest-hero-scrim{background:radial-gradient(ellipse 80% 70% at 12% 100%, rgba(20,14,10,.45) 0%, transparent 70%)}
.hero-title-accent{color:#FFD3C2}
/* footer + nav */
.footer,.footer-bottom{background:#3E4378}
.seattle-skyline{background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(62,67,120,.85) 100%),url('images/property-seattle-skyline.webp') center/cover no-repeat}
.bottom-nav{background:rgba(62,67,120,.92)}
.house-tile--park{background:#5C7A4E}

.mobile-menu { background: rgba(34, 38, 74, 0.96); }
::selection { background: rgba(75, 83, 160, 0.2); color: var(--cz-ink); }
.hero-highlight::after { background: #FFD3C2; }
.hero-eyebrow { color: rgba(255, 235, 228, 0.92); }
.place-tab.is-active,
.view-toggle-btn.active { background: var(--cz-umber); border-color: var(--cz-umber); }
.house-tile--keys { background: #ECE7F3; }
.place-pin { background: var(--cz-clay); }
.place-pin--home { background: var(--cz-umber); color: #FFD3C2; }
.almanac-event-foot a { color: var(--cz-clay-deep); }
.curated-areas .ed-link,
.almanac .ed-link { color: var(--feat-accent); }
.curated-areas .ed-link:hover,
.almanac .ed-link:hover { color: var(--feat-ink); }
.guest-hero-scrim {
    background:
        linear-gradient(90deg, rgba(24, 26, 50, 0.38) 0%, rgba(24, 26, 50, 0) 55%),
        radial-gradient(ellipse 80% 70% at 12% 100%, rgba(24, 26, 50, 0.5) 0%, transparent 70%);
}

@media (max-width: 768px) {
    .guest-hero-scrim {
        background: linear-gradient(180deg, rgba(24, 26, 50, 0.2) 0%, rgba(24, 26, 50, 0.5) 30%, rgba(24, 26, 50, 0.72) 60%, rgba(20, 22, 44, 0.9) 100%);
    }
}

/* ==========================================================================
   Hero — "Topographic map"
   Light lavender ground, lupine contour lines, arched photo window with a
   "You're here" pin and a 100+ reviews stamp.
   ========================================================================== */

.hero.hero--map {
    height: auto;
    min-height: min(100svh, 940px);
    display: block;
    background:
        radial-gradient(ellipse 70% 60% at 78% 45%, rgba(255, 255, 255, 0.7) 0%, transparent 70%),
        #ECECF7;
    overflow: hidden;
}

.hero.hero--map::before {
    display: none;
}

.hero--map .topo-background-canvas {
    z-index: 1;
    opacity: 1;
    mix-blend-mode: normal;
}

.hero-map-grid {
    position: relative;
    z-index: 5;
    max-width: 1320px;
    min-height: inherit;
    margin: 0 auto;
    padding: clamp(5rem, 9vh, 7rem) var(--cz-gutter) clamp(3.5rem, 7vh, 5rem) calc(var(--cz-gutter) + 40px);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

/* Copy */
.hero--map .guest-hero-content {
    padding: 0;
    align-items: flex-start;
    text-align: left;
    color: var(--cz-ink);
}

.hero--map .hero-eyebrow {
    color: var(--cz-clay);
}

.hero--map .guest-hero-content .hero-title {
    margin: 1rem 0 1.3rem;
    color: #22264A;
    font-size: clamp(3rem, 7.4vw, 7.2rem);
    line-height: 0.95;
    text-shadow: none;
}

.hero--map .hero-title-accent {
    display: block;
    margin-left: 0;
    color: var(--cz-clay);
}

.hero--map .guest-hero-content .hero-subtitle {
    max-width: 30rem;
    margin: 0 0 2rem;
    color: #555A78;
    font-size: clamp(1.02rem, 1.3vw, 1.12rem);
    text-shadow: none;
}

/* Highlights become chips that drive the photo window */
.hero--map .hero-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    border: 0;
}

.hero--map .hero-highlight,
.hero--map .hero-highlight:first-child,
.hero--map .hero-highlight:last-child {
    padding: 0.6rem 1.05rem;
    color: #22264A;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(34, 38, 74, 0.2);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.hero--map .hero-highlight::before,
.hero--map .hero-highlight::after {
    display: none;
}

.hero--map .hero-highlight strong {
    color: inherit;
    font-family: var(--font-main);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Detail text lives in the photo caption; keep it for screen readers */
.hero--map .hero-highlight > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hero--map .hero-highlight:hover {
    border-color: var(--cz-umber);
}

.hero--map .hero-highlight.is-active {
    color: #fff;
    background: var(--cz-umber);
    border-color: var(--cz-umber);
}

.hero--map .hero-highlight:focus-visible {
    outline: 2px solid var(--cz-clay);
    outline-offset: 3px;
}

/* Photo window */
.hero-window {
    position: relative;
    justify-self: end;
    width: min(100%, 440px);
    margin: 0;
}

.hero-window-arch {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 999px 999px 6px 6px;
    background: #DCDDF0;
    box-shadow: 0 40px 80px -40px rgba(34, 38, 74, 0.6);
}

.hero--map .hero-scenes {
    position: absolute;
    inset: 0;
    background: transparent;
    transform: none;
}

.hero--map .hero-scene {
    filter: none;
}

.hero-pin {
    position: absolute;
    top: 20%;
    left: -2.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem 0.55rem 0.65rem;
    color: #FBF8FF;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    background: #22264A;
    border-radius: 999px 999px 999px 4px;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5);
}

.hero-pin i {
    width: 10px;
    height: 10px;
    background: #FF8D6E;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 141, 110, 0.3);
    animation: cz-pin-pulse 2.4s ease-in-out infinite;
}

@keyframes cz-pin-pulse {
    50% { box-shadow: 0 0 0 9px rgba(255, 141, 110, 0.12); }
}

.hero-stamp {
    position: absolute;
    right: -1.75rem;
    bottom: 3.25rem;
    display: block;
    padding: 1rem 1.3rem 0.9rem;
    text-align: center;
    background: #FBF8FF;
    border: 1.5px dashed #4B53A0;
    outline: 6px solid #FBF8FF;
    transform: rotate(3deg);
    box-shadow: 0 18px 40px -16px rgba(34, 38, 74, 0.5);
}

.hero-stamp b {
    display: block;
    color: var(--cz-clay);
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 400;
    line-height: 0.9;
}

.hero-stamp small {
    display: block;
    margin-top: 0.35rem;
    color: #22264A;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero-stamp em {
    display: block;
    margin-top: 0.2rem;
    color: #555A78;
    font-size: 0.85rem;
    font-style: normal;
}

.hero-window-caption {
    margin-top: 1.1rem;
    color: #555A78;
    font-size: 0.95rem;
    text-align: center;
}

.hero-window-caption strong {
    color: #22264A;
    font-weight: 600;
}

/* Side rail sits on a light hero now */
.page-metro-track { z-index: 900; }

@media (max-width: 900px) {
    .hero-map-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 5rem var(--cz-gutter) 6.5rem;
        gap: 2.5rem;
    }

    .hero-window {
        justify-self: center;
        width: min(100% - 2.5rem, 420px);
    }
}

@media (max-width: 768px) {
    .hero.hero--map {
        min-height: 0;
    }

    .hero-map-grid {
        padding: 4.25rem 1rem 6.5rem;
        gap: 2rem;
    }

    .hero--map .guest-hero-content .hero-title {
        font-size: clamp(2.9rem, 14vw, 3.9rem);
    }

    .hero--map .guest-hero-content .hero-subtitle {
        margin-bottom: 1.4rem;
        padding-right: 0;
        color: #4A4F6E;
    }

    .hero--map .hero-trust-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -1rem;
        padding: 0 1rem 0.25rem;
        scrollbar-width: none;
    }

    .hero--map .hero-highlight,
    .hero--map .hero-highlight:first-child,
    .hero--map .hero-highlight:last-child {
        flex: 0 0 auto;
    }

    .hero-window-arch {
        aspect-ratio: 4 / 4.2;
    }

    .hero-pin {
        top: 14%;
        left: -0.75rem;
        font-size: 0.8rem;
    }

    .hero-stamp {
        right: -0.75rem;
        bottom: 3.5rem;
        padding: 0.7rem 0.95rem 0.65rem;
    }

    .hero-stamp b {
        font-size: 2.5rem;
    }

    .hero-stamp em {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-pin i { animation: none; }
}

.hero-window-arch {
    outline: 1px solid rgba(75, 83, 160, 0.35);
    outline-offset: 10px;
}

.hero-window-arch::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(34, 38, 74, 0.18);
    pointer-events: none;
}

/* Cursor-following glow removed (useInteractiveGlow is no longer mounted) */
.motion-spotlight-layer {
    display: none !important;
}

/* ==========================================================================
   The Essentials — editorial list
   Numbered rows with the topic in the display face, a quick-fact pill, and
   a lavender panel with an arched photo when a topic is open.
   ========================================================================== */

.essentials-section {
    padding: clamp(5rem, 10vw, 8rem) 0;
    background: var(--cz-linen);
}

.essentials-section .container {
    max-width: var(--cz-max);
    padding: 0 var(--cz-gutter);
}

#essentials .section-title.ed-title {
    max-width: 18ch;
    margin: 0 0 1rem;
    text-align: left;
    font-size: clamp(2.3rem, 4.8vw, 4.2rem);
}

#essentials .section-subtitle.ed-lede {
    max-width: 36rem;
    margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
    text-align: left;
}

#essentials .essentials-accordion {
    max-width: none;
    margin: 0;
    border-top: 1px solid var(--cz-hair);
}

#essentials .accordion-item {
    margin: 0;
    border-radius: 0;
    overflow: visible;
}

#essentials .accordion-header {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto 2rem;
    align-items: center;
    gap: 0 1rem;
    padding: 1.6rem 0.5rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--cz-hair);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: left;
    transition: background 0.25s ease;
}

#essentials .accordion-header:hover {
    background: rgba(75, 83, 160, 0.04);
}

#essentials .accordion-header:focus-visible {
    outline: 2px solid var(--cz-clay);
    outline-offset: -2px;
}

.accordion-number {
    color: var(--cz-clay);
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
}

#essentials .accordion-title {
    color: var(--cz-ink);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.4vw, 2.05rem);
    font-weight: 400;
    line-height: 1.15;
}

#essentials .accordion-count {
    min-width: 0;
    padding: 0.4rem 0.85rem;
    color: var(--cz-muted);
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-align: center;
    white-space: nowrap;
    border: 1px solid var(--cz-hair);
    border-radius: 999px;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

#essentials .accordion-icon {
    justify-self: end;
    width: 22px;
    height: 22px;
    color: var(--cz-umber);
}

#essentials .accordion-item.active .accordion-header {
    background: none;
    border-bottom-color: transparent;
    box-shadow: none;
}

#essentials .accordion-item.active .accordion-count {
    color: #fff;
    background: var(--cz-umber);
    border-color: var(--cz-umber);
}

#essentials .accordion-item.active .accordion-content {
    padding: 0 0 2rem;
    background: none;
}

/* Open panel */
#essentials .essential-full-card {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
    margin: 0;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background: var(--feat-bg);
    border: 0;
    border-radius: 6px;
    box-shadow: none;
}

#essentials .essential-full-card:hover {
    box-shadow: none;
}

#essentials .essential-full-card.essential-card-horizontal,
#essentials .essential-full-card:not(:has(> .essential-full-image)) {
    grid-template-columns: minmax(0, 1fr);
}

#essentials .essential-full-image {
    position: sticky;
    top: 1.5rem;
    height: auto;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 999px 999px 4px 4px;
    background: var(--cz-sand);
}

#essentials .essential-full-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#essentials .essential-full-info {
    padding: 0;
    overflow: visible;
}

#essentials .essential-full-info h4 {
    margin: 0 0 0.75rem;
    color: var(--feat-ink);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    font-weight: 400;
    line-height: 1.15;
}

#essentials .essential-full-info h4[style] {
    margin-top: 1.75rem !important;
    font-size: 1.3rem;
}

#essentials .essential-full-info p,
#essentials .essential-full-info li {
    color: #3B3F5C;
    font-size: 1rem;
    line-height: 1.65;
}

#essentials .essential-full-info strong {
    color: var(--feat-ink);
    font-weight: 600;
}

#essentials .essential-full-info a:not(.attraction-link-small) {
    color: var(--cz-clay-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#essentials .essential-full-info .note,
#essentials .essential-full-info .local-tip,
#essentials .essential-full-info .pro-tip-inline,
#essentials .essential-full-info .walk-score-highlight {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    color: #3B3F5C;
    background: rgba(255, 255, 255, 0.6);
    border: 0;
    border-left: 2px solid var(--cz-clay);
    border-radius: 0;
}

#essentials .essential-full-info .attraction-link-small {
    color: #fff;
    background: var(--cz-umber);
    border-color: var(--cz-umber);
    border-radius: 999px;
}

#essentials .essential-full-info .sub-accordion-item {
    border-top: 1px solid var(--feat-hair);
}

#essentials .essential-full-info .sub-accordion-header {
    padding: 0.95rem 0;
    background: none;
}

#essentials .essential-full-info .sub-accordion-header h4 {
    margin: 0;
    font-family: var(--font-main);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--feat-ink);
}

#essentials .essential-full-info .sub-accordion-icon {
    color: var(--cz-umber);
}

#essentials .wifi-content-wrapper,
#essentials .taxi-content-wrapper {
    gap: 1.25rem;
}

#essentials .wifi-image img,
#essentials .taxi-image img {
    border-radius: 6px;
}

@media (max-width: 900px) {
    #essentials .essential-full-card {
        grid-template-columns: minmax(0, 1fr);
    }

    #essentials .essential-full-image {
        position: relative;
        top: 0;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 768px) {
    #essentials .accordion-header {
        grid-template-columns: 2.6rem minmax(0, 1fr) 1.6rem;
        row-gap: 0.45rem;
        padding: 1.2rem 0.25rem;
    }

    .accordion-number {
        grid-row: 1 / 3;
        align-self: start;
        padding-top: 0.2rem;
        font-size: 1.15rem;
    }

    #essentials .accordion-title {
        font-size: 1.4rem;
    }

    #essentials .accordion-count {
        display: inline-block;
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        font-size: 0.72rem;
    }

    #essentials .accordion-icon {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    #essentials .essential-full-card {
        padding: 1rem;
    }

    #essentials .essential-full-info p,
    #essentials .essential-full-info li {
        font-size: 1.0625rem;
    }
}

#essentials .wifi-image {
    max-width: 220px;
}

@media (max-width: 768px) {
    #essentials .wifi-image {
        max-width: 180px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   Footer — "Skyline at dusk"
   ========================================================================== */

.footer.site-footer {
    color: #FBF8FF;
    background: #2C3060;
}

.site-footer-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: clamp(440px, 62vh, 560px);
    padding: 0 var(--cz-gutter) 3rem;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(44, 48, 96, 0) 0%, rgba(44, 48, 96, 0.15) 35%, rgba(44, 48, 96, 0.7) 75%, #2C3060 100%),
        url('images/property-rooftop.webp') center 55% / cover no-repeat;
}

.site-footer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1rem;
    color: #FFD3C2;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.site-footer-eyebrow::before {
    content: '';
    width: 2.2rem;
    height: 1px;
    background: currentColor;
}

.site-footer-hero h2 {
    margin: 0 0 1.2rem;
    color: #FBF8FF;
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6.4vw, 5.8rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
}

.site-footer-hero h2 em {
    color: #FFC9B5;
    font-style: normal;
}

.site-footer-hero blockquote {
    max-width: 36rem;
    margin: 0 auto;
    color: rgba(251, 248, 255, 0.9);
    font-size: 1.12rem;
    line-height: 1.6;
}

.site-footer-sig {
    margin: 0.7rem 0 0;
    color: #FFD3C2;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-footer-cols {
    max-width: var(--cz-max);
    margin: 0 auto;
    padding: 3rem var(--cz-gutter);
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 3rem;
    border-bottom: 1px solid rgba(251, 248, 255, 0.15);
}

.site-footer-cols h3 {
    margin: 0 0 1rem;
    color: #FFB8A3;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.site-footer-cols p {
    margin: 0 0 1.25rem;
    color: rgba(251, 248, 255, 0.82);
    font-size: 1rem;
    line-height: 1.6;
}

.site-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.35rem;
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 600;
    background: var(--cz-clay);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.site-footer-cta:hover {
    background: var(--cz-clay-deep);
    transform: translateY(-2px);
}

.site-footer-cta:focus-visible,
.site-footer-cols a:focus-visible {
    outline: 2px solid #FFD3C2;
    outline-offset: 3px;
}

.site-footer-cols ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.site-footer-cols a {
    color: #FBF8FF;
    font-size: 0.98rem;
    text-decoration: none;
}

.site-footer-cols a:hover {
    color: #FFC9B5;
}

.site-footer-bar {
    max-width: var(--cz-max);
    margin: 0 auto;
    padding: 1.4rem var(--cz-gutter) 2rem;
}

.site-footer-bar p {
    margin: 0;
    color: rgba(251, 248, 255, 0.6);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .site-footer-hero {
        min-height: 420px;
        padding-bottom: 2rem;
    }

    .site-footer-hero blockquote {
        font-size: 1.04rem;
    }

    .site-footer-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        padding: 2.25rem 1.25rem;
    }

    .site-footer-cols ul {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer-bar {
        padding: 1.2rem 1.25rem 6rem;
    }
}

/* Category picker (replaces the row of category pills) */
.place-select {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.place-select-label {
    color: var(--cz-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.place-select-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 300px;
}

.place-select-box select {
    width: 100%;
    padding: 0.7rem 2.75rem 0.7rem 1.2rem;
    color: #22264A;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 500;
    background: #FBF9F4;
    border: 1px solid rgba(34, 38, 74, 0.25);
    border-radius: 999px;
    box-shadow: 0 6px 18px -12px rgba(34, 38, 74, 0.5);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease;
}

.place-select-box select:hover {
    border-color: var(--cz-umber);
}

.place-select-box select:focus-visible {
    outline: 2px solid var(--cz-clay);
    outline-offset: 2px;
}

.place-select-box svg {
    position: absolute;
    right: 1rem;
    color: var(--cz-umber);
    pointer-events: none;
}

.place-toolbar {
    justify-content: space-between;
}

@media (max-width: 768px) {
    .place-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .place-select {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    .place-select-box {
        min-width: 0;
        width: 100%;
    }

    .place-select-box select {
        font-size: 1rem;
        padding: 0.8rem 2.75rem 0.8rem 1.1rem;
    }
}

/* ==========================================================================
   Your Stay Route — "Trail map"
   Dashed trail with numbered map pins and a card per step; the guide
   directory sits on a soft lavender panel.
   ========================================================================== */
.guide-directory-icon{filter:none!important}
.guest-guide-heading{text-align:left;margin-left:0}
.guest-guide-heading .section-title,.guest-guide-heading .section-subtitle{text-align:left!important;margin-left:0}
.guest-guide-heading .motion-heading-sweep::after{margin-left:0}
/* A: trail map — dotted path, pin markers, cards hang below */
.guest-guide-overview{background:#ECECF7!important}
.stay-route{border-top:0!important;gap:1.25rem!important;padding-top:3.5rem;position:relative}
.stay-route::before{display:block!important;content:'';position:absolute;top:1.6rem;left:2rem;right:2rem;height:0;border-top:2px dashed rgba(75,83,160,.45);background:none!important;opacity:1}
.stay-route-stop,.stay-route-stop+.stay-route-stop{position:relative;padding:1.6rem 1.4rem 1.5rem!important;border:0!important;background:#FBF9F4;border-radius:6px;box-shadow:0 20px 40px -28px rgba(34,38,74,.5)}
.stay-route-marker,.stay-route-stop .stay-route-marker{position:absolute!important;top:-3.15rem;left:1.4rem;width:2.4rem!important;height:2.4rem!important;display:grid!important;place-items:center;background:#4B53A0!important;border:3px solid #ECECF7!important;border-radius:50% 50% 50% 4px!important;color:#fff!important;margin:0!important}
.stay-route-stop:nth-child(4) .stay-route-marker{background:var(--cz-clay)!important}
.stay-route-marker span{font-family:var(--font-main)!important;font-size:.8rem!important;font-style:normal!important;font-weight:600!important;letter-spacing:0!important;color:#fff}
.stay-route-copy h3{font-size:1.45rem!important}
.stay-route-copy p{min-height:0!important}
.guide-directory{background:#22264A!important}
@media(max-width:900px){.stay-route{grid-template-columns:1fr 1fr!important}.stay-route-stop:nth-child(n+3){margin-top:2.5rem!important}}
@media(max-width:768px){.stay-route{grid-template-columns:1fr!important;padding-top:0;padding-left:2.6rem;gap:1.25rem!important}.stay-route::before{top:1rem;bottom:1rem;left:1.15rem;right:auto;width:0;height:auto;border-top:0;border-left:2px dashed rgba(75,83,160,.45)}.stay-route-stop,.stay-route-stop+.stay-route-stop{margin-top:0!important}.stay-route-marker,.stay-route-stop .stay-route-marker{top:1.3rem;left:-2.65rem}}
.guide-directory{background:linear-gradient(160deg,#E4E6F4,#D6D9EE)!important}
@media(max-width:768px){.stay-route-stop,.stay-route-stop+.stay-route-stop{display:block!important}.stay-route-copy{padding-right:0!important}}

/* ==========================================================================
   /status — "Topo map" guest check-in / check-out
   ========================================================================== */

.status-page {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    color: #22264A;
    font-family: var(--font-main);
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255, 255, 255, 0.65) 0%, transparent 70%),
        #ECECF7;
}

.status-page .topo-background-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 1;
    mix-blend-mode: normal;
    transform: none;
}

.status-inner {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100svh;
    max-width: 440px;
    margin: 0 auto;
    padding: clamp(2.5rem, 7vh, 4rem) 1.5rem 2rem;
    display: flex;
    flex-direction: column;
}

.status-eyebrow {
    margin: 0 0 0.9rem;
    color: var(--cz-clay);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.status-title {
    margin: 0 0 0.75rem;
    color: #22264A;
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 15vw, 4rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
}

.status-title em {
    display: block;
    color: var(--cz-clay);
    font-style: normal;
}

.status-time {
    margin: 0 0 0.35rem;
    color: #555A78;
    font-size: 0.98rem;
}

.status-lede {
    margin: 0;
    color: #3B3F5C;
    font-size: 1.05rem;
    line-height: 1.55;
}

/* Choose */
.status-choose {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.status-cards {
    margin-top: auto;
    padding-top: 2.5rem;
    display: grid;
    gap: 0.8rem;
}

.status-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1.15rem 1.2rem;
    color: #22264A;
    font: inherit;
    text-align: left;
    background: #FBF9F4;
    border: 1px solid rgba(34, 38, 74, 0.1);
    border-radius: 18px;
    box-shadow: 0 18px 40px -24px rgba(34, 38, 74, 0.6);
    cursor: pointer;
    transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease;
}

.status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 46px -24px rgba(34, 38, 74, 0.7);
}

.status-card:focus-visible {
    outline: 2px solid var(--cz-clay);
    outline-offset: 3px;
}

.status-card--primary {
    color: #fff;
    background: #4B53A0;
    border-color: #4B53A0;
}

.status-card-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    font-size: 1.25rem;
    background: #ECECF7;
    border-radius: 50%;
}

.status-card--primary .status-card-icon {
    background: rgba(255, 255, 255, 0.18);
}

.status-card-text strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.1;
}

.status-card-text small {
    display: block;
    margin-top: 0.15rem;
    color: #555A78;
    font-size: 0.9rem;
}

.status-card--primary .status-card-text small {
    color: rgba(255, 255, 255, 0.82);
}

.status-card-arrow {
    margin-left: auto;
    font-size: 1.2rem;
}

/* Form */
.status-pin {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
    padding: 0.45rem 0.9rem 0.45rem 0.6rem;
    color: #FBF8FF;
    font-size: 0.82rem;
    font-weight: 600;
    background: #22264A;
    border-radius: 999px 999px 999px 4px;
}

.status-pin i {
    width: 9px;
    height: 9px;
    background: #FF8D6E;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 141, 110, 0.3);
}

.status-form-wrap {
    display: flex;
    flex-direction: column;
}

.status-title--form {
    font-size: clamp(2.3rem, 10vw, 2.8rem);
    margin-bottom: 1.4rem;
}

.status-sheet {
    padding: 1.4rem 1.25rem 1.1rem;
    background: #FBF9F4;
    border-radius: 22px;
    box-shadow: 0 24px 50px -24px rgba(34, 38, 74, 0.6);
}

.status-field {
    margin-bottom: 0.95rem;
}

.status-field label,
.status-moods legend {
    display: block;
    margin-bottom: 0.4rem;
    color: #22264A;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-field label span {
    color: #6A6E88;
    font-weight: 400;
}

.status-field input {
    box-sizing: border-box;
    width: 100%;
    padding: 0.85rem 0.95rem;
    color: #22264A;
    font: inherit;
    font-size: 1rem;
    background: #fff;
    border: 1px solid rgba(34, 38, 74, 0.22);
    border-radius: 12px;
}

.status-field input:focus {
    outline: none;
    border-color: #4B53A0;
    box-shadow: 0 0 0 3px rgba(75, 83, 160, 0.18);
}

.status-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.2rem 0 1.1rem;
    color: #3B3F5C;
    font-size: 0.85rem;
    line-height: 1.45;
    cursor: pointer;
}

.status-consent input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #4B53A0;
}

.status-moods {
    min-width: 0;
    margin: 0 0 1.1rem;
    padding: 0;
    border: 0;
}

.status-moods > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.status-moods button {
    padding: 0.7rem 0.2rem 0.6rem;
    color: #22264A;
    font: inherit;
    background: #fff;
    border: 1px solid rgba(34, 38, 74, 0.18);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.status-moods button span {
    display: block;
    font-size: 1.45rem;
    line-height: 1;
}

.status-moods button small {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-moods button.is-selected {
    color: #fff;
    background: #4B53A0;
    border-color: #4B53A0;
}

.status-submit {
    width: 100%;
    padding: 1rem;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: var(--cz-clay);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.status-submit:hover {
    background: var(--cz-clay-deep);
}

.status-back {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem;
    color: #555A78;
    font: inherit;
    font-size: 0.95rem;
    background: none;
    border: 0;
    cursor: pointer;
}

.status-submit:focus-visible,
.status-back:focus-visible,
.status-moods button:focus-visible,
.status-ghost:focus-visible {
    outline: 2px solid var(--cz-clay);
    outline-offset: 2px;
}

/* Confirmed */
.status-done {
    margin: auto 0;
}

.status-stamp {
    display: inline-block;
    margin-bottom: 1.8rem;
    padding: 0.9rem 1.2rem;
    text-align: center;
    background: #FBF9F4;
    border: 1.5px dashed #4B53A0;
    outline: 6px solid #FBF9F4;
    transform: rotate(-4deg);
    box-shadow: 0 18px 40px -16px rgba(34, 38, 74, 0.5);
    animation: status-stamp 0.7s var(--ease-out-expo) both;
}

.status-stamp b {
    display: block;
    color: var(--cz-clay);
    font-family: var(--font-display);
    font-size: 2.3rem;
    font-weight: 400;
    line-height: 1;
}

.status-stamp small {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

@keyframes status-stamp {
    from { opacity: 0; transform: translateY(-24px) rotate(10deg) scale(1.15); }
    to { opacity: 1; transform: rotate(-4deg); }
}

.status-title--done {
    font-size: clamp(2.8rem, 13vw, 3.4rem);
    margin-bottom: 1rem;
}

.status-ghost {
    margin-top: 1.6rem;
    padding: 0.85rem 1.3rem;
    color: #22264A;
    font: inherit;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(34, 38, 74, 0.3);
    border-radius: 999px;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .status-stamp { animation: none; }
    .status-card { transition: none; }
}

.status-ghost::after {
    content: ' →';
}

/* ==========================================================================
   Mobile navigation — "Guide" button + chapter sheet (replaces the tab bar)
   ========================================================================== */

.guide-sheet-root {
    display: none;
}

@media (max-width: 1024px) {
    .guide-sheet-root {
        display: block;
    }

    .bottom-nav {
        display: none !important;
    }
}

.guide-fab {
    position: fixed;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: calc(100vw - 32px);
    padding: 0.75rem 1.15rem 0.75rem 0.8rem;
    color: #FBF8FF;
    font-family: var(--font-main);
    font-size: 0.98rem;
    font-weight: 600;
    background: #22264A;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 18px 36px -12px rgba(34, 38, 74, 0.6);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease;
}

.guide-fab:active {
    transform: scale(0.96);
}

.guide-fab:focus-visible {
    outline: 2px solid var(--cz-clay);
    outline-offset: 3px;
}

.guide-fab i {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #22264A;
    font-size: 0.85rem;
    font-style: normal;
    background: #FF8D6E;
    border-radius: 50%;
}

.guide-fab small {
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.72;
}

.guide-sheet-dim {
    position: fixed;
    inset: 0;
    z-index: 1002;
    background: rgba(34, 38, 74, 0.38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: guide-fade 0.25s ease both;
}

.guide-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1003;
    max-height: 88vh;
    overflow-y: auto;
    padding: 0.85rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: #FBF9F4;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -24px 60px -20px rgba(34, 38, 74, 0.5);
    animation: guide-up 0.4s var(--ease-out-expo) both;
}

@keyframes guide-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes guide-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.guide-sheet-grab {
    width: 42px;
    height: 5px;
    margin: 0 auto 0.9rem;
    background: rgba(34, 38, 74, 0.18);
    border-radius: 9px;
}

.guide-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.guide-sheet-head p {
    margin: 0;
    color: var(--cz-clay);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.guide-sheet-close {
    width: 36px;
    height: 36px;
    color: #22264A;
    font-size: 1.5rem;
    line-height: 1;
    background: rgba(34, 38, 74, 0.06);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.guide-sheet ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-sheet ol button {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    width: 100%;
    padding: 0.8rem 0;
    color: #22264A;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(34, 38, 74, 0.1);
    cursor: pointer;
}

.guide-sheet ol button:focus-visible {
    outline: 2px solid var(--cz-clay);
    outline-offset: 2px;
}

.guide-sheet-no {
    width: 1.7rem;
    color: var(--cz-clay);
    font-family: var(--font-display);
    font-size: 1rem;
}

.guide-sheet-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.15;
}

.guide-sheet ol button.is-current .guide-sheet-name {
    color: #4B53A0;
}

.guide-sheet-here {
    align-self: center;
    margin-left: auto;
    padding: 0.25rem 0.6rem;
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
    background: #4B53A0;
    border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
    .guide-sheet,
    .guide-sheet-dim {
        animation: none;
    }
}

/* ==========================================================================
   A note before you arrive — "Photo + fact tiles"
   ========================================================================== */

.host-note.host-note--split {
    position: relative;
    padding: 0;
    min-height: 760px;
    background: #ECECF7;
}

.host-note-photo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 56%;
    margin: 0;
    overflow: hidden;
}

.host-note-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.host-note-photo figcaption {
    position: absolute;
    left: 2.5rem;
    bottom: 2.25rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.host-note-card {
    position: relative;
    z-index: 1;
    width: min(600px, 46%);
    margin: 0 clamp(2rem, 6vw, 6rem) 0 auto;
    top: 5.5rem;
    padding: clamp(2rem, 3.6vw, 3.25rem);
    background: #FBF9F4;
    border-radius: 6px;
    box-shadow: 0 40px 80px -40px rgba(34, 38, 74, 0.6);
}

.host-note-card .ed-title {
    font-size: clamp(2.2rem, 3.6vw, 3.25rem);
    margin-bottom: 1.1rem;
}

.host-note-card .host-note-lede {
    margin: 0 0 1.8rem;
    color: #4A4F6E;
    font-size: 1.02rem;
}

.host-note-tiles {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.host-note-tile {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: 0.85rem;
    align-items: start;
    padding: 1rem;
    background: #ECECF7;
    border-radius: 12px;
}

.host-note-tile-icon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    color: #4B53A0;
    background: #fff;
    border-radius: 50%;
}

.host-note-tile dt {
    color: var(--cz-clay);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.host-note-tile dd {
    margin: 0;
}

.host-note-tile strong {
    display: block;
    margin: 0.15rem 0 0.1rem;
    color: #22264A;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.15;
}

.host-note-tile dd span {
    display: block;
    color: #555A78;
    font-size: 0.86rem;
    line-height: 1.4;
}

.host-note-tile.is-highlight {
    background: #4B53A0;
}

.host-note-tile.is-highlight .host-note-tile-icon {
    color: #FF8D6E;
}

.host-note-tile.is-highlight dt {
    color: #FFC9B5;
}

.host-note-tile.is-highlight strong,
.host-note-tile.is-highlight dd span {
    color: #fff;
}

/* Leave room below the overlapping card */
.host-note--split::after {
    content: '';
    display: block;
    height: 9rem;
}

@media (max-width: 1024px) {
    .host-note.host-note--split {
        min-height: 0;
        padding-bottom: 3.5rem;
    }

    .host-note--split::after {
        display: none;
    }

    .host-note-photo {
        position: relative;
        width: 100%;
        height: clamp(320px, 60vw, 520px);
    }

    .host-note-card {
        top: 0;
        width: auto;
        margin: -5rem 1rem 0;
    }
}

@media (max-width: 560px) {
    .host-note-photo figcaption {
        top: 1.25rem;
        bottom: auto;
        left: 1.25rem;
    }

    .host-note-card {
        margin: -4rem 0.75rem 0;
        padding: 1.6rem 1.2rem 1.25rem;
    }

    .host-note-tiles {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.6rem;
    }

    .host-note-tile {
        padding: 0.85rem 0.9rem;
    }

    .host-note-card .host-note-lede {
        font-size: 1.0625rem;
    }
}

/* ==========================================================================
   The House — "Magazine spread"
   ========================================================================== */

.the-house--spread .house-cover {
    position: relative;
    height: clamp(460px, 62vh, 600px);
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
}

.the-house--spread .house-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

.the-house--spread .house-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(24, 26, 50, 0.78) 0%, rgba(24, 26, 50, 0.15) 62%, rgba(24, 26, 50, 0) 100%);
    pointer-events: none;
}

.house-cover-copy {
    position: absolute;
    left: clamp(1.5rem, 4vw, 3.5rem);
    bottom: clamp(1.5rem, 4vw, 3.5rem);
    z-index: 1;
    max-width: 34rem;
}

.house-cover-copy .ed-eyebrow {
    color: #FFC9B5;
}

.house-cover-copy .ed-title {
    max-width: 13ch;
    margin-bottom: 1rem;
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 4.3rem);
}

.house-cover-copy .ed-title em {
    color: #FFC9B5;
}

.house-cover-lede {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.05rem;
    line-height: 1.65;
}

.house-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: clamp(0.9rem, 1.6vw, 1.4rem);
    margin-top: clamp(0.9rem, 1.6vw, 1.4rem);
}

.house-card {
    overflow: hidden;
    background: #FBF9F4;
    border-radius: 6px;
    box-shadow: 0 20px 40px -30px rgba(34, 38, 74, 0.5);
}

.house-card-photo {
    height: 220px;
    overflow: hidden;
}

.house-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out-expo);
}

.house-card:hover .house-card-photo img {
    transform: scale(1.05);
}

.house-card-body {
    padding: 1.2rem 1.3rem 1.4rem;
}

.house-card-label {
    margin: 0;
    color: var(--cz-clay);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.house-card h3,
.house-comforts h3 {
    margin: 0.3rem 0 0.35rem;
    color: #22264A;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
}

.house-card-body p:not(.house-card-label) {
    margin: 0;
    color: #555A78;
    font-size: 0.95rem;
}

.house-comforts {
    padding: 1.5rem 1.5rem 0.75rem;
    background: #ECECF7;
    border-radius: 6px;
}

.house-comforts h3 {
    margin-bottom: 0.8rem;
}

.house-comforts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.house-comforts li > a,
.house-comforts li > div {
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    padding: 0.6rem 0;
    color: inherit;
    text-decoration: none;
    border-top: 1px solid rgba(34, 38, 74, 0.1);
}

.house-comforts li > a:hover strong {
    color: var(--cz-clay);
}

.house-comforts-icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    color: #4B53A0;
    background: #fff;
    border-radius: 50%;
}

.house-comforts-icon svg {
    width: 20px;
    height: 20px;
}

.house-comforts strong {
    display: block;
    color: #22264A;
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.house-comforts small {
    display: block;
    color: #555A78;
    font-size: 0.85rem;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .house-row {
        grid-template-columns: 1fr 1fr;
    }

    .house-comforts {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .the-house--spread .house-cover {
        height: 520px;
    }

    .the-house--spread .house-cover::after {
        background: linear-gradient(180deg, rgba(24, 26, 50, 0) 25%, rgba(24, 26, 50, 0.85) 100%);
    }

    .house-cover-copy {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1.5rem;
    }

    .house-row {
        grid-template-columns: 1fr;
    }

    .house-card-photo {
        height: 200px;
    }

    .house-comforts small,
    .house-card-body p:not(.house-card-label) {
        font-size: 1rem;
    }
}

/* Phones: preview three places per category, "Show all" reveals the rest */
.place-more {
    display: none;
}

@media (max-width: 768px) {
    .menu-cards:not(.is-expanded) > li:nth-child(n + 4),
    .postcards:not(.is-expanded) > li:nth-child(n + 4) {
        display: none;
    }

    .place-more {
        display: block;
        width: 100%;
        margin: 1.4rem 0 0;
        padding: 0.9rem 1.2rem;
        color: #22264A;
        font-family: var(--font-main);
        font-size: 0.95rem;
        font-weight: 600;
        background: #FBF9F4;
        border: 1px solid rgba(34, 38, 74, 0.22);
        border-radius: 999px;
        cursor: pointer;
    }

    .place-more:focus-visible {
        outline: 2px solid var(--cz-clay);
        outline-offset: 2px;
    }
}

/* ==========================================================================
   Desktop header (replaces the dotted side rail)
   ========================================================================== */

.page-metro-track {
    display: none !important;
}

.site-header {
    display: none;
}

@media (min-width: 1025px) {
    html {
        scroll-padding-top: 80px;
    }

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 950;
        display: flex;
        align-items: center;
        gap: 2rem;
        height: 72px;
        padding: 0 clamp(2rem, 4vw, 3.5rem);
        background: transparent;
        border-bottom: 1px solid transparent;
        transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .site-header.is-solid {
        background: rgba(251, 249, 244, 0.92);
        backdrop-filter: blur(14px) saturate(150%);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        border-bottom-color: rgba(34, 38, 74, 0.1);
        box-shadow: 0 10px 30px -24px rgba(34, 38, 74, 0.5);
    }

    .site-header-logo {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: #22264A;
        font-family: var(--font-display);
        font-size: 1.6rem;
        text-decoration: none;
    }

    .site-header-logo i {
        width: 9px;
        height: 9px;
        background: var(--cz-clay);
        border-radius: 50%;
    }

    .site-header nav {
        display: flex;
        gap: clamp(1rem, 2vw, 1.75rem);
        margin-left: auto;
    }

    .site-header nav a {
        padding: 0.4rem 0;
        color: #3B3F5C;
        font-family: var(--font-main);
        font-size: 0.95rem;
        font-weight: 500;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        transition: color 0.2s ease, border-color 0.2s ease;
    }

    .site-header nav a:hover {
        color: #22264A;
        border-bottom-color: rgba(212, 85, 58, 0.4);
    }

    .site-header nav a.is-current {
        color: #22264A;
        border-bottom-color: var(--cz-clay);
    }

    .site-header a:focus-visible {
        outline: 2px solid var(--cz-clay);
        outline-offset: 4px;
    }

    .hero-map-grid {
        padding-top: calc(clamp(5rem, 9vh, 7rem) + 24px);
        padding-left: var(--cz-gutter);
    }
}

/* ── Stay Route: guide links live inside each stop (directory panel removed) ── */
.stay-route-copy{display:flex;flex-direction:column}
.stay-route-copy > p{margin-bottom:.9rem!important}
.stay-route-links{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;border-top:1px solid rgba(34,38,74,.12)}
.stay-route-links li{border-bottom:1px solid rgba(34,38,74,.12)}
.stay-route-copy .stay-route-links a.guide-directory-link{display:grid!important;grid-template-columns:1.6rem 1fr auto;align-items:center;gap:.6rem;padding:.6rem .1rem!important;margin:0!important;min-height:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--feat-ink,#22264A)!important;text-decoration:none!important;white-space:normal;position:relative;overflow:hidden;transform:none!important}
.stay-route-links .guide-directory-icon{width:1.6rem!important;height:1.6rem!important;font-size:1rem!important;border:0!important;background:none!important;display:grid;place-items:center}
.stay-route-links .guide-directory-link strong{display:block;font-size:.95rem!important;line-height:1.25;color:var(--feat-ink,#22264A)!important}
.stay-route-links .guide-directory-link small{display:block;font-size:.8rem!important;line-height:1.3;color:var(--feat-muted,#5B5F80)!important}
.stay-route-links .guide-directory-arrow{color:#4B53A0!important;transition:transform .2s ease}
.stay-route-links .guide-directory-link:hover .guide-directory-arrow,.stay-route-links .guide-directory-link:focus-visible .guide-directory-arrow{transform:translateX(3px)}
.stay-route-links .guide-directory-link:hover strong{color:#4B53A0!important}
.stay-route-copy a.stay-route-cta{margin-top:auto}
.stay-route-copy .stay-route-links a.guide-directory-link,.stay-route-links .guide-directory-link strong,.stay-route-links .guide-directory-link small{text-transform:none!important;letter-spacing:0!important;white-space:normal!important;overflow-wrap:anywhere}
.stay-route-links .guide-directory-link strong{font-family:var(--font-main)!important;font-weight:600!important}
.stay-route-links .guide-directory-link > span:nth-child(3){min-width:0}
@media(min-width:1025px){.stay-route-copy .stay-route-links a.guide-directory-link{grid-template-columns:1.4rem 1fr auto;gap:.5rem}}

/* ── Around here (formerly The House): home-base photo + neighborhood directory ── */
.the-house--around .around-layout{max-width:var(--cz-max,1240px);margin:0 auto;padding:0 var(--cz-gutter,1.5rem);display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.around-home{position:relative;margin:0;border-radius:999px 999px 6px 6px;overflow:hidden;aspect-ratio:3/4.4;background:#22264A}
.around-home img{width:100%;height:100%;object-fit:cover;display:block}
.around-home figcaption{position:absolute;inset:auto 0 0 0;padding:1.5rem 1.4rem 1.4rem;background:linear-gradient(transparent,rgba(20,22,45,.85) 35%);color:#fff}
.around-home figcaption p{margin:0;font-size:.95rem;line-height:1.55;color:#fff}
.around-home .around-home-eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#F6D7C6;margin-bottom:.35rem}
.around-chips{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.around-chips a,.around-chips li > span{display:inline-block;font-size:.8rem;padding:.35rem .7rem;border-radius:99px;background:rgba(255,255,255,.18);color:#fff;text-decoration:none;backdrop-filter:blur(4px)}
.around-chips a:hover,.around-chips a:focus-visible{background:rgba(255,255,255,.32)}
.around-main header .ed-title em{color:var(--cz-clay)}
.around-lede{margin:.9rem 0 0;color:var(--feat-muted,#555A78);font-size:.95rem}
.around-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 2.25rem;margin-top:2rem}
.around-group h3{font-family:var(--font-main);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--feat-accent,#4B53A0);margin:0;padding-bottom:.6rem;border-bottom:2px solid var(--feat-ink,#22264A)}
.around-group ul{list-style:none;margin:0;padding:0}
.around-group li{border-bottom:1px solid rgba(34,38,74,.14)}
.around-row{display:grid;grid-template-columns:1.7rem minmax(0,1fr) auto;align-items:center;gap:.6rem;padding:.75rem .15rem;color:var(--feat-ink,#22264A);text-decoration:none;transition:background .2s ease}
a.around-row:hover,a.around-row:focus-visible{background:rgba(75,83,160,.07)}
a.around-row:focus-visible{outline:2px solid var(--feat-accent,#4B53A0);outline-offset:-2px}
.around-icon{font-size:1.05rem;text-align:center}
.around-name small{display:block;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cz-clay,#D4553A)}
.around-name strong{display:block;font-weight:600;font-size:.97rem;line-height:1.3}
.around-time{font-family:var(--font-display);font-size:1.5rem;line-height:1;white-space:nowrap}
.around-time small{font-family:var(--font-main);font-size:.75rem;color:var(--feat-muted,#555A78);margin-left:.2rem}
@media(max-width:1024px){.the-house--around .around-layout{grid-template-columns:1fr}.around-home{position:relative;top:0;aspect-ratio:auto;height:340px;border-radius:200px 200px 6px 6px}}
@media(max-width:768px){.around-home{height:300px}.around-groups{grid-template-columns:1fr;gap:1.6rem;margin-top:1.5rem}.around-row{padding:.65rem .1rem}}
/* Restaurant card flagged from "Around here" */
.menu-card{transition:box-shadow .3s ease,transform .3s ease}
.menu-card.is-highlighted{transform:translateY(-4px);box-shadow:0 0 0 3px var(--feat-accent,#4B53A0),0 30px 50px -28px rgba(34,38,74,.55);border-radius:6px}
/* Places featured further down the page get a small "jump" cue */
.around-row.is-on-page .around-name strong::after{content:'↓';margin-left:.35rem;font-size:.8em;color:var(--feat-accent,#4B53A0)}
/* Around here: "Our picks on the Hill" photo row */
.around-picks{grid-column:1 / -1;margin-top:clamp(2rem,4vw,3.25rem)}
.around-picks-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding-bottom:.8rem;border-bottom:2px solid var(--feat-ink,#22264A)}
.around-picks-head .ed-eyebrow{margin-bottom:.3rem}
.around-picks-head h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.1;margin:0;color:var(--feat-ink,#22264A)}
.around-picks-head > p{margin:0;color:var(--feat-muted,#555A78);font-size:.9rem;white-space:nowrap}
.around-picks-row{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1rem}
.around-picks-row a{display:block;color:var(--feat-ink,#22264A);text-decoration:none}
.around-picks-photo{display:block;aspect-ratio:3/3.2;border-radius:999px 999px 6px 6px;overflow:hidden;background:#E3E5F2}
.around-picks-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.around-picks-row a:hover img,.around-picks-row a:focus-visible img{transform:scale(1.05)}
.around-picks-row a:focus-visible{outline:2px solid var(--feat-accent,#4B53A0);outline-offset:4px;border-radius:6px}
.around-picks-row small{display:block;margin-top:.7rem;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cz-clay,#D4553A)}
.around-picks-row strong{display:block;font-weight:600;font-size:.98rem;line-height:1.3;margin-top:.15rem}
.around-picks-dist{display:block;color:var(--feat-muted,#555A78);font-size:.84rem;margin-top:.15rem}
@media(max-width:1024px){.around-picks-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){
  .around-picks-head{display:block}.around-picks-head > p{margin-top:.4rem;font-size:.85rem}
  .around-picks-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.85rem;margin-right:calc(-1 * var(--cz-gutter,1rem));padding-right:var(--cz-gutter,1rem);padding-bottom:.5rem;scrollbar-width:none}
  .around-picks-row::-webkit-scrollbar{display:none}
  .around-picks-row li{flex:0 0 42%;scroll-snap-align:start}
}
@media(max-width:1024px){.the-house--around .around-layout{grid-template-columns:minmax(0,1fr)}}
.around-picks,.around-main{min-width:0}

/* Around here: picks sit on their own full-width lavender band
   (the home-base photo no longer sticks, so nothing overlaps it). */
.around-picks{position:relative;background:var(--feat-bg,#E3E5F2);box-shadow:0 0 0 100vmax var(--feat-bg,#E3E5F2);clip-path:inset(0 -100vmax);padding:3rem 0 3.25rem;margin-top:4.5rem}
.around-picks-photo{box-shadow:0 18px 30px -20px rgba(34,38,74,.6)}
@media(max-width:768px){.around-picks{padding:2.25rem 0 2.5rem;margin-top:3rem}}

/* ── Explore Seattle: neighborhoods + attractions in one section ── */
.explore-seattle .explore-track{grid-auto-flow:initial;grid-auto-columns:initial;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;max-width:var(--cz-max);margin:0 auto;padding:.5rem var(--cz-gutter) 1rem;gap:clamp(.9rem,1.6vw,1.4rem)}
.explore-seattle .curated-card:nth-child(even){margin-top:0}
.explore-seattle .curated-card-arch{aspect-ratio:3/2.4}
.explore-card-mood{display:block;margin-top:.75rem;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--feat-muted,#555A78)}
.explore-seattle .curated-card-link.is-selected .explore-card-mood{color:var(--cz-clay)}
.explore-seattle .curated-card-title{font-family:var(--font-main);font-weight:600;font-size:1rem;line-height:1.25;margin-top:.15rem}
.explore-seattle .curated-card-journey{font-size:.82rem;color:var(--feat-muted,#555A78);margin-top:.2rem}
.explore-detail{max-width:var(--cz-max);margin:clamp(1.5rem,3vw,2.25rem) auto 0;padding:clamp(1.5rem,3vw,2rem) var(--cz-gutter) 0;display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(1.75rem,4vw,3rem);border-top:2px solid var(--feat-ink,#22264A);animation:cz-card-in 520ms var(--ease-out-expo) both}
.explore-kicker{margin:0 0 .4rem;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cz-clay)}
.explore-brief h3{margin:0 0 .6rem;font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.05;color:var(--feat-ink,#22264A)}
.explore-desc{margin:0 0 1rem;color:var(--feat-muted,#555A78);line-height:1.6}
.explore-transit{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.explore-transit li{font-size:.82rem;padding:.35rem .75rem;border-radius:99px;background:rgba(255,255,255,.65);color:var(--feat-ink,#22264A)}
.explore-transit strong{font-weight:600;margin-left:.2rem}
.explore-tip{padding:.85rem 1rem;background:#fff;border-left:3px solid var(--cz-clay);border-radius:0 6px 6px 0;margin-bottom:1rem}
.explore-tip span,.explore-block > span{display:block;font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cz-clay);margin-bottom:.3rem}
.explore-tip p,.explore-block p{margin:0;font-size:.9rem;line-height:1.5;color:var(--feat-ink,#22264A)}
.explore-block{margin-bottom:1rem}
.explore-block > strong{display:block;font-weight:600;color:var(--feat-ink,#22264A)}
.explore-block > strong + p{color:var(--feat-muted,#555A78)}
.explore-tips{margin:0;padding-left:1.1rem;font-size:.88rem;line-height:1.5;color:var(--feat-muted,#555A78)}
.explore-tips li{margin-bottom:.3rem}
.explore-sights-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}
.explore-sights-head .explore-kicker{margin:0}
.explore-postcards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.explore-postcards .postcard-slot:nth-child(3n+2){padding-top:0}
.explore-postcards .postcard-slot:nth-child(even){padding-top:1.5rem}
@media(max-width:1024px){
  .explore-seattle .explore-track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .explore-seattle .explore-track::-webkit-scrollbar{display:none}
  .explore-detail{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:768px){
  .explore-seattle .explore-track{grid-auto-columns:44%;padding-right:var(--cz-gutter)}
  .explore-postcards{grid-template-columns:minmax(0,1fr)!important}
  .explore-postcards .postcard-slot:nth-child(even){padding-top:0}
}

/* Around here: tapping a Capitol Hill pick opens our notes inline */
.around-picks-row button{display:block;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;color:var(--feat-ink,#22264A);cursor:pointer}
.around-picks-row button:hover img,.around-picks-row button:focus-visible img{transform:scale(1.05)}
.around-picks-row button:focus-visible{outline:2px solid var(--feat-accent,#4B53A0);outline-offset:4px;border-radius:6px}
.around-picks-row button.is-open .around-picks-photo{outline:3px solid var(--cz-clay);outline-offset:3px}
.around-pick-detail{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.5rem;align-items:start;margin-top:1.75rem;padding:1.25rem;background:#fff;border-radius:8px;box-shadow:0 24px 44px -30px rgba(34,38,74,.6);animation:cz-card-in 420ms var(--ease-out-expo) both}
.around-pick-detail > img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.around-pick-detail h4{margin:.2rem 0 .5rem;font-family:var(--font-display);font-weight:400;font-size:1.7rem;color:var(--feat-ink,#22264A)}
.around-pick-detail p{margin:0 0 .75rem;color:var(--feat-muted,#555A78);line-height:1.55}
.around-pick-tip{padding:.7rem .9rem;background:var(--feat-bg,#E3E5F2);border-radius:6px;color:var(--feat-ink,#22264A)!important}
.around-pick-tip span{display:block;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cz-clay);margin-bottom:.2rem}
.around-pick-links{display:flex;flex-wrap:wrap;gap:1.25rem;font-weight:600;font-size:.9rem}
.around-pick-links a{color:var(--feat-accent,#4B53A0);text-decoration:none;border-bottom:1px solid currentColor}
.around-pick-close{position:absolute;top:.6rem;right:.75rem;width:2rem;height:2rem;border:0;border-radius:50%;background:var(--feat-bg,#E3E5F2);color:var(--feat-ink,#22264A);font-size:1.2rem;line-height:1;cursor:pointer}
@media(max-width:768px){.around-pick-detail{grid-template-columns:1fr;padding:1rem}.around-pick-detail h4{font-size:1.45rem}}

/* ── Mobile bottom tab bar: tinted liquid glass, label only on the current tab ── */
.guide-tabs{display:none}
@media(max-width:1024px){
  .guide-fab,.guide-sheet,.guide-sheet-dim{display:none!important}
  .guide-tabs{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:1001;display:flex;align-items:center;justify-content:space-between;padding:6px;border-radius:30px;
    background:linear-gradient(180deg,rgba(227,229,242,.55),rgba(75,83,160,.18));
    -webkit-backdrop-filter:blur(18px) saturate(190%) brightness(1.06);backdrop-filter:blur(18px) saturate(190%) brightness(1.06);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.25),inset 0 0 18px rgba(255,255,255,.18),0 12px 32px -10px rgba(20,22,45,.45)}
  .guide-tabs a{display:flex;align-items:center;justify-content:center;gap:0;height:44px;min-width:44px;padding:0 11px;border-radius:22px;font-family:var(--font-main);font-size:13px;font-weight:600;color:var(--feat-ink,#22264A);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background .35s ease,color .35s ease,padding .35s ease,box-shadow .35s ease}
  .guide-tabs a span{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .35s ease,opacity .25s ease,margin .35s ease}
  .guide-tabs a.is-current{gap:6px;padding:0 15px 0 12px;background:rgba(34,38,74,.84);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -6px rgba(20,22,45,.6)}
  .guide-tabs a.is-current span{max-width:110px;opacity:1}
  .guide-tabs a:focus-visible{outline:2px solid var(--cz-clay);outline-offset:1px}
  .guide-tabs svg{flex:0 0 22px}
  .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media(max-width:1024px){.guide-tabs{background:rgba(236,237,247,.97)}}
}
@media (prefers-reduced-motion:reduce){.guide-tabs a,.guide-tabs a span{transition:none}}

/* ── Section rhythm: lavender and cream alternate down the page ── */
:root{--rhythm-lav:#ECECF7;--rhythm-cream:#FBF9F4}
#stay-guide,#dining,#climate{background:var(--rhythm-cream)!important}
#the-house,#neighborhoods-explore,#essentials{background:var(--rhythm-lav)!important}
/* Cards that sat on lavender stay distinct on cream */
#stay-guide .stay-route-stop{background:#fff!important}
/* "Our picks" band reads as cream on the lavender Around here section */
#the-house .around-picks{background:var(--rhythm-cream);box-shadow:0 0 0 100vmax var(--rhythm-cream)}

/* ── Curtain-wipe scroll animations (see hooks/useCurtainReveal.ts) ── */
/* The new reveals replace the older fade-up below the hero. */
.fx-on .motion-reveal-group:not(.hero *) .motion-reveal-item{opacity:1!important;transform:none!important;filter:none!important}
.fx-on .fx-photo{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) var(--fx-delay,0s)}
.fx-on .fx-photo.in{clip-path:inset(0 0 0 0)}
.fx-on .fx-card{opacity:0;transform:translateX(80px) skewX(-12deg);transition:transform .9s cubic-bezier(.16,1,.3,1) var(--fx-delay,0s),opacity .6s ease var(--fx-delay,0s)}
.fx-on .fx-card.in{opacity:1;transform:none}
.fx-on .fx-head{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.fx-on .fx-head.in{clip-path:inset(0 -1em -0.3em 0)}
/* Hover lift on postcards still works once revealed */
.fx-on .postcard-slot.fx-card.in .postcard{transition:transform .5s var(--ease-out-expo),box-shadow .5s ease}
@media(max-width:768px){.fx-on .fx-card{transform:translateX(48px) skewX(-8deg)}}

/* ── Hero: icon tiles on the left, glass caption on the photo ── */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-window-caption,.hero-pin{display:none!important}
.hero--map .hero-trust-strip{display:grid!important;grid-template-columns:repeat(4,84px);gap:10px;overflow:visible!important;margin:0!important;padding:0!important}
.hero--map .hero-highlight,.hero--map .hero-highlight:first-child,.hero--map .hero-highlight:last-child{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:86px;padding:0!important;
  border-radius:16px!important;border:1px solid rgba(34,38,74,.14)!important;background:rgba(255,255,255,.72)!important;color:#22264A!important;
  font-family:var(--font-main);font-size:.76rem;font-weight:600;line-height:1;transition:background .25s ease,color .25s ease,transform .25s ease,border-color .25s ease!important}
.hero--map .hero-highlight:hover{border-color:#22264A!important;transform:translateY(-2px)}
.hero--map .hero-highlight.is-active{background:#22264A!important;border-color:#22264A!important;color:#fff!important}
.hero--map .hero-highlight .hero-highlight-icon{display:grid;place-items:center;margin:0;font-size:0;color:inherit}
.hero--map .hero-highlight.is-active .hero-highlight-icon{color:#FFB39E}
.hero--map .hero-highlight:focus-visible{outline:2px solid var(--cz-clay);outline-offset:3px}
.hero-window-arch{position:relative}
.hero-caption{position:absolute;left:14px;right:14px;bottom:14px;z-index:6;padding:13px 17px 14px;border-radius:14px;color:#fff;
  background:linear-gradient(180deg,rgba(34,38,74,.35),rgba(34,38,74,.74));-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px -14px rgba(0,0,0,.6);animation:cz-cap-in .45s var(--ease-out-expo,ease) both}
.hero-caption small{display:block;font-size:.7rem;letter-spacing:.18em;color:#FFD3C2;font-weight:600}
.hero-caption b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.45rem;line-height:1.15;margin-top:3px}
.hero-caption span{display:block;font-size:.88rem;opacity:.88;margin-top:2px}
@keyframes cz-cap-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero--map .hero-stamp{bottom:auto!important;top:12%!important}
@media(max-width:768px){
  .hero--map .hero-trust-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .hero--map .hero-highlight,.hero--map .hero-highlight:first-child,.hero--map .hero-highlight:last-child{height:76px;font-size:.72rem}
  .hero-caption{left:10px;right:10px;bottom:10px;padding:11px 14px 12px}
  .hero-caption b{font-size:1.2rem}
  .hero-caption span{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){.hero-caption{animation:none}}

/* ── Audit fixes (Oct 2026) ── */
/* Small coral labels use the deeper coral so they meet 4.5:1 on cream & lavender */
:root{--cz-clay-text:#AE3F28}
.guide-eyebrow,.ed-eyebrow,.around-name small,.around-picks-row small,.menu-card-kicker,.explore-card-mood,
.explore-seattle .curated-card-link.is-selected .explore-card-mood,.explore-kicker,.postcard-kicker,.postcard-stamp,
.accordion-number,.explore-tip span,.explore-block > span,.around-pick-tip span,.around-pick-detail .ed-eyebrow,
.house-card-label,.curated-detail-kicker,.house-nearby-kind{color:var(--cz-clay-text)!important}
.stay-route-stop:nth-child(4) .stay-route-marker{background:var(--cz-clay-text)!important}
.site-footer-cta{background:var(--cz-clay-text)!important;border-color:var(--cz-clay-text)!important}
/* Tiny labels: nothing below ~11.5px */
.around-name small,.around-picks-row small,.explore-tip span,.explore-block > span,.around-pick-tip span{font-size:.72rem!important}
.explore-card-mood,.explore-kicker{font-size:.72rem!important}
/* Bigger tap areas without changing the look */
.place-meta a,.stay-route-cta,.ed-link,.inline-text-link{padding-block:10px;margin-block:-10px}
.place-meta a{display:inline-flex;align-items:center}
.stay-route-copy a.stay-route-cta{display:inline-block}
/* Phones: keep the reviews stamp clear of the bottom tab bar */
@media(max-width:768px){.hero-stamp{bottom:auto!important;top:42%;right:-.6rem!important}}
.accordion-heading{margin:0;font:inherit}
.almanac-event-foot a{display:inline-block;padding-block:10px;margin-block:-10px}
.site-footer nav li a{display:inline-block;padding-block:8px;margin-block:-8px}

/* ── Phone fixes (Oct 2026) ── */
/* 1. Nothing may push the page wider than the screen (e.g. cards waiting to slide in) */
html,body{overflow-x:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}
/* 2. Tab labels fit on 360px phones */
@media(max-width:380px){.guide-tabs a{font-size:12px!important;padding:0 9px}.guide-tabs a.is-current{padding:0 12px 0 10px}}
@media(max-width:1024px){
  /* 3. Footer heading readable over the rooftop photo */
  .site-footer-hero{background:
    linear-gradient(180deg,rgba(34,38,74,.62) 0%,rgba(34,38,74,.45) 30%,rgba(44,48,96,.55) 55%,rgba(44,48,96,.8) 80%,#2C3060 100%),
    url('images/property-rooftop.webp') center 55% / cover no-repeat!important}
  .site-footer-hero h2,.site-footer-eyebrow{text-shadow:0 2px 18px rgba(20,22,45,.55)}
}
@media(max-width:768px){
  /* 4. Explore attractions swipe sideways instead of stacking */
  .explore-postcards{display:flex!important;gap:1rem!important;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1 * var(--cz-gutter,1rem));padding:.5rem var(--cz-gutter,1rem) 1rem 0;scrollbar-width:none}
  .explore-postcards::-webkit-scrollbar{display:none}
  .explore-postcards > li{flex:0 0 80%;scroll-snap-align:start;padding-top:0!important}
  .explore-postcards .postcard-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* 5. Less empty space above the welcome text */
  .hero.hero--map{padding-top:0!important}
  .hero-map-grid{padding-top:2.25rem!important;padding-bottom:4rem!important;gap:1.5rem!important}
  /* 6. Easier taps */
  .around-chips a{position:relative}
  .around-chips a::after{content:'';position:absolute;inset:-6px -3px}
  .place-view-toggle button{min-height:44px}
}

/* ── Footer photo: Seattle skyline with Mt. Rainier ── */
.site-footer-hero{background:
  linear-gradient(180deg,rgba(44,48,96,.05) 0%,rgba(44,48,96,.2) 40%,rgba(44,48,96,.78) 78%,#2C3060 100%),
  url('images/kerry-sunrise.webp') center 35% / cover no-repeat!important}
@media(max-width:1024px){.site-footer-hero{background:
  linear-gradient(180deg,rgba(34,38,74,.35) 0%,rgba(34,38,74,.3) 30%,rgba(44,48,96,.55) 55%,rgba(44,48,96,.82) 80%,#2C3060 100%),
  url('images/kerry-sunrise.webp') 30% 35% / cover no-repeat!important}}

/* ── Folded chapters (components/ChapterFold.tsx + ChapterIndex.tsx) ──
   All sizes: a chapter stays folded until opened. Phones show a chapter card
   in its place; desktop shows one chapter index above them all. */
.chapter-card{display:none}
.chapter-fold:not(.is-open) > section{height:0!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;border:0!important}
.chapter-index{background:var(--rhythm-lav,#ECECF7);padding:clamp(3.5rem,6vw,5rem) 0 clamp(3rem,5vw,4.25rem)}
.chapter-index-inner{max-width:var(--cz-max,1240px);margin:0 auto;padding:0 var(--cz-gutter,1.5rem)}
.chapter-index h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,3.4vw,2.75rem);line-height:1.1;color:var(--feat-ink,#22264A);margin:.4rem 0 2rem}
.chapter-index ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.chapter-index button{display:block;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;color:var(--feat-ink,#22264A);cursor:pointer}
.chapter-index-photo{display:block;aspect-ratio:3/3.4;border-radius:999px 999px 10px 10px;overflow:hidden;background:#dfe1f0;transition:outline-color .25s ease}
.chapter-index-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out-expo,ease)}
.chapter-index button:hover .chapter-index-photo img,.chapter-index button:focus-visible .chapter-index-photo img{transform:scale(1.05)}
.chapter-index button.is-open .chapter-index-photo{outline:3px solid var(--feat-ink,#22264A);outline-offset:4px}
.chapter-index button:focus-visible{outline:2px solid var(--cz-clay);outline-offset:6px;border-radius:12px}
.chapter-index small{display:block;margin-top:.85rem;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cz-clay-text,#AE3F28)}
.chapter-index strong{display:block;font-family:var(--font-display);font-weight:400;font-size:1.4rem;line-height:1.15;margin:.2rem 0}
.chapter-index strong span{color:var(--feat-accent,#4B53A0);font-family:var(--font-main);font-size:1rem}
.chapter-index-summary{display:block;font-size:.9rem;line-height:1.45;color:var(--feat-muted,#555A78)}
@media(max-width:1024px){.chapter-index ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){
  .chapter-index{display:none}
  .chapter-fold{background:var(--fold-bg,transparent);padding:10px 0}
  .chapter-fold[data-chapter="the-house"],.chapter-fold[data-chapter="neighborhoods-explore"],.chapter-fold[data-chapter="essentials"]{--fold-bg:var(--rhythm-lav,#ECECF7)}
  .chapter-fold[data-chapter="dining"],.chapter-fold[data-chapter="climate"]{--fold-bg:var(--rhythm-cream,#FBF9F4)}
  .chapter-fold:first-of-type{padding-top:18px}
  .chapter-card{display:grid;grid-template-columns:72px minmax(0,1fr) 38px;gap:14px;align-items:center;width:calc(100% - 32px);margin:0 16px;padding:12px;border:0;border-radius:18px;background:#fff;text-align:left;font:inherit;color:var(--feat-ink,#22264A);cursor:pointer;box-shadow:0 14px 28px -20px rgba(34,38,74,.55);-webkit-tap-highlight-color:transparent}
  .chapter-card img{width:72px;height:72px;object-fit:cover;border-radius:36px 36px 8px 8px}
  .chapter-card-text{min-width:0}
  .chapter-card small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cz-clay-text,#AE3F28)}
  .chapter-card strong{display:block;font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1.15;margin:2px 0}
  .chapter-card-text > span{display:block;font-size:.85rem;color:var(--feat-muted,#555A78);line-height:1.35}
  .chapter-card-toggle{width:38px;height:38px;border-radius:50%;background:#22264A;color:#fff;display:grid;place-items:center;font-size:1.3rem;line-height:1}
  .chapter-card:focus-visible{outline:2px solid var(--cz-clay);outline-offset:2px}
  .chapter-fold.is-open{padding-bottom:0}
  .chapter-fold.is-open > .chapter-card{margin-bottom:6px}
}

/* ── Desktop menu removed: no fixed header to clear any more ── */
@media (min-width: 1025px){
  html{scroll-padding-top:16px}
  .hero-map-grid{padding-top:clamp(5rem,9vh,7rem)!important}
}
/* Phone tab bar removed: no space to reserve at the bottom of the page */
@media(max-width:1024px){.site-footer{padding-bottom:env(safe-area-inset-bottom,0px)!important}}
@media(max-width:1024px){.App{padding-bottom:0!important}}

/* ==========================================================================
   Book-direct inquiry pop-up: dates on a calendar, guests, name/email/phone.
   Cream sheet centred on desktop; a bottom sheet on phones.
   ========================================================================== */
.booking-modal .splash-modal-overlay{background:rgba(34,38,74,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.booking-modal .booking-sheet{
  width:min(640px,calc(100% - 32px));max-width:none;max-height:min(92vh,920px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:40px 40px 30px;border-radius:26px;border:1px solid rgba(34,38,74,.08);
  background:var(--rhythm-cream,#FBF9F4);color:var(--feat-ink);font-family:var(--font-main);
  box-shadow:0 30px 80px rgba(34,38,74,.28),0 2px 0 rgba(255,255,255,.7) inset;
  animation:bookingIn .45s cubic-bezier(.2,.8,.2,1);
}
.booking-sheet:focus{outline:none}
@keyframes bookingIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.booking-modal .booking-close{
  top:14px;right:14px;width:40px;height:40px;font-size:24px;color:var(--feat-ink);
  background:#fff;border:1px solid rgba(34,38,74,.14);backdrop-filter:none;
}
.booking-modal .booking-close:hover{background:var(--feat-ink);color:#fff;border-color:var(--feat-ink);transform:none}

.booking-head{margin:0 0 22px;padding-right:44px}
.booking-eyebrow{margin:0 0 6px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cz-clay-text,#AE3F28)}
.booking-head h2,.booking-done h2{margin:0 0 8px;font-family:var(--font-display);font-weight:400;font-size:clamp(1.75rem,4.4vw,2.25rem);line-height:1.08;color:var(--feat-ink)}
.booking-head h2 em{font-style:normal;color:var(--feat-accent)}
.booking-head p{margin:0;color:var(--feat-muted);font-size:1rem;line-height:1.5}

.booking-form{display:flex;flex-direction:column;gap:18px}
.booking-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--feat-muted)}
.booking-dates{margin:0;padding:0;border:0;min-width:0}
.booking-dates legend{margin-bottom:8px;padding:0}
.booking-date-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.booking-date-arrow{color:var(--feat-muted);font-size:1.1rem}
.booking-date{
  display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 14px;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid #DCDDEB;border-radius:16px;color:var(--feat-ink);font:inherit;
  transition:border-color .2s,box-shadow .2s;
}
.booking-date svg{flex:none;color:var(--feat-accent)}
.booking-date span{display:flex;flex-direction:column;min-width:0}
.booking-date small{font-size:.72rem;font-weight:600;color:var(--feat-muted);letter-spacing:.04em}
.booking-date strong{font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.booking-date strong.is-empty{color:#8A8DA6;font-weight:500}
.booking-date:hover{border-color:#B9BBD6}
.booking-date.is-active{border-color:var(--feat-accent);box-shadow:0 0 0 3px rgba(75,83,160,.16)}
.booking-date:focus-visible{outline:2px solid var(--feat-accent);outline-offset:2px}

.booking-cal-wrap.is-open{animation:bookingCal .28s ease-out}
@keyframes bookingCal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.booking-nights{display:flex;align-items:center;gap:12px;margin:10px 2px 0;font-size:.92rem;font-weight:600;color:var(--feat-ink)}
.booking-nights button{padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--feat-accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Calendar */
.cal{margin-top:12px;padding:12px 16px 16px;background:#fff;border:1px solid #E3E4EF;border-radius:20px}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.cal-hint{margin:0;font-size:.85rem;font-weight:600;color:var(--feat-accent)}
.cal-nav-btn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #E3E4EF;border-radius:50%;background:#fff;color:var(--feat-ink);cursor:pointer}
.cal-nav-btn:hover:not(:disabled){background:var(--rhythm-lav)}
.cal-nav-btn:disabled{opacity:.35;cursor:default}
.cal-months{display:grid;grid-template-columns:1fr;gap:28px}
.cal-months.is-two{grid-template-columns:1fr 1fr}
.cal-month-label{margin:0 0 8px;text-align:center;font-family:var(--font-display);font-size:1.08rem;color:var(--feat-ink)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.cal-weekday{padding:4px 0 6px;text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.06em;color:#8A8DA6}
.cal-day{position:relative;display:grid;place-items:center;aspect-ratio:1;min-height:36px;max-height:48px;width:100%;padding:0;border:0;background:transparent;font:inherit;font-size:.92rem;font-weight:500;color:var(--feat-ink);cursor:pointer}
.cal-day span{display:grid;place-items:center;width:min(100%,40px);aspect-ratio:1;border-radius:50%;transition:background .15s,color .15s}
.cal-day:hover:not(:disabled) span{background:var(--rhythm-lav)}
.cal-day.is-today span{box-shadow:inset 0 0 0 1.5px rgba(75,83,160,.35)}
.cal-day:disabled{color:#C3C5D4;cursor:default}
.cal-day.is-in-range{background:var(--rhythm-lav)}
.cal-day.is-start.has-range{background:linear-gradient(90deg,transparent 50%,var(--rhythm-lav) 50%)}
.cal-day.is-end.has-range{background:linear-gradient(90deg,var(--rhythm-lav) 50%,transparent 50%)}
.cal-day.is-start span,.cal-day.is-end span,.cal-day.is-start:hover span,.cal-day.is-end:hover span{background:var(--feat-ink);color:#fff;font-weight:700;box-shadow:none}
.cal-day:focus-visible{outline:none}
.cal-day:focus-visible span{outline:2px solid var(--feat-accent);outline-offset:1px}

/* Guests */
.booking-guests{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px 12px 16px;background:#fff;border:1.5px solid #DCDDEB;border-radius:16px}
.booking-guests small{display:block;margin-top:2px;font-size:.85rem;color:var(--feat-muted)}
.booking-stepper{display:flex;align-items:center;gap:6px}
.booking-stepper button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1.5px solid #CFD1E3;border-radius:50%;background:#fff;color:var(--feat-ink);font-size:1.3rem;line-height:1;cursor:pointer}
.booking-stepper button:hover:not(:disabled){border-color:var(--feat-accent);color:var(--feat-accent)}
.booking-stepper button:disabled{opacity:.35;cursor:default}
.booking-stepper output{min-width:2.2ch;text-align:center;font-family:var(--font-display);font-size:1.45rem}

/* Name, email, phone */
.booking-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.booking-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.booking-field span{font-size:.8rem;font-weight:600;color:var(--feat-muted)}
.booking-field input{
  width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:16px;color:var(--feat-ink);
  background:#fff;border:1.5px solid #DCDDEB;border-radius:14px;transition:border-color .2s,box-shadow .2s;
}
.booking-field input::placeholder{color:#A3A6BC}
.booking-field input:focus{outline:none;border-color:var(--feat-accent);box-shadow:0 0 0 3px rgba(75,83,160,.16)}

.booking-error{margin:0;padding:10px 14px;border-radius:12px;background:#FCEDE9;color:#8E2F1C;font-size:.92rem;font-weight:500}
.booking-submit{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 24px;
  border:0;border-radius:999px;background:var(--cz-clay-text,#AE3F28);color:#fff;
  font-family:var(--font-main);font-size:1.05rem;font-weight:700;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 10px 24px rgba(174,63,40,.25);transition:transform .2s,background .2s;
}
.booking-submit:hover:not(:disabled){background:#922F1B;transform:translateY(-1px)}
.booking-submit:disabled{opacity:.7;cursor:wait}
.booking-submit:focus-visible{outline:3px solid var(--feat-accent);outline-offset:3px}
.booking-fine{margin:-4px 0 0;text-align:center;font-size:.8rem;line-height:1.45;color:var(--feat-muted)}

/* Sent */
.booking-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 8px 4px}
.booking-done-mark{display:grid;place-items:center;width:64px;height:64px;margin-bottom:10px;border-radius:50%;background:var(--rhythm-lav);color:var(--feat-accent)}
.booking-done p{max-width:40ch;margin:0 0 18px;color:var(--feat-muted);line-height:1.55}
.booking-done strong{color:var(--feat-ink)}

/* Phones: a bottom sheet */
@media(max-width:640px){
  .booking-modal.splash-modal.active{align-items:flex-end}
  .booking-modal .booking-sheet{
    width:100%;max-height:94dvh;border-radius:24px 24px 0 0;
    padding:30px 18px calc(20px + env(safe-area-inset-bottom,0px));
    animation:bookingUp .4s cubic-bezier(.2,.8,.2,1);
  }
  .booking-modal .booking-sheet::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgba(34,38,74,.18)}
  .booking-modal .booking-close{top:14px;right:12px;width:38px;height:38px}
  .booking-head{margin-bottom:18px}
  .booking-date{gap:8px;padding:10px 12px}
  .booking-date svg{display:none}
  .cal{padding:10px 10px 12px}
  .booking-fields{grid-template-columns:1fr 1fr}
  .booking-fields .booking-field:nth-child(n+3){grid-column:1/-1}
}
@keyframes bookingUp{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.booking-modal .booking-sheet,.booking-cal-wrap.is-open{animation:none}}

/* Book direct: "future stays only" (Airbnb policy) */
.site-footer-note{margin-top:-.25rem;font-size:.85rem;opacity:.8}
.booking-policy{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0!important;padding:12px 14px;border-radius:14px;background:var(--rhythm-lav,#ECECF7);color:var(--feat-ink)!important;font-size:.9rem!important;line-height:1.45!important}
.booking-policy svg{flex:none;margin-top:1px;color:var(--feat-accent)}
.booking-policy strong{font-weight:700}
.booking-confirm{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45;color:var(--feat-ink);cursor:pointer}
.booking-confirm input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--feat-accent);cursor:pointer}
.booking-done .booking-done-note{margin-top:-8px;font-size:.88rem;padding:10px 14px;border-radius:12px;background:var(--rhythm-lav,#ECECF7);color:var(--feat-ink)}
.booking-head .booking-policy{width:calc(100% + 44px);max-width:none}

/* Status page: optional email note (no mailing list) */
.status-field-note{margin:.45rem 0 0;color:#5A5E78;font-size:.84rem;line-height:1.45}
.status-field:has(.status-field-note){margin-bottom:1.15rem}

/* Booking pop-up: Airbnb price screenshot */
.booking-shot{display:flex;flex-direction:column;gap:8px}
.booking-shot-drop{display:flex;align-items:center;gap:14px;width:100%;padding:16px;text-align:left;cursor:pointer;font:inherit;color:var(--feat-ink);background:#fff;border:1.5px dashed #B9BBD6;border-radius:16px;transition:border-color .2s,background .2s}
.booking-shot-drop:hover:not(:disabled){border-color:var(--feat-accent);background:#F7F7FC}
.booking-shot-drop:focus-visible{outline:2px solid var(--feat-accent);outline-offset:2px}
.booking-shot-drop:disabled{cursor:wait;opacity:.75}
.booking-shot-drop svg{flex:none;color:var(--feat-accent)}
.booking-shot-drop span{display:flex;flex-direction:column;gap:3px}
.booking-shot-drop strong{font-size:.98rem;font-weight:600}
.booking-shot-drop small{font-size:.84rem;line-height:1.4;color:var(--feat-muted)}
.booking-shot-file{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border:1.5px solid #DCDDEB;border-radius:16px}
.booking-shot-file img{flex:none;width:52px;height:68px;object-fit:cover;object-position:top;border-radius:8px;border:1px solid #E3E4EF}
.booking-shot-file div{flex:1;min-width:0;display:flex;flex-direction:column}
.booking-shot-file strong{font-size:.95rem}
.booking-shot-file small{font-size:.8rem;color:var(--feat-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.booking-shot-file button{flex:none;padding:8px 12px;border:1px solid #DCDDEB;border-radius:999px;background:#fff;color:var(--feat-ink);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.booking-shot-file button:hover{border-color:var(--cz-clay-text);color:var(--cz-clay-text)}
.booking-shot-error{margin:0;font-size:.88rem;color:#8E2F1C}
/* Price-details screenshot: how-to steps + a generic example breakdown */
.booking-shot-guide{display:grid;grid-template-columns:1fr 150px;gap:14px;align-items:start;padding:14px;background:var(--rhythm-lav,#ECECF7);border-radius:16px}
.booking-shot-guide ol{margin:0;padding:0;list-style:none;counter-reset:shot;display:flex;flex-direction:column;gap:10px}
.booking-shot-guide li{position:relative;padding-left:30px;font-size:.9rem;line-height:1.45;color:var(--feat-ink)}
.booking-shot-guide li::before{counter-increment:shot;content:counter(shot);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:var(--feat-accent);color:#fff;font-size:.74rem;font-weight:700;display:grid;place-items:center}
.booking-shot-example{margin:0;padding:10px 10px 8px;background:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(34,38,74,.12);font-size:.68rem;color:var(--feat-ink);transform:rotate(1.5deg)}
.booking-shot-example figcaption{margin:-2px 0 6px;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cz-clay-text,#AE3F28)}
.booking-shot-example p{display:flex;justify-content:space-between;gap:6px;margin:0 0 4px;color:var(--feat-muted)}
.booking-shot-example .ex-title{font-weight:700;color:var(--feat-ink);font-size:.74rem;margin-bottom:6px}
.booking-shot-example .ex-total{margin:6px 0 0;padding-top:5px;border-top:1px solid #E3E4EF;font-weight:700;color:var(--feat-ink)}
@media(max-width:400px){.booking-shot-guide{grid-template-columns:1fr 124px;gap:10px;padding:12px}}
.booking-shot-example p,.booking-shot-example .ex-title{font-size:.68rem!important;line-height:1.35!important;white-space:nowrap}
.booking-shot-example .ex-title{font-size:.74rem!important}
.booking-shot-guide{align-items:center}
/* Example = a real Price details screenshot, shown under the steps */
.booking-shot-guide{grid-template-columns:1fr!important;align-items:start}
.booking-shot-example{transform:none;padding:8px 8px 6px;max-width:360px;box-shadow:0 6px 18px rgba(34,38,74,.12)}
.booking-shot-example figcaption{margin:0 0 6px 4px}
.booking-shot-example img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #ECEDF4}
.booking-shot-ask{margin:0!important;font-size:.92rem!important;line-height:1.45!important;color:var(--feat-ink)}

/* Footer: two columns now that the direct-booking column is gone */
@media(min-width:769px){.site-footer-cols{grid-template-columns:1fr 1fr!important}}

/* Status page: "Coming back? 15% off your next stay" card on the done screen */
.status-offer{max-width:440px;margin:1.6rem 0 1.4rem;padding:1.2rem 1.2rem 1.25rem;background:#fff;border-radius:20px;box-shadow:0 14px 34px -12px rgba(34,38,74,.25)}
.status-offer-eyebrow{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cz-clay-text,#AE3F28)}
.status-offer h2{margin:.35rem 0 .3rem;font-family:var(--font-display);font-weight:400;font-size:1.55rem;line-height:1.1;color:#22264A}
.status-offer-hint{margin:0 0 .8rem;font-size:.9rem;line-height:1.45;color:#555A78}
.status-offer input{box-sizing:border-box;width:100%;padding:.85rem .95rem;font:inherit;font-size:16px;color:#22264A;background:#fff;border:1px solid rgba(34,38,74,.22);border-radius:14px;margin-bottom:.75rem}
.status-offer input:focus{outline:none;border-color:#4B53A0;box-shadow:0 0 0 3px rgba(75,83,160,.16)}
.status-offer .status-submit:disabled{opacity:.7;cursor:wait}
.status-offer-error{margin:-.3rem 0 .7rem;font-size:.88rem;color:#8E2F1C}
.status-offer-done{display:flex;gap:.6rem;align-items:flex-start;margin:.4rem 0 0;font-size:.95rem;line-height:1.45;color:#22264A}
.status-offer-done span{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ECECF7;color:#4B53A0;font-weight:700;font-size:.8rem}

/* /book: the booking form as a page (no overlay) */
.book-page{min-height:100vh;min-height:100dvh;padding:28px 16px 40px;background:var(--rhythm-lav,#ECECF7)}
.book-page-brand{max-width:640px;margin:0 auto 14px;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#555A78;text-align:center}
.booking-modal.booking-page{position:static;display:block;width:auto;height:auto;opacity:1;z-index:auto}
.booking-page .booking-sheet{position:relative;margin:0 auto;width:min(640px,100%);max-height:none;overflow:visible;animation:none}
@media(max-width:640px){
  .book-page{padding:18px 0 0}
  .book-page-brand{padding:0 16px}
  .booking-modal.booking-page{align-items:initial}
  .booking-page .booking-sheet{width:100%;border-radius:24px 24px 0 0;max-height:none;animation:none}
  .booking-page .booking-sheet::before{display:none}
}
.status-offer-done .status-offer-done-text{display:block;width:auto;height:auto;border-radius:0;background:none;color:inherit;font-weight:400;font-size:inherit}
.status-offer-done strong{word-break:break-all}
.status-offer-done .status-offer-done-text{flex:1 1 auto;min-width:0;place-items:initial}

/* ==========================================================================
   /book page (option C): homepage-style hero on the left, three-step form on
   the right, over the moving contour background. Phones stack the two.
   ========================================================================== */
.book-page{position:relative;min-height:100vh;min-height:100svh;padding:0;overflow:hidden;color:#22264A;font-family:var(--font-main);
  background:radial-gradient(ellipse 80% 60% at 30% 30%,rgba(255,255,255,.65) 0%,transparent 70%),#ECECF7}
.book-page .topo-background-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:1;mix-blend-mode:normal;transform:none}
.book-layout{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:clamp(48px,9vh,104px) 32px 72px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(32px,6vw,88px);align-items:start}
.book-hero{position:sticky;top:clamp(48px,9vh,104px)}
.book-hero-eyebrow{display:flex;align-items:center;gap:12px;margin:0;font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cz-clay,#D4553A)}
.book-hero-eyebrow::before{content:"";width:36px;height:1px;background:currentColor}
.book-hero-title{margin:18px 0 18px;font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,6.4vw,5.6rem);line-height:.95;letter-spacing:-.01em;color:#22264A}
.book-hero-title em{font-style:normal;color:var(--cz-clay,#D4553A)}
.book-hero-lede{max-width:30rem;margin:0 0 14px;font-size:1.06rem;line-height:1.6;color:#555A78}
.book-hero-note{display:inline-block;margin:0;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.7);font-size:.84rem;color:#22264A}
.book-hero-arch{width:230px;height:270px;margin:34px 0 0;border-radius:999px 999px 16px 16px;overflow:hidden;box-shadow:0 22px 44px -18px rgba(34,38,74,.45)}
.book-hero-arch img{display:block;width:100%;height:100%;object-fit:cover}

.book-form .booking-modal.booking-page{position:static;display:block;width:auto;height:auto;opacity:1;z-index:auto;background:none}
.book-form .booking-page .booking-sheet{width:100%;margin:0;max-height:none;overflow:visible;animation:none;padding:28px 28px 24px;border-radius:24px;
  box-shadow:0 30px 60px -24px rgba(34,38,74,.45)}
.book-form .booking-page .booking-sheet::before{display:none}

/* Step progress: 1 Dates — 2 Price — 3 You */
.booking-progress{display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:0;list-style:none;counter-reset:none}
.booking-progress li{display:flex;align-items:center;gap:8px;flex:none;font-size:.82rem;font-weight:700;color:#8A8DA6}
.booking-progress li:not(:last-child)::after{content:"";width:clamp(18px,6vw,64px);height:1.5px;margin-left:4px;background:#DCDDEB}
.booking-progress li.is-current{color:#22264A}
.booking-progress li.is-done{color:#4B53A0}
.booking-progress button{display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.booking-progress-dot{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid #DCDDEB;background:#fff;font-size:.78rem}
.booking-progress li.is-current .booking-progress-dot{background:#22264A;border-color:#22264A;color:#fff}
.booking-progress li.is-done .booking-progress-dot{background:#ECECF7;border-color:#ECECF7;color:#4B53A0}
.booking-step-title{margin:6px 0 2px;font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3vw,2rem);line-height:1.12;color:#22264A}
.booking-step-title:focus{outline:none}
.booking-back{align-self:center;margin-top:-4px;padding:8px 14px;border:0;background:none;font:inherit;font-size:.92rem;font-weight:600;color:#555A78;cursor:pointer}
.booking-back:hover{color:#22264A}

@media(max-width:900px){
  .book-layout{grid-template-columns:minmax(0,1fr);gap:22px;padding:40px 16px 0}
  .book-hero{position:static;padding:0 6px}
  .book-hero-title{font-size:clamp(2.5rem,11vw,3.4rem);margin:12px 0 12px}
  .book-hero-break{display:none}
  .book-hero-lede{font-size:.98rem;margin-bottom:10px}
  .book-hero-arch{display:none}
  .book-form .booking-page .booking-sheet{padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0}
}

/* Footer "Stay connected?" form: email first, then a one-tap 15% offer */

/* Footer "Stay connected?" — design A: underline fields on one quiet line
   with a coral pill; step 2 is the thank-you + one pill. Phones stack. */
.site-footer-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)!important;align-items:end}
.stay-connected{margin:0}
.site-footer-cols .stay-connected h3{margin:0 0 6px;font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,2.6vw,2rem);line-height:1.15;letter-spacing:0;text-transform:none;color:#fff}
.stay-connected-line{display:flex;align-items:flex-end;gap:22px}
.stay-connected-field{flex:1;min-width:0;height:48px;padding:12px 0 10px;border:0;border-bottom:1.5px solid rgba(255,255,255,.45);border-radius:0;background:transparent;color:#fff;font:inherit;font-size:16px;transition:border-color .2s}
.stay-connected-field::placeholder{color:rgba(255,255,255,.55)}
.stay-connected-field:focus{outline:none;border-bottom-color:#fff}
.stay-connected-pill{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border:0;border-radius:999px;background:var(--cz-clay,#D4553A);color:#fff;
  font-family:var(--font-main);font-size:.95rem;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .2s,transform .2s}
.stay-connected-pill:disabled{opacity:.75;cursor:wait}
.stay-connected-pill:focus-visible{outline:3px solid rgba(255,255,255,.6);outline-offset:3px}
@media(hover:hover){.stay-connected-pill:hover:not(:disabled){background:#E86A4E;transform:translateY(-1px)}}
.stay-connected--offer .stay-connected-line{align-items:center;justify-content:space-between}
.stay-connected--offer h3{margin:0!important}
.stay-connected-hint{margin:12px 0 0;font-size:.85rem;line-height:1.45;color:rgba(255,255,255,.72)}
.stay-connected-hint strong{color:#fff}
.stay-connected-error{margin:8px 0 0;font-size:.88rem;color:#FFC9BC}
@media(max-width:768px){
  .site-footer-cols{grid-template-columns:minmax(0,1fr)!important;align-items:start}
  .stay-connected-line{flex-direction:column;align-items:stretch;gap:6px}
  .stay-connected-pill{width:100%;margin-top:14px}
  .stay-connected--offer .stay-connected-line{align-items:stretch;gap:12px}
  .stay-connected--offer .stay-connected-pill{margin-top:0}
  .stay-connected-hint{text-align:center}
}

/* ==========================================================================
   Status page — dark mode "Midnight indigo" (follows the phone's setting)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .status-page{color-scheme:dark;color:#ECECF7;background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(75,83,160,.28) 0%,transparent 70%),#14162B}
  .status-title,.status-field label,.status-moods legend,.status-card,.status-offer h2,.status-offer-done{color:#ECECF7}
  .status-title em,.status-eyebrow,.status-offer-eyebrow,.status-stamp b{color:#FF9C80}
  .status-time,.status-card-text small,.status-field label span,.status-field-note,.status-offer-hint,.status-back{color:#A3A7C7}
  .status-lede,.status-consent{color:#C9CBE3}
  .status-card,.status-sheet,.status-offer{background:#1F2240;border:1px solid rgba(236,236,247,.08);box-shadow:0 18px 40px -20px rgba(0,0,0,.7)}
  .status-card:hover{box-shadow:0 24px 46px -20px rgba(0,0,0,.8)}
  .status-card--primary{color:#fff;background:#4B53A0;border-color:#4B53A0}
  .status-card--primary .status-card-text small{color:rgba(255,255,255,.8)}
  .status-card-icon{background:rgba(236,236,247,.08)}
  .status-card--primary .status-card-icon{background:rgba(255,255,255,.16)}
  .status-card:focus-visible,.status-submit:focus-visible,.status-back:focus-visible,.status-moods button:focus-visible,.status-ghost:focus-visible{outline-color:#FF9C80}
  .status-pin{color:#22264A;background:#ECECF7}
  .status-field input,.status-offer input,.status-moods button{color:#ECECF7;background:#171A33;border-color:rgba(236,236,247,.16)}
  .status-field input::placeholder,.status-offer input::placeholder{color:#7F84A8}
  .status-field input:focus,.status-offer input:focus{border-color:#8C93E0;box-shadow:0 0 0 3px rgba(140,147,224,.25)}
  .status-field input:-webkit-autofill,.status-offer input:-webkit-autofill{-webkit-text-fill-color:#ECECF7;-webkit-box-shadow:0 0 0 1000px #171A33 inset;caret-color:#ECECF7}
  .status-consent input{accent-color:#8C93E0}
  .status-moods button.is-selected{color:#fff;background:#6A72C6;border-color:#6A72C6}
  .status-submit{background:#D4553A}
  @media (hover:hover){.status-submit:hover{background:#C04A31}}
  .status-stamp{color:#ECECF7;background:#1F2240;border-color:#8C93E0;outline-color:#1F2240;box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
  .status-offer-error{color:#FF9C80}
  .status-offer-done span{background:rgba(140,147,224,.18);color:#C9CBF5}
  .status-offer-done .status-offer-done-text{background:none;color:inherit}
  .status-ghost{color:#ECECF7;background:rgba(236,236,247,.05);border-color:rgba(236,236,247,.28)}
}

/* ==========================================================================
   Stay Route on phones — "C": equal-height swipe cards, links as tiles
   ========================================================================== */
.stay-route-step,.stay-route-dots{display:none}
@media(max-width:768px){
  .stay-route{display:flex!important;align-items:stretch;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--sr-gutter,1rem));padding:6px var(--sr-gutter,1rem) 18px!important;scroll-padding-inline:var(--sr-gutter,1rem)}
  .stay-route::-webkit-scrollbar{display:none}
  .stay-route::before{display:none!important}
  .stay-route-stop,.stay-route-stop+.stay-route-stop{flex:0 0 84%;max-width:340px;scroll-snap-align:start;display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;align-items:center;column-gap:.7rem;row-gap:.9rem;padding:1.25rem 1.1rem 1.15rem!important;margin:0!important;border-radius:22px!important;background:#fff!important;box-shadow:0 18px 40px -26px rgba(34,38,74,.55)}
  .stay-route-marker,.stay-route-stop .stay-route-marker{position:relative!important;top:auto!important;left:auto!important;width:2.1rem!important;height:2.1rem!important;border:0!important}
  .stay-route-step{display:block;margin:0;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5A5E78}
  .stay-route-copy{grid-column:1 / -1;align-self:stretch;height:100%}
  .stay-route-copy h3{font-size:1.65rem!important;margin-bottom:.4rem}
  .stay-route-links{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto!important;border-top:0!important}
  .stay-route-links li{border:0!important;min-width:0}
  .stay-route-links li:last-child:nth-child(odd){grid-column:1 / -1}
  .stay-route-copy .stay-route-links a.guide-directory-link{display:flex!important;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:.4rem;min-height:74px!important;height:100%;padding:.7rem .75rem!important;border-radius:14px!important;background:#ECECF7!important}
  .stay-route-links li:last-child:nth-child(odd) a.guide-directory-link{flex-direction:row;align-items:center;justify-content:flex-start;min-height:54px!important;gap:.6rem}
  .stay-route-links .guide-directory-link small,.stay-route-links .guide-directory-arrow{display:none!important}
  .stay-route-links .guide-directory-icon{width:auto!important;height:auto!important;font-size:1.05rem!important}
  .stay-route-links .guide-directory-link strong{font-size:.86rem!important;line-height:1.2}
  .stay-route-copy a.stay-route-cta{display:flex!important;justify-content:space-between;align-items:center;margin:8px 0 0!important;padding:.95rem 1rem!important;border-radius:14px;background:var(--cz-clay-text,#AE3F28);color:#fff!important;font-size:.82rem;letter-spacing:.08em}
  .stay-route-dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
  .stay-route-dots span{width:7px;height:7px;border-radius:4px;background:#C9CBE0;transition:width .25s ease,background .25s ease}
  .stay-route-dots span.is-active{width:22px;background:#4B53A0}
}

/* ==========================================================================
   Footer photo fades into the footer colour — light and dark.
   The last gradient stop is the footer background itself, so the bottom of
   the skyline always blends in, whatever --footer-bg is.
   ========================================================================== */
:root{--footer-bg:#2C3060}
.footer.site-footer{background:var(--footer-bg)}
.site-footer-hero{background:
  linear-gradient(180deg,color-mix(in srgb,var(--footer-bg) 5%,transparent) 0%,color-mix(in srgb,var(--footer-bg) 20%,transparent) 40%,color-mix(in srgb,var(--footer-bg) 78%,transparent) 78%,var(--footer-bg) 100%),
  url('images/kerry-sunrise.webp') center 35% / cover no-repeat!important}
@media(max-width:1024px){.site-footer-hero{background:
  linear-gradient(180deg,color-mix(in srgb,var(--footer-bg) 35%,transparent) 0%,color-mix(in srgb,var(--footer-bg) 30%,transparent) 30%,color-mix(in srgb,var(--footer-bg) 55%,transparent) 55%,color-mix(in srgb,var(--footer-bg) 82%,transparent) 80%,var(--footer-bg) 100%),
  url('images/kerry-sunrise.webp') 30% 35% / cover no-repeat!important}}

/* ==========================================================================
   Dark mode — "Midnight indigo" (follows the visitor's device setting).
   Tokens first; the long list below maps each light colour on the site to
   its dark token (generated from a colour audit of every section, then
   checked by eye). /status has its own block above.
   ========================================================================== */
@media (prefers-color-scheme: dark){
:root{
  color-scheme:dark;
  --dk-bg:#14162B;--dk-bg-alt:#181A33;
  --dk-surface:#1F2240;--dk-surface-rgb:31,34,64;--dk-surface-2:#2A2E52;
  --dk-ink:#ECECF7;--dk-mut:#A3A7C7;--dk-accent:#FF9C80;--dk-link:#9AA1F0;
  --dk-line:rgba(236,236,247,.13);--dk-footer:#0E1022;--footer-bg:#0E1022;
  --dk-shadow:0 18px 40px -22px rgba(0,0,0,.75);
  --rhythm-lav:#2A2E52;
}
html,body{background:var(--dk-bg)!important;color:var(--dk-ink)}
html #root #inside-floor-1 span.inside-floor-arrow,
html #root #inside-floor-1 span.inside-floor-n,
html #root #inside-floor-1 span.inside-floor-name,
html #root #inside-floor-1 span.inside-floor-short,
html #root #inside-floor-1 span.inside-floor-text,
html #root #inside-floor-2 span.inside-floor-arrow,
html #root #inside-floor-2 span.inside-floor-n,
html #root #inside-floor-2 span.inside-floor-name,
html #root #inside-floor-2 span.inside-floor-short,
html #root #inside-floor-2 span.inside-floor-text,
html #root #inside-floor-3 span.inside-floor-arrow,
html #root #inside-floor-3 span.inside-floor-n,
html #root #inside-floor-3 span.inside-floor-name,
html #root #inside-floor-3 span.inside-floor-short,
html #root #inside-floor-3 span.inside-floor-text,
html #root a.around-row,
html #root a.guide-directory-link,
html #root a.guide-directory-link > span,
html #root a.guide-directory-link > span > strong,
html #root a.place-meta-address,
html #root article.inside-tile > div,
html #root article.inside-tile > div > h4,
html #root article.stay-route-stop > span,
html #root br.book-hero-break,
html #root button > strong,
html #root button.almanac-card-button,
html #root button.almanac-card-button.is-selected,
html #root button.booking-date > span,
html #root button.booking-date.is-active > span,
html #root button.cal-day,
html #root button.cal-day > span,
html #root button.cal-day.is-today,
html #root button.cal-day.is-today > span,
html #root button.cal-nav-btn > svg,
html #root button.chapter-card > img,
html #root button.curated-card-link,
html #root button.curated-card-link.is-selected,
html #root button.hero-highlight > span,
html #root button.is-active > svg,
html #root button.is-open,
html #root button.is-open > strong,
html #root button.sub-accordion-header,
html #root button.sub-accordion-header > h4,
html #root canvas.topo-background-canvas,
html #root div.App,
html #root div.App > main,
html #root div.accordion-content,
html #root div.almanac-detail,
html #root div.almanac-detail-head,
html #root div.almanac-detail-head > h3,
html #root div.almanac-event-foot,
html #root div.almanac-filters,
html #root div.almanac-inner,
html #root div.around-group,
html #root div.around-group > ul,
html #root div.around-groups,
html #root div.around-main,
html #root div.around-main > header,
html #root div.around-pick-detail > div,
html #root div.around-pick-detail > div > h4,
html #root div.around-pick-detail > img,
html #root div.around-pick-links,
html #root div.around-picks-head > div,
html #root div.around-picks-head > div > h3,
html #root div.around-row,
html #root div.attraction-links,
html #root div.book-form,
html #root div.booking-cal-wrap.is-open,
html #root div.booking-date-pair,
html #root div.booking-guests > div,
html #root div.booking-stepper,
html #root div.booking-stepper > output,
html #root div.cal-grid,
html #root div.cal-month,
html #root div.cal-months,
html #root div.cal-months.is-two,
html #root div.cal-nav,
html #root div.chapter-fold.is-open,
html #root div.chapter-index-inner,
html #root div.chapter-index-inner > h2,
html #root div.chapter-index-inner > ul,
html #root div.chapter-index-inner > ul > li,
html #root div.container,
html #root div.container.guest-guide-container,
html #root div.curated-areas-inner,
html #root div.essential-full-card > span,
html #root div.essential-full-card.essential-card-horizontal > span,
html #root div.essential-full-image > img,
html #root div.essential-full-info,
html #root div.essential-full-info > div,
html #root div.essential-full-info > div > img,
html #root div.essential-full-info > h4,
html #root div.essential-full-info > ol,
html #root div.essential-full-info > ol > li,
html #root div.essential-full-info > p,
html #root div.essential-full-info > p > strong,
html #root div.essential-full-info > ul,
html #root div.essential-full-info > ul > li,
html #root div.explore-block,
html #root div.explore-block > strong,
html #root div.explore-brief,
html #root div.explore-brief > h3,
html #root div.explore-sights,
html #root div.explore-sights-head,
html #root div.explore-tip > p,
html #root div.guest-guide-heading,
html #root div.hero-content.guest-hero-content.guest-hero-content--parallax,
html #root div.hero-map-grid,
html #root div.hero-scenes,
html #root div.hero-trust-strip,
html #root div.inside-floor-list,
html #root div.inside-floor-panel,
html #root div.inside-floors-layout,
html #root div.inside-house-heading,
html #root div.inside-house-heading > div,
html #root div.inside-house-heading > div > h3,
html #root div.inside-tile-top,
html #root div.menu-card-body,
html #root div.menu-card-body > h3,
html #root div.menu-card-photo > img,
html #root div.place-toolbar,
html #root div.place-view-toggle,
html #root div.postcard-body,
html #root div.postcard-body > h3,
html #root div.postcard-photo > img,
html #root div.splash-modal.active.booking-modal.booking-page,
html #root div.stay-route,
html #root div.stay-route-copy,
html #root div.stay-route-copy > h3,
html #root div.stay-route-dots,
html #root div.stay-route-dots > span,
html #root div.sub-accordion-body,
html #root div.sub-accordion-body > ol,
html #root div.sub-accordion-body > ol > li,
html #root div.sub-accordion-body > p,
html #root div.sub-accordion-body > p > br,
html #root div.sub-accordion-body > p > strong,
html #root div.sub-accordion-body > ul,
html #root div.sub-accordion-body > ul > li,
html #root div.taxi-content-wrapper,
html #root div.taxi-text,
html #root div.taxi-text > p,
html #root div.taxi-text > p > strong,
html #root div.the-house-inner.around-layout,
html #root div.the-table-inner,
html #root div.walk-score-highlight > strong,
html #root div.wifi-content-wrapper,
html #root div.wifi-text,
html #root div.wifi-text > h4,
html #root div.wifi-text > p,
html #root fieldset.booking-dates,
html #root figure.book-hero-arch > img,
html #root figure.hero-window,
html #root figure.inside-floor-photo > img,
html #root form.booking-form,
html #root h1.book-hero-title,
html #root h1.hero-title,
html #root h2.booking-step-title,
html #root h2.ed-title,
html #root h2.section-title.ed-title,
html #root h2.section-title.text-center,
html #root h3.accordion-heading,
html #root h4.inside-display,
html #root header.ed-header.ed-header--split,
html #root header.ed-header.ed-header--split > div,
html #root img.taxi-image,
html #root img.wifi-image,
html #root label.place-select,
html #root li > strong,
html #root li > ul,
html #root li.almanac-card,
html #root li.almanac-event > div,
html #root li.almanac-event > div > h4,
html #root li.curated-card,
html #root li.is-current,
html #root li.postcard-slot,
html #root main.book-layout,
html #root ol.almanac-track,
html #root ol.booking-progress,
html #root ol.curated-track.explore-track,
html #root ol.menu-cards.is-expanded,
html #root p.almanac-season > span,
html #root p.cal-month-label,
html #root p.local-tip > strong,
html #root p.note > strong,
html #root p.pro-tip-inline > em,
html #root p.stay-route-step,
html #root p.warning-text,
html #root p.warning-text > strong,
html #root section.book-hero,
html #root span > strong,
html #root span.accordion-title,
html #root span.almanac-card-name,
html #root span.almanac-event-tags,
html #root span.around-icon,
html #root span.around-name,
html #root span.around-name > strong,
html #root span.around-picks-photo > img,
html #root span.around-time,
html #root span.cal-blank,
html #root span.chapter-card-text,
html #root span.chapter-card-text > small,
html #root span.chapter-card-text > span,
html #root span.chapter-card-text > strong,
html #root span.chapter-card-toggle,
html #root span.chapter-index-photo > img,
html #root span.curated-card-title,
html #root span.guide-directory-icon,
html #root span.hero-highlight-icon,
html #root span.hero-highlight-icon > svg,
html #root span.hero-highlight-label,
html #root span.hero-stamp > small,
html #root span.inside-emoji,
html #root span.is-active,
html #root span.place-select-box,
html #root span.place-select-box > select > option,
html #root span.sr-only,
html #root ul > li,
html #root ul.around-picks-row,
html #root ul.around-picks-row > li,
html #root ul.around-picks-row > li > button,
html #root ul.explore-transit,
html #root ul.explore-transit > li > strong,
html #root ul.inside-house-strip,
html #root ul.postcards.explore-postcards.is-expanded{color:var(--dk-ink)!important}
html #root #inside-floor-1 span.inside-floor-text > small,
html #root #inside-floor-2 span.inside-floor-text > small,
html #root #inside-floor-3 span.inside-floor-text > small,
html #root a.guide-directory-link > span > small,
html #root article.inside-tile > div > p,
html #root button.booking-date > span > small,
html #root button.booking-date.is-active > span > small,
html #root div.around-pick-detail > div > p,
html #root div.around-picks-head > p,
html #root div.booking-guests > div > small,
html #root div.explore-block > p,
html #root div.inside-floor-picker > p,
html #root div.place-view-toggle > button,
html #root div.place-view-toggle > button > svg,
html #root div.stay-route-copy > p,
html #root legend.booking-label,
html #root li.almanac-event > div > p,
html #root ol.booking-progress > li,
html #root p.almanac-count,
html #root p.around-lede,
html #root p.book-hero-lede,
html #root p.curated-hint,
html #root p.explore-desc,
html #root p.hero-subtitle,
html #root p.inside-house-lede,
html #root p.menu-card-desc,
html #root p.menu-card-kicker > span,
html #root p.postcard-desc,
html #root p.section-subtitle.ed-lede.active,
html #root p.section-subtitle.text-center,
html #root span.almanac-card-theme,
html #root span.around-picks-dist,
html #root span.around-time > small,
html #root span.booking-date-arrow,
html #root span.booking-label,
html #root span.booking-progress-label,
html #root span.cal-weekday,
html #root span.chapter-index-summary,
html #root span.curated-card-journey,
html #root span.hero-stamp > em,
html #root span.inside-hint-hover,
html #root span.inside-hint-tap,
html #root span.place-select-label,
html #root strong.is-empty,
html #root ul.explore-tips,
html #root ul.explore-tips > li,
html #root ul.inside-house-strip > li > span{color:var(--dk-mut)!important}
html #root a.inline-text-link,
html #root a.place-meta-address > svg,
html #root a.place-meta-site,
html #root a.place-meta-site > span,
html #root a.stay-route-cta,
html #root a.stay-route-cta > span,
html #root button > small,
html #root button.is-open > small,
html #root div.almanac-event-foot > a,
html #root div.almanac-event-foot > a > span,
html #root div.explore-block > span,
html #root div.explore-tip > span,
html #root em.hero-title-accent,
html #root h1.book-hero-title > em,
html #root h2.ed-title > em,
html #root h2.section-title.ed-title > em,
html #root li > a,
html #root p.around-pick-tip > span,
html #root p.book-hero-eyebrow,
html #root p.ed-eyebrow,
html #root p.explore-kicker,
html #root p.guide-eyebrow,
html #root p.hero-eyebrow,
html #root p.menu-card-kicker,
html #root p.postcard-kicker,
html #root span.accordion-number,
html #root span.around-name > small,
html #root span.explore-card-mood,
html #root span.hero-stamp > b{color:var(--dk-accent)!important}
html #root #almanac-title h2.ed-title > em,
html #root #explore-title h2.ed-title > em,
html #root a.ed-link,
html #root a.ed-link > span,
html #root button.booking-date > svg,
html #root button.booking-date.is-active > svg,
html #root button.is-open > strong > span,
html #root div.almanac-detail-head > h3 > span,
html #root div.around-pick-links > a,
html #root div.around-pick-links > a > span,
html #root p.almanac-season,
html #root p.cal-hint,
html #root span.almanac-card-no,
html #root span.almanac-event-no,
html #root span.almanac-event-tags > span,
html #root span.guide-directory-arrow,
html #root span.inside-strip-mark,
html #root span.place-select-box > svg,
html #root svg.accordion-icon,
html #root svg.sub-accordion-icon{color:var(--dk-link)!important}
html #root #dining button.is-active,
html #root #explore-detail button.is-active,
html #root button.around-pick-close,
html #root button.booking-date.is-active,
html #root button.inside-floor-btn,
html #root div.accordion-item,
html #root div.accordion-item.active,
html #root div.around-picks,
html #root div.essential-full-card,
html #root div.essential-full-card.essential-card-horizontal,
html #root div.essential-full-image,
html #root div.explore-tip,
html #root div.menu-card-photo,
html #root div.postcard-photo,
html #root figure.inside-floor-photo,
html #root nav.chapter-index,
html #root p.around-pick-tip,
html #root span.chapter-index-photo{background-color:var(--dk-surface)!important;color:var(--dk-ink)!important}
html #root article.inside-tile,
html #root article.postcard,
html #root button.booking-date,
html #root button.cal-nav-btn,
html #root button.chapter-card,
html #root button.place-more,
html #root div.booking-guests,
html #root div.booking-stepper > button,
html #root div.cal,
html #root div.inside-floor-picker,
html #root li.menu-card{background-color:var(--dk-surface)!important;border-bottom-color:var(--dk-line)!important;border-left-color:var(--dk-line)!important;border-right-color:var(--dk-line)!important;border-top-color:var(--dk-line)!important;color:var(--dk-ink)!important}
html #root #baby-equipment button.accordion-header,
html #root #getting-around button.accordion-header,
html #root #house-rules button.accordion-header,
html #root #parking button.accordion-header,
html #root #wifi button.accordion-header,
html #root div.around-group > ul > li,
html #root div.around-picks-head,
html #root li.almanac-event,
html #root ul.stay-route-links > li{border-bottom-color:var(--dk-line)!important;color:var(--dk-ink)!important}
html #root div.essentials-accordion.active,
html #root div.explore-detail,
html #root div.inside-house,
html #root div.place-meta,
html #root ol.almanac-events,
html #root ul.stay-route-links{border-top-color:var(--dk-line)!important;color:var(--dk-ink)!important}
html #root #arrival-checkin span.accordion-count,
html #root a.attraction-link-small,
html #root button.hero-highlight.is-active,
html #root div.hero-caption,
html #root div.stay-route-marker{border-bottom-color:var(--dk-line)!important;border-left-color:var(--dk-line)!important;border-right-color:var(--dk-line)!important;border-top-color:var(--dk-line)!important}
html #root article.stay-route-stop,
html #root div.around-pick-detail,
html #root div.hero-window-arch,
html #root span.around-picks-photo{background-color:var(--dk-surface)!important;box-shadow:var(--dk-shadow)!important;color:var(--dk-ink)!important}
html #root div.walk-score-highlight,
html #root p.local-tip,
html #root p.note,
html #root p.pro-tip-inline{background-color:rgba(var(--dk-surface-rgb),.80)!important;color:var(--dk-ink)!important}
html #root button.hero-highlight::after,
html #root li.is-current::after,
html #root ol.booking-progress > li::after{background-color:var(--dk-surface)!important}
html #root section.almanac,
html #root section.section.overview-section.guest-guide-overview,
html #root section.the-table{background-color:var(--dk-bg)!important;color:var(--dk-ink)!important}
html #root section.curated-areas.explore-seattle,
html #root section.section.essentials-section,
html #root section.the-house.the-house--around{background-color:var(--dk-bg-alt)!important;color:var(--dk-ink)!important}
html #root ul.around-chips > li > a,
html #root ul.around-chips > li > span{background-color:rgba(var(--dk-surface-rgb),.38)!important}
html #root div.splash-modal-content.booking-sheet,
html #root span.place-select-box > select{background-color:var(--dk-surface)!important;border-bottom-color:var(--dk-line)!important;border-left-color:var(--dk-line)!important;border-right-color:var(--dk-line)!important;border-top-color:var(--dk-line)!important;box-shadow:var(--dk-shadow)!important;color:var(--dk-ink)!important}
html #root button.almanac-more,
html #root div.almanac-filters > button{border-bottom-color:var(--dk-line)!important;border-left-color:var(--dk-line)!important;border-right-color:var(--dk-line)!important;border-top-color:var(--dk-line)!important;color:var(--dk-ink)!important}
html #root div.site-footer-cols,
html #root input.stay-connected-field{border-bottom-color:var(--dk-line)!important}
html #root section.hero.confirmed-guest-hero.hero--map{background-color:var(--dk-bg-alt)!important;background-image:none!important;color:var(--dk-ink)!important}
html #root button.hero-highlight{background-color:rgba(var(--dk-surface-rgb),.92)!important;border-bottom-color:var(--dk-line)!important;border-left-color:var(--dk-line)!important;border-right-color:var(--dk-line)!important;border-top-color:var(--dk-line)!important;color:var(--dk-ink)!important}
html #root span.hero-stamp{background-color:var(--dk-surface)!important;box-shadow:var(--dk-shadow)!important;color:var(--dk-ink)!important;outline-color:var(--dk-bg)!important}
html #root div.stay-route::before{border-top-color:var(--dk-line)!important}
html #root ul.inside-house-strip > li{background-color:var(--dk-surface)!important;color:var(--dk-mut)!important}
html #root div.around-group > h3{border-bottom-color:var(--dk-line)!important;color:var(--dk-link)!important}
html #root ul.explore-transit > li{background-color:rgba(var(--dk-surface-rgb),.85)!important;color:var(--dk-ink)!important}
html #root span.postcard-stamp{background-color:var(--dk-surface)!important;border-bottom-color:var(--dk-line)!important;border-left-color:var(--dk-line)!important;border-right-color:var(--dk-line)!important;border-top-color:var(--dk-line)!important;color:var(--dk-accent)!important;outline-color:var(--dk-bg)!important}
html #root span.accordion-count{border-bottom-color:var(--dk-line)!important;border-left-color:var(--dk-line)!important;border-right-color:var(--dk-line)!important;border-top-color:var(--dk-line)!important;color:var(--dk-mut)!important}
html #root div.sub-accordion-item.open{border-bottom-color:var(--dk-line)!important;border-top-color:var(--dk-line)!important;color:var(--dk-ink)!important}
html #root footer.footer.site-footer{background-color:var(--dk-footer)!important}
html #root div.book-page{background-color:var(--dk-surface)!important;background-image:none!important;color:var(--dk-ink)!important}
html #root p.book-hero-note{background-color:rgba(var(--dk-surface-rgb),.90)!important;color:var(--dk-ink)!important}
html #root figure.book-hero-arch{box-shadow:var(--dk-shadow)!important;color:var(--dk-ink)!important}
html #root span.booking-progress-dot{background-color:var(--dk-surface)!important;border-bottom-color:var(--dk-line)!important;border-left-color:var(--dk-line)!important;border-right-color:var(--dk-line)!important;border-top-color:var(--dk-line)!important;color:var(--dk-mut)!important}
/* hover and state colours the audit can't see */
@media (hover:hover){html #root .inside-floor-btn:not(.is-active):hover{background:var(--dk-surface-2)!important}}
html #root .inside-floor-btn{color:var(--dk-ink)!important}
html #root .inside-floor-btn small{color:var(--dk-mut)!important}
html #root .inside-floor-btn.is-active{background:#4B53A0!important;color:#fff!important}
html #root .inside-floor-panel .inside-num{color:var(--dk-ink)!important}
html #root .inside-floor-panel .inside-tile .guide-eyebrow{color:var(--dk-accent)!important}
html #root .inside-strip-mark{color:var(--dk-link)!important}
html #root .inside-swipe-card{background:var(--dk-surface)!important;border-color:var(--dk-line)!important}
html #root .inside-swipe-photo{background:var(--dk-surface-2)!important}
html #root .inside-swipe-body h4,html #root .inside-swipe-body li,html #root .inside-swipe-body strong{color:var(--dk-ink)!important}
html #root .inside-swipe-body small{color:var(--dk-mut)!important}
html #root .inside-swipe-badge{background:rgba(20,22,43,.82)!important;color:var(--dk-ink)!important}
html #root .inside-swipe-dots span{background:rgba(236,236,247,.22)!important}
html #root .inside-swipe-dots span.is-active{background:#8C93E0!important}
html #root .inside-floor-btn.is-active small{color:rgba(255,255,255,.8)!important}
html #root article.inside-tile.inside-tile--moss{background-color:var(--cz-moss)!important;border-color:var(--cz-moss)!important}
html #root article.inside-tile.inside-tile--moss h4{color:var(--cz-bone)!important}
html #root article.inside-tile.inside-tile--moss p{color:#E4EBDF!important}
html #root .around-picks{box-shadow:0 0 0 100vmax var(--dk-surface)!important}
html #root .booking-shot-drop:hover:not(:disabled){background:var(--dk-surface-2)!important}
html #root .cal-day.is-start span,html #root .cal-day.is-end span,html #root .cal-day.is-start:hover span,html #root .cal-day.is-end:hover span{background:#6A72C6!important;color:#fff!important}
html #root .stay-route-links a.guide-directory-link:hover strong{color:var(--dk-link)!important}
html #root ::placeholder{color:#7F84A8}
@media(max-width:768px){
  html #root .chapter-fold{background-color:var(--dk-bg)!important}
  html #root .inside-floor-list{background-color:var(--dk-surface)!important;border-color:var(--dk-line)!important}
  html #root .stay-route-copy .stay-route-links a.guide-directory-link{background:var(--dk-surface-2)!important}
  html #root .stay-route-dots span{background:rgba(236,236,247,.22)}
  html #root .stay-route-dots span.is-active{background:#8C93E0}
}
}

/* ── YouTube players (components/YouTubeEmbed.tsx) — thumbnail until tapped ── */
.yt-embed-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:.6rem 0 1rem}
.yt-embed{margin:0;min-width:0}
.yt-embed.is-playing{grid-column:1 / -1}
.yt-embed-frame{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:14px;background:#14162B}
.yt-embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-embed-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.yt-embed-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out-expo,ease-out)}
.yt-embed-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,43,0) 40%,rgba(20,22,43,.45))}
.yt-embed-play{position:absolute;left:50%;top:50%;z-index:1;width:52px;height:52px;margin:-26px 0 0 -26px;display:grid;place-items:center;border-radius:50%;background:var(--cz-clay,#AE3F28);color:#fff;box-shadow:0 8px 22px -8px rgba(0,0,0,.6);transition:transform .25s ease}
.yt-embed-play svg{margin-left:3px}
@media(hover:hover){.yt-embed-poster:hover img{transform:scale(1.04)}.yt-embed-poster:hover .yt-embed-play{transform:scale(1.08)}}
.yt-embed-poster:focus-visible{outline:2px solid var(--cz-clay,#AE3F28);outline-offset:3px;border-radius:14px}
.yt-embed figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:6px;font-size:.84rem;font-weight:600;color:var(--feat-ink,#22264A)}
#essentials .essential-full-info .yt-embed figcaption a{font-size:.75rem;font-weight:600;color:var(--cz-muted,#5A5E78);text-decoration:none;white-space:nowrap;border:0}
@media(max-width:560px){.yt-embed-pair{grid-template-columns:1fr}}
@media (prefers-color-scheme: dark){
  html #root .yt-embed figcaption{color:var(--dk-ink)!important}
  html #root #essentials .essential-full-info .yt-embed figcaption a{color:var(--dk-mut)!important}
}
@media (prefers-reduced-motion: reduce){.yt-embed-poster img,.yt-embed-play{transition:none}}

/* ── Text reveal (hooks/useTextReveal.ts) — Equinox-style: words slide up out of a mask ── */
.tr-mask{display:inline-block;overflow:clip;overflow-clip-margin:0.1em;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.tr-on .tr-split .tr-word{display:inline-block;transform:translate3d(0,108%,0);transition:transform 1s cubic-bezier(.165,.84,.44,1) var(--tr-d,0s);will-change:transform}
.tr-on .tr-split.tr-in .tr-word{transform:none}
/* hero text was fading in; the words carry the motion now */
.tr-on .hero-title.tr-split,.tr-on .hero-subtitle.tr-split{animation:none!important;opacity:1!important;transform:none!important}
/* headings kept their left-to-right wipe classes on some sections — switch them off when split */
.tr-on .fx-head.tr-split{clip-path:none!important}
.tr-on .motion-reveal-item.tr-split{opacity:1!important;transform:none!important;filter:none!important}
@media (prefers-reduced-motion: reduce){.tr-on .tr-split .tr-word{transform:none;transition:none}}

/* ── QA fixes: contrast (WCAG AA 4.5:1), tap size, text-reveal masks ── */
.stay-connected-pill{background:#BE4A31}
@media(hover:hover){.stay-connected-pill:hover:not(:disabled){background:#A63E28}}
.cal-weekday,.booking-date strong.is-empty,.booking-progress li{color:#6B6F8A}
.booking-progress li.is-current{color:#22264A}
.booking-progress li.is-done{color:#4B53A0}
.book-hero-eyebrow,.status-eyebrow{color:#AE3F28}
@media (prefers-color-scheme: dark){
  html #root .cal-weekday,html #root .booking-date strong.is-empty,html #root .booking-progress li:not(.is-current):not(.is-done){color:var(--dk-mut)!important}
  .book-hero-eyebrow,.status-eyebrow{color:#FF9C80}
}
/* "YouTube ↗" links: a full 44px tap area on touch screens, same look */
@media (hover:none){#essentials .essential-full-info .yt-embed figcaption a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:-12px -4px}}
/* Words waiting to slide up sit fully below their mask, so no letter edges peek out */
.tr-mask{overflow-clip-margin:0}
.tr-on .tr-split .tr-word{transform:translate3d(0,135%,0)}
.tr-on .tr-split.tr-in .tr-word{transform:none}

/* ==========================================================================
   "Around here" trail bar — pinned to the top after jumping from Around here
   to a place further down; back to the list, or step through its places.
   ========================================================================== */
.around-trail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 949;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 64px;
    padding: 0 10px 0 6px;
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
    color: #22264A;
    font-family: var(--font-main);
    background: rgba(251, 249, 244, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(34, 38, 74, 0.12);
    box-shadow: 0 8px 20px -14px rgba(34, 38, 74, 0.4);
    animation: around-trail-in 0.25s ease-out;
}

.around-trail :where(button) {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.around-trail-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 10px;
    font-size: 15px;
    font-weight: 600;
    background: none;
    border: 0;
    flex-shrink: 0;
}

.around-trail-back-long,
.around-trail-step-label,
.around-trail-dist {
    display: none;
}

.around-trail-where {
    flex: 1;
    min-width: 0;
    margin: 0;
    text-align: center;
    line-height: 1.2;
}

.around-trail-where small {
    display: block;
    overflow: hidden;
    color: #6F6052;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.around-trail-where strong {
    display: block;
    overflow: hidden;
    font-family: 'Instrument Serif', var(--font-display);
    font-size: 19px;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.around-trail-steps {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.around-trail-steps button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
}

.around-trail-prev {
    background: #FBF6EE;
    border: 1px solid rgba(34, 38, 74, 0.18);
}

.around-trail-next {
    color: #FBF6EE;
    background: #22264A;
    border: 0;
}

.around-trail-steps button:disabled {
    color: rgba(34, 38, 74, 0.35);
    background: #FBF6EE;
    border: 1px solid rgba(34, 38, 74, 0.18);
    cursor: default;
}

.around-trail button:focus-visible {
    outline: 2px solid var(--cz-clay);
    outline-offset: 2px;
}

/* Desktop: a navy band across the top, with words on the buttons. */
@media (min-width: 1025px) {
    .around-trail {
        gap: 24px;
        min-height: 60px;
        padding: 0 clamp(2rem, 4vw, 3.5rem);
        color: #FBF6EE;
        background: #22264A;
        border-bottom: 0;
        box-shadow: 0 10px 24px -16px rgba(34, 38, 74, 0.6);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .around-trail-back {
        gap: 8px;
        padding: 0 24px 0 0;
        border-right: 1px solid rgba(251, 246, 238, 0.25);
        border-radius: 0;
    }

    .around-trail-back-short { display: none; }
    .around-trail-back-long,
    .around-trail-step-label { display: inline; }
    .around-trail-dist { display: inline; color: rgba(251, 246, 238, 0.8); }

    .around-trail-where {
        text-align: left;
        font-size: 15px;
    }

    .around-trail-where small,
    .around-trail-where strong {
        display: inline;
        color: rgba(251, 246, 238, 0.8);
        font-family: var(--font-main);
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
    }

    .around-trail-where small::after { content: ' · '; }
    .around-trail-where strong { color: #FBF6EE; font-weight: 600; }

    .around-trail-steps { gap: 8px; }

    .around-trail-steps button {
        width: auto;
        height: 40px;
        padding: 0 16px;
        font-size: 14px;
    }

    .around-trail-prev,
    .around-trail-steps button:disabled {
        color: rgba(251, 246, 238, 0.9);
        background: transparent;
        border: 1px solid rgba(251, 246, 238, 0.3);
    }

    .around-trail-steps button:disabled {
        color: rgba(251, 246, 238, 0.4);
        border-color: rgba(251, 246, 238, 0.2);
    }

    .around-trail-next {
        color: #22264A;
        font-weight: 600;
        background: #FBF6EE;
    }

    .around-trail button:focus-visible {
        outline-color: var(--cz-ochre);
    }
}

@keyframes around-trail-in {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .around-trail { animation: none; }
}

/* Keep the weekend-pick notes clear of the trail bar when stepping through them. */
.around-pick-detail {
    scroll-margin-top: 84px;
}

/* The weekend-pick photo row is gone; the notes card is the only thing on the band. */
.around-picks > .around-pick-detail { margin-top: 0; }

/* ==========================================================================
   Explore Seattle tiles: Capitol Hill as the home-base feature tile, the
   other six in an even grid (nearest first). Desktop: home tile spans two
   rows beside a 3×2 grid. Tablet/phone: home tile as a wide banner, then a
   grid (no sideways scroll).
   ========================================================================== */
.explore-seattle .explore-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: initial;
    overflow: visible;
    row-gap: clamp(1.4rem, 2.4vw, 2rem);
}

.explore-seattle .explore-track-note {
    display: none;
}

.explore-seattle .explore-home {
    grid-row: span 2;
}

.explore-seattle .explore-home .curated-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.85rem 0.85rem 1.25rem;
    box-sizing: border-box;
    color: #FBF6EE;
    background: var(--feat-ink, #22264A);
    border-radius: 16px;
}

.explore-seattle .explore-home .curated-card-arch {
    flex: 1 1 auto;
    min-height: 12rem;
    aspect-ratio: auto;
}

.explore-seattle .explore-home .curated-card-arch img {
    height: 100%;
}

.explore-seattle .explore-home .curated-card-link .explore-card-mood,
.explore-seattle .explore-home .curated-card-link.is-selected .explore-card-mood {
    color: #F2B79F !important;
}

.explore-seattle .explore-home .curated-card-title {
    color: #FBF6EE !important;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 400;
}

.explore-seattle .explore-home .curated-card-journey {
    color: rgba(251, 246, 238, 0.8) !important;
}

.explore-seattle .explore-home .curated-card-link.is-selected .curated-card-arch {
    outline-color: #F2B79F;
}

@media (max-width: 1024px) {
    .explore-seattle .explore-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: initial;
        overflow: visible;
        scroll-snap-type: none;
        padding-right: var(--cz-gutter);
    }

    .explore-seattle .explore-home {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .explore-seattle .explore-home .curated-card-link {
        display: grid;
        grid-template-columns: minmax(7rem, 9.5rem) minmax(0, 1fr);
        gap: 1rem;
        align-items: center;
        padding: 0.65rem;
        border-radius: 14px;
    }

    .explore-seattle .explore-home .curated-card-arch {
        min-height: 0;
        aspect-ratio: 7 / 6;
    }

    .explore-seattle .explore-home .explore-card-mood {
        margin-top: 0;
    }

    .explore-seattle .explore-track-note {
        display: block;
        grid-column: 1 / -1;
        margin: 0.4rem 0 -0.6rem;
        color: var(--feat-muted, #555A78);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
}

@media (max-width: 768px) {
    .explore-seattle .explore-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.75rem;
    }
}

/* ==========================================================================
   Phone dock: the liquid-glass tab bar plus a glass search button, and the
   search panel that opens above it. Desktop has no dock.
   ========================================================================== */
.guide-dock,
.guide-search {
    display: none;
}

@media all {
    .guide-dock {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 1001;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .guide-dock .guide-tabs {
        position: static;
        flex: 1;
        min-width: 0;
    }

    .guide-search-btn,
    .guide-search-field {
        background: linear-gradient(180deg, rgba(227, 229, 242, 0.55), rgba(75, 83, 160, 0.18));
        -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.06);
        backdrop-filter: blur(18px) saturate(190%) brightness(1.06);
        border: 1px solid rgba(255, 255, 255, 0.55);
        box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.25),
            inset 0 0 18px rgba(255, 255, 255, 0.18), 0 12px 32px -10px rgba(20, 22, 45, 0.45);
    }

    .guide-search-btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        padding: 0;
        color: var(--feat-ink, #22264A);
        font-family: var(--font-main);
        font-size: 26px;
        line-height: 1;
        border-radius: 999px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .guide-dock.is-searching .guide-search-btn {
        color: #fff;
        background: rgba(34, 38, 74, 0.84);
        border-color: rgba(255, 255, 255, 0.35);
    }

    .guide-search-field {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 58px;
        padding: 0 18px;
        box-sizing: border-box;
        color: var(--feat-ink, #22264A);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(236, 237, 247, 0.75));
        border-radius: 30px;
    }

    .guide-search-field input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: none;
        background: none;
        color: var(--feat-ink, #22264A);
        font: inherit;
        font-family: var(--font-main);
        font-size: 16px; /* 16px keeps iOS from zooming in */
    }

    .guide-search-field:focus-within {
        box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(75, 83, 160, 0.3),
            0 12px 32px -10px rgba(20, 22, 45, 0.45);
    }

    .guide-search-btn:focus-visible {
        outline: 2px solid var(--cz-clay);
        outline-offset: 2px;
    }

    .guide-search {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
    }

    .guide-search-dim {
        position: absolute;
        inset: 0;
        width: 100%;
        padding: 0;
        border: 0;
        background: rgba(20, 22, 43, 0.25);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        cursor: default;
    }

    .guide-search-panel {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - 140px - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 140px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        box-sizing: border-box;
        padding: 16px 16px 8px;
        color: var(--feat-ink, #22264A);
        font-family: var(--font-main);
        background: linear-gradient(180deg, rgba(251, 249, 244, 0.86), rgba(236, 237, 247, 0.78));
        -webkit-backdrop-filter: blur(22px) saturate(180%);
        backdrop-filter: blur(22px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 26px;
        box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.85), 0 18px 40px -14px rgba(20, 22, 45, 0.5);
        animation: guide-search-in 0.25s ease-out;
    }

    .guide-search-group + .guide-search-group {
        margin-top: 16px;
    }

    .guide-search-group h3 {
        display: flex;
        justify-content: space-between;
        margin: 0 0 6px;
        color: #3C4390;
        font-family: var(--font-main);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .guide-search-group h3 span {
        color: #6F6052;
    }

    .guide-search-group ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .guide-search-group li a,
    .guide-search-group li button {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 48px;
        padding: 6px 0;
        box-sizing: border-box;
        color: var(--feat-ink, #22264A);
        font: inherit;
        text-align: left;
        text-decoration: none;
        background: none;
        border: 0;
        border-bottom: 1px solid rgba(34, 38, 74, 0.08);
        cursor: pointer;
    }

    .guide-search-group li strong {
        font-size: 16px;
        font-weight: 600;
    }

    .guide-search-group li small {
        margin-left: auto;
        color: #6F6052;
        font-size: 13px;
        text-align: right;
    }

    .guide-search-chapter em {
        margin-left: auto;
        color: var(--cz-clay-text, #AE3F28);
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
    }

    .guide-search-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .guide-search-chips a,
    .guide-search-chips button {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 14px;
        color: var(--feat-ink, #22264A);
        font-family: var(--font-main);
        font-size: 14px;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.75);
        border: 1px solid rgba(34, 38, 74, 0.14);
        border-radius: 999px;
        cursor: pointer;
    }

    .guide-search-empty {
        margin: 6px 0 10px;
        color: #5C5F74;
        font-size: 15px;
        line-height: 1.5;
    }

    .guide-search a:focus-visible,
    .guide-search button:focus-visible {
        outline: 2px solid var(--cz-clay);
        outline-offset: 2px;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    @media all {
        .guide-search-btn { background: rgba(236, 237, 247, 0.97); }
        .guide-search-panel { background: rgba(251, 249, 244, 0.98); }
    }
}

@keyframes guide-search-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .guide-search-panel { animation: none; }
}

/* Search card (option C): one compact glass card that sits right above the
   on-screen keyboard. Shortcuts before typing, the top three matches while
   typing, "See all" for the full list. */
@media all {
    .guide-search-dim {
        background: rgba(20, 22, 43, 0.18);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .guide-search-panel {
        display: flex;
        flex-direction: column;
        gap: 8px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 40px);
        padding: 8px;
        overflow: hidden;
    }

    .guide-search-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 4px 0;
        scrollbar-width: none;
    }

    .guide-search-chips::-webkit-scrollbar {
        display: none;
    }

    .guide-search-chips a,
    .guide-search-chips button {
        flex-shrink: 0;
        min-height: 38px;
        font-weight: 600;
        white-space: nowrap;
        background: rgba(255, 255, 255, 0.85);
    }

    .guide-search-results {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0 8px;
    }

    .guide-search-results ul {
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        list-style: none;
    }

    .guide-search-results li a,
    .guide-search-results li button {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 44px;
        padding: 6px 0;
        box-sizing: border-box;
        color: var(--feat-ink, #22264A);
        font: inherit;
        text-align: left;
        text-decoration: none;
        background: none;
        border: 0;
        border-bottom: 1px solid rgba(34, 38, 74, 0.08);
        cursor: pointer;
    }

    .guide-search-results li strong {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        font-size: 16px;
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .guide-search-results li small {
        flex-shrink: 0;
        color: #6F6052;
        font-size: 13px;
    }

    .guide-search-more {
        min-height: 44px;
        color: #3C4390;
        font-family: var(--font-main);
        font-size: 15px;
        font-weight: 600;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .guide-search-empty {
        margin: 4px 8px;
    }

    .guide-search-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .guide-search-panel .guide-search-field {
        height: 50px;
        padding: 0 14px;
        background: #fff;
        border: 0;
        border-radius: 20px;
        box-shadow: 0 0 0 3px rgba(75, 83, 160, 0.3);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .guide-search-close {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        padding: 0;
        color: #fff;
        font-family: var(--font-main);
        font-size: 24px;
        line-height: 1;
        background: rgba(34, 38, 74, 0.84);
        border: 0;
        border-radius: 999px;
        cursor: pointer;
    }

    .guide-search-close:focus-visible,
    .guide-search-more:focus-visible {
        outline: 2px solid var(--cz-clay);
        outline-offset: 2px;
    }
}

/* Search card in dark mode — the site's dark overrides lighten its text, so
   the card goes midnight glass to match (it sits outside #root, so the
   html #root list below never reaches it). */
@media (prefers-color-scheme: dark) {
    html .guide-search-dim { background: rgba(6, 7, 18, 0.45); }
    html .guide-search-panel {
        color: var(--dk-ink, #ECECF7);
        background: linear-gradient(180deg, rgba(42, 46, 82, 0.9), rgba(31, 34, 64, 0.86));
        border-color: rgba(236, 236, 247, 0.12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 40px -14px rgba(0, 0, 0, 0.7);
    }
    html .guide-search-results li a,
    html .guide-search-results li button {
        color: var(--dk-ink, #ECECF7) !important;
        border-bottom-color: rgba(236, 236, 247, 0.1);
    }
    html .guide-search-results li strong { color: var(--dk-ink, #ECECF7) !important; }
    html .guide-search-results li small { color: var(--dk-mut, #A3A7C7) !important; }
    html .guide-search-more { color: var(--dk-link, #9AA1F0) !important; }
    html .guide-search-empty { color: var(--dk-mut, #A3A7C7) !important; }
    html .guide-search-chips a,
    html .guide-search-chips button {
        color: var(--dk-ink, #ECECF7) !important;
        background: rgba(236, 236, 247, 0.1);
        border-color: rgba(236, 236, 247, 0.16);
    }
    html .guide-search-panel .guide-search-field {
        color: var(--dk-ink, #ECECF7);
        background: #14162B;
        box-shadow: 0 0 0 3px rgba(154, 161, 240, 0.4);
    }
    html .guide-search-panel .guide-search-field input { color: var(--dk-ink, #ECECF7) !important; }
    html .guide-search-panel .guide-search-field input::placeholder { color: var(--dk-mut, #A3A7C7); }
    html .guide-search-close { background: rgba(236, 236, 247, 0.16); }
}

/* A nearby spot opened from search glows briefly so the eye finds the row. */
.around-row.is-found {
    border-radius: 14px;
    box-shadow: 0 0 0 2px var(--cz-clay, #AE3F28);
    transition: box-shadow 0.3s ease;
}

/* An event opened from search is outlined briefly. */
.almanac-event.is-found {
    border-radius: 14px;
    box-shadow: 0 0 0 2px var(--cz-clay, #AE3F28);
    transition: box-shadow 0.3s ease;
}


/* Desktop search: the same search, as a pill in the bottom-right corner
   (no tab bar), with its card opening above it. "/" or ⌘K opens it too. */
.guide-search-label {
    display: none;
}

@media (min-width: 1025px) {
    .guide-dock {
        left: auto;
        right: 28px;
        bottom: 28px;
    }

    .guide-search-btn {
        width: auto;
        height: 52px;
        gap: 10px;
        padding: 0 14px 0 18px;
        font-size: 15px;
        font-weight: 600;
    }

    .guide-search-btn svg {
        width: 19px;
        height: 19px;
    }

    .guide-search-label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .guide-search-label kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 5px;
        box-sizing: border-box;
        color: #3B3F5C;
        font-family: var(--font-main);
        font-size: 12px;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(34, 38, 74, 0.18);
        border-radius: 6px;
    }

    .guide-search-dim {
        background: rgba(20, 22, 43, 0.12);
    }

    .guide-search-panel {
        left: auto;
        right: 28px;
        bottom: 28px;
        width: 460px;
        max-height: min(680px, calc(100vh - 56px));
    }

    .guide-search-results li a:hover,
    .guide-search-results li button:hover {
        color: var(--cz-clay-text, #AE3F28);
    }
}

@media (min-width: 1025px) and (prefers-color-scheme: dark) {
    html .guide-search-btn { color: var(--dk-ink, #ECECF7); }
    html .guide-search-label kbd {
        color: var(--dk-ink, #ECECF7);
        background: rgba(236, 236, 247, 0.12);
        border-color: rgba(236, 236, 247, 0.2);
    }
}