/* ============================================================
   NŌCH — EDITION
   Editorial premium rebuild. References: Aman, Cereal Magazine,
   Wallpaper* City Guides, Soho House, A24.
   ============================================================ */

/* iOS Safari defaults text-size-adjust to "auto", which inflates body
   paragraphs it judges "too small to read" — especially aggressive on
   first load. Result: the editorial type scale we picked gets ignored
   and the page renders as if zoomed-in. Pin to 100% so type renders
   at the size we authored, and zoom is a user choice not an algorithm's. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:root {
    /* Palette v3 — Soho House register: mono black-on-off-white.
       Yellow removed from signature (can return as home-only accent later).
       Italic emphasis is now just black italic — the italic IS the signature,
       the colour is not. Cream is whiter, copy is blacker. */

    --ed-black: #0c0a08;           /* pure warm black (for dark hero backgrounds) */
    --ed-ink: #1a1712;             /* body / headline text — near-black for punch */
    --ed-cream: #f7f5f0;           /* Japanese paper white — Muji / Kinfolk register */
    --ed-bone: #eae5d9;            /* deeper warm-white for accents */

    /* Oxblood — Nōch's new house colour. Deep, editorial, Soho House register.
       "Gold" variable name kept so existing rules don't break; the colour is now
       oxblood. Used only for italic emphasis on cream backgrounds. On dark
       backgrounds, em italics stay cream (see overrides below). */
    --ed-gold: #6b1e24;             /* deep oxblood — on cream */
    --ed-gold-deep: #5a161b;        /* darker for subtle moments */
    --ed-oxblood: #6b1e24;
    --ed-oxblood-light: #9a3542;    /* balanced burgundy — richer than wine-pink, lighter than deep */

    /* Accent = everything functional (borders, links, arrows, CTAs). */
    --ed-accent: var(--ed-cream);
    --ed-accent-dark: var(--ed-ink);

    /* Body / muted text — bumped darker so copy pops. 0.88 reads near-black
       but keeps a hair of softness. Small-meta labels use 0.55. */
    --ed-mute: rgba(247,245,240,0.72);
    --ed-mute-dark: rgba(26,23,18,0.88);
    --ed-mute-small: rgba(26,23,18,0.55);
    --ed-hair: rgba(247,245,240,0.14);
    --ed-hair-dark: rgba(26,23,18,0.14);

    /* Fraunces — variable serif with distinctive italics. Opsz + wght + soft + wonk
       axes give it a wide range, from Vogue-sharp to humanist-soft. Signature choice. */
    --ed-serif: 'Fraunces', 'Playfair Display', 'Didot', serif;
    --ed-sans: 'Inter', -apple-system, sans-serif;
    --ed-display-sans: 'Inter', -apple-system, sans-serif;

    --ed-gutter: clamp(1.5rem, 5vw, 3rem);
    --ed-section-y: clamp(4.5rem, 8vw, 7rem);
}

/* ---------- Reset that only applies on edition body ---------- */
html:has(body.edition) { overflow-x: hidden; }
body.edition {
    margin: 0;
    font-family: var(--ed-sans);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.75;
    /* Soho House / Aman register: parchment-dominant with ink text.
       Dark sections used sparingly for drama (hero, CTA, full-bleed bands). */
    color: var(--ed-ink);
    background: var(--ed-cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: visible;
    min-height: 100vh;
}
body.edition * { box-sizing: border-box; }

body.edition a {
    color: inherit;
    text-decoration: none;
}

body.edition img { max-width: 100%; display: block; }

/* ---------- Navigation: hamburger / logo / CTA ---------- */
.ed-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 1.4rem var(--ed-gutter);
    background: transparent;
    transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
    border-bottom: 1px solid transparent;
    color: var(--ed-ink);
}
/* Nav reads as ink-on-parchment by default (cream register) */
.ed-nav .ed-nav-logo,
.ed-nav .ed-nav-cta,
.ed-nav .ed-nav-talk,
.ed-nav .ed-nav-burger span { color: var(--ed-ink); }
.ed-nav .ed-nav-burger span { background: var(--ed-ink); }
/* Over the dark hero, nav reads as cream */
body.edition.hero-active .ed-nav,
.ed-nav.on-dark {
    color: var(--ed-cream);
}
body.edition.hero-active .ed-nav .ed-nav-logo,
body.edition.hero-active .ed-nav .ed-nav-cta,
body.edition.hero-active .ed-nav .ed-nav-talk,
.ed-nav.on-dark .ed-nav-logo,
.ed-nav.on-dark .ed-nav-cta,
.ed-nav.on-dark .ed-nav-talk { color: var(--ed-cream); }
body.edition.hero-active .ed-nav .ed-nav-burger span,
.ed-nav.on-dark .ed-nav-burger span { background: var(--ed-cream); }

.ed-nav.scrolled {
    /* Match page background exactly so there's no visible seam on scroll.
       Solid fill (not semi-transparent) + subtle hairline. */
    background: var(--ed-cream);
    border-bottom-color: var(--ed-hair-dark);
    color: var(--ed-ink);
}
.ed-nav.scrolled .ed-nav-logo,
.ed-nav.scrolled .ed-nav-cta,
.ed-nav.scrolled .ed-nav-talk { color: var(--ed-ink); }
.ed-nav.scrolled .ed-nav-burger span { background: var(--ed-ink); }

/* Hamburger button */
.ed-nav-burger {
    justify-self: start;
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}
.ed-nav-burger span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--ed-cream);
    transition: transform 0.35s ease, opacity 0.25s ease, background 0.3s ease;
    transform-origin: center;
}
/* When menu is open, morph to X */
body.edition.menu-open .ed-nav-burger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
body.edition.menu-open .ed-nav-burger span:nth-child(2) {
    opacity: 0;
}
body.edition.menu-open .ed-nav-burger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Hero masthead overlay ---------- */
.ed-hero-masthead { position: relative; }
.ed-hero-mark {
    position: absolute;
    top: clamp(5rem, 10vh, 8rem);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;
    color: var(--ed-cream);
    pointer-events: none;
    text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.ed-masthead-mark {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 144, "wght" 800;
    font-weight: 800;
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: 1.15;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0;
    padding-left: 0.005em;
    color: inherit;
}
.ed-masthead-sub {
    font-family: var(--ed-sans);
    font-size: clamp(0.62rem, 0.9vw, 0.78rem);
    font-weight: 500;
    letter-spacing: 0.48em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-top: 0.5em;
    padding-left: 0.48em;
}
@media (max-width: 640px) {
    .ed-hero-mark { top: 4.5rem; }
    .ed-masthead-mark { font-size: clamp(2.4rem, 12vw, 4rem); }
    .ed-masthead-sub { font-size: 0.55rem; letter-spacing: 0.4em; padding-left: 0.4em; }
}

/* Logo — dead centre, uppercase Fraunces display, tracked wide */
.ed-nav-logo {
    justify-self: center;
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 144, "wght" 800;
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    font-style: normal;
    line-height: 0.95;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0;
}
.ed-nav-logo::after { content: none; }
@media (max-width: 640px) {
    .ed-nav-logo { font-size: 2.5rem; letter-spacing: 0; }
}

/* SVG lockup — cap-N dominant, lowercase ōch */
.ed-nav-logo-svg {
    display: block;
    line-height: 0;
    padding-left: 0;
}
.ed-nav-logo-svg::after { content: none; }
.ed-nav-logo-svg svg {
    display: block;
    width: auto;
    height: 3rem;
}
@media (max-width: 640px) {
    .ed-nav-logo-svg svg { height: 2.4rem; }
}

/* Right-side CTA */
.ed-nav-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1.75rem;
}
.ed-nav-cta {
    justify-self: end;
    font-family: var(--ed-display-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}
.ed-nav-cta:hover { opacity: 0.65; }
.ed-nav-talk {
    font-family: var(--ed-display-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
    opacity: 0.78;
}
.ed-nav-talk:hover { opacity: 1; }

@media (max-width: 640px) {
    .ed-nav-cta { font-size: 0.64rem; letter-spacing: 0.2em; }
}
@media (max-width: 720px) {
    .ed-nav-talk { display: none; }
    .ed-nav-right { gap: 0; }
}

/* ---------- Menu overlay ---------- */
.ed-menu {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--ed-cream);
    color: var(--ed-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 7rem var(--ed-gutter) 7rem;
    overflow-y: auto;
}
body.edition.menu-open .ed-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s;
}
body.edition.menu-open { overflow: hidden; }

/* When the menu is open, the overlay is cream — so the nav itself must
   read as ink (logo + burger), regardless of the underlying page state
   (hero-active, on-dark, etc). Without this, a white logo and cream
   burger spans disappear into the cream menu background. */
body.edition.menu-open .ed-nav,
body.edition.menu-open .ed-nav.on-dark { color: var(--ed-ink); }
body.edition.menu-open .ed-nav .ed-nav-burger span { background: var(--ed-ink) !important; }
body.edition.menu-open .ed-nav .ed-nav-mark-light { display: none !important; }
body.edition.menu-open .ed-nav .ed-nav-mark-dark { display: block !important; }
body.edition.menu-open .ed-nav .ed-nav-cta { color: var(--ed-ink); }

.ed-menu-inner {
    width: 100%;
    max-width: 720px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ed-menu-inner a {
    display: block;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--ed-hair-dark);
    font-family: var(--ed-serif);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ed-ink);
    text-align: left;
    transition: padding-left 0.35s ease, color 0.3s ease;
    position: relative;
}
.ed-menu-inner a:first-child { border-top: 1px solid var(--ed-hair-dark); }
.ed-menu-inner a:hover { padding-left: 1rem; color: var(--ed-gold-deep); }
.ed-menu-inner a em {
    font-style: italic;
    color: var(--ed-gold-deep);
}
.ed-menu-meta {
    position: absolute;
    bottom: 3rem;
    left: var(--ed-gutter);
    right: var(--ed-gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 400;
}
.ed-menu-meta a { color: inherit; }
.ed-menu-meta a:hover { color: var(--ed-ink); }

/* Mobile: align links to top so they don't crowd the meta footer, and
   push the meta further from the last link's underline. */
@media (max-width: 640px) {
    .ed-menu {
        align-items: flex-start;
        padding-top: 5.5rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem);
    }
    .ed-menu-meta {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
    }
}
/* Desktop: tighter link rows so the link list doesn't run into the
   bottom meta line on a 14" laptop. */
@media (min-width: 641px) {
    .ed-menu-inner a {
        padding: 1.1rem 0;
        font-size: clamp(2rem, 3.6vw, 2.75rem);
    }
}

/* ---------- Hero ---------- */
.ed-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem var(--ed-gutter) 5rem;
    text-align: center;
    overflow: hidden;
}
.ed-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #120e08 0%, #0e0a06 40%, #080503 100%);
    z-index: 0;
}
.ed-hero::after {
    /* film grain-lite texture for premium feel */
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}
.ed-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 920px;
}
.ed-eyebrow {
    display: inline-block;
    font-family: var(--ed-display-sans);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    /* Default register is cream page; gold-deep reads better on parchment.
       Dark sections override this to --ed-gold below. */
    color: var(--ed-gold-deep);
    font-weight: 500;
    margin-bottom: 3rem;
    /* Keep flanking dashes glued to the text so the trailing dash never wraps
       to a line of its own on narrow screens. */
    white-space: nowrap;
}
.ed-eyebrow::before,
.ed-eyebrow::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1px;
    background: var(--ed-gold-deep);
    vertical-align: middle;
    margin: 0 0.8rem;
    opacity: 0.6;
}
@media (max-width: 480px) {
    .ed-eyebrow::before, .ed-eyebrow::after { width: 12px; margin: 0 0.5rem; }
}
/* Hero, CTA, explicit dark sections: use lighter cognac + cream typography */
.ed-hero .ed-eyebrow,
.ed-cta .ed-eyebrow,
.ed-section.dark .ed-eyebrow { color: var(--ed-gold); }
.ed-hero .ed-eyebrow::before, .ed-hero .ed-eyebrow::after,
.ed-cta .ed-eyebrow::before, .ed-cta .ed-eyebrow::after,
.ed-section.dark .ed-eyebrow::before, .ed-section.dark .ed-eyebrow::after { background: var(--ed-gold); }
.ed-hero-h {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 30;
    font-weight: 400;
    font-size: clamp(2.4rem, 7vw, 5.8rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0 0 2rem;
    color: var(--ed-cream);
    text-wrap: balance;
}
@media (max-width: 640px) {
    .ed-hero-h { font-size: 3.2rem; line-height: 1.03; margin-bottom: 0.8rem; }
}
.ed-hero-h em {
    font-style: italic;
    font-weight: 400;
    color: var(--ed-oxblood-light);
}
/* Eyebrows on dark backgrounds stay cream (keeps them as quiet meta labels).
   Italic emphasis shifts to lighter oxblood so the signature colour
   reads on both cream and dark registers. */
.ed-hero .ed-eyebrow,
.ed-cta .ed-eyebrow,
.ed-section.dark .ed-eyebrow,
.ed-feature-hero-meta .ed-eyebrow { color: var(--ed-cream); }
.ed-hero .ed-eyebrow::before, .ed-hero .ed-eyebrow::after,
.ed-cta .ed-eyebrow::before, .ed-cta .ed-eyebrow::after,
.ed-section.dark .ed-eyebrow::before, .ed-section.dark .ed-eyebrow::after,
.ed-feature-hero-meta .ed-eyebrow::before, .ed-feature-hero-meta .ed-eyebrow::after { background: var(--ed-cream); }

.ed-cta .ed-h2 em, .ed-cta .ed-h3 em,
.ed-section.dark .ed-h2 em, .ed-section.dark .ed-h3 em,
.ed-feature-hero-title em { color: var(--ed-oxblood-light); }
.ed-hero-p {
    font-family: var(--ed-sans);
    font-size: clamp(0.95rem, 1.3vw, 1.08rem);
    line-height: 1.55;
    color: rgba(247,245,240,0.88);
    max-width: 420px;
    margin: 0 auto 3rem;
    font-weight: 400;
    letter-spacing: 0.005em;
    text-wrap: balance;
}
@media (max-width: 640px) {
    .ed-hero-p { font-size: 0.82rem; line-height: 1.5; max-width: 300px; hyphens: none; word-break: normal; }
}
.ed-hero-scroll {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: var(--ed-display-sans);
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ed-cream);
    opacity: 0.85;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.ed-hero-scroll.is-faded { opacity: 0; }
@media (max-width: 640px) {
    .ed-hero-scroll { bottom: 1.75rem; font-size: 0.6rem; }
}
.ed-hero-scroll::after {
    content: '';
    display: block;
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, var(--ed-accent) 0%, transparent 100%);
    opacity: 0.4;
    margin: 0.8rem auto 0;
}

/* ---------- Section chrome ----------
   Default = parchment cream (inherited from body.edition).
   .dark = inverted, used sparingly for hero-adjacent moments.
   .bright = legacy alias kept for existing HTML, same as default. */
.ed-section {
    padding: var(--ed-section-y) var(--ed-gutter);
    position: relative;
}
/* Adjacent .ed-section pairs: drop the second one's top padding so the
   gap between them is one padding (the prior section's bottom), not two
   stacked. Inline styles still win, so home's tight overrides hold. */
.ed-section + .ed-section,
.ed-aman-feature + .ed-section { padding-top: 0; }
/* And when an Aman feature follows a section, drop its top margin so the
   gap is one breath, not two. */
.ed-section + .ed-aman-feature { margin-top: 0; }
.ed-section.dark {
    background: var(--ed-black);
    color: var(--ed-cream);
}

.ed-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.ed-inner-narrow {
    max-width: 760px;
    margin: 0 auto;
}

.ed-h2, .ed-h3 {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 120, "wght" 400, "SOFT" 30;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 2rem;
}
.ed-h2 { font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1.02; }
.ed-h3 { font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.05; }
.ed-h2 em, .ed-h3 em {
    font-style: italic;
    color: var(--ed-gold);
    font-weight: 400;
}
.ed-section .ed-h2 em,
.ed-section .ed-h3 em { color: var(--ed-gold-deep); }

.ed-lede {
    font-family: var(--ed-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    line-height: 1.65;
    color: var(--ed-mute);
    max-width: 620px;
    margin: 0 0 2rem;
}
.ed-section .ed-lede { color: var(--ed-mute-dark); }

.ed-body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ed-ink);
    font-weight: 400;
    max-width: 540px;
}
.ed-section .ed-body { color: var(--ed-mute-dark); }
.ed-body + .ed-body { margin-top: 1rem; }

/* FAQ list — replaces per-item inline padding/border styles. Each Q&A
   gets a top hairline; the last item also gets a bottom hairline. */
.ed-faq-list {
    margin-top: 3rem;
}
.ed-faq-item {
    padding: 2rem 0;
    border-top: 1px solid var(--ed-hair-dark);
}
.ed-faq-item:last-child {
    border-bottom: 1px solid var(--ed-hair-dark);
}

/* CTA-style link: small Inter sans, uppercase, no decorative hairline above.
   The arrow character is forced into Inter via font-family + ligature opt-out
   so it doesn't pick up Fraunces' stylistic alternate (a swash double-arrow).
   `.ed-link-primary` overrides this with the pill style below. */
.ed-link {
    display: inline-block;
    font-family: var(--ed-sans);
    font-feature-settings: normal;
    font-variant-ligatures: none;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ed-accent);
    font-weight: 500;
    padding: 0.4rem 0;
    border: none;
    text-decoration: none;
    position: relative;
    transition: padding 0.35s ease, opacity 0.3s ease;
    opacity: 0.85;
}
.ed-link:hover { padding-left: 0.5rem; opacity: 1; }
.ed-section .ed-link {
    color: var(--ed-accent-dark);
}
/* Oxblood variant — single confident accent for commercial close
   (e.g. "See pricing →" on the home page pricing teaser). */
.ed-link.ed-link-oxblood,
.ed-section .ed-link.ed-link-oxblood {
    color: var(--ed-oxblood);
    opacity: 1;
}
.ed-link.ed-link-oxblood:hover { color: var(--ed-oxblood); opacity: 0.75; }
.ed-link.ed-link-primary {
    padding: 1.1rem 2.5rem;
    border: 1px solid var(--ed-accent);
    color: var(--ed-accent);
    display: inline-block;
    opacity: 1;
}
.ed-link.ed-link-primary:hover {
    background: var(--ed-accent);
    color: var(--ed-black);
    padding-left: 2.5rem;
}
.ed-section .ed-link.ed-link-primary {
    border-color: var(--ed-accent-dark);
    color: var(--ed-accent-dark);
}
.ed-section .ed-link.ed-link-primary:hover {
    background: var(--ed-accent-dark);
    color: var(--ed-cream);
}

/* ---------- Mission statement ---------- */
.ed-statement {
    font-family: var(--ed-serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 3.4vw, 2.65rem);
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--ed-cream);
    max-width: 920px;
    margin: 0;
}
.ed-section .ed-statement { color: var(--ed-ink); }
.ed-statement em { color: var(--ed-gold); font-style: italic; }

/* ---------- Two-column editorial ---------- */
.ed-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 820px) {
    .ed-two-col { grid-template-columns: 1fr; gap: 3rem; }
}
.ed-two-col-reverse .ed-col-image { order: 2; }
@media (max-width: 820px) {
    .ed-two-col-reverse .ed-col-image { order: 0; }
}

.ed-image {
    aspect-ratio: 4 / 5;
    background: #1a1714;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border-radius: 0;
}
.ed-image-placeholder {
    aspect-ratio: 4 / 5;
    background:
        linear-gradient(135deg, #221a12 0%, #0e0a06 60%, #1b1610 100%);
    position: relative;
    overflow: hidden;
}
.ed-image-placeholder::before {
    content: attr(data-placeholder);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ed-serif);
    font-style: italic;
    color: rgba(168,128,90,0.35);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    padding: 2rem;
    text-align: center;
    line-height: 1.6;
}
.ed-image-caption {
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute);
    margin-top: 0.85rem;
    font-weight: 400;
}
.ed-section .ed-image-caption { color: var(--ed-mute-dark); }

/* ---------- Full-bleed image band ---------- */
.ed-bleed {
    width: 100%;
    height: clamp(380px, 70vh, 720px);
    background: #1a1714;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.ed-bleed-placeholder {
    background:
        radial-gradient(ellipse at 50% 60%, rgba(168,128,90,0.12) 0%, transparent 70%),
        linear-gradient(180deg, #1b1610 0%, #0e0a06 100%);
}
.ed-bleed-caption {
    position: absolute;
    bottom: 2rem;
    left: var(--ed-gutter);
    right: var(--ed-gutter);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(235,225,206,0.7);
    font-weight: 400;
}

/* ---------- Destinations list ---------- */
.ed-destinations {
    list-style: none;
    padding: 0;
    margin: 3rem 0 0;
    border-top: 1px solid var(--ed-hair);
}
.ed-section .ed-destinations { border-color: var(--ed-hair-dark); }

.ed-destinations li {
    display: grid;
    grid-template-columns: 60px 1fr 2fr auto;
    align-items: center;
    gap: 0 2rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--ed-hair);
    transition: padding 0.35s ease;
    cursor: pointer;
}
.ed-section .ed-destinations li { border-color: var(--ed-hair-dark); }
.ed-destinations li:hover { padding-left: 1rem; }

.ed-dest-num {
    font-family: var(--ed-sans);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    color: var(--ed-mute);
    font-weight: 500;
}
.ed-section .ed-dest-num { color: var(--ed-mute-dark); }
.ed-dest-name {
    font-family: var(--ed-serif);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 400;
    color: inherit;
    letter-spacing: -0.01em;
}
.ed-dest-sub {
    font-size: 0.9rem;
    color: var(--ed-mute);
    font-weight: 300;
}
.ed-section .ed-dest-sub { color: var(--ed-mute-dark); }
/* Destination row arrow — matches the CTA button arrow (small, Inter sans,
   solid). Replaces the previous Fraunces 1.3rem 35%-opacity treatment that
   read as a separate visual element. */
.ed-dest-arrow {
    font-family: var(--ed-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ed-accent);
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ed-section .ed-dest-arrow { color: var(--ed-accent-dark); }
.ed-destinations li:hover .ed-dest-arrow { opacity: 1; transform: translateX(6px); }

@media (max-width: 720px) {
    .ed-destinations li {
        grid-template-columns: 40px 1fr auto;
        gap: 1rem;
        padding: 1.4rem 0;
    }
    .ed-dest-sub { grid-column: 1 / -1; font-size: 0.82rem; margin-top: 0.3rem; }
}

/* ---------- Phone stage (uses existing .phone-frame etc. from style.css) ---------- */
.ed-phone-stage {
    margin: 4rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.ed-phone-stage .phone-frame {
    transform: scale(1.1);
    transform-origin: center;
}
@media (max-width: 720px) {
    .ed-phone-stage .phone-frame { transform: scale(0.9); }
}

/* ---------- Pricing — quiet ---------- */
.ed-pricing-quiet {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3rem;
    flex-wrap: wrap;
}
.ed-pricing-quiet .ed-h3 { margin-bottom: 0; }

/* ---------- CTA section ---------- */
.ed-cta {
    text-align: center;
    padding: calc(var(--ed-section-y) * 1.2) var(--ed-gutter);
    background: linear-gradient(180deg, #0e0a06 0%, #080503 100%);
    border-top: 1px solid var(--ed-hair);
}
.ed-cta .ed-h2 { margin-bottom: 1.5rem; }
.ed-cta .ed-lede { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 3rem; }
/* Pair a secondary link with a primary CTA inside .ed-cta so they read as
   one action group, not two floating elements. Used on city CTAs where
   "See pricing →" sits above the "Begin a [City] app →" button. */
.ed-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}
/* When the action group follows the body lede, tighten the gap. The lede's
   own 3rem margin-bottom is sized for a single-button CTA; with a paired
   action group it leaves too much air above. */
.ed-cta .ed-lede + .ed-cta-actions {
    margin-top: -1.5rem;
}

/* ---------- Footer ---------- */
.ed-footer {
    padding: 4rem var(--ed-gutter) 3rem;
    border-top: 1px solid var(--ed-hair);
    background: var(--ed-black);
}
.ed-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
}
.ed-footer-logo {
    font-family: var(--ed-sans);
    font-size: 0.8rem;
    letter-spacing: 0.32em;
    color: var(--ed-cream);
    font-weight: 500;
    margin-bottom: 0.6rem;
}
.ed-footer-tag {
    font-size: 0.82rem;
    color: var(--ed-mute);
    font-weight: 300;
    max-width: 320px;
    line-height: 1.6;
}
.ed-footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
}
@media (max-width: 640px) {
    .ed-footer-meta { align-items: flex-start; }
}
.ed-footer-meta a {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-mute);
    font-weight: 400;
    transition: color 0.3s ease;
}
.ed-footer-meta a:hover { color: var(--ed-cream); }
.ed-footer-bottom {
    max-width: 1100px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--ed-hair);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: var(--ed-mute);
    text-transform: uppercase;
    text-align: center;
}

/* ---------- Reveal on scroll (subtle) ---------- */
/* Gated on .js (set by gate.js before paint) so no-JS / failed-JS /
   stalled-IntersectionObserver still shows content. Without this gate,
   .ed-hero-inner.ed-reveal renders invisible if the observer never fires. */
.js .ed-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s ease, transform 1s ease;
}
.js .ed-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .js .ed-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   PRICING TIERS — editorial cards with feature lists
   ============================================================ */
.ed-tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}
@media (max-width: 820px) {
    .ed-tiers { grid-template-columns: 1fr; gap: 2rem; }
}

.ed-tier {
    position: relative;
    padding: 3rem 2.5rem;
    border: 1px solid var(--ed-hair);
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: border-color 0.4s ease, background 0.4s ease;
}
.ed-tier:hover {
    border-color: rgba(235,225,206,0.28);
    background: rgba(235,225,206,0.02);
}
.ed-section .ed-tier {
    border-color: var(--ed-hair-dark);
}
.ed-section .ed-tier:hover {
    border-color: rgba(26,23,20,0.28);
    background: rgba(26,23,20,0.02);
}

.ed-tier-featured {
    border-color: rgba(168,128,90,0.35);
}
.ed-tier-featured:hover {
    border-color: rgba(168,128,90,0.65);
    background: rgba(168,128,90,0.03);
}
.ed-tier-flag {
    position: absolute;
    top: -0.75rem;
    left: 2.5rem;
    background: var(--ed-black);
    padding: 0 0.9rem;
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ed-gold);
    font-weight: 500;
    line-height: 1.5rem;
}
.ed-section .ed-tier-flag {
    background: var(--ed-cream);
}

.ed-tier .ed-eyebrow {
    margin-bottom: 0.5rem;
    font-size: 0.62rem;
}
.ed-tier .ed-eyebrow::before,
.ed-tier .ed-eyebrow::after {
    display: none;
}
/* Tier tagline — a single editorial sentence below the tier name, replaces
   the "Tier one"/"Tier two" clinical eyebrows and the "Most popular" flag.
   The tier picks itself by what it is, not by a sticker telling you. */
.ed-tier-tagline {
    font-family: var(--ed-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ed-mute);
    margin: -0.4rem 0 0.5rem;
    font-weight: 400;
}
.ed-tier-tagline em {
    font-style: italic;
    color: var(--ed-gold-deep);
}
.ed-section .ed-tier-tagline { color: var(--ed-mute-dark); }

.ed-tier-name {
    font-family: var(--ed-sans);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ed-cream);
    margin: 0;
}
.ed-section .ed-tier-name { color: var(--ed-ink); }

.ed-tier-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.25rem 0 0.5rem;
}
.ed-tier-price-num {
    font-family: var(--ed-serif);
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ed-cream);
}
.ed-section .ed-tier-price-num { color: var(--ed-ink); }
.ed-tier-price-cur {
    font-family: var(--ed-sans);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute);
    font-weight: 500;
}
.ed-section .ed-tier-price-cur { color: var(--ed-mute-dark); }

.ed-tier-sub {
    font-family: var(--ed-serif);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ed-mute);
    margin: 0 0 0.5rem;
    font-weight: 400;
}
.ed-section .ed-tier-sub { color: var(--ed-mute-dark); }

.ed-tier-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 1.5rem;
    border-top: 1px solid var(--ed-hair);
}
.ed-section .ed-tier-list { border-color: var(--ed-hair-dark); }
.ed-tier-list li {
    padding: 0.85rem 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ed-mute);
    border-bottom: 1px solid var(--ed-hair);
    font-weight: 300;
}
.ed-section .ed-tier-list li {
    color: var(--ed-mute-dark);
    border-color: var(--ed-hair-dark);
}

/* ============================================================
   PAYMENT TRUST MARKS — functional icons, light-safe
   ============================================================ */
.ed-payment-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
    background: rgba(235,225,206,0.04);
    border: 1px solid var(--ed-hair);
    border-radius: 0;
}
.ed-payment-trust-label {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute);
    font-weight: 500;
    margin-right: auto;
}
.ed-payment-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 0.75rem;
    background: var(--ed-cream);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ed-ink);
    font-family: var(--ed-sans);
}
.ed-payment-method.apple-pay {
    background: var(--ed-cream);
    color: var(--ed-ink);
    padding: 0 0.85rem;
}

/* ============================================================
   JOURNAL — editorial ornaments
   ============================================================ */
.ed-byline {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 0;
    border-top: 1px solid var(--ed-hair);
    border-bottom: 1px solid var(--ed-hair);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute);
    font-weight: 400;
    text-align: center;
}
.ed-section .ed-byline { border-color: var(--ed-hair-dark); color: var(--ed-mute-dark); }

.ed-dropcap::first-letter {
    font-family: var(--ed-serif);
    font-size: 5rem;
    line-height: 0.85;
    float: left;
    padding: 0.3rem 0.6rem 0 0;
    color: var(--ed-cream);
    font-weight: 400;
}
.ed-section .ed-dropcap::first-letter { color: var(--ed-ink); }

/* Blog/journal article intro: slightly larger, looser-leading drop-cap
   paragraph. Pulls out of the .ed-body width cap so the column reads
   like a magazine opener. Used as the first paragraph after the byline. */
.ed-dropcap-intro {
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: none;
}

.ed-rule {
    width: 60px;
    height: 1px;
    background: var(--ed-accent);
    opacity: 0.4;
    margin: 2rem 0;
    border: 0;
}
.ed-section .ed-rule { background: var(--ed-accent-dark); }

/* ============================================================
   CREAM-DEFAULT OVERRIDES
   Site flipped to parchment-dominant (Soho House register).
   Default text reads ink-on-cream. Dark sections re-invert below.
   ============================================================ */

/* Default text on cream */
body.edition .ed-body,
body.edition .ed-lede,
body.edition .ed-dest-sub,
body.edition .ed-dest-num,
body.edition .ed-image-caption,
body.edition .ed-tier-sub,
body.edition .ed-tier-price-cur,
body.edition .ed-tier-list li,
body.edition .ed-byline {
    color: var(--ed-mute-dark);
}

body.edition .ed-h2 em,
body.edition .ed-h3 em,
body.edition .ed-statement em,
body.edition .ed-dropcap em {
    color: var(--ed-gold-deep);
}

body.edition .ed-statement,
body.edition .ed-tier-name,
body.edition .ed-tier-price-num,
body.edition .ed-dropcap::first-letter {
    color: var(--ed-ink);
}

body.edition .ed-destinations,
body.edition .ed-destinations li,
body.edition .ed-tier,
body.edition .ed-tier-list,
body.edition .ed-tier-list li,
body.edition .ed-payment-trust,
body.edition .ed-byline {
    border-color: var(--ed-hair-dark);
}

body.edition .ed-dest-arrow {
    color: var(--ed-accent-dark);
}

body.edition .ed-rule {
    background: var(--ed-accent-dark);
}

body.edition .ed-link {
    color: var(--ed-accent-dark);
}
body.edition .ed-link.ed-link-primary {
    border-color: var(--ed-accent-dark);
    color: var(--ed-accent-dark);
}
body.edition .ed-link.ed-link-primary:hover {
    background: var(--ed-accent-dark);
    color: var(--ed-cream);
}

body.edition .ed-tier-flag {
    background: var(--ed-cream);
}

body.edition .ed-destinations li:hover {
    background: rgba(27,22,16,0.02);
}

body.edition .ed-tier-featured {
    border-color: rgba(168,128,90,0.40);
}
body.edition .ed-tier-featured:hover {
    border-color: rgba(168,128,90,0.70);
    background: rgba(168,128,90,0.04);
}

/* Image placeholders — now sit on cream, so re-tint */
body.edition .ed-image-placeholder {
    background: linear-gradient(135deg, #d8cab0 0%, #c9b89b 60%, #b9a684 100%);
}
body.edition .ed-image-placeholder::before {
    color: rgba(27,22,16,0.4);
}
body.edition .ed-bleed-placeholder {
    background: linear-gradient(180deg, #c9b89b 0%, #b9a684 100%);
}
body.edition .ed-bleed-caption {
    color: rgba(27,22,16,0.62);
}

/* ============================================================
   DARK SECTION INVERSIONS
   Restore cream-on-dark styles inside .ed-section.dark + hero + CTA.
   ============================================================ */

body.edition .ed-section.dark .ed-body,
body.edition .ed-section.dark .ed-lede,
body.edition .ed-section.dark .ed-dest-sub,
body.edition .ed-section.dark .ed-dest-num,
body.edition .ed-section.dark .ed-image-caption,
body.edition .ed-section.dark .ed-byline,
body.edition .ed-cta .ed-lede,
body.edition .ed-cta .ed-body {
    color: var(--ed-mute);
}

body.edition .ed-section.dark .ed-h2 em,
body.edition .ed-section.dark .ed-h3 em,
body.edition .ed-section.dark .ed-statement em,
body.edition .ed-cta .ed-h2 em,
body.edition .ed-cta .ed-h3 em {
    color: var(--ed-gold);
}

body.edition .ed-section.dark .ed-statement,
body.edition .ed-cta .ed-h2,
body.edition .ed-cta .ed-h3 {
    color: var(--ed-cream);
}

body.edition .ed-section.dark .ed-destinations,
body.edition .ed-section.dark .ed-destinations li,
body.edition .ed-section.dark .ed-byline {
    border-color: var(--ed-hair);
}

body.edition .ed-section.dark .ed-link,
body.edition .ed-cta .ed-link {
    color: var(--ed-accent);
}
body.edition .ed-section.dark .ed-link.ed-link-primary,
body.edition .ed-cta .ed-link.ed-link-primary {
    border-color: var(--ed-accent);
    color: var(--ed-accent);
}
body.edition .ed-section.dark .ed-link.ed-link-primary:hover,
body.edition .ed-cta .ed-link.ed-link-primary:hover {
    background: var(--ed-accent);
    color: var(--ed-black);
}

/* ============================================================
   HERO with image background
   ============================================================ */
.ed-hero.ed-hero-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.ed-hero.ed-hero-image.ed-hero-closeup {
    background-size: auto 120%;
    background-position: 75% center;
}
@media (max-width: 700px) {
    .ed-hero.ed-hero-image.ed-hero-closeup {
        background-size: auto 102%;
        /* 30% horizontal anchors the crop on the leftmost girl —
           the one holding the phone. Previously 59% cut her off. */
        background-position: 30% bottom;
    }
    /* Lisbon hero: anchor the crop on the model's face (upper-right of frame). */
    .ed-hero.ed-hero-image.ed-hero-lisbon {
        background-position: 62% 25%;
    }
}
/* Dim the image + darken the bottom half so copy stays legible.
   ::before gets replaced with an overlay gradient over the photo. */
.ed-hero.ed-hero-image::before {
    background:
        linear-gradient(180deg, rgba(14,10,6,0.35) 0%, rgba(14,10,6,0.55) 45%, rgba(14,10,6,0.88) 100%);
}

/* Hero variant with a looping background video. The poster image stays
   as the section's background-image so the hero is never empty; the
   <video> covers it once it loads. ::before gradient is bumped above
   the video so copy remains legible. */
.ed-hero.ed-hero-with-video .ed-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}
.ed-hero.ed-hero-with-video::before {
    z-index: 1;
}

/* ============================================================
   JOURNAL — editorial discovery platform
   Venue features, category pills, filterable grid.
   ============================================================ */

/* Filter pill row */
.ed-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 2rem 0 3rem;
    padding: 0;
    list-style: none;
}
.ed-filter {
    font-family: var(--ed-sans);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.65rem 1.1rem;
    border: 1px solid var(--ed-hair-dark);
    background: transparent;
    color: var(--ed-mute-dark);
    cursor: pointer;
    transition: all 0.25s ease;
    border-radius: 999px;
}
.ed-filter:hover { color: var(--ed-ink); border-color: var(--ed-ink); }
.ed-filter.is-active {
    background: var(--ed-ink);
    color: var(--ed-cream);
    border-color: var(--ed-ink);
}
.ed-filters-label {
    font-family: var(--ed-sans);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    padding: 0.65rem 0;
    margin-right: 0.5rem;
}

/* Venue grid */
.ed-venue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 900px) {
    .ed-venue-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ed-venue-grid { grid-template-columns: 1fr; gap: 3rem; }
}

.ed-venue-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ed-venue-card > a { display: flex; flex-direction: column; color: inherit; }
.ed-venue-card:hover { transform: translateY(-4px); }

.ed-venue-image {
    aspect-ratio: 4 / 5;
    background-color: var(--ed-bone);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-bottom: 1rem;
    position: relative;
}
.ed-venue-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(14,10,6,0);
    transition: background 0.4s ease;
}
.ed-venue-card:hover .ed-venue-image::after { background: rgba(14,10,6,0.08); }

.ed-venue-tag {
    font-family: var(--ed-sans);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    margin: 0 0 0.45rem;
}

.ed-venue-title {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 80, "wght" 400;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--ed-ink);
    margin: 0 0 0.4rem;
    letter-spacing: -0.015em;
    font-weight: 400;
}
.ed-venue-card:hover .ed-venue-title em { color: var(--ed-gold-deep); }
.ed-venue-title em {
    font-style: italic;
    color: var(--ed-mute-dark);
    font-weight: 400;
    transition: color 0.3s ease;
}

.ed-venue-sub {
    font-size: 0.85rem;
    color: var(--ed-mute-dark);
    line-height: 1.5;
    margin: 0;
    font-weight: 300;
}

/* Featured piece (single hero venue on journal index) */
.ed-featured {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 5rem;
}
@media (max-width: 820px) {
    .ed-featured { grid-template-columns: 1fr; gap: 2rem; }
}
.ed-featured-image {
    display: block;
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    background-color: var(--ed-bone);
}
.ed-featured-image--elfenn { background-image: url(../images/marrakesh/elfenn-dusk.jpg?v=20260516); }
@media (min-width: 820px) {
    .ed-featured-image { aspect-ratio: 5 / 6; }
}
.ed-featured-copy { padding: 1rem 0; }
.ed-featured-copy .ed-venue-tag { margin-bottom: 0.8rem; }
.ed-featured-copy .ed-h2 { margin-top: 0; margin-bottom: 1rem; }
.ed-featured-copy .ed-lede { margin-bottom: 2rem; }

/* ============================================================
   VENUE FEATURE PAGE — magazine feature layout
   ============================================================ */

/* Article chrome wrapper */
.ed-feature {
    padding-top: calc(80px + 1rem);  /* clear the fixed nav */
}

/* Hero image for a feature */
.ed-feature-hero {
    width: 100%;
    height: clamp(420px, 75vh, 760px);
    background-size: cover;
    background-position: center;
    background-color: var(--ed-bone);
    position: relative;
}
.ed-feature-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14,10,6,0.1) 0%, rgba(14,10,6,0.35) 60%, rgba(14,10,6,0.75) 100%);
}
.ed-feature-hero-meta {
    position: absolute;
    bottom: 2.5rem;
    left: var(--ed-gutter);
    right: var(--ed-gutter);
    z-index: 2;
    color: var(--ed-cream);
    text-align: center;
}
.ed-feature-hero-meta .ed-eyebrow { color: var(--ed-gold); margin-bottom: 1rem; }
.ed-feature-hero-meta .ed-eyebrow::before,
.ed-feature-hero-meta .ed-eyebrow::after { background: var(--ed-gold); }
.ed-feature-hero-title {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 144, "wght" 400;
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--ed-cream);
    margin: 0 0 0.6rem;
    font-weight: 400;
}
.ed-feature-hero-title em { font-style: italic; color: var(--ed-gold); font-weight: 400; }
.ed-feature-hero-sub {
    font-family: var(--ed-sans);
    font-size: 1rem;
    color: var(--ed-mute);
    max-width: 560px;
    margin: 0 auto;
    font-weight: 300;
}

/* Feature body layout */
.ed-feature-body {
    max-width: 680px;
    margin: 0 auto;
    padding: 5rem var(--ed-gutter) 0;
}
.ed-feature-body .ed-body {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--ed-ink);
    max-width: none;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

/* Fact panel (location, price, reservations) */
.ed-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 900px;
    margin: 3rem auto;
    padding: 2rem var(--ed-gutter);
    border-top: 1px solid var(--ed-hair-dark);
    border-bottom: 1px solid var(--ed-hair-dark);
}
@media (max-width: 720px) {
    .ed-facts { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
.ed-fact {
    padding: 0 1rem;
    border-left: 1px solid var(--ed-hair-dark);
}
.ed-fact:first-child { border-left: none; padding-left: 0; }
@media (max-width: 720px) {
    .ed-fact { border-left: none; padding-left: 0; }
}
.ed-fact-label {
    font-family: var(--ed-sans);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    margin: 0 0 0.4rem;
}
.ed-fact-value {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 72, "wght" 400;
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--ed-ink);
    margin: 0;
    font-weight: 400;
}

/* Add-to-trip CTA bar — Soho House register: compact, rounded, pill-style button */
.ed-add-cta {
    position: sticky;
    bottom: 1.5rem;
    max-width: 520px;
    margin: 4rem auto 0;
    padding: 1.1rem 1.1rem 1.1rem 1.4rem;
    background: var(--ed-ink);
    color: var(--ed-cream);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 999px;
    box-shadow: 0 12px 40px rgba(14,10,6,0.25);
    z-index: 10;
}
@media (max-width: 640px) {
    .ed-add-cta {
        bottom: 1rem;
        max-width: calc(100vw - 2rem);
        padding: 0.75rem 0.75rem 0.75rem 1.25rem;
        gap: 0.6rem;
        border-radius: 999px;
    }
}
.ed-add-cta-text {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 72, "wght" 400;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ed-cream);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
@media (max-width: 640px) {
    .ed-add-cta-text { font-size: 0.82rem; line-height: 1.25; }
    .ed-add-cta-text br { display: none; }
    .ed-add-cta-text em { display: none; } /* mobile drops the "THE MOVE:" label */
}
.ed-add-cta-text em { color: var(--ed-gold); font-style: normal; font-family: var(--ed-sans); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78em; margin-right: 0.35rem; }
.ed-add-cta-btn,
body.edition .ed-add-cta-btn,
body.edition .ed-add-cta a.ed-add-cta-btn {
    flex-shrink: 0;
    font-family: var(--ed-sans) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 0.8rem 1.4rem !important;
    border: 1px solid var(--ed-cream) !important;
    border-radius: 999px !important;
    background: var(--ed-cream) !important;
    color: var(--ed-oxblood) !important;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
    text-decoration: none !important;
}
body.edition .ed-add-cta-btn:hover,
body.edition .ed-add-cta a.ed-add-cta-btn:hover {
    background: transparent !important;
    color: var(--ed-cream) !important;
    border-color: var(--ed-cream) !important;
}
/* Added state — cream fill, oxblood text + outline. Since the dark
   wrapper is hidden in the added state, the button needs to carry its
   own contrast against the page's cream background. */
body.edition .ed-add-cta-btn.is-added,
body.edition .ed-add-cta a.ed-add-cta-btn.is-added {
    background: var(--ed-cream) !important;
    color: var(--ed-oxblood) !important;
    border-color: var(--ed-oxblood) !important;
    white-space: nowrap;
}
/* When added, drop the dark pill wrapper entirely — the cream button
   alone reads as confirmation. No black background, no caption, no
   weight. Just a single floating pill at the bottom of the page. */
.ed-add-cta.is-added {
    background: transparent;
    box-shadow: none;
    padding: 0;
    justify-content: center;
}
.ed-add-cta.is-added .ed-add-cta-text { display: none; }
body.edition .ed-add-cta-btn.is-added:hover,
body.edition .ed-add-cta a.ed-add-cta-btn.is-added:hover {
    background: var(--ed-oxblood) !important;
    color: var(--ed-cream) !important;
    border-color: var(--ed-oxblood) !important;
}
@media (max-width: 640px) {
    .ed-add-cta-btn { font-size: 0.62rem; letter-spacing: 0.18em; padding: 0.65rem 1.1rem; }
}

/* Make all primary CTAs pill-shaped — Soho House register */
.ed-link.ed-link-primary { border-radius: 999px; }
body.edition .ed-filter { border-radius: 999px; } /* already pill, kept explicit */

/* Related strip */
.ed-related {
    background: var(--ed-bone);
    padding: 5rem var(--ed-gutter);
    margin-top: 5rem;
}
.ed-related .ed-inner { max-width: 1100px; text-align: center; }
.ed-related .ed-eyebrow { display: block; margin-bottom: 1.5rem; color: var(--ed-gold-deep); letter-spacing: 0.22em; }
.ed-related .ed-h3 {
    margin: 0 auto 1.25rem;
    max-width: 22ch;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.18;
}
.ed-related .ed-body {
    margin: 0 auto;
    max-width: 38em;
    color: var(--ed-ink);
}
.ed-related-meta {
    margin: 2rem auto 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-ink);
    opacity: 0.55;
}

/* ============================================================
   PRICING CALCULATOR OVERRIDES — remove legacy yellow, go premium mono
   ============================================================ */
body.edition .calc-wrap {
    max-width: 560px;
    margin: 3rem auto 0;
}
body.edition .calc-tier-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
body.edition .calc-tier-btn {
    font-family: var(--ed-sans);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 1rem 1.2rem;
    background: transparent;
    border: 1px solid rgba(27,22,16,0.22);
    color: var(--ed-ink);
    cursor: pointer;
    border-radius: 999px;
    transition: all 0.3s ease;
    line-height: 1.35;
}
body.edition .calc-tier-btn span {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--ed-mute-dark);
    margin-top: 0.25rem;
    font-weight: 400;
}
body.edition .calc-tier-btn:hover { border-color: var(--ed-ink); }
body.edition .calc-tier-btn.active {
    background: var(--ed-ink);
    color: var(--ed-cream);
    border-color: var(--ed-ink);
}
body.edition .calc-tier-btn.active span { color: rgba(247,245,240,0.6); }

body.edition .calc-card {
    background: transparent;
    padding: 2.5rem 0;
    border: none;
    border-top: 1px solid var(--ed-hair-dark);
    border-radius: 0;
    text-align: center;
}

body.edition .calc-result { margin-bottom: 2.5rem; }
body.edition .calc-result-label {
    font-family: var(--ed-sans);
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    display: block;
    margin-bottom: 0.75rem;
}
body.edition .calc-result-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
}
body.edition .calc-amount {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 144, "wght" 400;
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    line-height: 1;
    color: var(--ed-ink);
    font-weight: 400;
    letter-spacing: -0.02em;
}
body.edition .calc-currency {
    font-family: var(--ed-sans);
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
}
body.edition .calc-result-sub {
    display: block;
    font-family: var(--ed-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ed-mute-dark);
    margin-top: 0.75rem;
}

body.edition .calc-slider-group { margin-bottom: 2rem; }
body.edition .calc-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--ed-sans);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    margin-bottom: 0.85rem;
}
body.edition .calc-slider-value { color: var(--ed-ink); }

body.edition .calc-slider {
    width: 100%;
    height: 1px;
    background: rgba(27,22,16,0.22);
    border: none;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}
body.edition .calc-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--ed-ink);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}
body.edition .calc-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--ed-ink);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}
body.edition .calc-slider-marks {
    position: relative;
    height: 1em;
    margin-top: 1rem;
    font-family: var(--ed-sans);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: var(--ed-mute-dark);
    font-weight: 400;
}
body.edition .calc-slider-marks span {
    position: absolute;
    transform: translateX(-50%);
}

/* Comparisons — hide emoji icons, restyle as editorial list */
body.edition .calc-icon { display: none; }
body.edition .calc-comparisons {
    margin: 2.5rem 0;
    padding: 2rem 0 0;
    border-top: 1px solid var(--ed-hair-dark);
    text-align: center;
}
body.edition .calc-comparison-title {
    font-family: var(--ed-sans);
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    margin-bottom: 1.25rem;
}
body.edition .calc-comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
body.edition .calc-comparison-list li {
    font-family: var(--ed-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--ed-ink);
    line-height: 1.5;
}

/* Calculator CTA — match Soho House pill */
body.edition #calcCta,
body.edition .calc-card .btn.btn-gold {
    display: inline-block;
    width: 100%;
    font-family: var(--ed-sans);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 1.1rem 2rem;
    background: var(--ed-ink);
    color: var(--ed-cream);
    border: 1px solid var(--ed-ink);
    border-radius: 999px;
    text-align: center;
    cursor: pointer;
    margin-top: 2rem;
    transition: background 0.3s ease, color 0.3s ease;
}
body.edition #calcCta:hover,
body.edition .calc-card .btn.btn-gold:hover {
    background: transparent;
    color: var(--ed-ink);
}

/* ============================================================
   AMAN REGISTER OVERRIDES — no italics, emphasis via colour + weight only
   ============================================================ */

/* Kill italic globally on edition em words. Oxblood stays as the signature,
   the ITALIC is dropped. Matches Aman's typographic discipline. */
body.edition em,
body.edition .ed-hero-h em,
body.edition .ed-h2 em,
body.edition .ed-h3 em,
body.edition .ed-statement em,
body.edition .ed-feature-hero-title em,
body.edition .ed-lede,
body.edition .ed-hero-p,
body.edition .ed-menu-inner a em,
body.edition .ed-venue-title em,
body.edition .ed-tier-sub,
body.edition .calc-comparison-list li,
body.edition .ed-add-cta-text,
body.edition .ed-image-placeholder::before,
body.edition .ed-byline,
body.edition .form-note,
body.edition .form-disclaimer {
    font-style: normal;
}

/* Body italic (deliberate inline emphasis) — keep a subtle roman-small-caps
   variant for those rare moments? No. Just normal roman. Oxblood is the signal. */

/* Mobile journal grid — 2 columns on mobile (not 1) so users can see multiple venues */
@media (max-width: 600px) {
    .ed-venue-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1rem;
    }
    .ed-venue-image { aspect-ratio: 3 / 4; }
    .ed-venue-title { font-size: 1.05rem; line-height: 1.15; }
    .ed-venue-sub { font-size: 0.78rem; line-height: 1.4; }
    .ed-venue-tag { font-size: 0.52rem; }
}

/* Featured piece grid also stacks cleaner on mobile */
@media (max-width: 600px) {
    .ed-featured { gap: 1.5rem; }
    .ed-featured-image { aspect-ratio: 4 / 5; }
}

/* Phone mockup — strip legacy gold/yellow price colour, use oxblood instead */
body.edition .phone-total-amount {
    color: var(--ed-oxblood) !important;
}
body.edition .phone-kr {
    color: rgba(27,22,16,0.45) !important;
}
body.edition .phone-tag {
    color: var(--ed-oxblood) !important;
}

/* Featured piece grid also stacks cleaner on mobile */
@media (max-width: 600px) {
    .ed-featured { gap: 1.5rem; }
    .ed-featured-image { aspect-ratio: 4 / 5; }
}

/* Phone mockup — strip legacy gold/yellow colour.
   Big price sits on a dark .phone-total card → lighter oxblood.
   "05" tag sits on cream phone screen → deep oxblood. */
body.edition .phone-total-amount {
    color: var(--ed-oxblood-light) !important;
}
body.edition .phone-kr {
    color: rgba(247,245,240,0.55) !important;
}
body.edition .phone-tag {
    color: var(--ed-oxblood) !important;
}

/* ============================================================
   NUCLEAR NO-ITALIC — Aman register, edition-wide
   Beats inline styles and legacy style.css rules.
   ============================================================ */
body.edition em,
body.edition .phone-owes-more,
body.edition .phone-sub,
body.edition .phone-expense-meta,
body.edition .phone-total-sub,
body.edition .calc-result-sub,
body.edition .ed-lede,
body.edition .ed-hero-p,
body.edition .ed-image-caption,
body.edition .ed-feature-hero-sub,
body.edition .form-note,
body.edition .form-disclaimer,
body.edition .calc-comparison-list li,
body.edition .ed-add-cta-text,
body.edition .ed-tier-sub,
body.edition .ed-byline,
body.edition .phone-title,
body.edition .phone-owes-title,
body.edition i,
body.edition address {
    font-style: normal !important;
}

/* ============================================================
   FINAL ITALIC PURGE + AMAN-ON-DARK COLOUR DISCIPLINE
   ============================================================ */

/* Force every serif element inside edition to roman (not italic).
   Also reset font-variation-settings so the ital axis is off.
   This beats any legacy style.css rule. */
body.edition .phone-screen *,
body.edition .phone-topbar *,
body.edition .phone-title,
body.edition .phone-topbar-logo,
body.edition .phone-total-amount,
body.edition .phone-kr,
body.edition .phone-tag,
body.edition .phone-sub,
body.edition .phone-total-sub,
body.edition .phone-total-label,
body.edition .phone-expense-item,
body.edition .phone-expense-amount,
body.edition .phone-expense-meta,
body.edition .phone-owes-title,
body.edition .phone-owes-row,
body.edition .phone-owes-more,
body.edition .ed-feature-hero-title em,
body.edition .ed-hero-h em,
body.edition .ed-h2 em,
body.edition .ed-h3 em,
body.edition .ed-statement em,
body.edition .ed-venue-title em,
body.edition em {
    font-style: normal !important;
    font-variation-settings: "opsz" 72, "wght" 400 !important;
}

/* On DARK photo-hero feature pages (journal venue features), the em
   emphasis goes CREAM, not oxblood. Aman rule: one colour on photos. */
body.edition .ed-feature-hero-title em {
    color: var(--ed-cream) !important;
}

/* On the main page dark hero, same rule: em is cream, not burgundy. */
body.edition .ed-hero-h em {
    color: var(--ed-cream) !important;
}

/* Oxblood stays as signature ONLY on cream sections:
   .ed-section (default cream bg) em words use deep oxblood. */
body.edition .ed-section:not(.dark) em,
body.edition .ed-statement em {
    color: var(--ed-oxblood) !important;
}

/* Hero CTA — solid cream pill by default, inverts on hover */
.ed-hero-cta {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--ed-sans);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ed-ink);
    background: var(--ed-cream);
    padding: 0.95rem 2rem;
    border: 1px solid var(--ed-cream);
    border-radius: 999px;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.ed-hero-cta:hover {
    background: transparent;
    color: var(--ed-cream);
}
@media (max-width: 640px) {
    .ed-hero-cta {
        font-size: 0.72rem;
        letter-spacing: 0.24em;
        padding: 1rem 2.2rem;
        margin-top: 2.8rem;
    }
    .ed-hero { padding-bottom: 4rem; }
}

/* Desktop only — push the home-page hero CTA closer to the Scroll
   indicator. Scoped to .ed-hero-closeup so it only affects the home
   page hero, not city/journal/pricing heroes which don't carry a CTA. */
@media (min-width: 641px) {
    .ed-hero-closeup .ed-hero-cta { margin-top: 5rem; }
    .ed-hero-closeup { padding-bottom: 3rem; }
    .ed-hero-closeup .ed-hero-h { margin-bottom: 1rem; }
}

/* Mobile: pull the Lisbon Marqi-room bleed left so the red chair / doorway
   sits closer to the centre of the narrower viewport. */
@media (max-width: 640px) {
    .ed-bleed-marqi { background-position: 30% center !important; }
}

/* ============================================================
   FINAL CALCULATOR PURGE — beat legacy style.css definitively
   ============================================================ */

/* Hide every emoji icon inside the calculator, no exceptions */
body.edition .calc-icon,
body.edition .calc-comparison-list .calc-icon,
body.edition span.calc-icon { display: none !important; }

/* Group-size slider value — was legacy italic gold serif */
body.edition .calc-slider-value,
body.edition .calc-slider-value *,
body.edition span.calc-slider-value {
    font-family: var(--ed-sans) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--ed-ink) !important;
}

/* Slider track — remove the gold/yellow background from legacy CSS */
body.edition .calc-slider {
    background: rgba(27,22,16,0.22) !important;
    accent-color: var(--ed-ink);
}

/* Calculator comparison box — remove legacy grey background, go cream */
body.edition .calc-comparisons {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--ed-hair-dark) !important;
    border-radius: 0 !important;
    padding: 2rem 0 0 !important;
    margin: 2.5rem 0 !important;
}
body.edition .calc-comparison-list li {
    background: transparent !important;
    padding-left: 0 !important;
    color: var(--ed-ink) !important;
}

/* Calculator result number — kill any legacy italic/gold */
body.edition .calc-amount,
body.edition .calc-currency,
body.edition .calc-result-label,
body.edition .calc-result-sub {
    font-style: normal !important;
}
body.edition .calc-amount { color: var(--ed-ink) !important; }
body.edition .calc-currency { color: var(--ed-mute-dark) !important; }
body.edition .calc-result-label { color: var(--ed-mute-dark) !important; }
body.edition .calc-result-sub { color: var(--ed-mute-dark) !important; font-family: var(--ed-serif) !important; }

/* Slider label text — kill any legacy italic */
body.edition .calc-slider-label,
body.edition .calc-slider-label * {
    font-style: normal !important;
}
body.edition .calc-slider-label > span:first-child {
    font-family: var(--ed-sans) !important;
    font-weight: 500 !important;
    color: var(--ed-mute-dark) !important;
}

/* Slider mark labels — tracked caps */
body.edition .calc-slider-marks span {
    font-family: var(--ed-sans) !important;
    color: var(--ed-mute-dark) !important;
    font-style: normal !important;
}

/* Tier toggle buttons — kill any legacy gold on the active state */
body.edition .calc-tier-btn {
    font-style: normal !important;
}
body.edition .calc-tier-btn.active {
    background: var(--ed-ink) !important;
    color: var(--ed-cream) !important;
    border-color: var(--ed-ink) !important;
}

/* ============================================================
   THREE-PHONE HOME MOCKUP — Schedule / Venue / Budget
   ============================================================ */

.ed-phone-intro {
    max-width: 620px;
    margin: 0 0 4rem;
    text-align: left;
}
.ed-phone-intro .ed-eyebrow { display: inline-block; margin-bottom: 2rem; }
.ed-phone-intro .ed-h3 { margin: 0.5rem 0 1.5rem; }
.ed-phone-intro .ed-lede { margin: 0; max-width: 500px; }

.ed-phone-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .ed-phone-row { grid-template-columns: 1fr; gap: 4rem; }
}

.ed-phone-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
}
.ed-phone-col .phone-frame {
    transform: scale(0.95);
    transform-origin: top center;
    margin-bottom: -2.5rem;
}
@media (max-width: 900px) {
    .ed-phone-col .phone-frame { transform: scale(1); margin-bottom: 0; }
}
.ed-phone-caption {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 60, "wght" 400;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ed-ink);
    text-align: center;
    max-width: 240px;
    margin: 0;
}

/* ---------- Schedule phone internals ---------- */
body.edition .phone-day-label {
    font-family: var(--ed-sans);
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ed-oxblood);
    font-weight: 500;
    margin: 1rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(27,22,16,0.1);
}
body.edition .phone-day-label-next {
    margin-top: 1.4rem;
}
body.edition .phone-event {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(27,22,16,0.06);
}
body.edition .phone-event:last-child { border-bottom: none; }
body.edition .phone-event-time {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 48, "wght" 400;
    font-size: 0.95rem;
    color: var(--ed-oxblood);
    line-height: 1.2;
    padding-top: 0.1rem;
}
body.edition .phone-event-title {
    font-family: var(--ed-sans);
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--ed-ink);
    font-weight: 500;
}
body.edition .phone-event-sub {
    font-family: var(--ed-sans);
    font-size: 0.65rem;
    color: rgba(27,22,16,0.5);
    margin-top: 0.15rem;
    letter-spacing: 0.02em;
}
body.edition .phone-timeline {
    position: relative;
    padding-left: 14px;
}
body.edition .phone-timeline::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: rgba(27,22,16,0.18);
}
body.edition .phone-timeline .phone-event {
    position: relative;
}
body.edition .phone-timeline .phone-event::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 0.85rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(27,22,16,0.45);
    background: var(--ed-cream);
}
body.edition .phone-event-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-top: 0.3rem;
    font-family: var(--ed-sans);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ed-oxblood);
}
body.edition .phone-event-link > span:first-child {
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

/* ---------- Venue phone internals ---------- */
body.edition .phone-body.phone-body-venue {
    padding: 0 0 1.25rem 0;
}
body.edition .phone-body-venue .phone-tag,
body.edition .phone-body-venue .phone-title,
body.edition .phone-body-venue .phone-sub,
body.edition .phone-body-venue .phone-venue-card-tag,
body.edition .phone-body-venue .phone-venue-name,
body.edition .phone-body-venue .phone-venue-desc,
body.edition .phone-body-venue .phone-venue-address,
body.edition .phone-body-venue .phone-venue-btns,
body.edition .phone-body-venue .phone-venue-links {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}
body.edition .phone-body-venue .phone-sub {
    margin-bottom: 0.65rem;
}
body.edition .phone-body-venue .phone-venue-image {
    aspect-ratio: 16 / 10;
    margin-bottom: 0.55rem;
}
body.edition .phone-body-venue .phone-venue-desc {
    font-size: 0.7rem;
    margin: 0 0 0.55rem;
}
body.edition .phone-body-venue .phone-venue-address {
    margin-bottom: 0.4rem;
}
body.edition .phone-body-venue .phone-venue-links {
    margin-top: 0.5rem;
    padding-top: 0.65rem;
    gap: 0.45rem;
}
body.edition .phone-venue-card-tag {
    display: block;
    font-family: var(--ed-sans);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ed-oxblood);
    margin-top: 0.85rem;
    margin-bottom: 0.25rem;
}
body.edition .phone-venue-name {
    font-family: 'Fraunces', 'Didot', serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ed-ink);
    margin: 0 0 0.45rem;
}
body.edition .phone-venue-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--ed-bone);
    margin-bottom: 0.85rem;
}
body.edition .phone-body-venue .phone-tag {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.2rem;
}
body.edition .phone-body-venue .phone-title {
    margin: 0 0 0.25rem;
    padding-top: 0;
    padding-bottom: 0;
}
body.edition .phone-body-venue .phone-sub {
    padding-top: 0;
    padding-bottom: 0;
    margin: 0 0 0.85rem;
}
body.edition .phone-venue-desc {
    font-family: var(--ed-sans);
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(27,22,16,0.72);
    margin: 0 0 1rem;
}
body.edition .phone-venue-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
body.edition .phone-venue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
    font-family: var(--ed-sans);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ed-ink);
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(27,22,16,0.2);
    border-radius: 999px;
    white-space: nowrap;
}

/* Venue links — small icon + label + arrow. Mirrors the actual app's venue-link. */
body.edition .phone-venue-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
}
body.edition .phone-venue-link > span:not(.phone-venue-link-arrow) {
    border-bottom: 1px solid rgba(27,22,16,0.25);
    padding-bottom: 2px;
    flex: 0 0 auto;
}
body.edition .phone-venue-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--ed-sans);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ed-ink);
}
body.edition .phone-venue-link-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    stroke: currentColor;
    opacity: 0.85;
}
body.edition .phone-venue-link-arrow {
    margin-left: auto;
    opacity: 0.7;
    letter-spacing: 0;
}
body.edition .phone-venue-link > span:not(.phone-venue-link-arrow) {
    flex: 1 1 auto;
}
body.edition .phone-venue-btn-half {
    flex: 1 1 calc(50% - 0.35rem);
}
body.edition .phone-venue-btn-full {
    flex: 1 1 100%;
}
body.edition .phone-venue-btn svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* ============================================================
   CALCULATOR SKETCH ICONS — hand-drawn line icons in ink
   ============================================================ */
body.edition .calc-comparison-list li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.7rem !important;
    text-align: left;
}
body.edition .calc-sketch {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--ed-ink);
    opacity: 0.85;
}
body.edition .calc-comparison-list li span {
    font-family: var(--ed-serif);
    font-size: 1rem;
    color: var(--ed-ink);
    line-height: 1.4;
}

/* ============================================================
   PHONE MOCKUP FONT LOCK — force Fraunces roman everywhere
   Legacy style.css uses Playfair Display (not loaded anymore).
   Fallback was Times New Roman. Force Fraunces + no italic.
   ============================================================ */
body.edition .phone-frame,
body.edition .phone-frame * {
    font-style: normal !important;
    font-variation-settings: "opsz" 24, "wght" 400 !important;
}
/* Display-size phone elements keep the larger optical size */
body.edition .phone-title,
body.edition .phone-total-amount {
    font-variation-settings: "opsz" 36, "wght" 400 !important;
}

/* Budget mockup — match the actual app's body.page register: cream ground,
   hairline trip-total card, ink text, oxblood amount. No dark fill. */
body.edition .phone-total {
    background: transparent !important;
    color: var(--ed-ink) !important;
    border: 1px solid rgba(27,22,16,0.16) !important;
    border-radius: 0 !important;
    padding: 1rem 1.1rem !important;
}
body.edition .phone-total .phone-total-label {
    color: rgba(27,22,16,0.55) !important;
}
body.edition .phone-total .phone-total-amount {
    color: var(--ed-oxblood) !important;
}
body.edition .phone-total .phone-total-sub {
    color: rgba(27,22,16,0.55) !important;
}
/* Expense rows lose the white fill / border so they sit on cream as the app does */
body.edition .phone-expense {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(27,22,16,0.1) !important;
    border-radius: 0 !important;
    padding: 0.85rem 0 !important;
    margin-bottom: 0 !important;
}
body.edition .phone-expense:last-of-type {
    border-bottom: none !important;
}
body.edition .phone-expense-icon {
    background: transparent !important;
    border: 1px solid rgba(27,22,16,0.16) !important;
    border-radius: 0 !important;
    color: var(--ed-ink) !important;
}
body.edition .phone-owes {
    background: transparent !important;
    border: 1px solid rgba(27,22,16,0.16) !important;
    border-radius: 0 !important;
    color: var(--ed-ink) !important;
}
body.edition .phone-title,
body.edition .phone-topbar-logo,
body.edition .phone-total-amount,
body.edition .phone-event-time {
    font-family: 'Fraunces', 'Didot', serif !important;
}
body.edition .phone-tag,
body.edition .phone-sub,
body.edition .phone-expense-item,
body.edition .phone-expense-amount,
body.edition .phone-expense-meta,
body.edition .phone-owes-title,
body.edition .phone-owes-row,
body.edition .phone-owes-more,
body.edition .phone-total-label,
body.edition .phone-total-sub,
body.edition .phone-kr,
body.edition .phone-event-title,
body.edition .phone-event-sub,
body.edition .phone-day-label,
body.edition .phone-venue-desc,
body.edition .phone-venue-btn {
    font-family: 'Inter', -apple-system, sans-serif !important;
}

/* ============================================================
   FOOTER COLOUR LOCK — ensure cream text on dark footer
   (beats any cream-default override that might catch ed-footer-*)
   ============================================================ */
body.edition .ed-footer {
    background: var(--ed-black) !important;
    color: var(--ed-cream) !important;
}
body.edition .ed-footer a,
body.edition .ed-footer-meta a,
body.edition .ed-footer-logo,
body.edition .ed-footer-tag,
body.edition .ed-footer-bottom,
body.edition .ed-footer span {
    color: rgba(247,245,240,0.82) !important;
}
body.edition .ed-footer-logo {
    color: var(--ed-cream) !important;
}
body.edition .ed-footer-meta a:hover {
    color: var(--ed-cream) !important;
}
body.edition .ed-footer {
    border-top-color: rgba(247,245,240,0.14) !important;
}
body.edition .ed-footer-bottom {
    border-top-color: rgba(247,245,240,0.14) !important;
}

/* ============================================================
   BEFORE / AFTER COMPARISON (home page)
   ============================================================ */
.ed-compare-intro {
    text-align: left;
    max-width: 620px;
    margin: 0 0 4rem;
}
.ed-compare-intro .ed-eyebrow { display: inline-block; margin-bottom: 2rem; }
.ed-compare-intro .ed-h3 { margin: 0; }

.ed-compare-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 820px) {
    .ed-compare-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}
.ed-compare-col {
    display: flex;
    flex-direction: column;
}
.ed-compare-label {
    font-family: var(--ed-sans);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ed-hair-dark);
}
.ed-compare-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ed-compare-list li {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 60, "wght" 400;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ed-ink);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--ed-hair-dark);
}
.ed-compare-list li:last-child { border-bottom: none; }

/* Prose variant of the comparison column — flowing editorial paragraphs
   instead of bullet lines. Mirrors the .ed-body register; left intentionally
   un-bordered so the two columns read as two voices, not two checklists. */
.ed-compare-prose p {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 60, "wght" 400;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ed-ink);
    margin: 0 0 1.1rem;
}
.ed-compare-prose p:last-child { margin-bottom: 0; }

/* A thin vertical hairline replaces the old arrow glyph. The two columns
   contrasting each other is enough — no glyph needs to shout it. */
.ed-compare-divider {
    width: 1px;
    background: var(--ed-hair-dark);
    align-self: stretch;
    margin-top: 2.7rem;  /* line up with the top of the lists, past the labels */
}
@media (max-width: 820px) {
    /* Stacked columns — divider becomes a quiet horizontal rule. */
    .ed-compare-divider {
        width: auto;
        height: 1px;
        margin: 0;
    }
}

/* ============================================================
   DESTINATIONS LIST — make wrapped <a> tags carry the grid layout
   ============================================================ */
/* Direct-child <a> ONLY — so this row-grid layout doesn't cascade onto
   nested anchors inside the disclosure panel (links, journal CTA). */
body.edition .ed-destinations li > a {
    display: grid;
    grid-template-columns: 60px 1fr 2fr auto;
    align-items: center;
    gap: 2rem;
    padding: 1.75rem 0;
    color: inherit;
    text-decoration: none;
    transition: padding-left 0.35s ease;
}
body.edition .ed-destinations li > a:hover { padding-left: 1rem; }
/* When an <a> wrapper is present, the li's own padding/grid should be inert */
body.edition .ed-destinations li:has(> a) {
    padding: 0;
    display: block;
    cursor: pointer;
}
@media (max-width: 720px) {
    body.edition .ed-destinations li > a {
        grid-template-columns: 40px 1fr auto;
        gap: 1rem;
        padding: 1.4rem 0;
    }
}

/* ============================================================
   KILL DEAD ARROWS — only show the arrow when the row is linked
   Applies to city pages where some venues don't yet have feature pages.
   ============================================================ */
body.edition .ed-destinations li:not(:has(a)) .ed-dest-arrow {
    display: none;
}
body.edition .ed-destinations li:not(:has(a)) {
    cursor: default;
}
body.edition .ed-destinations li:not(:has(a)):hover {
    padding-left: 0;
}
/* Soften non-linked rows so they read as "info only" */
body.edition .ed-destinations li:not(:has(a)) .ed-dest-name {
    opacity: 0.7;
}

/* ============================================================
   Stepper (order form — group size)
   ============================================================ */
body.edition .ed-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(26,23,18,0.18);
    border-radius: 999px;
    overflow: hidden;
    background: transparent;
    width: fit-content;
}
body.edition .ed-stepper-btn {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--ed-ink);
    font-family: var(--ed-sans);
    font-size: 1.1rem;
    font-weight: 400;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s ease;
}
body.edition .ed-stepper-btn:hover { background: rgba(26,23,18,0.06); }
body.edition .ed-stepper input[type="number"] {
    width: 60px;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 72, "wght" 400;
    font-size: 1.15rem;
    color: var(--ed-ink);
    padding: 0;
    -moz-appearance: textfield;
}
body.edition .ed-stepper input[type="number"]::-webkit-outer-spin-button,
body.edition .ed-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
body.edition .ed-stepper input[type="number"]:focus { outline: none; }

/* Helper note under form fields */
body.edition .form-field-note {
    display: block;
    margin-top: 0.45rem;
    font-family: var(--ed-sans);
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: rgba(26,23,18,0.55);
    font-weight: 400;
}

/* ============================================================
   Hero eyebrows — always cream, on any hero component.
   Keeps the small headline legible on dark, bright, and
   photographic backgrounds without needing image calibration.
   ============================================================ */
body.edition .ed-hero .ed-eyebrow,
body.edition .ed-feature-hero .ed-eyebrow,
body.edition .ed-feature-hero-inner .ed-eyebrow,
body.edition .ed-feature-hero-meta .ed-eyebrow,
body.edition .ed-cta .ed-eyebrow {
    color: var(--ed-cream) !important;
}
body.edition .ed-hero .ed-eyebrow::before,
body.edition .ed-hero .ed-eyebrow::after,
body.edition .ed-feature-hero .ed-eyebrow::before,
body.edition .ed-feature-hero .ed-eyebrow::after,
body.edition .ed-feature-hero-inner .ed-eyebrow::before,
body.edition .ed-feature-hero-inner .ed-eyebrow::after,
body.edition .ed-feature-hero-meta .ed-eyebrow::before,
body.edition .ed-feature-hero-meta .ed-eyebrow::after,
body.edition .ed-cta .ed-eyebrow::before,
body.edition .ed-cta .ed-eyebrow::after {
    background: var(--ed-cream) !important;
}

/* ============================================================
   GLOBAL ITALIC KILL — no italic anywhere on the site.
   Brand decision: italic is out. Emphasis stays via oxblood colour.
   ============================================================ */
body.edition *,
body.edition *::before,
body.edition *::after {
    font-style: normal !important;
}

/* ============================================================
   Phone mockup — venue corner stamp + oxblood address + split picker
   Match the new app design (hybrid theme + editorial info hierarchy).
   ============================================================ */
body.edition .phone-venue-image {
    position: relative;
}
body.edition .phone-venue-stamp {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    padding: 0.18rem 0.36rem;
    background: rgba(12,10,8,0.72);
    color: #f7f5f0;
    font-family: var(--ed-sans);
    font-size: 0.44rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 1px;
}
body.edition .phone-venue-address {
    font-family: var(--ed-sans);
    font-size: 0.6rem;
    line-height: 1.5;
    color: var(--ed-oxblood);
    margin: 0.5rem 0 0.6rem;
    letter-spacing: 0.005em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
body.edition .phone-venue-copy-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    stroke: currentColor;
    opacity: 0.7;
}

/* Budget mockup — split-chips row */
body.edition .phone-split-row {
    margin: 0.65rem 0 0.65rem;
    padding: 0.55rem 0;
    border-top: 1px solid rgba(27,22,16,0.1);
    border-bottom: 1px solid rgba(27,22,16,0.1);
}
body.edition .phone-split-label {
    display: block;
    font-family: var(--ed-sans);
    font-size: 0.48rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    margin-bottom: 0.35rem;
    font-weight: 500;
}
body.edition .phone-split-chips {
    display: flex;
    gap: 0.28rem;
}
body.edition .phone-split-chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ed-cream);
    border: 1px solid var(--ed-oxblood);
    color: var(--ed-oxblood);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ed-serif);
    font-size: 0.56rem;
    font-weight: 400;
    line-height: 1;
}

/* ============================================================
   ALTERNATIVE COMPARISON LIST — pricing.html
   Editorial price-list register: title left, cost right, hairline between
   ============================================================ */
body.edition .ed-alternative-intro {
    max-width: 36rem;
    margin: 0 auto 3rem;
    text-align: center;
}
body.edition .ed-alternative-intro .ed-lede {
    margin-left: auto;
    margin-right: auto;
}
body.edition .ed-alternative-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--ed-hair-dark);
}
body.edition .ed-alternative-row {
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--ed-hair-dark);
}
body.edition .ed-alternative-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 0.6rem;
}
body.edition .ed-alternative-name {
    font-family: var(--ed-serif);
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 400;
    color: var(--ed-ink);
    line-height: 1.3;
    letter-spacing: -0.005em;
}
body.edition .ed-alternative-cost {
    font-family: var(--ed-sans);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
body.edition .ed-alternative-desc {
    font-family: var(--ed-sans);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ed-mute-dark);
    margin: 0;
    max-width: 44rem;
}
body.edition .ed-alternative-row-noch .ed-alternative-name {
    font-style: italic;
    font-family: var(--ed-serif);
}
body.edition .ed-alternative-row-noch .ed-alternative-cost {
    color: var(--ed-ink);
}
body.edition .ed-alternative-row-noch .ed-alternative-desc {
    color: var(--ed-ink);
}
@media (max-width: 640px) {
    body.edition .ed-alternative-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        margin-bottom: 0.85rem;
    }
    body.edition .ed-alternative-cost {
        font-size: 0.65rem;
    }
}

/* ============================================================
   EDITORIAL FEATURE — Yatzer-style image cadence (journal/*)
   For long-form hotel/venue features. Article body holds text
   at 680px; figures sit between articles at wider breakout.
   ============================================================ */
body.edition .ed-feature-byline {
    max-width: 680px;
    margin: 0 auto;
    padding: 1.5rem var(--ed-gutter) 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: baseline;
    font-family: var(--ed-sans);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
}
body.edition .ed-feature-byline span:not(:last-child)::after {
    content: " · ";
    color: var(--ed-mute);
    margin-left: 1.25rem;
    letter-spacing: 0;
}
body.edition .ed-feature-image {
    max-width: 1080px;
    margin: 3.5rem auto;
    padding: 0 var(--ed-gutter);
}
body.edition .ed-feature-image img,
body.edition .ed-feature-image .ed-feature-image-fill {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    background-color: var(--ed-bone);
}
body.edition .ed-feature-image-portrait .ed-feature-image-fill {
    aspect-ratio: 4 / 5;
    max-width: 720px;
    margin: 0 auto;
}
body.edition .ed-feature-caption {
    margin: 1rem 0 0;
    font-family: var(--ed-sans);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    text-align: left;
}
body.edition .ed-feature-pullquote {
    max-width: 820px;
    margin: 4rem auto;
    padding: 0 var(--ed-gutter);
    font-family: var(--ed-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--ed-ink);
    text-align: left;
}
body.edition .ed-feature-pullquote::before {
    content: "\201C";
    color: var(--ed-gold);
    margin-right: 0.15em;
}
body.edition .ed-feature-pullquote::after {
    content: "\201D";
    color: var(--ed-gold);
}
body.edition .ed-feature-pullquote-attribution {
    display: block;
    margin-top: 1.25rem;
    font-family: var(--ed-sans);
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
}
body.edition .ed-feature-credits {
    max-width: 680px;
    margin: 4rem auto 0;
    padding: 2rem var(--ed-gutter);
    border-top: 1px solid var(--ed-hair-dark);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
}
body.edition .ed-feature-credit-label {
    font-family: var(--ed-sans);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    margin: 0 0 0.3rem;
}
body.edition .ed-feature-credit-value {
    font-family: var(--ed-serif);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ed-ink);
    margin: 0;
}
@media (max-width: 560px) {
    body.edition .ed-feature-image { margin: 2.5rem auto; }
    body.edition .ed-feature-pullquote { margin: 3rem auto; }
    body.edition .ed-feature-credits { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Subsequent body blocks (between figures) — tighter top padding */
body.edition .ed-feature-body + .ed-feature-body,
body.edition .ed-feature-image + .ed-feature-body,
body.edition .ed-feature-pullquote + .ed-feature-body {
    padding-top: 1rem;
}

/* ============================================================
   BUILD-SPEC LIST — case-study key/value table (work/*)
   Label left, value right, hairline between, proper breathing room
   ============================================================ */
body.edition .ed-build-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    border-top: 1px solid var(--ed-hair-dark);
}
body.edition .ed-build-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--ed-hair-dark);
}
body.edition .ed-build-list li > span:first-child {
    font-family: var(--ed-sans);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    flex: 0 1 auto;
}
body.edition .ed-build-list li > span:last-child {
    font-family: var(--ed-serif);
    font-size: 1.05rem;
    color: var(--ed-ink);
    text-align: right;
    flex: 0 1 auto;
}
@media (max-width: 560px) {
    body.edition .ed-build-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        padding: 1rem 0;
    }
    body.edition .ed-build-list li > span:last-child {
        text-align: left;
        font-size: 1rem;
    }
}

/* ============================================================
   DISPATCHES — editorial long-form feature pages
   ============================================================ */
.ed-dispatch-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    font-family: var(--ed-sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 400;
    margin: 0 0 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ed-hair-dark);
}
.ed-dispatch-byline strong {
    font-weight: 600;
    color: var(--ed-ink);
    margin-right: 0.4em;
}

.ed-dispatch-standfirst {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 72, "wght" 400;
    font-size: clamp(1.15rem, 2.2vw, 1.4rem) !important;
    line-height: 1.5 !important;
    color: var(--ed-ink);
    margin-bottom: 2.5rem !important;
    font-weight: 400;
}

.ed-dispatch-pullquote {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 144, "wght" 400;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ed-gold-deep);
    margin: 3.5rem 0;
    padding: 0 0 0 1.5rem;
    border-left: 1px solid var(--ed-gold);
    max-width: 34em;
}

.ed-dispatch-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 4rem;
    background: var(--ed-cream);
}
@media (max-width: 720px) {
    .ed-dispatch-pair { grid-template-columns: 1fr; gap: 1rem; background: transparent; }
}

.ed-dispatch-signoff {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 72, "wght" 500;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--ed-ink);
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ed-hair-dark);
}
.ed-dispatch-signoff span {
    display: inline-block;
    margin-top: 0.3rem;
    font-family: var(--ed-sans);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
}

/* Home page teaser — single Dispatch feature card */
.ed-dispatch-teaser {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (max-width: 820px) {
    .ed-dispatch-teaser { grid-template-columns: 1fr; }
}
.ed-dispatch-teaser-image {
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    background-color: var(--ed-bone);
}
.ed-dispatch-teaser-copy { padding: 1rem 0; }

/* ============================================================
   FOOTER COLOPHON — masthead credits
   ============================================================ */
.ed-footer-colophon {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem var(--ed-gutter) 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    justify-content: center;
    font-family: var(--ed-sans);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
    font-weight: 500;
    border-top: 1px solid var(--ed-hair-dark);
    text-align: center;
}
.ed-footer-colophon span { white-space: nowrap; }

/* ============================================================
   GLOBAL ITALIC KILL — never italic, anywhere.
   Brand decision: italic is out. Oxblood/cognac accent on em stays.
   ============================================================ */
body.edition *,
body.edition *::before,
body.edition *::after {
    font-style: normal !important;
}

/* Footer wordmark */
.ed-footer-mark { display: block; width: 110px; height: auto; margin-bottom: 0.4rem; opacity: 0.95; }
@media (max-width: 640px) { .ed-footer-mark { width: 96px; } }

/* Nav SVG wordmark (replaces text logo) */
.ed-nav-logo .ed-nav-mark { display: block; height: 56px; width: auto; }
@media (max-width: 640px) { .ed-nav-logo .ed-nav-mark { height: 44px; } }

/* Default: show dark, hide light */
.ed-nav-mark-light { display: none !important; }
.ed-nav-mark-dark { display: block !important; }

/* Over dark hero: show light, hide dark */
body.edition.hero-active .ed-nav-mark-light,
.ed-nav.on-dark .ed-nav-mark-light { display: block !important; }
body.edition.hero-active .ed-nav-mark-dark,
.ed-nav.on-dark .ed-nav-mark-dark { display: none !important; }

/* When scrolled, even on hero pages: dark logo on cream nav */
.ed-nav.scrolled .ed-nav-mark-light { display: none !important; }
.ed-nav.scrolled .ed-nav-mark-dark { display: block !important; }

/* Override the text-based logo sizing since we now use IMG */
.ed-nav-logo {
    font-size: 0 !important; /* defeats letter-spacing/font-size from old text rules */
    line-height: 0;
}

/* ---------- City "in order" — expand-on-click disclosure ----------
   Each numbered venue becomes a quiet disclosure. Default looks unchanged;
   on click the row reveals a longer description, external links (Website ·
   Instagram · Map) and a "Read the piece →" link if a journal entry exists. */

.ed-destinations li.is-expandable {
    cursor: pointer;
    position: relative; /* anchor for the absolute cart-toggle below */
    /* Five columns: num | name | sub | +/- toggle | (reserved for the
       cart-toggle on non-expandable rows). On expandable rows the
       cart-toggle is positioned absolutely against the bottom-right of
       the li so it sits with the description rather than shifting the
       +/- toggle leftward when it appears. */
    grid-template-columns: 60px 1fr 2fr auto auto;
}
/* Hover shift only on closed rows — once open it serves no purpose
   and just nudges the Add-to-trip button as you reach for it. */
.ed-destinations li.is-expandable:not(.is-open):hover { padding-left: 0.5rem; }

.ed-dest-toggle {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    font-family: var(--ed-sans);
    font-size: 1.1rem;
    line-height: 1;
    color: var(--ed-mute-small);
    width: 1.5rem;
    text-align: center;
    transition: color 0.25s ease, transform 0.25s ease;
}
.ed-destinations li.is-expandable:hover .ed-dest-toggle {
    color: var(--ed-oxblood);
}

.ed-dest-panel {
    grid-column: 2 / -1;
    grid-row: 2;
    max-height: 0;
    overflow: hidden;
    /* Tighter ceiling matches realistic content (longest venue ≈ 560 chars,
       ~300px tall with links). Animating to 400px instead of 800px keeps
       the open transition feeling snappy and removes the long "empty
       tail" you used to see at the end of the ease. */
    transition: max-height 0.32s ease, margin-top 0.28s ease, padding-top 0.28s ease;
}
.ed-destinations li.is-open .ed-dest-panel {
    max-height: 400px;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ed-hair-dark);
}

.ed-dest-desc {
    font-family: var(--ed-serif);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ed-ink);
    margin: 0 0 1.1rem;
    max-width: 62ch;
}
.ed-section .ed-dest-desc { color: var(--ed-mute-dark); }
.ed-dest-desc-empty { font-style: italic; opacity: 0.6; }

.ed-dest-links {
    font-family: var(--ed-sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-small);
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.85rem;
    align-items: center;
}
.ed-dest-links a {
    color: var(--ed-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ed-hair-dark);
    padding-bottom: 2px;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.ed-section .ed-dest-links a { color: var(--ed-ink); }
.ed-dest-links a:hover { color: var(--ed-oxblood); border-bottom-color: var(--ed-oxblood); }
.ed-dest-link-sep { color: var(--ed-mute-small); opacity: 0.55; }

.ed-dest-journal {
    display: inline-block;
    font-family: var(--ed-sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-oxblood);
    text-decoration: none;
    margin-top: 0.5rem;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--ed-oxblood);
    transition: padding-left 0.3s ease;
}
.ed-dest-journal:hover { padding-left: 0.4rem; }

@media (max-width: 720px) {
    .ed-destinations li.is-expandable {
        grid-template-columns: 40px 1fr auto;
    }
    .ed-dest-panel {
        grid-column: 1 / -1;
    }
    .ed-dest-toggle {
        grid-column: 3;
    }
    /* On mobile the absolute bottom-right pin is cramped against the
       narrow gutter — drop the cart-toggle back into normal flow as
       its own row below the panel. */
    .ed-destinations li.is-expandable .cart-toggle {
        position: static;
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: start;
        margin-top: 0.6rem;
    }
    .ed-dest-panel {
        grid-row: 2;
    }
}

/* ---------- Pricing calculator — editorial slider, no card ---------- */
/* Single typographic line that updates as the slider moves. Quieter than
   the previous SaaS toggle + readout card. Inline tier swap at the bottom. */
.calc-quiet {
    max-width: 560px;
    margin: 3rem auto 0;
    padding: 0 var(--ed-gutter);
    text-align: center;
}
.calc-line {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 60, "wght" 400;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.3;
    color: var(--ed-ink);
    margin: 0 0 2.5rem;
    text-wrap: balance;
}
.calc-line em {
    font-style: italic;
    font-weight: 400;
    color: var(--ed-oxblood);
}
.calc-line #calcCurrent {
    font-weight: 400;
    color: var(--ed-ink);
}
.calc-quiet-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1px;
    background: var(--ed-hair-dark);
    outline: none;
    cursor: pointer;
    margin: 0 0 0.85rem;
}
.calc-quiet-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ed-oxblood);
    cursor: pointer;
    border: 2px solid var(--ed-cream);
    box-shadow: 0 0 0 1px var(--ed-oxblood);
    transition: transform 0.18s ease;
}
.calc-quiet-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc-quiet-slider::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--ed-oxblood);
    cursor: pointer;
    border: 2px solid var(--ed-cream);
    box-shadow: 0 0 0 1px var(--ed-oxblood);
}
/* Marks: position each span at the actual slider percentage so "20" sits
   under value 20, not under 75% of the track. The slider runs 4–25 (range
   of 21), so 10 lands at 28.57%, 15 at 52.38%, 20 at 76.19%. */
.calc-quiet-marks {
    position: relative;
    height: 1.4rem;
    font-family: var(--ed-sans);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-mute-small);
    margin: 0 0 2.5rem;
}
.calc-quiet-marks span {
    position: absolute;
    transform: translateX(-50%);
    top: 0;
}
.calc-quiet-marks span:first-child { transform: none; }
.calc-quiet-marks span:last-child { transform: translateX(-100%); }

/* Tier swap: active tier reads as a cream-on-oxblood pill so the choice
   is unambiguous. Inactive sits quiet in mute small. */
.calc-tier-swap {
    font-family: var(--ed-sans);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-mute-small);
    margin: 0 0 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.calc-tier-swap a {
    color: var(--ed-mute-small);
    text-decoration: none;
    transition: color 0.25s ease, background 0.25s ease;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-weight: 500;
}
.calc-tier-swap a:hover { color: var(--ed-ink); }
.calc-tier-swap a.is-active {
    color: var(--ed-cream);
    background: var(--ed-oxblood);
}
.calc-tier-swap-sep { opacity: 0.4; }
.calc-cta {
    display: inline-block !important;
}

/* ---------- Trip cart — quiet add buttons + floating indicator ----------
   The cart is opt-in: users browse city guides, "Add to trip" stores venues
   in localStorage, a floating pill bottom-right shows the count and links to
   /order which hydrates from the cart. Premium discipline: nothing shouts. */

.cart-toggle {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    font-family: var(--ed-sans);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-mute-small);
    background: transparent;
    border: 1px solid var(--ed-hair-dark);
    padding: 0.55rem 0.95rem;
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    white-space: nowrap;
}
/* On expandable rows the cart button sits at the bottom-right of the
   opened panel — "you've read the description, here's the action" —
   rather than as a header-level pill on row 1. Absolute positioning
   keeps it out of the grid so the +/- toggle doesn't shift when the
   button appears. */
.ed-destinations li.is-expandable .cart-toggle {
    position: absolute;
    right: 0;
    bottom: 1.75rem; /* matches li padding-bottom */
    grid-column: auto;
    grid-row: auto;
    display: none;
}
.ed-destinations li.is-expandable.is-open .cart-toggle {
    display: inline-flex;
    animation: ed-cart-fade-in 0.32s ease 0.12s both;
}
@keyframes ed-cart-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.cart-toggle:hover {
    color: var(--ed-oxblood);
    border-color: var(--ed-oxblood);
}
.cart-toggle.is-added {
    color: var(--ed-cream);
    background: var(--ed-oxblood);
    border-color: var(--ed-oxblood);
}
.cart-toggle.is-added::before {
    content: "\2713\00a0";
    font-weight: 400;
}
@media (max-width: 720px) {
    .cart-toggle {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 0.6rem;
    }
    /* Drop the cart-toggle back into normal flow on mobile. The desktop
       rule (.ed-destinations li.is-expandable .cart-toggle { position: absolute })
       declared later in the source than the earlier mobile block was winning
       the cascade, leaving the button floating over the description. Reassert
       here so it lives below the panel + description as its own row.
       grid-row left auto so DOM order wins — sub (DOM idx 2) gets the first
       free full-width row, cart-toggle (DOM idx 5) gets the one after. */
    .ed-destinations li.is-expandable .cart-toggle {
        position: static;
        right: auto;
        bottom: auto;
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: start;
        margin-top: 0.6rem;
    }
}

/* Cart count rides inline in the BEGIN CTA copy as "Begin (N)" — the
   oxblood badge that used to sit here was retired so the nav stays
   editorial and single-surface. Legacy element belt-and-braces hidden. */
.cart-nav-badge { display: none !important; }

/* (The small saved-pill panel was replaced by hydrating cart items
   directly into the existing LOCKED IN venue cards on /order.) */

/* ---------- Cities directory (/cities/) — typographic table of contents ----------
   A numbered chapter-list for the ten city guides. Reads as the front matter of a
   travel book, not as a card grid. Each row: number, name + italic subtitle on one
   line in Fraunces, a quiet teaser beneath in Inter mute, a CTA-style arrow at the
   end that slides on hover. */
.ed-cities-toc {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--ed-gutter);
    border-top: 1px solid var(--ed-hair-dark);
    /* Two cities per row — 01 next to 02, 03 next to 04, etc. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 720px) {
    .ed-cities-toc { grid-template-columns: 1fr; }
}
.ed-cities-toc-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: baseline;
    column-gap: 2rem;
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--ed-hair-dark);
    text-decoration: none;
    color: var(--ed-ink);
    transition: padding-left 0.35s ease, color 0.3s ease;
}
.ed-cities-toc-row:hover {
    padding-left: 0.5rem;
    color: var(--ed-oxblood);
}
.ed-cities-toc-num {
    font-family: var(--ed-sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-small);
    align-self: start;
    padding-top: 0.55rem;
}
.ed-cities-toc-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.ed-cities-toc-name {
    font-family: var(--ed-serif);
    font-variation-settings: "opsz" 90, "wght" 400;
    font-weight: 400;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: inherit;
}
.ed-cities-toc-name em {
    font-style: italic;
    color: var(--ed-gold-deep);
    font-weight: 400;
}
.ed-cities-toc-row:hover .ed-cities-toc-name em {
    color: var(--ed-oxblood);
}
.ed-cities-toc-tease {
    font-family: var(--ed-sans);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ed-mute-dark);
    max-width: 52ch;
}
@media (max-width: 720px) {
    .ed-cities-toc-row {
        grid-template-columns: 1fr;
        column-gap: 1.25rem;
        padding: 1.75rem 0;
    }
    .ed-cities-toc-num {
        grid-column: 1 / -1;
        padding-top: 0;
        margin-bottom: 0.4rem;
    }
}

/* ---------- City Guide pages ---------- */

.ed-city-hero {
    min-height: 60vh;
    background: var(--ed-black);
    color: var(--ed-cream);
    padding: 6rem var(--ed-gutter) 4rem;
    border-bottom: 1px solid var(--ed-hair);
}
.ed-city-hero .ed-eyebrow { color: var(--ed-gold); margin-bottom: 1.5rem; }
.ed-city-hero .ed-hero-h { font-size: clamp(3.5rem, 9vw, 6.5rem); margin-bottom: 1rem; }
.ed-city-hero .ed-hero-p { color: var(--ed-cream); opacity: 0.85; max-width: 540px; }

/* The one-sentence intro paragraph that immediately follows the city hero
   reads as a continuation of the centred title block, not body copy.
   Long-form content elsewhere stays left-aligned. */
.ed-city-hero + .ed-section .ed-inner-narrow {
    text-align: center;
}
.ed-city-hero + .ed-section .ed-inner-narrow .ed-body {
    margin-left: auto;
    margin-right: auto;
}

.ed-city-section { padding: 4rem var(--ed-gutter); border-top: 1px solid var(--ed-hair); }
.ed-city-section .ed-eyebrow { color: var(--ed-gold); margin-bottom: 0.8rem; display: block; }
.ed-city-section .ed-h2 { margin-bottom: 3rem; }

/* Editorial venue cards — image-led, oxblood action pills, "Add to my trip" CTA */
/* Scoped to .ed-city-section so it doesn't override the journal/work card grid */
.ed-city-section .ed-venue-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2.5rem;
}
@media (max-width: 820px) {
    .ed-city-section .ed-venue-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.ed-city-section .ed-venue-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
@media (max-width: 540px) {
    .ed-city-section .ed-venue-card { grid-template-columns: 1fr; gap: 1rem; }
}
.ed-venue-card-media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ed-bone, var(--ed-cream));
    border: 1px solid var(--ed-hair-dark);
    position: relative;
    text-decoration: none;
}
@media (max-width: 540px) {
    .ed-venue-card-media { aspect-ratio: 16 / 10; }
}
.ed-venue-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.ed-venue-card-media:hover img { transform: scale(1.04); }
.ed-venue-card-initials {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ed-serif);
    font-size: 2.2rem;
    font-weight: 400;
    font-style: italic;
    color: var(--ed-oxblood, #6b1e24);
    opacity: 0.55;
    letter-spacing: 0.05em;
}
.ed-venue-card-body {
    display: flex; flex-direction: column;
    padding-top: 0.2rem;
}
.ed-venue-card-head {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.ed-venue-card-name {
    font-family: var(--ed-serif);
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    font-weight: 500;
    margin: 0;
    color: var(--ed-ink);
    line-height: 1.15;
}
.ed-venue-card-area {
    font-family: var(--ed-sans);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-mute-small, var(--ed-mute));
}
.ed-venue-card-tag {
    font-family: var(--ed-sans);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--ed-ink);
    margin: 0 0 1rem;
    line-height: 1.55;
    flex: 1;
}
.ed-venue-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: auto;
}
.ed-venue-pills {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}
body.edition .ed-venue-pill {
    display: inline-block;
    font-family: var(--ed-sans);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--ed-oxblood, #6b1e24);
    color: var(--ed-oxblood, #6b1e24);
    background: transparent;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
body.edition .ed-venue-pill:hover {
    background: var(--ed-oxblood, #6b1e24);
    color: var(--ed-cream);
}
body.edition .ed-venue-add {
    font-family: var(--ed-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ed-oxblood, #6b1e24);
    text-decoration: none;
    border-bottom: 1px solid var(--ed-oxblood, #6b1e24);
    align-self: flex-start;
    padding-bottom: 1px;
    transition: opacity 0.2s ease;
}
body.edition .ed-venue-add:hover { opacity: 0.7; }

.ed-cta-section {
    background: var(--ed-bone-warm, var(--ed-cream));
    padding: 5rem var(--ed-gutter);
    border-top: 1px solid var(--ed-hair-dark);
}

/* Body / lede text inside any centered CTA block needs margin auto so the
   540px max-width column actually sits in the middle. Without this, the
   parent's text-align:center centres inline glyphs but the block hugs left. */
.ed-cta-section .ed-body,
.ed-cta-section .ed-lede,
.ed-cta .ed-body,
.ed-cta .ed-lede,
.ed-city-hero + .ed-section .ed-inner-narrow .ed-body {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Order page: inline city picker ---------- */

/* Order page: city suggestions — full-bleed editorial moment, Aman/SH register.
   Breaks out of the 560px form column to span the page, then constrains its own
   inner content. Three large image-led picks; never a long vertical list. */
.ed-order-suggestions {
    display: none;
    margin-top: 1.5rem;
}
.ed-order-suggestions.is-active {
    display: block;
    /* Break out of the form column to full viewport width.
       Requires the panel to be a direct child of a centered ancestor — JS
       re-parents it onto .ed-order-wrap (max-width:560px, margin:0 auto). */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--ed-cream);
    border-top: 1px solid var(--ed-hair-dark);
    border-bottom: 1px solid var(--ed-hair-dark);
}
.ed-order-edit-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3rem);
}
.ed-order-edit-eyebrow {
    font-family: var(--ed-sans);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-oxblood);
    margin: 0 0 1rem;
    display: inline-flex; align-items: center; gap: 0.7rem;
}
.ed-order-edit-eyebrow::before {
    content: "";
    width: 32px; height: 1px;
    background: var(--ed-oxblood);
    display: inline-block;
}
.ed-order-edit-title {
    font-family: var(--ed-serif);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    max-width: 760px;
    color: var(--ed-ink);
    letter-spacing: -0.01em;
}
.ed-order-edit-title em {
    font-style: italic;
    color: var(--ed-oxblood);
    font-weight: 400;
}

/* Three picks, magazine grid */
.ed-order-edit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 760px) {
    .ed-order-edit-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

body.edition .ed-order-edit-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ed-ink);
    transition: transform 0.3s ease;
}
body.edition .ed-order-edit-card:hover { transform: translateY(-3px); }
.ed-order-edit-media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ed-bone, var(--ed-cream));
    margin-bottom: 1rem;
    position: relative;
}
.ed-order-edit-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}
.ed-order-edit-card:hover .ed-order-edit-media img { transform: scale(1.04); }
.ed-order-edit-cat {
    font-family: var(--ed-sans);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-small, var(--ed-mute));
    margin-bottom: 0.4rem;
}
.ed-order-edit-name {
    font-family: var(--ed-serif);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ed-ink);
    margin-bottom: 0.4rem;
}
.ed-order-edit-tag {
    font-family: var(--ed-sans);
    font-size: 0.92rem;
    font-weight: 300;
    color: var(--ed-mute-dark);
    line-height: 1.5;
}

body.edition .ed-order-edit-cta {
    font-family: var(--ed-serif);
    font-style: italic;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--ed-oxblood);
    text-decoration: none;
    border-bottom: 1px solid var(--ed-oxblood);
    padding-bottom: 2px;
    display: inline-block;
    transition: opacity 0.2s ease;
}
body.edition .ed-order-edit-cta:hover { opacity: 0.7; }

/* ============================================================
   Aman-inspired three-up city gallery (home page)
   Three images side-by-side, generous gap to small caption block
   beneath each. The whitespace is the design.
   ============================================================ */
.ed-cities-3up {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
    /* Match the EDITION carousel inset above so images line up. */
    padding: 0 clamp(1rem, 2.5vw, 2.25rem);
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
/* Four-up city gallery — 4 columns on desktop, all ten cities. */
.ed-cities-4up {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
    padding: 0 clamp(1rem, 2.5vw, 2.25rem);
    margin-top: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 1024px) {
    .ed-cities-4up { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ed-cities-4up { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}
/* Frame for the section header + footer link — same outer inset as
   the gallery and the EDITION feature. Everything left-aligns. */
.ed-cities-frame {
    padding: 0 clamp(1rem, 2.5vw, 2.25rem);
}
.ed-city-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.4s ease;
}
.ed-city-card:hover { opacity: 0.78; }
.ed-city-card-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    background-color: #1a1714;
    background-repeat: no-repeat;
    transition: transform 0.6s ease;
}
.ed-city-card:hover .ed-city-card-image {
    /* very subtle — just a breath, no zoom */
    transform: scale(1.012);
}
.ed-city-card-meta {
    padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
    padding-right: 0.5rem;
}
.ed-city-card-meta .ed-eyebrow {
    display: block;
    margin: 0 0 0.7rem;
    color: var(--ed-gold-deep);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
}
/* Drop the flanking dashes so the eyebrow text aligns to the card's
   left edge (and the headline below). */
.ed-city-card-meta .ed-eyebrow::before,
.ed-city-card-meta .ed-eyebrow::after { display: none; }
.ed-city-card-title {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(1.45rem, 2vw, 1.75rem);
    line-height: 1.05;
    margin: 0 0 0.7rem;
    color: var(--ed-ink);
    letter-spacing: -0.005em;
}
.ed-city-card-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--ed-mute-dark);
    margin: 0;
    max-width: 26em;
}
@media (max-width: 840px) {
    .ed-cities-3up {
        grid-template-columns: 1fr;
        gap: 3.25rem;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }
    .ed-city-card-image { aspect-ratio: 4 / 3; }
}

/* Orphan Aman .ed-feature block (early prototype) removed —
   the class names (.ed-feature-image, .ed-feature-caption,
   .ed-feature-body) collide with the journal article markup
   and were stomping on the EDITION page. The current carousel
   uses .ed-aman-feature-* instead. */

/* ============================================================
   Mood-grouped cities directory (cities/index.html)
   Four chapters, each: eyebrow + serif title + prose, then the
   city rows beneath (reusing .ed-cities-toc-row but without
   numbers — the chapter heading is the chapter).
   ============================================================ */
.ed-mood-toc {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--ed-gutter);
}
.ed-mood-group {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
    border-top: 1px solid var(--ed-hair-dark);
}
.ed-mood-group:first-child {
    border-top: none;
    padding-top: 0;
}
.ed-mood-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: baseline;
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.ed-mood-head .ed-eyebrow {
    display: block;
    color: var(--ed-gold-deep);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
}
.ed-mood-title {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.012em;
    margin: 0.5rem 0 0;
    color: var(--ed-ink);
    grid-column: 1;
}
.ed-mood-prose {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ed-mute-dark);
    margin: 0;
    max-width: 36em;
    grid-column: 2;
    align-self: end;
}
.ed-mood-rows .ed-cities-toc-row {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 1.5rem 0;
}
.ed-mood-rows .ed-cities-toc-row:first-child { border-top: 1px solid var(--ed-hair-dark); }
.ed-mood-rows .ed-cities-toc-row:hover { padding-left: 0.4rem; }
.ed-mood-rows .ed-cities-toc-num { display: none; }

@media (max-width: 720px) {
    .ed-mood-head {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .ed-mood-title { grid-column: 1; }
    .ed-mood-prose { grid-column: 1; }
}

/* ============================================================
   Aman-style feature with carousel
   Full-bleed image, swappable via arrows in the bottom-right
   corner. Caption sits below, left-aligned in the gutter.
   ============================================================ */
.ed-aman-feature {
    margin: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3.5rem);
    /* Cream frame around the image on left/right — Aman-style inset. */
    padding: 0 clamp(1rem, 2.5vw, 2.25rem);
}
.ed-aman-feature-media {
    width: 100%;
    overflow: hidden;
}
.ed-aman-feature-slides {
    position: relative;
    width: 100%;
    /* Tall hero, Aman-style — image bottom still cut via background-position
       so the source photo gets cropped at the bottom, not the top. */
    height: clamp(460px, 78vh, 820px);
    background-color: #1a1714;
}
.ed-aman-feature-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    /* Anchor the image toward the top so the bottom of the source photo
       gets cropped, not the top. Matches the Aman bedroom crop. */
    background-position: center 30%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
.ed-aman-feature-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
/* Arrows sit BELOW the image in the cream space, right-aligned to
   the image edge (not the page edge) — Aman pattern. */
.ed-aman-feature-nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.3rem;
    padding: 0.4rem 0 0;
}
.ed-aman-feature-arrow {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--ed-ink);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    padding: 0;
    opacity: 0.55;
}
.ed-aman-feature-arrow:hover {
    opacity: 1;
}
.ed-aman-feature-arrow span {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    display: inline-block;
    line-height: 1;
}
/* Tight Aman caption — sits close to the arrows, left-aligned to the
   image edge (no extra gutter — the section already has cream frame). */
.ed-aman-feature-caption {
    max-width: 880px;
    padding: clamp(0.25rem, 0.5vw, 0.45rem) 0 0;
    margin: 0;
}
.ed-aman-feature-eyebrow {
    display: block;
    margin-bottom: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ed-mute-dark);
}
.ed-aman-feature-title {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(1.7rem, 2.4vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -0.005em;
    margin: 0 0 1.1rem;
    color: var(--ed-ink);
}
.ed-aman-feature-body {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ed-mute-dark);
    margin: 0 0 1.75rem;
    max-width: 56ch;
    font-weight: 300;
}
.ed-aman-feature-links {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}
.ed-aman-feature-link {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: var(--ed-ink);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ed-ink);
    transition: opacity 0.2s ease;
}
.ed-aman-feature-link:hover { opacity: 0.6; }

@media (max-width: 640px) {
    .ed-aman-feature-slides { height: 65vh; }
    .ed-aman-feature-nav { gap: 0.2rem; }
    /* Bump arrows to comfortable thumb-tap target on phones. */
    .ed-aman-feature-arrow {
        width: 44px;
        height: 44px;
        font-size: 1.35rem;
    }
}

/* ============================================================
   Facts strip — quiet single-line price/terms surfaced early on
   the home page. Hairline borders, letter-spaced Inter, middle-dot
   separators. Editorial register, not a banner.
   ============================================================ */
.ed-facts-strip {
    border-top: 1px solid var(--ed-hair-dark);
    border-bottom: 1px solid var(--ed-hair-dark);
    padding: 1.4rem var(--ed-gutter);
    margin: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.ed-facts-strip-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.2rem 2.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--ed-ink);
}
.ed-facts-strip-inner > span:not(.ed-facts-strip-key) {
    position: relative;
    display: inline-flex;
    align-items: center;
}
/* Middle-dot separator between items on wide screens. */
.ed-facts-strip-inner > span:not(.ed-facts-strip-key):not(:last-of-type)::after {
    content: '·';
    position: absolute;
    right: -1.2rem;
    color: var(--ed-mute-small);
    opacity: 0.6;
}
.ed-facts-strip-key {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.66rem;
    color: var(--ed-gold-deep);
    margin-right: 0.5rem;
}
.ed-facts-strip-price {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: 0;
    color: var(--ed-ink);
    line-height: 1;
    margin-left: 0.1rem;
}
body.edition .ed-facts-strip-link {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--ed-oxblood);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--ed-oxblood);
    transition: opacity 0.2s ease;
}
body.edition .ed-facts-strip-link:hover { opacity: 0.7; }

@media (max-width: 720px) {
    .ed-facts-strip-inner {
        flex-direction: column;
        gap: 0.7rem;
        font-size: 0.8rem;
    }
    .ed-facts-strip-inner > span:not(.ed-facts-strip-key):not(:last-of-type)::after { display: none; }
}