/* ============================================================
   Snappytappy — shared DESKTOP rules. Link once per page:
     <link rel="stylesheet" href="st-desktop.css">
   (Pair with st-mobile.css / st-mobile.js / st-chrome.js.)

   SINGLE SOURCE OF TRUTH for the desktop-pass refinements that mirror
   the mobile globals. Everything here is inside @media (min-width:821px)
   so mobile is never touched. Change a value ONCE here → every page that
   links this file updates. Genuinely page-specific desktop tweaks still
   live in that page's own <style id="st-desktop-pass"> block.
   ============================================================ */
@media (min-width:821px){

  /* Eyebrow / mono labels use the real IBM Plex Mono web font (identical on
     every device) instead of the OS-default monospace stack. */
  :root { --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; }

  /* Every CTA button → 14px corner radius, to match the gallery-image cards.
     CTAs are tagged data-joincta (header/menu Join) or data-hoverinvert (all the
     body CTAs: hero, Base Camp, Journal, Follow, When-to-Go, map "View gallery",
     Subscribe…). Chips / tags / continent pills / badges carry NEITHER hook, so
     they keep their fully-rounded pill shape. The email field is matched
     explicitly so it lines up with its Subscribe button. */
  [data-joincta],
  [data-hoverinvert],
  [data-hero-btn],
  [data-gallerycta],
  input[type="email"] { border-radius:14px !important; }

  /* CTA icon + arrow system: navigational CTAs show a leading icon and/or a
     trailing arrow on desktop too (mirrors the mobile ctaicon/ctaarrow hooks). */
  [data-m="ctaarrow"], [data-m="ctaicon"] { display:inline-block !important; }

  /* Mobile-only forced line breaks (e.g. hero-title splits): never break on desktop,
     so desktop headlines keep wrapping naturally. */
  br.st-mbr { display:none !important; }

  /* Homepage "The year in light" season cards — round to 16px on desktop to match
     the mobile treatment (they were square). These hooks exist only on the homepage,
     so this rule is inert on every other page. Purely additive — no markup changed. */
  [data-m="seasons"] > * { border-radius:16px !important; }

  /* ---- Desktop vertical rhythm (journals) — the "Compact" standard ----
     The journal exports use ~15 different top-margins between sections (14–80px), so the
     desktop rhythm was uneven. Snap them to ONE value per tier — tight 24 / medium 36 /
     major section-break 56 — keyed on each section wrapper's runtime-serialised inline
     top-margin. Only inline `margin: N auto 0px` (centred section blocks) are matched, which
     is journal-only: main pages space with padding (no match); the homepage's lone margin-auto
     lives in a <style> rule, not an inline attribute. The report-card −80px overlap is a
     different signature and is left untouched. Mobile is unaffected (this whole file is
     min-width:821px). Change a tier value ONCE here → every journal updates. */
  [data-screen-label] [style*="margin: 56px auto 0px"],
  [data-screen-label] [style*="margin: 60px auto 0px"],
  [data-screen-label] [style*="margin: 64px auto 0px"],
  [data-screen-label] [style*="margin: 80px auto 0px"] { margin-top:56px !important; }
  [data-screen-label] [style*="margin: 32px auto 0px"],
  [data-screen-label] [style*="margin: 34px auto 0px"],
  [data-screen-label] [style*="margin: 36px auto 0px"],
  [data-screen-label] [style*="margin: 40px auto 0px"],
  [data-screen-label] [style*="margin: 44px auto 0px"] { margin-top:36px !important; }
  [data-screen-label] [style*="margin: 14px auto 0px"],
  [data-screen-label] [style*="margin: 16px auto 0px"],
  [data-screen-label] [style*="margin: 18px auto 0px"],
  [data-screen-label] [style*="margin: 24px auto 0px"],
  [data-screen-label] [style*="margin: 26px auto 0px"],
  [data-screen-label] [style*="margin: 28px auto 0px"],
  [data-screen-label] [style*="margin: 30px auto 0px"] { margin-top:24px !important; }
}