/* Shared page rhythm. Page-specific CSS handles composition, not type scales. */
:root {
  --page-width: 1280px;
  --page-gutter: clamp(20px, 3.3vw, 48px);
  --page-top: 56px;
  --space-section: 48px;
  --space-heading: 16px;
  --space-grid: 20px;
  --space-card: 24px;
  --radius-card: 24px;
  --radius-control: 14px;
  --type-title: clamp(32px, 3.75vw, 52px);
  --type-section: clamp(24px, 2.25vw, 30px);
  --type-card: 22px;
  --type-lead: 16px;
  --type-body: 15px;
  --type-small: 12px;
  --type-label: 10px;
  --line-body: 1.75;
}

@media screen {
  .editorial-page { padding-bottom: 0; }
  .editorial-page main {
    width: 100%; max-width: var(--page-width); margin-inline: auto;
    padding: var(--page-top) var(--page-gutter) 128px;
    animation: page-enter .25s ease-out;
  }
  .editorial-page main .page-heading { animation: none; }
  @keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }
  .editorial-page main :is(.breadcrumbs, .journal-breadcrumb) {
    min-height: 20px; margin: 0 0 32px; gap: 8px;
    font-size: var(--type-small); line-height: 1.65; color: var(--muted);
  }
  .editorial-page main > :is(.page-heading, .directory-hero, .club-hero, .hub-hero, .journal-heading, .journal-article-header, .club-profile-hero) {
    margin: 0 0 var(--space-section); max-width: none; text-align: left;
  }
  .editorial-page main :is(.club-hero, .hub-hero) {
    grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-section); align-items: start;
  }
  .editorial-page main .journal-heading { display: block; }
  .editorial-page main :is(.page-heading, .directory-hero, .journal-heading, .journal-article-header) h1 { max-width: 1000px; }
  .editorial-page main h1 {
    font-size: var(--type-title); line-height: 1.12; letter-spacing: -.04em;
    font-weight: 800; margin: var(--space-heading) 0 24px;
    overflow-wrap: break-word; hyphens: manual; text-wrap: balance;
  }
  .editorial-page main :is(.page-heading, .directory-hero, .club-hero > div, .club-profile-hero > div, .journal-heading) > p,
  .editorial-page main :is(.hub-intro, .journal-lead) {
    max-width: 70ch; margin: 0; padding: 0; font-size: var(--type-lead);
    line-height: var(--line-body); color: var(--muted);
  }
  .editorial-page main .hub-promise { font-size: 20px; line-height: 1.4; margin: 0 0 16px; }
  .editorial-page main .eyebrow {
    font-size: var(--type-label); line-height: 1.6; letter-spacing: .12em; font-weight: 800;
  }
  .editorial-page main :is(.journal-article-header > .eyebrow, .journal-byline) { justify-content: flex-start; }
  .editorial-page main .journal-byline { font-size: var(--type-small); margin-top: 24px; }
  .editorial-page main .club-hero-actions { margin-top: 24px; gap: 16px; }
  .editorial-page main :is(.club-hero-note, .hub-stat) { padding: var(--space-card); border-radius: var(--radius-card); }
  .editorial-page main .hub-stat strong { font-size: 40px; letter-spacing: -.04em; }
  .editorial-page main .club-hero-note > strong { font-size: 24px; }

  /* The same heading hierarchy and reading rhythm on guides, lists and legal pages. */
  .editorial-page main h2 {
    font-size: var(--type-section); line-height: 1.25; letter-spacing: -.025em; font-weight: 800;
  }
  .editorial-page main h3 { font-size: var(--type-card); line-height: 1.3; letter-spacing: -.02em; font-weight: 800; }
  .editorial-page main p, .editorial-page main li { font-size: var(--type-body); line-height: var(--line-body); }
  .editorial-page main .page-prose { max-width: 76ch; }
  .editorial-page main .page-prose > :first-child { margin-top: 0; }
  .editorial-page main :is(.page-prose, .journal-prose) h2 { margin: 32px 0 16px; }
  .editorial-page main :is(.page-prose, .journal-prose) p + p { margin-top: 16px; }
  .editorial-page main :is(.directory-section-heading, .hub-results-heading, .journal-section-heading) {
    gap: 20px; margin: 0 0 24px; align-items: end;
  }
  .editorial-page main :is(.directory-section-heading, .hub-results-heading) h2 { margin: 8px 0 0; }
  .editorial-page main > section,
  .editorial-page main :is(.hub-results, .hub-city-directory, .journal-related, .journal-reading-layout) { margin-top: var(--space-section); }
  .editorial-page main :is(.directory-callout, .hub-advice, .journal-city-strip, .club-submit, .faq-section) {
    padding: var(--space-card); border-radius: var(--radius-card);
    margin-block: var(--space-section); max-width: none;
  }
  .editorial-page main .faq-section > h2 { margin: 12px 0 16px; }
  .editorial-page main .faq-items summary { font-size: var(--type-body); line-height: 1.6; padding-block: 16px; }
  .editorial-page main .faq-items details > p { font-size: var(--type-body); line-height: var(--line-body); }
  .editorial-page main :is(.club-info, .journal-prose section) { margin-block: 0 var(--space-section); }
  .editorial-page main .club-info { padding-top: 24px; }
  .editorial-page main .club-info h2 { margin: 0 0 16px; }
  .editorial-page main :is(.directory-main-grid, .directory-guides, .club-grid, .city-grid, .journal-grid, .journal-related-grid, .hub-place-grid) { gap: var(--space-grid); }

  /* Cards retain their purpose but share typography, corners and inner spacing. */
  .editorial-page main :is(.directory-tile, .club-card, .city-card, .club-contact, .planner-form, .journal-toc, .journal-takeaway) {
    padding: var(--space-card); border-radius: var(--radius-card);
  }
  .editorial-page main :is(.journal-card, .gallery-grid > a) { border-radius: var(--radius-card); }
  .editorial-page main :is(.journal-card-copy, .journal-grid > .journal-card:not(.journal-featured) .journal-card-copy) { padding: var(--space-card); }
  .editorial-page main :is(.directory-tile, .club-card, .city-card, .journal-card-copy, .directory-guides, .club-contact, .planner-form, .gallery-grid) :is(h2, h3),
  .editorial-page main .journal-grid > .journal-card:not(.journal-featured) h2 {
    font-size: var(--type-card); line-height: 1.3; letter-spacing: -.02em; margin-block: 12px;
  }
  .editorial-page main .club-card h3 { margin: 4px 0 0; }
  .editorial-page main :is(.directory-tile, .club-card, .city-card, .journal-card-copy, .directory-guides, .club-contact) p { font-size: 14px; line-height: var(--line-body); }
  .editorial-page main .directory-icon { margin-bottom: 24px; }
  .editorial-page main .club-card > p { margin: 20px 0; }
  .editorial-page main :is(.club-card-action, .directory-tile-link, .journal-read) { font-size: 13px; line-height: 1.5; }
  .editorial-page main .city-card h2 { margin-top: 24px; }
  .editorial-page main :is(.hub-data-note, .club-data-note, .journal-editorial-note, .club-source, .journal-sources p, .journal-sources li, .planner-privacy, .planner-estimate) {
    font-size: var(--type-small); line-height: var(--line-body);
  }

  /* Common controls across all content pages, without resizing the map toolbar. */
  .editorial-page main .button { min-height: 48px; padding: 12px 18px; border-radius: var(--radius-control); font-size: 13px; line-height: 1.5; }
  .editorial-page main .text-button { font-size: 13px; line-height: 1.5; }
  .editorial-page main :is(.club-filter, .planner-form, .hub-city-form, .city-filter) label { font-size: var(--type-small); line-height: 1.5; }
  .editorial-page main :is(.club-filter, .planner-form, .hub-city-form, .city-filter) :is(input, select, textarea) {
    min-height: 48px; border-radius: var(--radius-control); padding: 12px; font-size: 14px; line-height: 1.5;
  }
  .editorial-page main .planner-actions .button { min-height: 40px; padding: 8px 12px; font-size: var(--type-small); }
  .editorial-page main .planner-input-row { align-items: end; }
  .editorial-page main .club-filter { padding: var(--space-card); border-radius: var(--radius-card); gap: 16px; }
  .editorial-page main .club-data-note { margin: 0 0 16px; }
  .editorial-page main .journal-cover { max-width: none; margin: 0; }
  .editorial-page main .journal-cover img { border-radius: var(--radius-card); }
  .editorial-page main .club-profile-hero { align-items: flex-start; }
  .editorial-page main .club-profile-hero > div { min-width: 0; }

  /* Compact place cards use one scale both on the map and in filtered lists. */
  .place-card .card-body h2, .editorial-page main .hub-place-grid .card-body h2 { font-size: 16px; line-height: 1.35; letter-spacing: -.02em; }
  .place-card .card-body .address, .editorial-page main .hub-place-grid .card-body .address { font-size: 12px; line-height: 1.65; }
}
@media screen and (prefers-reduced-motion: reduce) {
  .editorial-page main { animation: none; }
}

@media screen and (max-width: 1050px) {
  .editorial-page main :is(.club-hero, .hub-hero) { grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; }
}
@media screen and (max-width: 760px) {
  :root {
    --page-top: 32px; --space-section: 32px; --space-grid: 16px;
    --space-card: 20px; --radius-card: 20px; --type-card: 21px; --type-lead: 15px;
  }
  .editorial-page main { padding-bottom: calc(184px + env(safe-area-inset-bottom)); }
  .editorial-page main :is(.breadcrumbs, .journal-breadcrumb) { margin-bottom: 24px; }
  .editorial-page main :is(.club-hero, .hub-hero) { display: block; }
  .editorial-page main h1 { margin-block: 12px 20px; }
  .editorial-page main .hub-stat { margin-top: 24px; }
  .editorial-page main :is(.directory-section-heading, .hub-results-heading, .journal-section-heading) { margin-bottom: 20px; }
  .editorial-page main :is(.club-filter, .planner-form, .hub-city-form, .city-filter) :is(input, select, textarea) { font-size: 16px; }
  .editorial-page main .journal-reading-layout { margin-top: var(--space-section); }
  .editorial-page main .journal-prose section { margin-top: 32px; }
  .editorial-page main .club-profile-hero > .club-monogram { margin-bottom: 24px; }
  .editorial-page main .club-contact .button { max-width: 100%; white-space: normal; }
}