/* ─────────────────────────────────────────────────────────────────
   The Scottsdale Signal — mobile.css
   Fresh-from-Figma mobile design (Figma node 108:3307).

   Loaded from default.hbs with media="(max-width: 760px)" so these
   rules only fire on phone-sized viewports. Everything in here is
   wrapped in a defensive @media as well so if the link tag's media
   attr is ever stripped (e.g. by a Ghost upgrade or theme linter),
   the rules still scope correctly.

   Design philosophy:
     - 16px side padding everywhere instead of 60/144 desktop gutters.
     - Single-column stacking; no 3- or 4-column grids.
     - Type sizes recalibrated for ~390px viewport readability.
     - Lists over grids — image left/right of headline at 96–112px.
     - Horizontal-scroll only where the content is genuinely a rail
       (section nav, events, latest-strip).

   Token reuse: pulls all colors, fonts, and weights from screen.css
   :root variables. Don't redefine tokens here.
   ─────────────────────────────────────────────────────────────────*/

@media (max-width: 760px) {

  /* ── Base ────────────────────────────────────────────────────── */
  body { font-size: 15px; line-height: 1.5; }

  /* Layout helpers exposed in screen.css get a phone gutter. */
  .wrap-60,
  .wrap-144 { padding-left: 16px; padding-right: 16px; }


  /* ── Utility bar (Figma 108:4237 — 402×49) ───────────────────────
     Single horizontal row that fits the full mobile viewport. Each
     pill is separated by a 1px tall × 14px high accent-red vertical
     pipe. Hairlines top + bottom. Pills CAN scroll horizontally if
     they overflow, but at 402px the date + weather + AQI fit; only
     the optional pollen pill (hidden by default) pushes overflow. */
  .util {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 0;
    min-height: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .util::-webkit-scrollbar { display: none; }
  .util > * {
    /* Each pill keeps its own padding; the leading vertical pipe is
       a ::before so it sits exactly at the pill's left edge. */
    position: relative;
    padding: 0 14px;
    flex-shrink: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .util > *::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: var(--accent);
  }
  /* Closing pipe on the right edge of the row. */
  .util::after {
    content: "";
    flex-shrink: 0;
    align-self: center;
    width: 1px;
    height: 14px;
    background: var(--accent);
  }
  .util-date {
    font-family: var(--label);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--ink);
  }
  .util-pill-text,
  .util-pill-text-muted { font-size: 13px; letter-spacing: -0.13px; }
  .aqi-label,
  .aqi-status { font-size: 12px; letter-spacing: 1.2px; }
  .util-pill-icon { width: 14px; height: 14px; }


  /* ── Masthead (Figma 108:3329 — 402×98.51) ────────────────────────
     Just the blackletter wordmark + UNBIASED LOCAL NEWS tagline,
     centered, with hairlines top + bottom. The "SCOTTSDALE & PARADISE
     VALLEY" tag-left and the desktop auth row (.mast-cta) are hidden;
     auth lives in the separate .mast-mobile-actions row below.
     Tagline is RED here (per Figma) — not the desktop ink color. */
  /* Figma 108:3329 — 18px horizontal padding, items centered both
     axes, NO bottom border (the hairline lives on the next row's
     border-top per 108:4258). The eyebrow ("UNBIASED LOCAL NEWS")
     sits 0px below the logotype with min-w-full / centered text. */
  .mast {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 18px 16px;
    text-align: center;
    border-bottom: 0;
  }
  .mast-tag-left,
  .mast-cta { display: none; }
  .mast-center {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  /* Override the desktop wordmark sizing. The 3 inner SVG slices use
     PERCENTAGE insets that only land correctly when the parent's
     aspect ratio matches the original Figma frame — 520:137 (≈ 3.79).
     Figma 108:3357 says 298×78.5 on mobile, which is the same ratio.
     At max-width: 298px (390px viewport with 18px gutters → 354px
     interior; clamp at 298px to match Figma exactly), computed
     height ≈ 78px. */
  .mast-logotype {
    position: relative;
    width: 100%;
    max-width: 298px;
    height: auto;
    aspect-ratio: 520 / 137;
  }
  .mast-tagline {
    font-family: var(--label);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 4.8px;       /* Figma 108:3383 — 4.8px ≈ 40% of font-size */
    color: var(--accent);
    text-transform: uppercase;
  }


  /* ── Mobile auth row (Figma 108:4258) ───────────────────────────
     Hamburger (red, 3-line) on the left pushed by margin-right:auto;
     Sign In ghost-bordered button + Subscribe-$7/mo accent button on
     the right with a 12px inter-button gap. 1px hairline TOP border
     (the masthead above has no bottom border per spec). 12px vertical
     padding, 18px horizontal padding. Buttons are rectangular with a
     4px corner radius (NOT pills) — Figma 108:4261/4263 spec. */
  .mast-mobile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .mast-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    color: var(--accent);
    padding: 0;
    cursor: pointer;
    margin-right: auto;
  }
  .mast-menu-btn svg {
    width: 24px;
    height: 18px;
    stroke: currentColor;
  }
  .mast-mobile-actions .mast-btn {
    font-family: var(--ui);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.45px;
    padding: 10px 16px;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
  }
  .mast-mobile-actions .mast-btn--ghost {
    border: 1.35px solid var(--ink);
    color: var(--ink);
    background: transparent;
  }
  .mast-mobile-actions .mast-btn--cta {
    background: var(--accent);
    color: var(--bg);
    border: 1.35px solid var(--accent);
  }


  /* ── Section nav (Figma 108:3390) ───────────────────────────────
     SINGLE-ROW horizontal scroll. 18px padding all sides, 24px gap
     between items, News Cycle Bold 12px / ls 2.4px / line-height
     1.5, ink color, uppercase. Hairline top + bottom borders. Desktop
     sticky-nav behavior is dropped (position: static). Touch-scroll
     panning is enabled; the user swipes the rail to reveal LIFESTYLE,
     FOOD, THE WATCHDOG, THE WIRE that overflow off the right edge. */
  .nav {
    display: flex;
    gap: 24px;
    padding: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    position: static;
    box-shadow: none;
    background: var(--bg);
    justify-content: flex-start;
    flex-wrap: nowrap;
    /* Without this, the touch-scroll on iOS can vertically jitter; the
       horizontal-only override locks it to the X axis. */
    touch-action: pan-x;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    font-family: var(--label);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 2.4px;
    color: var(--ink);
    text-transform: uppercase;
    padding: 0;
    border: 0;
    background: transparent;
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
  }
  .nav .nav-premium {
    background: transparent;
    color: var(--accent);
    border: 0;
    padding: 0;
  }
  .nav .nav-premium::before { display: none; }


  /* ── Right Now strip (Figma 108:3399 — single-card carousel) ────
     Black bg, 18px padding all sides, 8px column gap between header
     row and card. Header row: red dot 5.4px + "RIGHT NOW" (News Cycle
     Bold 12px red) + "Updated X min ago" (Inter Medium 12px muted).
     Card: tall white hairline on the left, then Newsreader Regular
     18px headline + muted Inter Medium 12px caption.

     CAROUSEL: instead of stacking 3 cards vertically, the
     [data-rightnow-cards] track becomes a horizontal scroll-snap
     container with each card pinned to 100% width. main.js auto-
     advances scrollLeft every 4s, looping back to the first card
     after the third. The user can also swipe manually. */
  .rightnow {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 18px;
    background: var(--bg-dark);
  }
  .rightnow-eyebrow-col {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .rightnow-eyebrow {
    font-family: var(--label);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 1.2px;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .rightnow-dot {
    width: 5.4px;
    height: 5.4px;
    border-radius: 50%;
    background: var(--accent);
    /* Kill the desktop pulse — distracting on a phone. */
    box-shadow: none;
    animation: none;
  }
  .rightnow-updated {
    font-family: var(--ui);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    color: var(--muted);
    letter-spacing: -0.12px;
    white-space: nowrap;
  }
  /* Carousel track. flex row, each card flex: 0 0 100% so only one
     card is visible at a time. overflow-x hidden by default; JS
     animates scrollLeft. scroll-snap keeps any user swipes locked to
     a card position. */
  .rightnow-cards {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    /* CRITICAL: override desktop's `flex: 1 1 0` and `align-items:
       center`. On desktop the parent .rightnow is flex-row so basis:0
       means width:0 + grow:1 fills the row. On mobile .rightnow is
       flex-column, so basis:0 was collapsing the track to HEIGHT:0
       and hiding every card. flex:0 0 auto sizes to content. */
    flex: 0 0 auto;
    align-items: stretch;
    /* Belt-and-suspenders min-height in case some other rule still
       interferes — guarantees the card band is visible. */
    min-height: 76px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .rightnow-cards::-webkit-scrollbar { display: none; }
  /* Card: 100% of the track width, vertical hairline on the left,
     16px gap between rule and content (Figma 108:3406 — 16.2px). */
  .rightnow-card {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    /* Match track min-height so the card always reserves visible
       space even before JS-rendered content settles. */
    min-height: 76px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    align-items: center;            /* center divider + body vertically */
    gap: 16px;
    padding: 0;
    border-left: 0;
    border-top: 0;
    margin: 0;
    text-decoration: none;
    color: var(--bg);
  }
  /* Override desktop rule that adds margin-top + border-top to
     subsequent cards. In carousel mode the cards are siblings on
     the X axis, not Y. */
  .rightnow-card + .rightnow-card {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  /* Bring the desktop-hidden vertical divider back as a tall thin
     white hairline on the left of each card. 62.11px tall per Figma
     108:3407. */
  .rightnow-divider {
    display: block;
    flex: 0 0 1.35px;
    width: 1.35px;
    height: 62.11px;
    background: rgba(247, 246, 242, 0.85);
    align-self: center;
  }
  .rightnow-card-body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
    justify-content: center;
  }
  .rightnow-headline {
    font-family: var(--serif);
    font-weight: 400;             /* Newsreader Regular per Figma 108:3409 */
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.36px;
    color: var(--bg);
    margin: 0;
    /* Limit to 2 lines so the carousel has a uniform height across
       items with different headline lengths. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rightnow-meta {
    font-family: var(--ui);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.12px;
    color: var(--muted);
  }


  /* ── Hero — "Clear. Local. Unbiased." ────────────────────────── */
  /* Centered editorial display block. Drops the desktop horizontal
     CTA arrangement; CTA centers under the dek. */
  .hero { padding: 28px 16px 32px; }
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .hero-eyebrow {
    font-family: var(--label);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2.2px;
    color: var(--accent);
  }
  .hero-headstack { display: flex; flex-direction: column; gap: 10px; }
  .hero-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 44px;
    line-height: 1.0;
    letter-spacing: -1.6px;
    margin: 0;
    color: var(--ink);
  }
  .hero-sub {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.32px;
    color: var(--muted);
    margin: 0;
    max-width: 32ch;
    margin-inline: auto;
  }
  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--label);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.4px;
    color: var(--accent);
    text-transform: uppercase;
  }
  .hero-cta-arrow { width: 14px; height: 14px; }


  /* ── Beats grid (Business / Real Estate / Dining) ────────────── */
  /* Stack columns 1-up. Each column keeps its lead card + 2 secondary
     items. Lead card image goes full-width on top. */
  .beats {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 28px 16px;
    background: var(--bg);
  }
  .beat-col { display: flex; flex-direction: column; gap: 14px; }
  .beat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 6px;
  }
  .beat-eyebrow {
    font-family: var(--label);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2.5px;
    color: var(--accent);
    text-transform: uppercase;
  }
  .beat-viewall {
    font-family: var(--label);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.4px;
    color: var(--accent);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .beat-viewall-arrow { width: 10px; height: 10px; stroke: var(--accent); }

  /* Lead card — image-first stack. */
  .beat-lead { display: flex; flex-direction: column; gap: 12px; }
  .beat-lead-image,
  .beat-lead-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    background: var(--placeholder);
  }
  .beat-lead-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.6px;
    margin: 0;
    color: var(--ink);
  }
  .beat-lead-title a { color: inherit; }

  /* Secondary list items — text-only, dense. */
  .beat-item-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.34px;
    margin: 0 0 8px;
    color: var(--ink);
  }
  .beat-card-body { display: flex; flex-direction: column; gap: 8px; }
  .beat-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .beat-meta {
    font-family: var(--ui);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: -0.11px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.3;
  }
  .beat-bookmark {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--rule-soft);
    border-radius: 999px;
    color: var(--muted);
    flex-shrink: 0;
  }
  .beat-bookmark svg { width: 10px; height: 12px; }
  .beat-rule {
    height: 1px;
    background: var(--rule-soft);
    margin-top: 4px;
  }


  /* ── Latest strip — 4 vertical rows on phone ─────────────────── */
  .latest-strip {
    padding: 24px 16px;
    background: var(--ink);
    color: var(--bg);
  }
  .latest-strip-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .latest-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .latest-col:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .latest-col-rule { display: none; }   /* desktop has a vertical rule; mobile uses horizontal borders instead */
  .latest-col-body { display: flex; flex-direction: column; gap: 6px; }
  .latest-col-eyebrow {
    font-family: var(--label);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.6px;
    color: var(--accent);
    text-transform: uppercase;
  }
  .latest-col-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.34px;
    color: var(--bg);
    margin: 0;
  }
  .latest-col-title--empty {
    font-style: italic;
    color: rgba(247, 246, 242, 0.55);
  }
  .latest-col-meta {
    font-family: var(--ui);
    font-size: 11px;
    color: rgba(247, 246, 242, 0.6);
    letter-spacing: -0.11px;
  }


  /* ── The Scottsdale Table (lifestyle 4-up → stack) ──────────── */
  .lifestyle { padding: 32px 16px; }
  .lifestyle-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }
  .lifestyle-stack { display: flex; flex-direction: column; gap: 4px; }
  .lifestyle-eyebrow {
    font-family: var(--label);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2.4px;
    color: var(--accent);
    text-transform: uppercase;
  }
  .lifestyle-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.0;
    letter-spacing: -1.0px;
    margin: 0;
    color: var(--ink);
  }
  .lifestyle-sub {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
    margin: 4px 0 0;
  }
  .lifestyle-cta {
    font-family: var(--label);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.4px;
    color: var(--accent);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .lifestyle-cta-arrow { width: 12px; height: 12px; stroke: var(--accent); }
  .lifestyle-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .lifestyle-card { display: flex; flex-direction: column; gap: 10px; }
  .lifestyle-card-image,
  .lifestyle-card-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    background: var(--placeholder);
  }
  .lifestyle-chip {
    display: inline-block;
    font-family: var(--label);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.4px;
    background: var(--accent);
    color: var(--bg);
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .lifestyle-card-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.36px;
    margin: 0 0 8px;
    color: var(--ink);
  }


  /* ── Events rail ────────────────────────────────────────────── */
  .events {
    padding: 24px 0 24px;
    background: var(--bg);
  }
  .events-head,
  .events-eyebrow,
  .events-title,
  .events-cta {
    /* Bring the head row inside the 16px padding even though the
       horizontal scroll strip itself bleeds full-width. */
    padding-left: 16px;
    padding-right: 16px;
  }
  .events-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .events-title {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.8px;
    font-weight: 600;
    margin: 0;
  }
  .events-grid,
  .events-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 8px;
    scrollbar-width: none;
  }
  .events-grid::-webkit-scrollbar,
  .events-rail::-webkit-scrollbar { display: none; }
  .events-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }


  /* ── AI Notice / methodology block ──────────────────────────── */
  .ainotice {
    padding: 36px 16px;
    background: var(--bg);
  }
  .ainotice-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 18px;
  }
  .ainotice-stack { display: flex; flex-direction: column; gap: 6px; }
  .ainotice-eyebrow {
    font-family: var(--label);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2.2px;
    color: var(--accent);
    text-transform: uppercase;
  }
  .ainotice-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.9px;
    margin: 0;
  }
  .ainotice-sub {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: var(--muted);
    margin: 0;
  }
  .ainotice-tiles {
    width: 100%;
    height: 200px;
  }
  .ainotice-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }


  /* ── Subscribe / pricing block ──────────────────────────────── */
  .subscribe {
    flex-direction: column;
    padding: 36px 16px;
    gap: 20px;
  }
  .subscribe-pricing,
  .subscribe-detail {
    width: 100%;
    max-width: none;
  }
  .subscribe-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.0;
    letter-spacing: -1.0px;
    margin: 0 0 8px;
  }
  .subscribe-sub {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: var(--muted);
    margin-bottom: 16px;
  }
  .subscribe-price {
    font-family: var(--serif);
    font-size: 44px;
    letter-spacing: -1.6px;
    font-weight: 600;
  }
  .subscribe-cta,
  .subscribe-trial {
    width: 100%;
    text-align: center;
  }


  /* ── Site footer ────────────────────────────────────────────── */
  .footer {
    padding: 28px 16px 36px;
    background: var(--bg-dark);
    color: var(--bg);
  }
  .footer__top,
  .footer__bottom,
  .footer__cols {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
  }
  .footer__brand,
  .footer__links {
    width: 100%;
  }
  .footer__logotype {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
  }
  .footer__logotype img { height: 32px; width: auto; }
  .footer__tagline {
    font-family: var(--ui);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(247, 246, 242, 0.7);
    margin: 0 0 12px;
  }
  .footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .footer__badge {
    font-family: var(--label);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 1.2px;
    border: 1px solid rgba(247, 246, 242, 0.3);
    color: rgba(247, 246, 242, 0.7);
    padding: 4px 8px;
    border-radius: 999px;
  }
  .footer__col {
    width: 100%;
    border-bottom: 1px solid rgba(247, 246, 242, 0.1);
    padding-bottom: 14px;
  }
  .footer__col:last-child { border-bottom: 0; }
  .footer__col-title {
    font-family: var(--label);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.6px;
    color: var(--bg);
    text-transform: uppercase;
    margin: 0 0 8px;
  }
  .footer__col-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .footer__col-list a {
    font-family: var(--ui);
    font-size: 13px;
    color: rgba(247, 246, 242, 0.75);
  }
  .footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-family: var(--ui);
    font-size: 11px;
    color: rgba(247, 246, 242, 0.5);
    margin-top: 16px;
  }


  /* ── Closings hero (real-estate tag page) ───────────────────── */
  .closings { padding: 24px 16px; }
  .closings-title {
    font-family: var(--serif);
    font-size: 28px;
    letter-spacing: -0.8px;
    line-height: 1.05;
  }
  .closings-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }


  /* ── Top closings strip on homepage (Round-9 ship) ──────────── */
  .top-closings,
  .top-closings-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .top-closings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }


  /* ── Archive page (paginated index) ─────────────────────────── */
  .archive { padding: 24px 16px 36px; }
  .archive-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .archive-title {
    font-family: var(--serif);
    font-size: 32px;
    letter-spacing: -1.0px;
    line-height: 1.0;
  }
  .archive-card-title {
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: -0.4px;
    font-weight: 600;
  }


  /* ── Tag hero (beat tag pages) ──────────────────────────────── */
  .tag-hero { padding: 28px 16px; }
  .tag-hero-title {
    font-family: var(--serif);
    font-size: 36px;
    letter-spacing: -1.2px;
    line-height: 1.0;
  }
  .tag-hero-sub {
    font-size: 15px;
    line-height: 1.4;
  }


  /* ── Article body (post.hbs) — keeps existing mobile sizes from
        screen.css, but tightens the body width and content padding
        so headlines don't crowd the screen edges on small phones. */
  .article {
    padding: 0 16px;
    margin: 24px auto 40px;
  }
  .article-share { font-size: 11px; padding: 5px 10px; }


  /* ── Hide desktop-only ornamentation ────────────────────────── */
  /* Sticky desktop CTAs / sidebars that don't survive the layout
     shift gracefully are hidden outright at this viewport. */
  .desktop-only { display: none !important; }


  /* ── Lock the viewport horizontally ─────────────────────────────
     Prevents the whole page from rubber-band scrolling left/right
     when the user scrolls down, which iOS/Android can do whenever
     ANY descendant ends up wider than the viewport.

     Three layers of defense, in order of severity:

       1. clamp html + body to the viewport width and forbid horizontal
          overflow on both. Doing it on `html` (not just `body`) is
          required for iOS Safari — body alone leaks.

       2. set overscroll-behavior-x: none so even if a child does
          horizontal-scroll (the .util pill rail, the section nav,
          the events strip), the gesture doesn't bubble up to the
          document and trigger a page-level swipe.

       3. neutralize the editor "wide" + "full" body cards which use
          100vw + negative margins on desktop — those are the most
          common silent overflow culprit on Ghost themes. On mobile
          they collapse back to the article's normal column width. */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
    overscroll-behavior-x: none;
  }
  body {
    width: 100%;
    position: relative;
  }

  /* Top-level chrome should never extend past the viewport even if
     a child miscalculates. Using 100% (not 100vw) avoids the iOS
     scrollbar-gutter quirk where 100vw == window.innerWidth +
     scrollbar. */
  header, section, nav, footer, article, main, aside {
    max-width: 100%;
  }

  /* Images / iframes / videos default to 100% — already enforced in
     screen.css with `img { max-width: 100%; }` but we re-state for
     iframes which Ghost embeds (YouTube, X) can otherwise blow out. */
  img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
  }

  /* Ghost editor "wide" and "full" body cards. On desktop these are
     intentionally wider than the column (-100px margins, 100vw); on
     mobile that geometry overflows by hundreds of pixels. Reset to
     normal in-flow widths. */
  .article-body .kg-width-wide,
  .article-body .kg-image-card.kg-width-wide,
  .article-body .kg-card.kg-width-wide,
  .article-body .kg-width-full,
  .article-body .kg-image-card.kg-width-full,
  .article-body .kg-card.kg-width-full {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Hide desktop-only ornamentation that doesn't reflow gracefully. */
  .desktop-only { display: none !important; }

}