/* ==========================================================================
   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);
    }
}