/** Shopify CDN: Minification failed

Line 3153:0 Unexpected "}"

**/
/* Starlog overrides — layered on top of Baseline (Brutalist preset)
   Edit here, not in base.bundle.css (which is theme source). */

/* ============================================================
   STARLOG DESIGN SYSTEM — TOKENS
   Single source of truth for typography, spacing, and color used
   across the homepage. Both custom Starlog sections AND Baseline
   native sections respect these tokens via the consolidation
   overrides further down.
   ============================================================ */

:root {
  /* Color */
  --starlog-accent-gold: #edc331;
  /* Dark-gold variant for body-text use on cream backgrounds.
     #edc331 fails WCAG AA contrast (1.44:1) against cream when used
     as text. #7a5e0e passes AA at ~5:1. Keep --starlog-accent-gold
     for decorative use (rules, hover states, dark-bg eyebrows, hero
     halos). Use --starlog-accent-gold-text for any text element
     rendered on cream/scheme1 backgrounds. */
  --starlog-accent-gold-text: #7a5e0e;
  --starlog-neutral-dark: #787878;
  --starlog-neutral-light: #b9b9b9;
  --starlog-cream: #f2f2eb;
  --starlog-paper: #e8e3d3;
  --starlog-ink: #0a0a0a;
  --starlog-text-soft: rgba(0, 0, 0, 0.78);
  --starlog-text-mute: rgba(0, 0, 0, 0.55);
  --starlog-text-on-dark: #fafaf7;
  --starlog-text-on-dark-soft: rgba(250, 250, 247, 0.78);
  --starlog-text-on-dark-mute: rgba(250, 250, 247, 0.55);

  /* Borders */
  --starlog-rule: rgba(0, 0, 0, 0.12);
  --starlog-rule-on-dark: rgba(250, 250, 247, 0.15);
  --starlog-hairline-w: 1px;

  /* Typography ladder. clamp(min, vw, max). All sections size from these. */
  --type-eyebrow-size: 12px;
  --type-eyebrow-tracking: 0.32em;
  --type-display-mass: clamp(48px, 7vw, 112px);
  --type-display-major: clamp(40px, 6vw, 88px);
  --type-headline: clamp(34px, 5vw, 64px);
  --type-deck: clamp(20px, 2.4vw, 32px);
  --type-lede: clamp(15px, 1.25vw, 19px);
  --type-body: 17px;
  --type-caption: 13px;

  /* Vertical rhythm. Section padding scales with viewport. */
  --space-section-y: clamp(80px, 12vw, 160px);
  --space-section-y-tight: clamp(56px, 8vw, 104px);
  --space-section-x: clamp(24px, 6vw, 96px);
  --space-content-gap: clamp(24px, 4vh, 48px);
  --space-stack-tight: 18px;

  /* Optical tuning specifically for Fraunces (live default).
     Different fonts want different values; if we swap to GT Sectra,
     these update. */
  --type-display-tracking: -0.02em;
  --type-display-leading: 0.95;
  --type-headline-tracking: -0.015em;
  --type-headline-leading: 1.05;
  --type-body-leading: 1.55;
}

/* When Anton is active (font tester compare), tighten tracking + leading
   for its condensed character. */
body.font-test-anton {
  --type-display-tracking: -0.025em;
  --type-display-leading: 0.88;
  --type-headline-tracking: -0.01em;
  --type-headline-leading: 0.95;
}

/* Sticky header offset for anchor links. */
:where([id]) {
  scroll-margin-top: 80px;
}

/* CTA hover — accent gold on hover. */
.button {
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.button:hover,
.button:focus-visible {
  background-color: var(--starlog-accent-gold);
  color: #000;
  border-color: var(--starlog-accent-gold);
}

/* PRE-ORDER kicker. */
.preorder-kicker {
  display: inline-block;
  background-color: var(--starlog-accent-gold);
  color: #000;
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(12px, 1vw, 14px);
  padding: 6px 12px;
  margin: 0 0 1em;
  line-height: 1.2;
}

.preorder-kicker strong {
  font-weight: inherit;
}

/* Hide announcement bar belt-and-suspenders. */
[id*="shopify-section"][id*="announcement-bar"],
.shopify-section-announcement-bar,
section[id*="announcement-bar"] {
  display: none !important;
}

/* Hide ACCOUNT from the top nav. Account remains functional via direct
   URL (/account) and can be linked from the footer menu. Customer
   accounts stay enabled in admin; we just remove the header chrome. */
.shopify-section[id*="header"] shopify-account,
.shopify-section[id*="header"] shopify-account *,
.shopify-section[id*="header"] [class*="customer-account"] {
  display: none !important;
}


/* ============================================================
   STARLOG 50TH ANNIVERSARY DESIGN SYSTEM
   New components introduced for the 1976 / 2026 relaunch.
   ============================================================ */

/* Scroll-revealed elements. JS adds .is-revealed when in viewport. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Minimum-stagger reveal cascade. Total time from first to last
   element now ~150ms (was 400ms). Preserves the subtle order-of-arrival
   effect without holding hero copy invisible on initial load. */
[data-reveal-delay="1"] { transition-delay: 30ms; }
[data-reveal-delay="2"] { transition-delay: 60ms; }
[data-reveal-delay="3"] { transition-delay: 90ms; }
[data-reveal-delay="4"] { transition-delay: 120ms; }
[data-reveal-delay="5"] { transition-delay: 150ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   Anniversary hero
   Replaces the generic image hero with a typographic monument.
   ------------------------------------------------------------ */

/* Replace the "The Lodestar" h2 headline in the 04 · The Newsletter
   section with the stylized brand logo asset. The h2 itself keeps
   its text content in place (so screen readers and SEO still see
   "The Lodestar") — we just zero out its visual font-size and paint
   the logo via a ::before. Width scales with viewport so the logo
   sits naturally next to the subscribe form across desktop, tablet,
   and mobile. Targets the section by its template-stable id suffix
   (assigned in templates/index.json). */
[id$="__newsletter_AzrGXU"] h2 {
  font-size: 0;
  line-height: 0;
  margin: 0;
}
[id$="__newsletter_AzrGXU"] h2::before {
  content: "";
  display: block;
  width: clamp(200px, 24vw, 280px);
  aspect-ratio: 400 / 60;
  background: url("lodestar-logo.png") no-repeat left center / contain;
}

/* Same treatment for the 05 · The Podcast section. The podcast lockup
   is taller per glyph (1000x338 vs 400x60 for the Lodestar mark) so
   the width clamp is smaller to keep the rendered height visually
   balanced with the Lodestar mark sitting one section above. */
[id$="__image_with_text_V8fNgL"] h2 {
  font-size: 0;
  line-height: 0;
  margin: 0;
}
[id$="__image_with_text_V8fNgL"] h2::before {
  content: "";
  display: block;
  width: clamp(160px, 18vw, 220px);
  aspect-ratio: 1000 / 338;
  background: url("the-starlog-podcast-logo.png") no-repeat left center / contain;
}

/* The custom-liquid Shopify section template wraps the section's
   content in a div with `.py-section-vertical-spacing` (Baseline
   default = ~36px each side). That default read as a bug-level gap
   on mobile. Zero would feel too app-snappy for a publication-style
   site. Right answer: a small intentional cream zone above + below
   the hero that scales with viewport.
   ~12px on iPhone, ~16-18px on tablet, ~20-24px on desktop.
   The zone reads as the deliberate "settle" beat that comps like
   Aeon, Lapham's, and Nat Geo use between the masthead band and
   the first content frame — short, brutalist, editorial. */
[id*="__anniversary_hero"] .py-section-vertical-spacing {
  padding-top: clamp(12px, 1.5vw, 24px) !important;
  padding-bottom: clamp(12px, 1.5vw, 24px) !important;
}

.starlog-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: var(--starlog-ink);
  color: var(--starlog-text-on-dark);
  overflow: hidden;
  padding: clamp(56px, 8vh, 96px) var(--space-section-x);
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Atmospheric depth — center halo + corner vignette so the type sits
   in a warm dark center, not a flat black field. The gold halo subtly
   echoes the 50 mark in the lower half of the hero. Pulled stronger
   than a typical "subtle" pass because at the 100vh scale of the hero,
   anything below ~8% radial opacity disappears. */
.starlog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 70%, rgba(237, 195, 49, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(237, 195, 49, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 110% 90% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

.starlog-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.starlog-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 38%) 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.starlog-hero__cover {
  margin: 0;
  position: relative;
  width: 100%;
  max-width: 440px;
  justify-self: center;
}

.starlog-hero__cover-img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.45);
}

.starlog-hero__cover-caption {
  font-family: var(--font-body-family, inherit);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.55);
  margin: 16px 0 0;
  text-align: center;
  font-weight: 500;
}

.starlog-hero__copy {
  display: grid;
  gap: clamp(20px, 3vh, 36px);
  text-align: left;
  justify-items: start;
}

.starlog-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--starlog-accent-gold);
}

.starlog-hero__eyebrow::before,
.starlog-hero__eyebrow::after {
  content: "";
  display: inline-block;
  width: 48px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.85;
}

.starlog-hero__headline {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: var(--type-display-mass);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
  text-transform: uppercase;
  margin: 0;
  color: var(--starlog-text-on-dark);
}

.starlog-hero__headline em {
  font-style: italic;
  color: var(--starlog-accent-gold);
  display: block;
}

/* Hero deck — sub-headline that names what Starlog IS for cold
   traffic. Sits between the typographic headline and the 50 mark.
   Editorial-italic, off-white, comfortable max-width. */
.starlog-hero__deck {
  font-family: var(--font-heading-family, inherit);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--starlog-text-on-dark);
  margin: clamp(8px, 1.2vw, 16px) 0 0;
  max-width: 36ch;
  text-align: center;
}

.starlog-hero__lede {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-lede);
  line-height: var(--type-body-leading);
  max-width: 56ch;
  color: var(--starlog-text-on-dark-soft);
  margin: 0;
  letter-spacing: 0.005em;
}

.starlog-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.starlog-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--starlog-accent-gold);
  color: #000 !important;
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(13px, 1vw, 15px);
  padding: 18px 32px;
  border: 2px solid var(--starlog-accent-gold);
  text-decoration: none !important;
  transition: background-color 160ms ease, color 160ms ease;
}

.starlog-hero__cta:hover,
.starlog-hero__cta:focus-visible {
  background-color: transparent;
  color: var(--starlog-accent-gold) !important;
}

.starlog-hero__link {
  font-family: var(--font-body-family, inherit);
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: 0.04em;
  color: rgba(250, 250, 247, 0.85) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(250, 250, 247, 0.3);
  padding-bottom: 4px;
  transition: color 160ms ease, border-color 160ms ease;
}

.starlog-hero__link:hover {
  color: var(--starlog-accent-gold) !important;
  border-bottom-color: var(--starlog-accent-gold);
}

/* (Post-subscribe survey now opens in a new tab via window.open in
   assets/starlog-subscribe.js — no in-page UI needed. The prior
   modal CSS lived here and was removed when the modal pattern
   was scrapped.) */

.starlog-hero__cta-note {
  font-family: var(--font-body-family, inherit);
  /* Desktop now matches mobile at 15px after a second pass — the
     prior 14px still felt small editorial-small-print at desktop
     reading distance. Single value across viewports keeps things
     consistent. */
  font-size: 15px;
  letter-spacing: 0.04em;
  color: rgba(250, 250, 247, 0.55);
  margin: 14px auto 0;
  max-width: 56ch;
  font-style: italic;
  line-height: 1.5;
}

/* The 50 mark. SVG inline; sits between headline and lede. */
.starlog-hero__mark {
  display: block;
  width: clamp(140px, 18vw, 240px);
  height: auto;
  color: var(--starlog-accent-gold);
}

.starlog-hero__rule {
  display: block;
  width: 80px;
  height: 1px;
  background-color: var(--starlog-accent-gold);
  opacity: 0.5;
  margin: 0;
}

@media (max-width: 900px) {
  .starlog-hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vh, 56px);
  }
  .starlog-hero__copy {
    text-align: center;
    justify-items: center;
  }
  .starlog-hero__cover {
    max-width: 320px;
  }
}

@media (max-width: 640px) {
  .starlog-hero {
    padding: 72px 24px;
    min-height: auto;
  }
  .starlog-hero__eyebrow::before,
  .starlog-hero__eyebrow::after {
    width: 24px;
  }
  .starlog-hero__cover {
    max-width: 260px;
  }
}

/* ------------------------------------------------------------
   Manifesto strip (replaces the 3-card "Now" section)
   Single editorial sentence, three inline links. Lapham's-feeling.
   ------------------------------------------------------------ */

.starlog-manifesto {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: var(--starlog-cream);
  color: #000;
  padding: clamp(48px, 9vw, 120px) clamp(24px, 6vw, 96px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.starlog-manifesto__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
}

.starlog-manifesto__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}

.starlog-manifesto__body {
  font-family: var(--font-heading-family, inherit);
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: #000;
}

.starlog-manifesto__body a {
  color: #000 !important;
  text-decoration: none !important;
  background-image: none !important;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  transition: border-color 180ms ease, color 180ms ease;
}

.starlog-manifesto__body a:hover,
.starlog-manifesto__body a:focus-visible {
  background-image: none !important;
  border-bottom-color: var(--starlog-accent-gold);
  color: #000 !important;
}

.starlog-manifesto__meta {
  /* Three tiles always sit on a single row at tablet and desktop.
     Was `display: flex; flex-wrap: wrap` which let tiles wrap to a
     2+1 layout on tablet widths (820-1024px) when the column gap
     couldn't fit three intrinsically-sized items. Grid with
     minmax(0, 1fr) forces equal-width columns that can shrink
     below content width, so description copy wraps inside its
     column instead of pushing the tile onto a new row. The
     existing @media (max-width: 640px) rule still collapses to a
     2-column grid, and @media (max-width: 480px) still stacks to
     a single column. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.6);
}

.starlog-manifesto__meta strong {
  /* Soft-gold tag treatment, deliberately desaturated from the
     full --starlog-accent-gold so it reads as a category marker /
     editorial tag, NOT a clickable CTA pill. Using rgba on the
     gold token (~40% over the warm cream page bg) keeps it in the
     same color family as the real CTA pills without registering
     as actionable.
     Width fits content so only the label text + padding gets the
     tag, not the full row. white-space: nowrap so the label itself
     never breaks across lines — "THE STARLOG PODCAST" stays on one
     line even when the column is narrow. Description text below
     sits naturally because the strong stays block-level. */
  display: block;
  width: fit-content;
  white-space: nowrap;
  background: rgba(237, 195, 49, 0.35);
  font-weight: 700;
  color: var(--starlog-ink);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 3px 8px;
  margin-bottom: 6px;
}

/* ------------------------------------------------------------
   Cover Archive
   The brand-equity moment. Horizontal scroll of 50 years of issues.
   Real cover scans drop into .archive__cover-art — placeholder cards
   styled by era until images land.
   ------------------------------------------------------------ */

.starlog-archive {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: var(--starlog-ink);
  color: #fafaf7;
  padding: clamp(80px, 12vw, 160px) 0;
  position: relative;
}

.starlog-archive__header {
  max-width: 1280px;
  margin: 0 auto 48px;
  padding: 0 clamp(36px, 6vw, 96px);
  display: grid;
  gap: 18px;
}

/* Eyebrow letter-spacing pushes the trailing edge slightly past the
   container, which can clip on narrow viewports. Compensate. */
.starlog-archive__eyebrow {
  padding-right: var(--type-eyebrow-tracking);
}

.starlog-archive__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--starlog-accent-gold);
  margin: 0;
}

.starlog-archive__headline {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  /* L (standard section headline) — canonical token, was hardcoded
     clamp(34px, 5vw, 72px). Brings archive in line with press, contact. */
  font-size: var(--type-display-major);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
  max-width: 18ch;
  color: #fafaf7;
}

.starlog-archive__lede {
  font-family: var(--font-body-family, inherit);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  max-width: 60ch;
  color: rgba(250, 250, 247, 0.7);
  margin: 0;
}

.starlog-archive__strip {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Asymmetric left/right padding: left has more breathing room so
     the first cover never clips against the viewport edge; right
     stays at the smaller floor so a partial next-cover peek signals
     "scroll for more." */
  padding: 24px clamp(24px, 6vw, 96px) 48px clamp(36px, 6vw, 96px);
  /* scroll-snap-align: start auto-snaps past padding-left without
     this. Tell the snap engine to preserve the left gutter. */
  scroll-padding-left: clamp(36px, 6vw, 96px);
  /* `proximity` instead of `mandatory`: covers still snap at rest near
     a snap point, but Chrome's scroll-snap engine no longer treats
     every wheel event as something it must consume to recompute a
     snap target. With `mandatory`, our wheel-passthrough JS handler
     in starlog-archive-modal.js was unable to fully release scroll
     events back to the page on Chrome Mac — the snap engine fought
     the forwarded window.scrollBy and the user perceived a "scroll
     trap." `proximity` is the documented escape hatch for this
     exact failure mode. */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(237, 195, 49, 0.3) transparent;
  /* Prevent the horizontal scroll from chaining back to the page on
     trackpad rubber-band overscroll. The JS wheel-passthrough handler
     in starlog-archive-modal.js handles the dominant case (vertical-
     dominant wheel intent gets forwarded to window scroll); this is
     belt-and-suspenders for the edge case where the strip is already
     scrolled to one end. */
  overscroll-behavior-x: contain;
}

.starlog-archive__strip::-webkit-scrollbar {
  height: 4px;
}
.starlog-archive__strip::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}
.starlog-archive__strip::-webkit-scrollbar-thumb {
  background: rgba(237, 195, 49, 0.4);
}

.starlog-archive__cover {
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 320ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.starlog-archive__cover:hover {
  transform: translateY(-6px);
}

/* The cover art tile. Aspect ratio matches a magazine (2:3-ish). */
.starlog-archive__art {
  position: relative;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  overflow: hidden;
  background-color: #1a1a1a;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 16px;
  font-family: var(--font-heading-family, inherit);
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Per-era treatments. Color blocks evoke the visual era of the cover.
   When real scans drop in, replace with <img> + remove these palette modifiers. */
.starlog-archive__art--1976 { background: linear-gradient(180deg, #c4470c 0%, #1a1a1a 100%); }
.starlog-archive__art--1980 { background: linear-gradient(180deg, #d4af37 0%, #2a2a2a 100%); }
.starlog-archive__art--1985 { background: linear-gradient(180deg, #1f3a5f 0%, #0a0a0a 100%); }
.starlog-archive__art--1989 { background: linear-gradient(180deg, #732f47 0%, #1a1a1a 100%); }
.starlog-archive__art--1993 { background: linear-gradient(180deg, #2d4a2b 0%, #0a0a0a 100%); }
.starlog-archive__art--1997 { background: linear-gradient(180deg, #1a1a1a 0%, #4a4a4a 100%); }
.starlog-archive__art--2000 { background: linear-gradient(180deg, #3d2c5f 0%, #0a0a0a 100%); }
.starlog-archive__art--2004 { background: linear-gradient(180deg, #1c4a52 0%, #0a0a0a 100%); }
.starlog-archive__art--2009 { background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%); }
.starlog-archive__art--final { background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 100%); border-color: rgba(237, 195, 49, 0.35); }
.starlog-archive__art--return { background: linear-gradient(180deg, var(--starlog-accent-gold) 0%, #0a0a0a 100%); }

/* When a real cover image is loaded (from Shopify Files OR from a
   theme-asset filename), the era-style background and placeholder
   text are hidden; the image fills the card. Image positions
   absolutely to override the parent's flex layout (which would
   otherwise prevent the image from stretching to full card height). */
.starlog-archive__art--has-image {
  background: #1a1a1a;
  padding: 0 !important;
  border-color: rgba(255, 255, 255, 0.12);
  display: block !important;
}

.starlog-archive__art--has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.starlog-archive__masthead {
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  color: #fafaf7;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.starlog-archive__art--return .starlog-archive__masthead {
  color: #000;
}

.starlog-archive__issue {
  display: grid;
  gap: 6px;
  align-self: flex-end;
  text-align: left;
  width: 100%;
}

.starlog-archive__issue-line {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
}

.starlog-archive__art--return .starlog-archive__issue-line {
  color: rgba(0, 0, 0, 0.65);
}

.starlog-archive__issue-num {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fafaf7;
  line-height: 0.85;
  font-style: italic;
}

.starlog-archive__art--return .starlog-archive__issue-num {
  color: #000;
}

.starlog-archive__caption {
  display: grid;
  gap: 4px;
  font-family: var(--font-body-family, inherit);
}

.starlog-archive__year {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--starlog-accent-gold);
}

.starlog-archive__cover-title {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(250, 250, 247, 0.85);
  font-style: italic;
}

.starlog-archive__footer {
  max-width: 1280px;
  margin: 32px auto 0;
  padding: 0 clamp(24px, 6vw, 96px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(250, 250, 247, 0.6);
}

.starlog-archive__footer a {
  color: var(--starlog-accent-gold) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* Forward-tense sign-off below the cover strip. Italic Fraunces,
   centered, generous breathing room. Hands the visual eye from
   heritage (the strip above) to the Magazine teaser below.
   max-width widened from 720px to 880px so longer copy (e.g., the
   "Some dream about tomorrow—we are living it. STARLOG The Magazine
   returns fall 2026." line) wraps to exactly two lines instead of
   three on standard desktop widths. */
.starlog-archive__coda {
  max-width: 880px;
  margin: 56px auto 8px;
  padding: 0 clamp(24px, 6vw, 96px);
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  letter-spacing: 0.005em;
  text-align: center;
  color: rgba(250, 250, 247, 0.92);
}

@media (max-width: 720px) {
  .starlog-archive__coda {
    margin-top: 40px;
    font-size: 19px;
  }
}

/* ============================================================
   MAGAZINE TEASER — Soft Launch keystone moment.
   Pure typography, no image, no commerce. Lives between the cover
   archive and the Subscribe Promise. Single CTA -> newsletter.
   At Hard Launch this section can be disabled and the Magazine PDP
   restored, or the two can coexist (teaser above, PDP below).
   ============================================================ */

.starlog-magazine-teaser {
  width: 100%;
  background-color: var(--starlog-cream, #f2f2eb);
  color: var(--starlog-ink, #0a0a0a);
  padding: clamp(96px, 12vw, 160px) clamp(20px, 5vw, 48px);
  position: relative;
}

/* Hairline rules above and below give the section a "chapter
   break" frame without adding more chrome. */
.starlog-magazine-teaser::before,
.starlog-magazine-teaser::after {
  content: "";
  position: absolute;
  left: clamp(20px, 5vw, 48px);
  right: clamp(20px, 5vw, 48px);
  height: 1px;
  background-color: var(--starlog-rule, rgba(10, 10, 10, 0.12));
}

.starlog-magazine-teaser::before { top: 0; }
.starlog-magazine-teaser::after  { bottom: 0; }

.starlog-magazine-teaser__inner {
  /* Widened from 880px to 1100px so "STARLOG: The Magazine"
     fits on a single line at desktop without overflowing. Sized
     between the editorial 1080px reading column (pullquote, team)
     and the cover archive's full-viewport strip — appropriate
     marquee weight for the magazine product moment. */
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.starlog-magazine-teaser__eyebrow {
  margin: 0;
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--starlog-accent-gold-text);
}

.starlog-magazine-teaser__title {
  margin: 0;
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif);
  font-weight: 400;
  /* XL (display) — canonical token, was hardcoded clamp(44px, 7vw, 96px).
     Brings magazine teaser in line with the hero headline as a peer
     display-tier moment on the page. The non-breaking space inside
     title_emphasis ("fall 2026.") keeps "fall 2026" atomic so the
     natural line break happens at the comma after "Magazine," —
     producing a clean 2-line stack on most desktop viewports. */
  /* Was var(--type-display-mass) = clamp(48, 7vw, 112). Dropped
     to clamp(48, 5.5vw, 80) so "STARLOG: The Magazine" (21 chars
     of italic Fraunces, ~11.5em wide) fits the 1100px container
     on a single line at every desktop width. Mobile (≤720px)
     keeps the 40px override below and allows wrap. */
  font-size: clamp(48px, 5.5vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--starlog-ink, #0a0a0a);
  /* Belt-and-suspenders: force single-line render on desktop. */
  white-space: nowrap;
}

.starlog-magazine-teaser__title-lead {
  font-style: normal;
}

.starlog-magazine-teaser__title-emphasis {
  font-style: italic;
  color: var(--starlog-accent-gold);
  /* Title is now "STARLOG: The Magazine" rendered inline on a
     single line. Emphasis sits right after lead with a small
     gap. Previously display:block forced "fall 2026" onto its
     own line for the 2-line stack — no longer needed since
     "Coming fall 2026" is now a separate subhead below the rule. */
  margin-left: 0.25em;
}

.starlog-magazine-teaser__tagline {
  margin: 0;
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: 0.005em;
  line-height: 1.3;
  color: var(--starlog-accent-gold-text);
}

.starlog-magazine-teaser__rule {
  display: block;
  width: 56px;
  height: 1px;
  background-color: var(--starlog-accent-gold);
  margin: 8px 0;
}

/* "Coming fall 2026" subhead — sits between the gold rule and
   the lede. Italic Fraunces, gold, slightly larger than the lede
   so it reads as a structural callout rather than a sentence
   inside the body copy. */
.starlog-magazine-teaser__subhead {
  margin: 0;
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.01em;
  color: var(--starlog-accent-gold);
}

.starlog-magazine-teaser__lede {
  max-width: 640px;
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.78);
}

.starlog-magazine-teaser__lede p {
  margin: 0;
}

.starlog-magazine-teaser__lede p + p {
  margin-top: 12px;
}

.starlog-magazine-teaser__cta-wrap {
  margin: 16px 0 0;
}

.starlog-magazine-teaser__cta {
  display: inline-block;
  padding: 14px 28px;
  background-color: var(--starlog-accent-gold);
  color: var(--starlog-ink, #0a0a0a);
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--starlog-accent-gold);
  transition: background-color 160ms ease, color 160ms ease;
}

.starlog-magazine-teaser__cta:hover,
.starlog-magazine-teaser__cta:focus-visible {
  background-color: transparent;
  color: var(--starlog-accent-gold-text);
  outline: none;
}

@media (max-width: 720px) {
  .starlog-magazine-teaser {
    padding: 72px 20px;
  }
  .starlog-magazine-teaser__inner {
    gap: 20px;
  }
  .starlog-magazine-teaser__title {
    font-size: 40px;
    /* Allow wrap on mobile — 21 chars of italic Fraunces at 40px
       won't fit a phone screen on a single line. Title naturally
       wraps between "STARLOG:" and "The Magazine" at the regular
       space, producing a clean 2-line stack at narrow widths. */
    white-space: normal;
  }
}

/* ============================================================
   DESIGN CONSOLIDATION
   Pulls Baseline-native sections (Newsletter, Image-with-Text,
   Featured Product, Rich Text, Text-Columns) into the same editorial
   register as the custom Starlog sections (anniversary hero,
   manifesto, cover archive). Targets Baseline's emitted markup with
   minimal-intrusion overrides.
   ============================================================ */

/* All sections respect the design system's vertical rhythm. Baseline
   ships its own section-vertical-spacing variable; we synchronize it
   with our token. */
.shopify-section,
.shopify-section [class*="section"] {
  --section-vertical-spacing: var(--space-section-y);
}

/* SUBHEADING-AS-EYEBROW
   Baseline native sections (newsletter, image-with-text, rich-text,
   text-columns-with-images) all expose a "subheading" setting that
   renders above the title. Style every subheading site-wide as the
   editorial eyebrow used in the custom sections: small, uppercase,
   gold, letterspaced, with hairline rules flanking the text. This is
   the single biggest cohesion move on the page. */
.shopify-section .text-subheading,
.shopify-section [class*="subheading"]:not([class*="newsletter_subheading"]):not(.starlog-hero__eyebrow):not(.starlog-manifesto__eyebrow):not(.starlog-archive__eyebrow) {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body-family, inherit) !important;
  font-size: var(--type-eyebrow-size) !important;
  font-weight: 600 !important;
  letter-spacing: var(--type-eyebrow-tracking) !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.85) !important;
  font-style: normal !important;
  margin-bottom: var(--space-stack-tight) !important;
}

/* Eyebrows on dark scheme sections stay gold for contrast.
   Baseline sets the scheme via data-color-scheme on the column
   wrapper (not the section id), so target that attribute. The
   previous [id*="scheme3"] selector never fired. */
[data-color-scheme="scheme3"] .text-subheading,
[data-color-scheme="scheme3"] [class*="subheading"]:not([class*="newsletter_subheading"]):not(.starlog-hero__eyebrow):not(.starlog-manifesto__eyebrow):not(.starlog-archive__eyebrow) {
  color: var(--starlog-accent-gold) !important;
}

/* Refined headline metrics on Baseline section titles to match
   Fraunces optical needs. */
.shopify-section h1,
.shopify-section h2,
.shopify-section h3 {
  letter-spacing: var(--type-headline-tracking);
  line-height: var(--type-headline-leading);
}

/* Body lede / standfirst paragraphs in native sections.
   Pull the line-height and color into the system. */
.shopify-section .rte,
.shopify-section [class*="newsletter_text"],
.shopify-section [class*="image-with-text"] [class*="text"] p {
  line-height: var(--type-body-leading);
}

/* GOLD-UNDERLINE LINK PATTERN
   Editorial link underline. Scoped tight to body content contexts
   only — never header, never footer nav, never product cards. The
   broad selector was bleeding into the header (logo, ACCOUNT, CART)
   and shifting baselines.

   Targets:
   - .rte (rich-text content from About story, etc.)
   - .starlog-manifesto__body inline links (these have their own
     bigger gold-fill rule; this is fallback)
   - explicit .editorial-link class for opt-in elsewhere */
.rte a:not(.button),
.editorial-link {
  text-decoration: none;
  background-image: linear-gradient(to bottom, transparent 90%, var(--starlog-accent-gold) 90%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-size 200ms ease, color 160ms ease;
}

.rte a:not(.button):hover,
.editorial-link:hover {
  background-image: linear-gradient(to bottom, transparent 0%, var(--starlog-accent-gold) 0%);
  color: #000;
}

/* SHARP CORNERS
   Brutalist preset shipped media_border_radius:20 (rounded). The
   Design Direction calls for mid-century brutalist sharpness. The
   theme setting is also flipped to 0 in settings_data.json; this
   rule is belt-and-suspenders against any leftover rounded-radius
   variables baked into Baseline's CSS. */
.shopify-section img,
.shopify-section [class*="card"],
.shopify-section [class*="media"]:not(.starlog-archive__art),
.shopify-section [class*="image-with-text"] img,
.shopify-section [class*="featured-product"] img {
  border-radius: 0 !important;
}

/* PAPER GRAIN ATMOSPHERE
   Subtle textured noise over cream-bg sections so they feel printed
   not screen. Same SVG noise filter as the anniversary hero, lower
   opacity here so it's a whisper not a statement.

   Apply to all sections that use scheme1 (cream) — newsletter,
   image-with-text, rich-text, text-columns-with-images. */
.shopify-section [class*="scheme1"]::before,
.shopify-section [class*="newsletter"]::before {
  content: none; /* opt-in via the rule below to avoid double-stacking */
}

/* Paper grain wrapper. We attach the noise at section-group level via
   a pseudo-element on the .shopify-section wrapper that contains a
   light scheme. Targeted by section type. */
.shopify-section[id*="newsletter"],
.shopify-section[id*="image_with_text"],
.shopify-section[id*="rich_text"],
.shopify-section[id*="text_columns_with_images"] {
  position: relative;
  isolation: isolate;
}

.shopify-section[id*="newsletter"]::after,
.shopify-section[id*="image_with_text"]::after,
.shopify-section[id*="rich_text"]::after,
.shopify-section[id*="text_columns_with_images"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.45;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}

.shopify-section[id*="newsletter"] > *,
.shopify-section[id*="image_with_text"] > *,
.shopify-section[id*="rich_text"] > *,
.shopify-section[id*="text_columns_with_images"] > * {
  position: relative;
  z-index: 1;
}

/* HAIRLINE RULES BETWEEN SECTIONS
   Editorial layouts often use hairline dividers to separate beats
   without using full-bleed color shifts. Apply between consecutive
   cream sections; the dark sections (hero, archive) already have
   their own visual boundaries from the contrast shift. */
.shopify-section[id*="newsletter"] + .shopify-section[id*="image_with_text"],
.shopify-section[id*="image_with_text"] + .shopify-section[id*="newsletter"],
.shopify-section[id*="rich_text"] + .shopify-section[id*="text_columns_with_images"] {
  border-top: var(--starlog-hairline-w) solid var(--starlog-rule);
}

/* CTA / BUTTON COHESION
   Two patterns site-wide:
   1. Filled bold CTA — gold filled at rest, primary-on-hover OR
      transparent-with-gold-border-on-hover. Used for major commercial
      moments (hero CTA, Annual buy button, footer subscribe).
   2. Inline editorial link — text with gold underline that grows on
      hover. Used everywhere else.

   Baseline's .button gets a small atmospheric refinement. */
.button {
  font-family: var(--font-heading-family, inherit) !important;
  letter-spacing: 0.06em !important;
  font-size: var(--type-caption) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  padding: 16px 28px !important;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.button:active {
  transform: translateY(1px);
}

/* Accessible focus state — visible 2px gold outline rather than
   browser-default. */
.button:focus-visible,
.starlog-hero__cta:focus-visible,
.starlog-hero__link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--starlog-accent-gold);
  outline-offset: 3px;
}

/* ============================================================
   EDITORIAL SECTIONS — pull quote, guarantee, FAQ, founder letter,
   press kit, contact options. Built as reusable section types with
   schema; styled here from design tokens.
   ============================================================ */

/* Shared scheme background utility for the new sections */
.starlog-pullquote.scheme3,
.starlog-guarantee.scheme3,
.starlog-faq.scheme3,
.starlog-founder.scheme3,
.starlog-press.scheme3,
.starlog-contact.scheme3 {
  background-color: var(--starlog-ink);
  color: var(--starlog-text-on-dark);
}
.starlog-pullquote.scheme1,
.starlog-guarantee.scheme1,
.starlog-faq.scheme1,
.starlog-founder.scheme1,
.starlog-press.scheme1,
.starlog-contact.scheme1 {
  background-color: var(--starlog-cream);
  color: var(--starlog-ink);
}
.starlog-pullquote.scheme5,
.starlog-guarantee.scheme5,
.starlog-faq.scheme5,
.starlog-founder.scheme5,
.starlog-press.scheme5,
.starlog-contact.scheme5 {
  background-color: #ffffff;
  color: var(--starlog-ink);
}

/* ------------------------------------------------------------
   Subscribe promise — three-column "what you get" beat
   ------------------------------------------------------------ */

.starlog-promise {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-section-y-tight) var(--space-section-x);
}

.starlog-promise__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}

.starlog-promise__header {
  display: grid;
  gap: 12px;
  /* Widened from 60ch — the headline "Subscribe once. Three signals
     follow." at bold Fraunces clamp(28px, 3vw, 44px) overflows a
     60ch column at desktop max font, wrapping to 2 lines. 80ch lets
     the full headline land on a single line at every desktop width
     while still keeping the eyebrow/headline column at editorial
     proportions (not full-bleed). */
  max-width: 80ch;
}

.starlog-promise__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}
.starlog-promise.scheme3 .starlog-promise__eyebrow {
  color: var(--starlog-accent-gold);
}

.starlog-promise__headline {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  /* M (embedded/sub headline) — canonical token, was hardcoded
     clamp(28px, 3vw, 44px). Used for headlines that sit inside a
     parent section context (here: above the 3-up promise grid).
     Smaller than L by design — keeps the visual hierarchy that
     promise headline -> 3 supporting items. */
  font-size: var(--type-headline);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--starlog-ink);
  /* Force single-line on desktop. The 80ch header max-width was
     supposed to keep "Subscribe once. Three signals follow." on
     one line, but viewport math + browser line-balancing still
     wraps at some widths. Mobile (≤720px) resets to allow wrap. */
  white-space: nowrap;
}
@media (max-width: 720px) {
  .starlog-promise__headline { white-space: normal; }
}
.starlog-promise.scheme3 .starlog-promise__headline {
  color: var(--starlog-text-on-dark);
}

.starlog-promise__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.starlog-promise__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 24px 0 0;
  border-top: 1px solid var(--starlog-rule);
}
.starlog-promise.scheme3 .starlog-promise__item {
  border-top-color: var(--starlog-rule-on-dark);
}

.starlog-promise__num {
  font-family: var(--font-heading-family, inherit);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(34px, 3.5vw, 48px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--starlog-accent-gold);
}

.starlog-promise__copy {
  display: grid;
  gap: 6px;
}

.starlog-promise__title {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.starlog-promise__description {
  font-family: var(--font-body-family, inherit);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.78);
  margin: 0;
}
.starlog-promise.scheme3 .starlog-promise__description {
  color: rgba(250, 250, 247, 0.78);
}

/* ------------------------------------------------------------
   Pull quote
   ------------------------------------------------------------ */

.starlog-pullquote {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-section-y) var(--space-section-x);
}

.starlog-pullquote__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.starlog-pullquote.is-center .starlog-pullquote__inner {
  text-align: center;
  justify-items: center;
}

.starlog-pullquote__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}
.starlog-pullquote.scheme3 .starlog-pullquote__eyebrow {
  color: var(--starlog-accent-gold);
}

.starlog-pullquote__quote {
  font-family: var(--font-heading-family, inherit);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
  /* Widened from 28ch to 44ch so the longest sentence in Annalee's
     pullquote ("Science fiction brings the future closer." — 41 chars)
     fits a single visual line at desktop. Each sentence is its own
     line via inline <br>; we just need the container wide enough that
     none of them wraps internally. */
  max-width: 44ch;
  /* If a sentence does need to wrap (e.g. on mobile when the clamp
     drops to 28px and viewport gets tight), `balance` keeps the wrap
     symmetric instead of producing a single-word orphan. */
  text-wrap: balance;
  color: inherit;
}
.starlog-pullquote.is-left .starlog-pullquote__quote {
  max-width: 36ch;
}

.starlog-pullquote__attribution {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-caption);
  letter-spacing: 0.04em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.starlog-pullquote.is-center .starlog-pullquote__attribution {
  align-items: center;
}

.starlog-pullquote__name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
}

.starlog-pullquote__role {
  color: rgba(0, 0, 0, 0.55);
  font-style: italic;
}
.starlog-pullquote.scheme3 .starlog-pullquote__role {
  color: rgba(250, 250, 247, 0.55);
}

/* ------------------------------------------------------------
   Guarantee
   ------------------------------------------------------------ */

.starlog-guarantee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-section-y) var(--space-section-x);
}

.starlog-guarantee__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

@media (max-width: 720px) {
  .starlog-guarantee__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

.starlog-guarantee__seal {
  color: var(--starlog-accent-gold);
}
.starlog-guarantee.scheme3 .starlog-guarantee__seal {
  color: var(--starlog-accent-gold);
}
.starlog-guarantee__seal svg {
  width: 100%;
  height: auto;
  max-width: 200px;
  display: block;
}

.starlog-guarantee__body {
  display: grid;
  gap: 18px;
}

.starlog-guarantee__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}
.starlog-guarantee.scheme3 .starlog-guarantee__eyebrow {
  color: var(--starlog-accent-gold);
}

.starlog-guarantee__title {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: var(--type-headline);
  line-height: var(--type-headline-leading);
  letter-spacing: var(--type-headline-tracking);
  margin: 0;
}

.starlog-guarantee__copy {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-lede);
  line-height: var(--type-body-leading);
  max-width: 60ch;
}

.starlog-guarantee__signature {
  font-family: var(--font-heading-family, inherit);
  font-style: italic;
  font-size: 16px;
  margin: 0;
  color: var(--starlog-accent-gold);
}

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */

.starlog-faq {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-section-y) var(--space-section-x);
}

.starlog-faq__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  gap: clamp(40px, 6vw, 96px);
}

@media (max-width: 800px) {
  .starlog-faq__inner {
    grid-template-columns: 1fr;
  }
}

.starlog-faq__header {
  display: grid;
  gap: 16px;
  align-self: start;
  position: sticky;
  top: 120px;
}

@media (max-width: 800px) {
  .starlog-faq__header {
    position: static;
  }
}

.starlog-faq__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}
.starlog-faq.scheme3 .starlog-faq__eyebrow {
  color: var(--starlog-accent-gold);
}

.starlog-faq__title {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: var(--type-headline);
  line-height: var(--type-headline-leading);
  letter-spacing: var(--type-headline-tracking);
  margin: 0;
  max-width: 18ch;
}

.starlog-faq__lede {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-body);
  line-height: var(--type-body-leading);
  color: rgba(0, 0, 0, 0.7);
  max-width: 36ch;
}
.starlog-faq.scheme3 .starlog-faq__lede {
  color: rgba(250, 250, 247, 0.7);
}

.starlog-faq__list {
  border-top: 1px solid var(--starlog-rule);
}
.starlog-faq.scheme3 .starlog-faq__list {
  border-top-color: var(--starlog-rule-on-dark);
}

.starlog-faq__item {
  border-bottom: 1px solid var(--starlog-rule);
}
.starlog-faq.scheme3 .starlog-faq__item {
  border-bottom-color: var(--starlog-rule-on-dark);
}

.starlog-faq__question {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--font-heading-family, inherit);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
  list-style: none;
  transition: color 160ms ease;
}

.starlog-faq__question::-webkit-details-marker {
  display: none;
}

.starlog-faq__question:hover {
  color: var(--starlog-accent-gold);
}

.starlog-faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 400;
  color: var(--starlog-accent-gold);
  transition: transform 200ms ease;
}

.starlog-faq__item[open] .starlog-faq__icon {
  transform: rotate(45deg);
}

.starlog-faq__answer {
  padding: 0 0 28px;
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-body);
  line-height: var(--type-body-leading);
  color: rgba(0, 0, 0, 0.78);
  max-width: 60ch;
}
.starlog-faq.scheme3 .starlog-faq__answer {
  color: rgba(250, 250, 247, 0.78);
}

/* ------------------------------------------------------------
   Founder letter
   ------------------------------------------------------------ */

.starlog-founder {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-section-y) var(--space-section-x);
}

.starlog-founder__inner {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.starlog-founder__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}
.starlog-founder.scheme3 .starlog-founder__eyebrow {
  color: var(--starlog-accent-gold);
}

.starlog-founder__headline {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: var(--type-display-major);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
  margin: 0;
}

.starlog-founder__body {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-lede);
  line-height: var(--type-body-leading);
  color: rgba(0, 0, 0, 0.85);
}
.starlog-founder.scheme3 .starlog-founder__body {
  color: rgba(250, 250, 247, 0.85);
}

.starlog-founder__body p {
  margin: 0 0 1em;
}
.starlog-founder__body p:last-child {
  margin-bottom: 0;
}
.starlog-founder__body em {
  font-style: italic;
  color: rgba(0, 0, 0, 0.55);
}

.starlog-founder__signatures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--starlog-rule);
}
.starlog-founder.scheme3 .starlog-founder__signatures {
  border-top-color: var(--starlog-rule-on-dark);
}

.starlog-founder__signature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
}

.starlog-founder__sig-name {
  font-family: var(--font-heading-family, inherit);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  color: var(--starlog-accent-gold);
}

.starlog-founder__sig-title {
  font-family: var(--font-body-family, inherit);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}
.starlog-founder.scheme3 .starlog-founder__sig-title {
  color: rgba(250, 250, 247, 0.55);
}

/* ------------------------------------------------------------
   Press kit page
   ------------------------------------------------------------ */

.starlog-press {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-section-y) var(--space-section-x);
}

.starlog-press__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: clamp(48px, 8vw, 96px);
}

.starlog-press__header {
  display: grid;
  gap: 16px;
  border-bottom: 1px solid var(--starlog-rule);
  padding-bottom: clamp(24px, 4vw, 48px);
}

.starlog-press__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}

.starlog-press__headline {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: var(--type-display-major);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
  margin: 0;
}

.starlog-press__lede {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-lede);
  line-height: var(--type-body-leading);
  max-width: 60ch;
  color: rgba(0, 0, 0, 0.78);
}

.starlog-press__block {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
  align-items: start;
}

@media (max-width: 720px) {
  .starlog-press__block {
    grid-template-columns: 1fr;
  }
}

.starlog-press__block-title {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--starlog-accent-gold);
}

.starlog-press__block-body {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-body);
  line-height: var(--type-body-leading);
  max-width: 60ch;
}

.starlog-press__block-body p {
  margin: 0 0 1em;
}

.starlog-press__assets {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-column: 2;
  border-top: 1px solid var(--starlog-rule);
}

@media (max-width: 720px) {
  .starlog-press__assets {
    grid-column: 1;
  }
}

.starlog-press__asset {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--starlog-rule);
}

.starlog-press__asset-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.starlog-press__asset-meta strong {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: 16px;
}

.starlog-press__asset-meta span {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
}

.starlog-press__asset-link {
  font-family: var(--font-body-family, inherit);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  color: #000;
  background-image: linear-gradient(to bottom, transparent 85%, var(--starlog-accent-gold) 85%);
  padding: 4px 8px;
  transition: background-size 200ms ease, color 160ms ease;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.starlog-press__asset-link:hover {
  background-image: linear-gradient(to bottom, transparent 0%, var(--starlog-accent-gold) 0%);
}

.starlog-press__contact-email {
  margin: 0;
  font-family: var(--font-heading-family, inherit);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
}

.starlog-press__contact-email a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(to bottom, transparent 85%, var(--starlog-accent-gold) 85%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 4px;
  transition: background-size 200ms ease;
}

.starlog-press__contact-email a:hover {
  background-image: linear-gradient(to bottom, transparent 0%, var(--starlog-accent-gold) 0%);
  color: #000;
}

.starlog-press__block--contact {
  background: rgba(0, 0, 0, 0.03);
  padding: 32px;
  border-radius: 0;
}

/* ------------------------------------------------------------
   Contact options
   ------------------------------------------------------------ */

.starlog-contact {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-section-y) var(--space-section-x);
}

.starlog-contact__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: clamp(40px, 6vw, 64px);
}

.starlog-contact__header {
  display: grid;
  gap: 16px;
  border-bottom: 1px solid var(--starlog-rule);
  padding-bottom: clamp(24px, 4vw, 48px);
}

.starlog-contact__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}

.starlog-contact__headline {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: var(--type-display-major);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
  margin: 0;
}

.starlog-contact__lede {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-lede);
  line-height: var(--type-body-leading);
  max-width: 60ch;
  color: rgba(0, 0, 0, 0.78);
}

/* Contact page two-column layout: departments aside (left, 1fr) + form (right, 2fr).
   Stacks on mobile. Aside is sticky on desktop so the route list stays visible
   while the user scrolls the form. */
.starlog-contact__layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

@media (max-width: 880px) {
  .starlog-contact__layout {
    grid-template-columns: 1fr;
  }
}

.starlog-contact__routes {
  position: sticky;
  top: 120px;
  align-self: start;
}

@media (max-width: 880px) {
  .starlog-contact__routes {
    position: static;
  }
}

.starlog-contact__routes-title {
  font-family: var(--font-body-family, inherit);
  font-size: 11px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--starlog-rule);
}
.starlog-contact.scheme3 .starlog-contact__routes-title {
  color: var(--starlog-accent-gold);
  border-bottom-color: var(--starlog-rule-on-dark);
}

.starlog-contact__routes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.starlog-contact__routes li {
  display: grid;
  gap: 4px;
}

.starlog-contact__routes strong {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
}

.starlog-contact__routes span {
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.5;
}
.starlog-contact.scheme3 .starlog-contact__routes span {
  color: rgba(250, 250, 247, 0.65);
}

/* Contact form. Editorial inputs: hairline borders, sharp corners,
   gold focus state. Labels above inputs, no float labels. */
.starlog-contact__form {
  display: grid;
  gap: 20px;
}

.starlog-contact__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 600px) {
  .starlog-contact__field-row {
    grid-template-columns: 1fr;
  }
}

.starlog-contact__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.starlog-contact__field-label {
  font-family: var(--font-body-family, inherit);
  font-size: 11px;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.65);
}
.starlog-contact.scheme3 .starlog-contact__field-label {
  color: rgba(250, 250, 247, 0.7);
}

.starlog-contact__field input,
.starlog-contact__field select,
.starlog-contact__field textarea {
  width: 100%;
  font-family: var(--font-body-family, inherit);
  font-size: 16px;
  line-height: 1.4;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--starlog-rule);
  border-radius: 0;
  color: var(--starlog-ink);
  transition: border-color 160ms ease, background-color 160ms ease;
  appearance: none;
  -webkit-appearance: none;
}

.starlog-contact.scheme3 .starlog-contact__field input,
.starlog-contact.scheme3 .starlog-contact__field select,
.starlog-contact.scheme3 .starlog-contact__field textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--starlog-rule-on-dark);
  color: var(--starlog-text-on-dark);
}

.starlog-contact__field input:focus,
.starlog-contact__field select:focus,
.starlog-contact__field textarea:focus {
  outline: none;
  border-color: var(--starlog-accent-gold);
  background: rgba(255, 255, 255, 0.95);
}

.starlog-contact.scheme3 .starlog-contact__field input:focus,
.starlog-contact.scheme3 .starlog-contact__field select:focus,
.starlog-contact.scheme3 .starlog-contact__field textarea:focus {
  background: rgba(255, 255, 255, 0.12);
}

.starlog-contact__field select {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

.starlog-contact.scheme3 .starlog-contact__field select {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23edc331' stroke-width='1.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}

.starlog-contact__field textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--font-body-family, inherit);
}

.starlog-contact__submit {
  justify-self: start;
  font-family: var(--font-heading-family, inherit);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--starlog-accent-gold);
  color: #000;
  border: 2px solid var(--starlog-accent-gold);
  padding: 16px 32px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.starlog-contact__submit:hover,
.starlog-contact__submit:focus-visible {
  background: transparent;
  color: var(--starlog-accent-gold);
  outline: none;
}

.starlog-contact.scheme3 .starlog-contact__submit:hover,
.starlog-contact.scheme3 .starlog-contact__submit:focus-visible {
  color: var(--starlog-accent-gold);
}

/* Errors and success */
.starlog-contact__errors {
  list-style: none;
  margin: 0 0 8px;
  padding: 16px 20px;
  background: rgba(220, 53, 69, 0.06);
  border-left: 3px solid #dc3545;
  font-size: 14px;
  color: #b3293a;
  display: grid;
  gap: 6px;
}

.starlog-contact__success {
  padding: 32px;
  background: rgba(237, 195, 49, 0.12);
  border-left: 3px solid var(--starlog-accent-gold);
  display: grid;
  gap: 12px;
}

.starlog-contact__success-headline {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  margin: 0;
}

.starlog-contact__success-body {
  font-family: var(--font-body-family, inherit);
  font-size: var(--type-body);
  line-height: var(--type-body-leading);
  color: rgba(0, 0, 0, 0.78);
  max-width: 60ch;
}

.starlog-contact__footer {
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
  max-width: 60ch;
  padding-top: 24px;
  margin-top: 16px;
  border-top: 1px solid var(--starlog-rule);
}

.starlog-contact.scheme3 .starlog-contact__footer {
  color: rgba(250, 250, 247, 0.55);
  border-top-color: var(--starlog-rule-on-dark);
}

.starlog-contact__footer a {
  color: inherit;
  text-decoration: underline;
}

.starlog-contact__footer em {
  font-family: var(--font-heading-family, inherit);
  font-style: italic;
}

/* STARLOG 50 MARK — SIZE VARIANTS
   The reusable mark SVG via snippets/starlog-50-mark.liquid renders
   with class .starlog-mark + a size modifier. Sized via width here. */
.starlog-mark {
  display: block;
  height: auto;
  color: var(--starlog-accent-gold);
}
.starlog-mark--small  { width: 80px; }
.starlog-mark--medium { width: 140px; }
.starlog-mark--large  { width: clamp(140px, 18vw, 240px); }

/* Mark on the product page sits above the kicker, gives the Annual
   visual anchor to the anniversary. */
.starlog-product-mark {
  margin: 0 0 18px;
  color: var(--starlog-accent-gold);
}

.starlog-mark__num {
  font-family: var(--font-heading-family, 'Fraunces', serif);
}
.starlog-mark__label {
  font-family: var(--font-body-family, 'Lora', serif);
}
body[class*="font-test-"] .starlog-mark__num {
  font-family: var(--ft-display) !important;
}
body[class*="font-test-"] .starlog-mark__label {
  font-family: var(--ft-body) !important;
}

/* SVG MARK FONT INHERITANCE
   The "50" anniversary SVG inside the hero has <text> elements that
   inherit body font (Lora) instead of display font. Force them to
   use the heading family so the "50" reads as Fraunces (or whatever
   display face is active). Two classes: numerical (the 50) and
   labels (the surrounding "1976 / 2026" + "FIFTY YEARS"). */
.starlog-hero__mark-num {
  font-family: var(--font-heading-family, 'Fraunces', serif);
}
body[class*="font-test-"] .starlog-hero__mark-num {
  font-family: var(--ft-display) !important;
}
.starlog-hero__mark-label {
  font-family: var(--font-body-family, 'Lora', serif);
}
body[class*="font-test-"] .starlog-hero__mark-label {
  font-family: var(--ft-body) !important;
}

/* ============================================================
   FONT TESTER
   Activates with ?fonts=test URL parameter (handled by
   starlog-font-tester.js). Body classes swap fonts site-wide.
   Hidden from normal visitors; persists choice via localStorage.
   ============================================================ */

/* Reusable font-stack variables. Each test class redefines these,
   then heading + body selectors below pull from them.

   Free, Google Fonts: */
body.font-test-fraunces  { --ft-display: 'Fraunces', serif;        --ft-body: 'Lora', serif; }
body.font-test-dmserif   { --ft-display: 'DM Serif Display', serif; --ft-body: 'Spectral', serif; }
body.font-test-bodoni    { --ft-display: 'Bodoni Moda', serif;     --ft-body: 'Spectral', serif; }
body.font-test-italiana  { --ft-display: 'Italiana', serif;        --ft-body: 'Lora', serif; }
body.font-test-cormorant { --ft-display: 'Cormorant Garamond', serif; --ft-body: 'Source Serif 4', serif; }
body.font-test-playfair  { --ft-display: 'Playfair Display', serif; --ft-body: 'Source Serif 4', serif; }

/* Compare-against: previous default (Brutalist preset original) */
body.font-test-anton     { --ft-display: 'Anton', sans-serif;      --ft-body: 'Instrument Sans', sans-serif; }

/* Free, Fontshare: */
body.font-test-erode     { --ft-display: 'Erode', serif;           --ft-body: 'Erode', serif; }
body.font-test-gambarino { --ft-display: 'Gambarino', serif;       --ft-body: 'Erode', serif; }
body.font-test-boska     { --ft-display: 'Boska', serif;           --ft-body: 'Quincy CF', serif; }
body.font-test-quincy    { --ft-display: 'Quincy CF', serif;       --ft-body: 'Quincy CF', serif; }
body.font-test-sentient  { --ft-display: 'Sentient', serif;        --ft-body: 'Sentient', serif; }

/* Paid trials. Font-family names match the @font-face declarations in
   starlog-font-faces.css.liquid. If trial files are not uploaded to the
   theme assets folder yet, browser falls back to serif and the slot
   renders in a generic serif until activation. */
body.font-test-gtsectra     { --ft-display: 'GT Sectra Display Trial', 'Times New Roman', serif; --ft-body: 'GT Alpina Standard Trial', 'Times New Roman', serif; }
body.font-test-editorialnew { --ft-display: 'PP Editorial New Trial', 'Times New Roman', serif; --ft-body: 'PP Editorial New Trial', 'Times New Roman', serif; }
body.font-test-marian       { --ft-display: 'Marian Display Trial', 'Times New Roman', serif; --ft-body: 'Marian Text Trial', 'Times New Roman', serif; }

/* Apply the test display face to every place Anton currently appears.
   Selectors cover: standard heading tags, Baseline's heading utility
   classes, and our custom Starlog components. */
body[class*="font-test-"] h1,
body[class*="font-test-"] h2,
body[class*="font-test-"] h3,
body[class*="font-test-"] h4,
body[class*="font-test-"] h5,
body[class*="font-test-"] h6,
body[class*="font-test-"] .text-heading-feature,
body[class*="font-test-"] .text-heading-large,
body[class*="font-test-"] .text-heading-standard,
body[class*="font-test-"] .text-heading-small,
body[class*="font-test-"] .font-heading,
body[class*="font-test-"] .starlog-hero__headline,
body[class*="font-test-"] .starlog-archive__headline,
body[class*="font-test-"] .starlog-archive__masthead,
body[class*="font-test-"] .starlog-archive__issue-num,
body[class*="font-test-"] .starlog-manifesto__body,
body[class*="font-test-"] .preorder-kicker,
body[class*="font-test-"] .button {
  font-family: var(--ft-display) !important;
}

/* Apply the test body face to default text. */
body[class*="font-test-"],
body[class*="font-test-"] p,
body[class*="font-test-"] li,
body[class*="font-test-"] span:not(.preorder-kicker):not([class*="masthead"]):not([class*="issue-num"]),
body[class*="font-test-"] .text-base,
body[class*="font-test-"] .text-sm,
body[class*="font-test-"] .font-body,
body[class*="font-test-"] .starlog-hero__lede,
body[class*="font-test-"] .starlog-archive__lede,
body[class*="font-test-"] .starlog-archive__cover-title,
body[class*="font-test-"] .rte {
  font-family: var(--ft-body) !important;
}

/* Restore the brand wordmark in the header — that's a logotype, not
   subject to test font swaps. The header logo image bypasses this since
   it's an <img>, but if we ever switch to text-rendered wordmark the
   override here protects it. */
body[class*="font-test-"] .header__logo,
body[class*="font-test-"] [class*="header"] img.logo {
  font-family: inherit !important;
}

/* ============================================================
   FONT TESTER PANEL
   Floating UI bottom-right. Collapsed by default.
   ============================================================ */

#starlog-ft-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  color: #fafaf7;
  --ft-panel-bg: #0a0a0a;
  --ft-panel-border: rgba(237, 195, 49, 0.4);
}

#starlog-ft-panel .ft-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--ft-panel-bg);
  color: #fafaf7;
  border: 1px solid var(--ft-panel-border);
  padding: 12px 18px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  transition: background 160ms ease, border-color 160ms ease;
  min-width: 200px;
  text-align: left;
}

#starlog-ft-panel .ft-toggle:hover {
  border-color: #edc331;
}

#starlog-ft-panel .ft-toggle-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #edc331;
  font-weight: 700;
}

#starlog-ft-panel .ft-toggle-current {
  font-size: 13px;
  color: rgba(250, 250, 247, 0.85);
  font-weight: 500;
}

#starlog-ft-panel .ft-body {
  display: none;
  margin-top: 8px;
  background: var(--ft-panel-bg);
  border: 1px solid var(--ft-panel-border);
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
}

#starlog-ft-panel[data-collapsed="false"] .ft-body {
  display: block;
}

#starlog-ft-panel[data-collapsed="false"] .ft-toggle {
  border-bottom: 1px solid rgba(237, 195, 49, 0.2);
}

#starlog-ft-panel .ft-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(250, 250, 247, 0.1);
}

#starlog-ft-panel .ft-header h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: #edc331;
  font-family: inherit;
}

#starlog-ft-panel .ft-close {
  background: transparent;
  border: none;
  color: rgba(250, 250, 247, 0.6);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

#starlog-ft-panel .ft-close:hover {
  color: #edc331;
}

#starlog-ft-panel .ft-list {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

#starlog-ft-panel .ft-group-header {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(237, 195, 49, 0.75);
  padding: 12px 18px 4px;
  border-top: 1px solid rgba(250, 250, 247, 0.05);
}

#starlog-ft-panel .ft-group-header:first-child {
  border-top: none;
  padding-top: 4px;
}

#starlog-ft-panel .ft-pair {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  background: transparent;
  color: #fafaf7;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}

#starlog-ft-panel .ft-pair:hover {
  background: rgba(237, 195, 49, 0.06);
}

#starlog-ft-panel .ft-pair.is-active {
  background: rgba(237, 195, 49, 0.1);
  border-left-color: #edc331;
}

#starlog-ft-panel .ft-pair-radio {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(250, 250, 247, 0.4);
  border-radius: 50%;
  margin-top: 3px;
  position: relative;
  transition: border-color 120ms ease;
}

#starlog-ft-panel .ft-pair.is-active .ft-pair-radio {
  border-color: #edc331;
}

#starlog-ft-panel .ft-pair.is-active .ft-pair-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: #edc331;
  border-radius: 50%;
}

#starlog-ft-panel .ft-pair-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

#starlog-ft-panel .ft-pair-text strong {
  font-size: 13px;
  font-weight: 600;
  color: #fafaf7;
}

#starlog-ft-panel .ft-pair-note {
  font-size: 11px;
  color: rgba(250, 250, 247, 0.55);
  line-height: 1.4;
}

#starlog-ft-panel .ft-pair-badge {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #0a0a0a;
  background: #edc331;
  padding: 2px 5px;
}


#starlog-ft-panel .ft-footer {
  padding: 14px 18px;
  border-top: 1px solid rgba(250, 250, 247, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#starlog-ft-panel .ft-help {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(250, 250, 247, 0.55);
  margin: 0;
}

#starlog-ft-panel .ft-help code {
  background: rgba(237, 195, 49, 0.12);
  color: #edc331;
  padding: 1px 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
}

#starlog-ft-panel .ft-reset {
  background: transparent;
  border: 1px solid rgba(250, 250, 247, 0.25);
  color: rgba(250, 250, 247, 0.85);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

#starlog-ft-panel .ft-reset:hover {
  border-color: #edc331;
  color: #edc331;
}

@media (max-width: 640px) {
  #starlog-ft-panel {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
  #starlog-ft-panel .ft-toggle {
    width: 100%;
    min-width: 0;
  }
  #starlog-ft-panel .ft-body {
    width: 100%;
  }
}

/* ============================================================
   R2 — EDITORIAL RESTRAINT PASS
   Logic Magazine / Aeon / Lapham's: bg shifts, generous space, and
   typographic hierarchy do the dividing work. Hairline section rules
   between cream-on-cream sections create stuttering. Kill them
   globally; the dark hero / dark cover-archive / dark Annual product
   already separate themselves via background contrast.
   ============================================================ */

.border-b-gridline {
  border-bottom-width: 0 !important;
}

.border-b-gridline-double {
  border-bottom-width: 0 !important;
}

/* Kill grid-container "column divider" tints universally. These are the
   thin frames around image-with-text, the Annual product wrap, the team
   grid, etc. They read as structural carpentry, not editorial discipline.
   We keep targeted dividers (footer columns, hero gold rule, cover
   archive captions) by re-introducing them on those specific selectors. */
.shopify-section .bg-gridline-color,
section[data-color-scheme] .bg-gridline-color {
  background-color: transparent !important;
}

/* Re-introduce the footer column dividers — those still earn their keep
   as a structured masthead-style sign-off. */
[data-theme-footer] .grid.bg-gridline-color {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Footer Lodestar — was a saturated gold colorblock; now a quieter
   editorial last-chance moment. Cream background, single gold rule
   above, larger eyebrow. The gold still appears, as a precision rule,
   not a billboard. */
[data-theme-footer] > section[data-color-scheme] {
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

[data-theme-footer] > section[data-color-scheme]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(56px, 8vw, 120px);
  height: 2px;
  background: var(--starlog-accent-gold);
}

[data-theme-footer] > section[data-color-scheme] [class*="subheading"],
[data-theme-footer] > section[data-color-scheme] .font-subheading {
  color: var(--starlog-accent-gold) !important;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

[data-theme-footer] > section[data-color-scheme] h2 {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  letter-spacing: var(--type-headline-tracking, -0.015em);
  line-height: var(--type-headline-leading, 1.05);
  font-size: clamp(28px, 4vw, 48px);
  color: #000;
}

[data-theme-footer] > section[data-color-scheme] h2 + div,
[data-theme-footer] > section[data-color-scheme] h2 ~ div p,
[data-theme-footer] > section[data-color-scheme] .text-base {
  color: rgba(0, 0, 0, 0.7);
}

/* ============================================================
   R4 — ANNUAL PRODUCT VALUE STACK
   Editorial what-you-get list with italic gold numerals,
   placed below the buy buttons. Mirrors the Subscribe Promise
   three-up so the page has a coherent "numbered editorial beat"
   pattern. Renders inside a dark scheme3 product section, so
   colors are tuned for the dark background.
   ============================================================ */

.starlog-value-stack {
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid rgba(250, 250, 247, 0.18);
}

.starlog-value-stack__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--starlog-accent-gold);
  margin: 0 0 clamp(16px, 1.6vw, 22px);
}

.starlog-value-stack__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1vw, 14px);
  counter-reset: none;
}

.starlog-value-stack__list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  gap: 16px;
}

.starlog-value-stack__num {
  font-family: var(--font-heading-family, inherit);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--starlog-accent-gold);
  line-height: 1;
}

.starlog-value-stack__item {
  font-family: var(--font-body-family, inherit);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(250, 250, 247, 0.88);
}

/* When the value stack ever lands on a cream/scheme1 section
   (future product page template), invert the rule + text colors. */
[data-color-scheme="scheme1"] .starlog-value-stack {
  border-top-color: rgba(0, 0, 0, 0.12);
}

[data-color-scheme="scheme1"] .starlog-value-stack__item {
  color: rgba(0, 0, 0, 0.78);
}

/* ============================================================
   R5 — MOBILE / RESPONSIVE PASS
   The site needs to read like a publication on a phone, not a
   shrunken desktop. The default breakpoints in the existing
   CSS handle most layout collapsing; these overrides tune the
   things that don't auto-fix at 390-414px viewports.
   ============================================================ */

@media (max-width: 640px) {
  /* Manifesto strip "Currently" body — at desktop the sentence is
     20-32px and reads like a magazine pull-out. At 414px viewport
     22px+ across 14+ lines is claustrophobic. Shrink for mobile so
     the editorial sentence reads as one paragraph, not a wall. */
  .starlog-manifesto__body {
    font-size: 18px;
    line-height: 1.4;
  }

  /* Manifesto meta tiles stack to two-column at narrow widths. The
     existing flex-wrap handles single-column collapse, but two-col
     reads tighter for four short tiles. */
  .starlog-manifesto__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
  }

  /* Value stack: reduce numeral column to keep right-side breathing
     room on the Annual product mobile view (where the section also
     stacks media-on-top, content-below). */
  .starlog-value-stack__list li {
    grid-template-columns: 36px 1fr;
    gap: 12px;
  }
  .starlog-value-stack__num {
    font-size: 19px;
  }
  .starlog-value-stack__item {
    font-size: 14px;
    line-height: 1.45;
  }

  /* Footer Lodestar — reduce headline scale on mobile so "Don't miss
     what comes next." doesn't dominate the cream page-end. */
  [data-theme-footer] > section[data-color-scheme] h2 {
    font-size: clamp(24px, 7vw, 32px);
  }

  /* Hero CTA pair on mobile: stack the gold button above the inline
     "Pre-order The Annual ↓" link rather than wrapping side-by-side
     with awkward whitespace. */
  .starlog-hero__actions {
    flex-direction: column;
    gap: 18px;
  }

  /* Cover archive captions — at mobile the cards are 220px wide;
     long captions like "Eleven pages on Alien, with Scott and Giger"
     wrap to three lines. Fine, but tighten the line-height so the
     caption block doesn't bloat the card height disproportionately. */
  .starlog-archive__caption {
    line-height: 1.35;
  }
}

/* Mobile drawer SUBSCRIBE CTA. Lives between the primary nav and the
   secondary nav so users have a one-tap conversion path without
   needing to close the drawer first. Visually echoes the header
   SUBSCRIBE pill (gold pill, uppercase, letterspaced) but stretched
   to fill the drawer width. */
.starlog-drawer-cta-wrap {
  padding: 20px var(--space-section-x, 24px) 24px;
}
.starlog-drawer-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--starlog-accent-gold, #edc331);
  color: #0a0a0a;
  padding: 14px 20px;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.starlog-drawer-cta:hover,
.starlog-drawer-cta:focus-visible {
  background: #f5d24a;
}

/* On the very narrow mobile band (iPhone widths under ~480px), the
   01 Editorial two-up (Lodestar + Podcast tiles) gets cramped — two
   columns force body text to wrap to many short lines. Stack to a
   single column for breathing room. */
@media (max-width: 480px) {
  /* Stack the meta tiles vertically. 20px gap gives clean breathing
     between tiles, labels bumped to 13px so they read as proper
     editorial dividers. Description text dropped from 15px to 13px —
     the 15px was reading visually heavy next to the 13px labels.
     Now the value/description sits at the same size as the label
     but in regular weight + lowercase, so the differentiation comes
     from weight + case treatment, not from size. */
  .starlog-manifesto__meta {
    grid-template-columns: 1fr;
    gap: 20px;
    font-size: 13px;
  }
  .starlog-manifesto__meta strong {
    font-size: 13px;
  }

  /* Hero supporting copy under the form is intentionally small editorial
     small-print, but at iPhone widths the 13px italic Fraunces at 55%
     opacity tips into hard-to-read. Bump size + contrast slightly. */
  .starlog-hero__cta-note {
    font-size: 15px;
    color: rgba(250, 250, 247, 0.72);
  }

  /* "EST 1976 / REIMAGINED 2026" eyebrow was wrapping to two lines on
     iPhone because the default 0.32em letter-spacing makes the string
     too wide for narrow viewports. Tighten the tracking to 0.20em on
     mobile only so it fits one line; desktop still gets the wider
     editorial spacing. Belt-and-suspenders: drop the surrounding rule
     lines to 16px each (from 24px) to claw back a few more pixels. */
  .starlog-hero__eyebrow {
    letter-spacing: 0.20em;
  }
  .starlog-hero__eyebrow::before,
  .starlog-hero__eyebrow::after {
    width: 16px;
  }
}

/* Narrow phone widths — iPhone SE / older devices */
@media (max-width: 380px) {
  /* Header logo is the pulpy STARLOG wordmark — it has hard angles
     and starts close to the left edge. On very narrow phones the
     nav hamburger and cart link can crowd it. Cap the logo width
     so the right-side controls always have room. */
  .header-logo img,
  [data-theme-header] .header-logo img {
    max-width: 96px;
    height: auto;
  }
}

/* ============================================================
   MASTHEAD LOCKUP — wordmark + tagline (Variant C)
   Tagline sits below the Starlog wordmark in italic Fraunces,
   dark-gold (AA-safe on cream). Permanent magazine-masthead
   sub-mark. Hides cleanly on narrow phones if the wordmark
   itself is constrained.
   ============================================================ */

.starlog-masthead-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 14px 0;
}

/* Pull tag tight to the wordmark — wordmark has its own padding,
   so trim the inherited `inline-block ... my-auto` whitespace. */
.starlog-masthead-lockup > a {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Tagline moved out of the masthead lockup into the Magazine
   teaser section (see .starlog-magazine-teaser__tagline). The
   header is now wordmark-only across all breakpoints; trim the
   lockup's vertical padding so the sticky header stays compact. */
@media (max-width: 600px) {
  .starlog-masthead-lockup {
    padding: 8px 0;
  }
}

/* Pre-scroll: when the eyebrow strip is visible above the header,
   the cream header bar is sandwiched between two darker bands
   (eyebrow above, hero below). At its compact sticky height the
   wordmark reads as squeezed against the eyebrow even though it
   is mathematically centered. Add extra vertical padding when
   unstuck so the bar feels balanced; revert to compact when the
   user scrolls and the eyebrow scrolls away.

   Magnitude differs by viewport: mobile gets a smaller bump
   (real estate is precious), desktop gets a larger one. */
  /* Pre-scroll mobile header (fourth iteration).
     Earlier asymmetric treatment (14 top / 2 bottom on the outer
     nav) put the items in the upper half of the cream band, which
     made them look like they were "floating too close to the top"
     even though the band itself was tight. New goal: items truly
     centered in the cream band. All child paddings stay symmetric
     (so each item's content sits at its wrapper midpoint), and the
     outer nav gets equal top + bottom padding so the row sits at
     the cream band's vertical center.
     12 / 12 gives ~58-62px total band height — enough breathing
     above (separation from announcement bar) and below (transition
     to hero) without feeling gappy. */
  [x-data="Header"]:not(.is-stuck) .starlog-masthead-lockup {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  [x-data="Header"]:not(.is-stuck) header nav .flex.justify-end > .flex.items-center:last-child > button {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* Outer nav padding (sixth iteration — creative tune-up).
     4/4 was structurally tight (right at WCAG minimums) but the
     cream band read as too app-snappy for a publication site.
     Bumped to 10/10 — gives the band ~62-66pt of editorial breathing
     while keeping items vertically centered. Aligns with the
     masthead-band-with-air pattern from the locked comp set
     (Logic / Aeon / Lapham's / Nat Geo / brutalist editorial).
     Items still centered (symmetric padding); hamburger tap target
     still ~40px (8 + 24 + 8). */
  [x-data="Header"]:not(.is-stuck) header nav > .flex.items-center.justify-between {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* (anniversary_hero py-section-vertical-spacing rule moved outside
     this @media block so it applies sitewide regardless of viewport.) */
  /* The wordmark <a> wrapper carries Baseline's default `py-4` class
     (16px top + 16px bottom). That sat INSIDE .starlog-masthead-lockup
     and was the real source of the persistent gap below the wordmark.
     My earlier 4/4 padding on the lockup div was correct, but it sat
     OUTSIDE this anchor's extra 32px of padding. Zero out the anchor's
     vertical padding so the lockup div's padding actually controls the
     wordmark's position in the cream band. */
  .starlog-masthead-lockup > a,
  .starlog-masthead-lockup > a > div,
  .starlog-masthead-lockup h1 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* On the index template (template.name == 'index'), the wordmark is
     wrapped in an <h1 class="contents"> for SEO. If display:contents
     fails or the browser still applies the default h1 vertical margin
     (~0.67em = ~11px each side at 16px base font), the cream band gets
     extra space asymmetrically. Force the h1 to display:contents and
     zero out its margin. */
  .starlog-masthead-lockup h1 {
    display: contents !important;
  }
  /* Wordmark image itself: force block display, zero line-height to
     prevent any inline-baseline gap from the anchor's text rendering
     context. */
  .starlog-masthead-lockup img {
    display: block !important;
    margin: 0 !important;
  }
  /* Sticky-state mobile: hand back screen real estate as the user
     reads. Three coordinated reductions so the bar drops from ~63px
     to ~52px (NYT/Aeon mobile sticky register, "we get out of your
     way" pattern):
       1. lockup padding 8 -> 4 symmetric (matches pre-scroll
          symmetric treatment so items stay aligned in both states)
       2. wordmark width 170 -> 140 (proportional height shrink)
       3. hamburger button vertical padding 16 -> 12 (still WCAG 44px
          tap target with the 24px icon: 12 + 24 + 12 = 48).
     Outer nav gets symmetric 8/8 padding (vs pre-scroll's 12/12)
     so items stay vertically centered in the slightly-tighter bar. */
  [x-data="Header"].is-stuck .starlog-masthead-lockup {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  [x-data="Header"].is-stuck header nav > .flex.items-center.justify-between {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* Inline style on the <a> sets --logo-max-width-mobile from theme
     settings; need !important to override. The CSS variable is then
     consumed by the inner <div class="max-w-[var(--logo-max-width-mobile)]">. */
  [x-data="Header"].is-stuck .starlog-masthead-lockup a {
    --logo-max-width-mobile: 140px !important;
  }
  [x-data="Header"].is-stuck header nav .flex.justify-end > .flex.items-center:last-child > button {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
@media (min-width: 1024px) {
  [x-data="Header"]:not(.is-stuck) .starlog-masthead-lockup {
    /* Was symmetric 24/24 — pushed to asymmetric so the wordmark
       anchors downward toward the hero, matching the mobile pattern.
       Net height drops from 48px to ~44px and the band stops feeling
       gappy below the logo. */
    padding-top: 30px;
    padding-bottom: 14px;
  }
  /* Desktop sticky state: bump bottom padding slightly so the bar
     keeps its balance after the pre-scroll rebalance. */
  [x-data="Header"].is-stuck .starlog-masthead-lockup {
    padding-top: 4px;
    padding-bottom: 10px;
  }
}

/* ============================================================
   R6 — SIGNATURE MOVE: THE INDICIA LINE
   A magazine-masthead strip above the main nav. Identifies the
   site as a continuing publication: Volume 51, Number One, April
   2026. Treats the website as Issue One of the new Starlog,
   not a static brand site. Heritage signal that compounds:
   when Vol 51 No. 2 lands the indicia updates, and the year-51
   math says "we never stopped counting."

   The right-side dispatch is editor's-note territory — a one-line
   status that gives the publication a pulse ("The Annual ships
   November 2026" / "Issue 51.2 in production").
   ============================================================ */

.starlog-indicia {
  width: 100%;
  background-color: #0a0a0a;
  color: var(--starlog-text-on-dark);
  border-bottom: 1px solid rgba(250, 250, 247, 0.08);
}

.starlog-indicia__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-body-family, inherit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
}

.starlog-indicia__mark {
  margin: 0;
  color: var(--starlog-text-on-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.starlog-indicia__dispatch {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--starlog-text-on-dark-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.starlog-indicia__dispatch-label {
  color: var(--starlog-accent-gold);
  letter-spacing: 0.22em;
  font-weight: 600;
}

.starlog-indicia__dispatch-label::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  margin-left: 10px;
  margin-bottom: 3px;
  background-color: var(--starlog-accent-gold);
  vertical-align: middle;
  opacity: 0.6;
}

.starlog-indicia__dispatch-text {
  color: var(--starlog-text-on-dark);
}

@media (max-width: 720px) {
  .starlog-indicia__inner {
    font-size: 10px;
    letter-spacing: 0.14em;
    padding: 8px clamp(16px, 4vw, 24px);
  }
  /* On narrow phones, the dispatch is hidden — only the volume mark
     stays visible, ellipsis-truncated if needed. The dispatch is
     additive editorial detail, not load-bearing. */
  .starlog-indicia__dispatch {
    display: none;
  }
}

/* ============================================================
   Legacy [id^="Contact-"] form override block deleted.
   It was an earlier attempt at the same problem now solved by
   the .starlog-inline-form module at the bottom of this file
   (which is loaded by snippets/newsletter-form.liquid for both
   the Lodestar inline form and the footer form). The legacy
   selectors used !important + id-prefix matching which was
   fighting our own new class-based module. See the inline-form
   block below for the current canonical styling.
   ============================================================ */

/* ============================================================
   ACCESSIBILITY — global focus indicators
   Ensures every interactive element shows a visible focus ring
   when keyboard-navigated. Some Baseline rules strip outline:0;
   this re-asserts the keyboard contract. Mouse clicks don't
   trigger this (uses :focus-visible).
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--starlog-accent-gold);
  outline-offset: 3px;
  border-radius: 1px;
}

/* On dark sections (hero, cover archive, Annual product, modal,
   404), the gold focus ring needs to render against black. The
   default rule already does this since gold contrasts both. */

/* Skip-link — ensure it's visible when keyboard-focused, hidden
   otherwise. Baseline ships base styling; this strengthens it. */
.skip-link:focus {
  outline: 2px solid var(--starlog-accent-gold);
  outline-offset: 0;
  background-color: #0a0a0a;
  color: #fafaf7;
  padding: 12px 20px;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 100;
}

/* ============================================================
   STARLOG 404 — "Signal lost."
   Treats the missing-page moment as an editorial event. Dark
   background echoes the hero. Conversion-aware: even a wrong link
   gets a path back home AND a Lodestar signup hook.
   ============================================================ */

.starlog-404 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: var(--starlog-ink);
  color: var(--starlog-text-on-dark);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 12vw, 160px) clamp(24px, 6vw, 96px);
  position: relative;
  overflow: hidden;
}

/* Same atmospheric layer as the hero, scaled down */
.starlog-404::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(237, 195, 49, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 110% 90% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

.starlog-404__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  text-align: center;
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  justify-items: center;
}

.starlog-404__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--starlog-accent-gold);
  margin: 0;
}

.starlog-404__headline {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--starlog-text-on-dark);
  margin: 0;
}

.starlog-404__body {
  font-family: var(--font-body-family, inherit);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--starlog-text-on-dark-soft);
  max-width: 56ch;
  margin: 0;
}

.starlog-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.starlog-404__cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background-color: var(--starlog-accent-gold);
  color: #000;
  font-family: var(--font-body-family, inherit);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.starlog-404__cta:hover,
.starlog-404__cta:focus-visible {
  background-color: var(--starlog-text-on-dark);
  color: #000;
}

.starlog-404__link {
  font-family: var(--font-body-family, inherit);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--starlog-text-on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 250, 247, 0.4);
  padding-bottom: 2px;
  transition: border-color 180ms ease, color 180ms ease;
}

.starlog-404__link:hover,
.starlog-404__link:focus-visible {
  border-bottom-color: var(--starlog-accent-gold);
  color: var(--starlog-accent-gold);
}

@media (max-width: 640px) {
  .starlog-404__actions {
    flex-direction: column;
    gap: 18px;
  }
}

/* ============================================================
   THROWBACK MODULE — "This week from the archive"
   A small recurring editorial callout placed between the cover
   archive and the newsletter pitch. Acts as a bridge: visitors
   see the full archive, then THIS WEEK'S spotlight, which earns
   the newsletter pitch right after ("you're seeing this kind of
   thing now, want it weekly?").
   ============================================================ */

.starlog-throwback {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: var(--starlog-cream);
  color: #000;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 96px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.starlog-throwback__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.starlog-throwback__media {
  width: 100%;
}

.starlog-throwback__media img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.starlog-throwback__copy {
  display: grid;
  gap: 14px;
  max-width: 56ch;
}

.starlog-throwback__eyebrow {
  font-family: var(--font-body-family, inherit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--starlog-accent-gold);
  margin: 0;
}

.starlog-throwback__issue {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #000;
  margin: 0;
}

.starlog-throwback__line {
  font-family: var(--font-heading-family, inherit);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.4;
  color: var(--starlog-accent-gold);
  margin: 0;
}

.starlog-throwback__context {
  font-family: var(--font-body-family, inherit);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.72);
}

.starlog-throwback__context p {
  margin: 0;
}

.starlog-throwback__context p + p {
  margin-top: 10px;
}

.starlog-throwback__link {
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  padding-bottom: 2px;
  align-self: start;
  justify-self: start;
  margin-top: 8px;
  transition: border-color 180ms ease, color 180ms ease;
}

.starlog-throwback__link:hover,
.starlog-throwback__link:focus-visible {
  border-bottom-color: var(--starlog-accent-gold);
  color: #000;
}

@media (max-width: 720px) {
  .starlog-throwback__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .starlog-throwback__media {
    max-width: 200px;
  }
}

/* ============================================================
   COVER ARCHIVE MODAL
   Click any cover -> dialog with full image + research blurb.
   Visual register: cinema-of-the-archive — dark backdrop, generous
   white space, the cover IS the artifact under examination. The
   contextual text is treated like an accession card next to a
   museum object, not marketing copy.
   ============================================================ */

/* Cover trigger as a button — strip the default button chrome so
   it looks/behaves identically to the previous <a> wrapper. */
.starlog-archive__cover {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.starlog-archive__cover:focus-visible {
  outline: 2px solid var(--starlog-accent-gold);
  outline-offset: 4px;
}

/* Lock body scroll while modal is open. */
.starlog-archive-modal-open {
  overflow: hidden;
}

/* Native <dialog> — wipe browser defaults. */
.starlog-archive-modal {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--starlog-text-on-dark);
}

.starlog-archive-modal:not([open]) {
  display: none;
}

.starlog-archive-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.starlog-archive-modal::backdrop {
  background: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.starlog-archive-modal__inner {
  position: relative;
  width: min(1200px, 92vw);
  max-height: 92vh;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(280px, 420px);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  padding: clamp(24px, 3vw, 48px);
  font-family: var(--font-body-family, inherit);
}

.starlog-archive-modal__close,
.starlog-archive-modal__nav {
  position: absolute;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(250, 250, 247, 0.25);
  color: var(--starlog-text-on-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, opacity 160ms ease;
}

.starlog-archive-modal__close:hover,
.starlog-archive-modal__close:focus-visible,
.starlog-archive-modal__nav:hover:not(:disabled),
.starlog-archive-modal__nav:focus-visible:not(:disabled) {
  background-color: var(--starlog-accent-gold);
  border-color: var(--starlog-accent-gold);
  color: #000;
  outline: none;
}

.starlog-archive-modal__close {
  top: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
}

.starlog-archive-modal__nav--prev {
  top: 50%;
  left: clamp(20px, 3vw, 40px);
  transform: translateY(-50%);
}

.starlog-archive-modal__nav--next {
  top: 50%;
  right: clamp(20px, 3vw, 40px);
  transform: translateY(-50%);
}

.starlog-archive-modal__nav:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.starlog-archive-modal__figure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 80vh;
}

.starlog-archive-modal__image {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  height: auto;
  width: auto;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

.starlog-archive-modal__meta {
  display: grid;
  gap: 14px;
  align-self: center;
  max-width: 420px;
}

.starlog-archive-modal__year {
  font-family: var(--font-body-family, inherit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--starlog-accent-gold);
  margin: 0;
}

.starlog-archive-modal__issue {
  font-family: var(--font-heading-family, inherit);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--starlog-text-on-dark);
  margin: 0;
}

.starlog-archive-modal__caption {
  font-family: var(--font-heading-family, inherit);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--starlog-accent-gold);
  margin: 0;
}

.starlog-archive-modal__context {
  font-family: var(--font-body-family, inherit);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(250, 250, 247, 0.82);
}

.starlog-archive-modal__context p {
  margin: 0 0 12px;
}

.starlog-archive-modal__context p:last-child {
  margin-bottom: 0;
}

.starlog-archive-modal__counter {
  font-family: var(--font-body-family, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--starlog-text-on-dark-mute);
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(250, 250, 247, 0.1);
}

@media (max-width: 880px) {
  .starlog-archive-modal__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
    width: 100vw;
    max-height: 100vh;
    padding: 56px 20px 24px;
    align-items: start;
    overflow-y: auto;
  }
  .starlog-archive-modal__figure {
    max-height: 55vh;
  }
  .starlog-archive-modal__image {
    max-height: 55vh;
  }
  .starlog-archive-modal__nav--prev {
    top: auto;
    bottom: 16px;
    left: 16px;
    transform: none;
  }
  .starlog-archive-modal__nav--next {
    top: auto;
    bottom: 16px;
    right: 16px;
    transform: none;
  }
  .starlog-archive-modal__close {
    top: 16px;
    right: 16px;
  }
}

/* ============================================================
   PODCAST SECTION — mobile reading order
   On desktop, the image (Apollo 11 mission control) sits to the
   right of the "The Starlog Podcast" heading. Both visible together,
   the relationship reads. On mobile, Baseline default stacks image
   on top, heading below — the image arrives first with no context,
   then the heading explains it after the fact. Disjointed. Flip the
   stack order so heading comes first, image follows as supporting
   visual.
   ============================================================ */

@media (max-width: 1023px) {
  [id*="image_with_text_V8fNgL"] > section,
  [id*="image_with_text_V8fNgL"] section.grid,
  [id*="image_with_text"] section[class*="grid"] {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
}

/* ============================================================
   STRICT-AA CONTRAST PASS
   The bright gold #edc331 fails WCAG AA contrast (1.44:1) when
   used as text on cream #f2f2eb. The variable --starlog-accent-
   gold-text (#7a5e0e) passes at ~5:1. Apply it to every text
   element rendered on cream that uses the gold accent.

   Decorative gold uses (rules, hover states, button backgrounds,
   hero halos, dark-bg eyebrows) keep the bright gold and pass
   contrast naturally either by virtue of being non-text or by
   landing on dark backgrounds.
   ============================================================ */

/* Manifesto / Editorial strip eyebrow on cream */
.starlog-manifesto__eyebrow {
  color: var(--starlog-accent-gold-text);
}

/* Throwback module: eyebrow + italic gold "one-line" caption */
.starlog-throwback__eyebrow,
.starlog-throwback__line {
  color: var(--starlog-accent-gold-text);
}

/* Subscribe Promise — italic gold numerals (22px) and gold accent
   on the headline rule */
.starlog-promise.scheme1 .starlog-promise__numeral,
.starlog-promise:not(.scheme3) .starlog-promise__numeral {
  color: var(--starlog-accent-gold-text);
}

/* Lodestar newsletter eyebrow ("04 · The Lodestar") on cream */
[data-color-scheme="scheme1"] [class*="newsletter_subheading"],
[data-color-scheme=""] [class*="newsletter_subheading"] {
  color: var(--starlog-accent-gold-text) !important;
}

/* Podcast / image-with-text eyebrow ("05 · The Podcast") — dark
   gold ONLY when the section is on cream (scheme1). On dark
   schemes (scheme3/4), the bright gold returns automatically. */
[id*="image_with_text"][id*="scheme1"] [class*="subheading"]:not([class*="newsletter"]),
[id*="image_with_text"][id*="scheme1"] [class*="font-subheading"],
[id*="image_with_text"] [data-color-scheme="scheme1"] [class*="subheading"]:not([class*="newsletter"]),
[id*="image_with_text"] [data-color-scheme="scheme1"] [class*="font-subheading"] {
  color: var(--starlog-accent-gold-text) !important;
}

/* Bright gold restored on dark schemes for image-with-text. Higher
   specificity needed because Baseline ships subheading color via
   text-subheading class with !important. Anchor to the section ID
   AND the dark-scheme parent to win specificity. */
.shopify-section[id*="image_with_text_V8fNgL"] [data-color-scheme="scheme3"] .font-subheading,
.shopify-section[id*="image_with_text_V8fNgL"] [data-color-scheme="scheme3"] .text-subheading,
.shopify-section[id*="image_with_text_V8fNgL"] [data-color-scheme="scheme3"] [class*="font-subheading"],
.shopify-section[id*="image_with_text_V8fNgL"] [data-color-scheme="scheme3"] [class*="subheading"]:not([class*="newsletter"]) {
  color: var(--starlog-accent-gold) !important;
}

/* Belt-and-suspenders: force gold eyebrow on the Podcast (only
   image-with-text on the homepage) regardless of scheme attribute
   inheritance. Baseline's text-subheading class with !important
   was winning over scoped rules; pin to the section ID directly. */
.shopify-section[id*="image_with_text_V8fNgL"] .font-subheading,
.shopify-section[id*="image_with_text_V8fNgL"] .text-subheading {
  color: #edc331 !important;
}

/* Team grid / Masthead eyebrow ("07 · Masthead") on cream */
[id*="text_columns_with_images"] [data-color-scheme="scheme1"] [class*="subheading"],
[id*="text_columns_with_images"] [data-color-scheme="scheme1"] [class*="font-subheading"] {
  color: var(--starlog-accent-gold-text) !important;
}

/* Footer Lodestar — "ONE MORE THING" + the gold accent rule treatment.
   Eyebrow is a text element on cream; the rule itself stays bright
   gold (decorative). Override the eyebrow color only. */
[data-theme-footer] > section[data-color-scheme] [class*="subheading"],
[data-theme-footer] > section[data-color-scheme] .font-subheading {
  color: var(--starlog-accent-gold-text) !important;
}

/* Annual product page — guarantee block eyebrow if rendered on
   cream (the "Worth every penny" guarantee section uses cream). */
.starlog-guarantee.scheme1 [class*="eyebrow"],
.starlog-guarantee.scheme1 [class*="__eyebrow"] {
  color: var(--starlog-accent-gold-text);
}

/* Generic fallback for any starlog-* eyebrow that lands on a cream
   section. Specificity is low so explicit overrides above win. */
[data-color-scheme="scheme1"] .starlog-promise__eyebrow,
[data-color-scheme="scheme1"] [class$="__eyebrow"] {
  color: var(--starlog-accent-gold-text);
}

/* Throwback link border-bottom on hover stays bright gold (decorative
   rule, not body text). Same for hover transitions across the site —
   those keep the bright gold treatment. */

/* ============================================================
   HORIZONTAL PADDING CONSISTENCY PASS
   Baseline's newsletter, image-with-text, and text-columns sections
   default to ~18px horizontal padding regardless of viewport. The
   custom Starlog editorial sections (manifesto, pullquote, etc.)
   center within max-width:1080-1280 and pad with clamp(36-96px).
   On the homepage, this creates a visible inconsistency: sections
   1-3 are padded, sections 4-5-7 run flush to the viewport edges.

   This pass aligns the Baseline-default sections to the editorial
   horizontal rhythm. The Annual product (scheme3 dark) keeps its
   full-bleed grid intentionally — it's a commerce object that
   benefits from the visual weight. The Podcast image-with-text
   keeps the IMAGE full-bleed (intentional design move) but pads
   the text content within.
   ============================================================ */

/* Lodestar newsletter — pad inner container to match editorial */
[id*="newsletter_AzrGXU"] > section,
[id*="newsletter_AzrGXU"] section[class*="bg-scheme-background"] {
  padding-left: clamp(36px, 6vw, 96px) !important;
  padding-right: clamp(36px, 6vw, 96px) !important;
}

[id*="newsletter_AzrGXU"] > section > div,
[id*="newsletter_AzrGXU"] section[class*="bg-scheme-background"] > div {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Image-with-text (Podcast) — keep image full-bleed but the text
   column needs padding so it lines up with sections above and below.
   Target only the text column, not the image cell. */
[id*="image_with_text_V8fNgL"] > section > div:not([class*="grid-flow"]) {
  padding-left: clamp(36px, 6vw, 96px) !important;
  padding-right: clamp(36px, 6vw, 96px) !important;
}

[id*="image_with_text_V8fNgL"] > section .lg\\:col-span-6:first-child,
[id*="image_with_text_V8fNgL"] > section [class*="lg:col-span-6"]:not([class*="lg:col-start"]) {
  padding-left: clamp(36px, 6vw, 96px);
  padding-right: clamp(24px, 4vw, 48px);
}

@media (max-width: 1023px) {
  /* On mobile the section is single-column — pad both sides */
  [id*="image_with_text_V8fNgL"] > section [class*="lg:col-span-6"],
  [id*="image_with_text_V8fNgL"] > section > section > div {
    padding-left: clamp(24px, 5vw, 48px) !important;
    padding-right: clamp(24px, 5vw, 48px) !important;
  }
}

/* Masthead text-columns-with-images — align to editorial padding.
   Cards bleed to inner gutter but the section container itself
   pads so the eyebrow + headline align with sections above. */
[id*="text_columns_with_images_GQQGjn"] > section,
[id*="text_columns_with_images_GQQGjn"] section[class*="bg-scheme-background"] {
  padding-left: clamp(36px, 6vw, 96px) !important;
  padding-right: clamp(36px, 6vw, 96px) !important;
}

[id*="text_columns_with_images_GQQGjn"] > section > div {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Footer Lodestar — same alignment so the "ONE MORE THING / Don't
   miss what comes next." block visually anchors with the rest of
   the page. */
[data-theme-footer] > section[data-color-scheme] {
  padding-left: clamp(36px, 6vw, 96px) !important;
  padding-right: clamp(36px, 6vw, 96px) !important;
}

[data-theme-footer] > section[data-color-scheme] > div {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   HERO INLINE EMAIL CAPTURE
   Replaces the hero CTA button-link with an inline single-field
   email form. Editorial-classical execution: thin gold underline
   field on dark, gold pill submit. Same conversion endpoint as
   the 04 Lodestar form (Shopify customer with newsletter tag).
   Lives on the hero (dark scheme), id="subscribe" so the header
   Subscribe link can target it.
   ============================================================ */
.starlog-hero__form-wrap {
  width: 100%;
  /* Bumped 520 -> 640 so the email field has visibly more room on
     desktop. The form-row is flex with the submit button at flex:0
     and the field at flex:1 — widening the wrap flows directly into
     the field. Mobile unaffected (constrained by viewport width
     minus section padding, not by max-width). */
  max-width: 640px;
  margin: 8px 0 0;
  scroll-margin-top: 140px;
}

.starlog-hero__form {
  margin: 0;
}

.starlog-hero__form-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  border-bottom: 1px solid var(--starlog-accent-gold);
  background: rgba(250, 250, 247, 0.04);
}

.starlog-hero__form-field {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px 18px;
  font-family: var(--font-body-family, inherit);
  font-size: 15px;
  letter-spacing: 0.005em;
  color: var(--starlog-text-on-dark, #fafaf7);
  caret-color: var(--starlog-accent-gold);
}

.starlog-hero__form-field::placeholder {
  color: rgba(250, 250, 247, 0.5);
  font-style: italic;
}

.starlog-hero__form-field:focus {
  outline: none;
}

.starlog-hero__form-submit {
  flex: 0 0 auto;
  /* Explicit flex centering so the button text always sits dead-center
     in the button regardless of font line-height quirks. Was relying
     on natural line-box centering, which at 11px reads slightly off. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: var(--starlog-accent-gold);
  color: var(--starlog-ink, #0a0a0a);
  border: 1px solid var(--starlog-accent-gold);
  padding: 14px 22px;
  font-family: var(--font-body-family, inherit);
  /* Bumped 11px -> 13px to match the magazine teaser CTA
     ("BE THE FIRST TO READ IT"). Both buttons now share the same
     typographic scale + 0.18em letter-spacing + 600 weight. */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

.starlog-hero__form-submit:hover,
.starlog-hero__form-submit:focus-visible {
  background: transparent;
  color: var(--starlog-accent-gold);
  outline: none;
}

.starlog-hero__form-confirm {
  margin: 0;
  padding: 16px 0;
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--starlog-accent-gold);
}

.starlog-hero__form-error {
  margin: 0 0 12px;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  color: #ff8a8a;
}

/* Visually-hidden label (a11y) for the email field. */
.starlog-hero .sr-only,
.starlog-hero__form .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .starlog-hero__form-row {
    flex-direction: column;
    border-bottom: none;
    background: transparent;
  }
  /* On mobile the row is stacked, so the field can't borrow affordance
     from the gold submit button next to it. Give the field its own
     visible affordance: faint cream fill + a thin top/side outline,
     gold underline preserved. Reads as an editorial input box, not
     a stray placeholder line. */
  .starlog-hero__form-field {
    background: rgba(250, 250, 247, 0.08);
    border: 1px solid rgba(250, 250, 247, 0.18);
    border-bottom: 1px solid var(--starlog-accent-gold);
    padding: 14px 14px;
  }
  .starlog-hero__form-field:focus {
    border-color: var(--starlog-accent-gold);
    background: rgba(250, 250, 247, 0.12);
  }
  .starlog-hero__form-submit {
    padding: 14px 18px;
    font-size: 11px;
  }
}

/* ============================================================
   HEADER "SUBSCRIBE" PILL
   Persistent affordance in the header that scrolls back to the
   hero email form. Lives in editorial chrome, not bolted on.
   Visually echoes the hero submit button so the user perceives
   one CTA system, not many.
   ============================================================ */
.starlog-header-subscribe {
  display: inline-flex;
  align-items: center;
  margin: auto 0;
  padding: 8px 16px;
  background: var(--starlog-accent-gold);
  color: var(--starlog-ink, #0a0a0a) !important;
  border: 1px solid var(--starlog-accent-gold) !important;
  font-family: var(--font-body-family, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

.starlog-header-subscribe:hover,
.starlog-header-subscribe:focus-visible {
  background: transparent !important;
  color: var(--starlog-accent-gold) !important;
  outline: none;
}

@media (max-width: 600px) {
  .starlog-header-subscribe {
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

/* ============================================================
   MOBILE HEADER — hard overflow guard + tighter sizing.
   iOS Safari renders SVG icons and font metrics slightly wider
   than headless Chromium, so a layout that "fits" in preview
   can still produce horizontal scroll on a real phone. These
   rules ensure the header row cannot push the page sideways.
   ============================================================ */
@media (max-width: 600px) {
  /* Hard cap: nothing in the header row can overflow the viewport.
     If math is wrong somewhere, the row clips instead of scrolling
     the whole page sideways. Using `hidden` (not `clip`) for older
     iOS Safari support; `clip` is 16+.

     IMPORTANT: applied to `body` only, NOT `html`. Putting overflow-x
     on `html` creates a new scroll-context that breaks `position: sticky`
     descendants — including the sticky header. Body-only contains the
     overflow without disrupting sticky positioning. */
  body {
    overflow-x: hidden;
  }
  /* Allow flex children to shrink below their content width if needed
     (default min-width: auto blocks shrinking, which is how iOS pushes
     the hamburger off-screen). */
  header .flex > * {
    min-width: 0;
  }
  /* The right cluster gets its own overflow guard. */
  header nav .flex.justify-end {
    flex-shrink: 0;
  }
  /* Logo lockup yields if needed — text shrinks before icons clip. */
  header .starlog-masthead-lockup {
    min-width: 0;
    flex-shrink: 1;
  }
  /* Hamburger button: known fixed footprint, never shrink. */
  header nav .flex.justify-end > .flex.items-center:last-child {
    flex-shrink: 0;
  }
  /* Hamburger button hit area — WCAG AA wants 44x44 minimum.
     Icon glyph is 24x24; vertical padding from py-4 gives ample
     height. Add horizontal padding so the tap target is ~48x56
     instead of ~24x56 (thumb hits the icon directly, not the void
     between icon and viewport edge). */
  header nav .flex.justify-end > .flex.items-center:last-child > button {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ============================================================
   SOFT LAUNCH — hide cart and account from header/drawer.
   No commerce surface is live yet (Magazine PDP disabled, no
   Kickstarter, no Symposium tickets). The Cart link reads as
   confusing. The Account link opens the Shopify customer-login
   popup which has nothing to log into AND leaves a residual
   gold underline artifact on close. Both hidden here. Re-enable
   at Hard Launch by removing this block.
   ============================================================ */
.shopify-section[id*="header"] a[href="/cart"] {
  display: none !important;
}
shopify-account {
  display: none !important;
}

/* Smooth-scroll for in-page anchors so the header Subscribe pill
   doesn't jump-cut to the hero. */
html {
  scroll-behavior: smooth;
}

/* ------------------------------------------------------------
   Homepage: constrain stock-Baseline sections to match the
   Starlog-custom content rhythm (~1280px). Without this, Team /
   Lodestar newsletter / Podcast intro stretch edge-to-edge on
   wide displays and the page width "breathes" between sections.
   Also suppresses Baseline's gridline borders on these blocks so
   the constrained content doesn't float inside an orphan full-
   width border frame.
   ------------------------------------------------------------ */
[id$="__text_columns_with_images_GQQGjn"],
[id$="__newsletter_AzrGXU"],
[id$="__image_with_text_V8fNgL"] {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
[id$="__text_columns_with_images_GQQGjn"] section,
[id$="__newsletter_AzrGXU"] section,
[id$="__image_with_text_V8fNgL"] section {
  border-bottom: 0 !important;
  background-color: transparent !important;
}

/* The pullquote section ships with ~156px of vertical padding
   for editorial breathing. Against the compact Megaphone podcast
   player above and the founder-letter CTA below, that reads as
   dead space. Halve both ends. */
[id$="__annalee_pullquote"] .starlog-pullquote {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

/* ============================================================
   Inline newsletter form (Lodestar + Footer surfaces).
   Hero has its own .starlog-hero__form styling above; this is
   the quieter, Back-Room variant: line-input on cream + compact
   gold submit pill that matches Hero's typography. Editorial
   register, no SaaS chrome. Mobile stacks input over button.
   ============================================================ */
.starlog-inline-form {
  display: block;
  width: 100%;
  max-width: 640px;   /* bumped from 520px so longer emails fit comfortably */
  margin: 0;
}

.starlog-inline-form__row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
}

form.starlog-inline-form .starlog-inline-form__field {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
  outline: none;
  border-radius: 0;
  padding: 8px 0 8px 0;
  font-family: var(--font-body-family, inherit);
  font-size: 15px;
  letter-spacing: 0.005em;
  color: var(--starlog-ink, #0a0a0a);
  caret-color: var(--starlog-accent-gold);
  transition: border-color 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}

form.starlog-inline-form .starlog-inline-form__field::placeholder {
  color: rgba(0, 0, 0, 0.45);
  font-style: italic;
  opacity: 1;
}

form.starlog-inline-form .starlog-inline-form__field:focus {
  border-bottom-color: var(--starlog-accent-gold);
  outline: none;
}

form.starlog-inline-form .starlog-inline-form__submit {
  flex: 0 0 auto;
  background: var(--starlog-accent-gold) !important;
  color: var(--starlog-ink, #0a0a0a) !important;
  border: 1px solid var(--starlog-accent-gold) !important;
  border-radius: 0 !important;
  padding: 11px 18px !important;
  font-family: var(--font-body-family, inherit) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

form.starlog-inline-form .starlog-inline-form__submit:hover,
form.starlog-inline-form .starlog-inline-form__submit:focus-visible {
  background: transparent;
  color: var(--starlog-ink, #0a0a0a);
  outline: none;
}

form.starlog-inline-form .starlog-inline-form__submit:disabled,
form.starlog-inline-form .starlog-inline-form__submit[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* Success state replaces the form row inline. Italic Fraunces
   echoes the Magazine teaser tagline — editorial moment, not a
   system notification. */
.starlog-inline-form__confirm {
  margin: 0;
  padding: 8px 0 4px;
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
  color: var(--starlog-ink, #0a0a0a);
}

/* Error — muted brand red, visible on both cream and dark. */
.starlog-inline-form__error {
  margin: 0 0 10px 0;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  line-height: 1.4;
  color: #b6443c;
}

/* Mobile: stack input over button, full-width button. */
@media (max-width: 600px) {
  .starlog-inline-form__row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  form.starlog-inline-form .starlog-inline-form__field {
    padding-bottom: 12px;
    font-size: 16px; /* iOS Safari zooms inputs below 16px on focus */
  }
  form.starlog-inline-form .starlog-inline-form__submit {
    width: 100%;
    padding: 14px 18px;
  }
  .starlog-inline-form__confirm {
    font-size: 18px;
  }
}

/* When the inline form sits inside a dark color scheme (scheme3
   / scheme4 / similar), invert input border + text + confirm
   colors. Scoped via data-color-scheme on an ancestor. */
[data-color-scheme="scheme3"] form.starlog-inline-form .starlog-inline-form__field,
[data-color-scheme="scheme4"] form.starlog-inline-form .starlog-inline-form__field,
[data-color-scheme="scheme2"] form.starlog-inline-form .starlog-inline-form__field {
  border-bottom-color: rgba(250, 250, 247, 0.45);
  color: var(--starlog-text-on-dark, #fafaf7);
}
[data-color-scheme="scheme3"] form.starlog-inline-form .starlog-inline-form__field::placeholder,
[data-color-scheme="scheme4"] form.starlog-inline-form .starlog-inline-form__field::placeholder,
[data-color-scheme="scheme2"] form.starlog-inline-form .starlog-inline-form__field::placeholder {
  color: rgba(250, 250, 247, 0.5);
}
[data-color-scheme="scheme3"] form.starlog-inline-form .starlog-inline-form__field:focus,
[data-color-scheme="scheme4"] form.starlog-inline-form .starlog-inline-form__field:focus,
[data-color-scheme="scheme2"] form.starlog-inline-form .starlog-inline-form__field:focus {
  border-bottom-color: var(--starlog-accent-gold);
}
[data-color-scheme="scheme3"] .starlog-inline-form__confirm,
[data-color-scheme="scheme4"] .starlog-inline-form__confirm,
[data-color-scheme="scheme2"] .starlog-inline-form__confirm {
  color: var(--starlog-accent-gold);
}
[data-color-scheme="scheme3"] .starlog-inline-form__error,
[data-color-scheme="scheme4"] .starlog-inline-form__error,
[data-color-scheme="scheme2"] .starlog-inline-form__error {
  color: #ff8a8a;
}

/* ------------------------------------------------------------
   Team masthead — couple tier 1 (Annalee + Jordan) and tier 2
   (Dave + Meredith + Jason) as a single visual block. Each tier
   is its own Baseline text-columns-with-images section so the
   browser-grid stays simple (2 columns on tier 1, 3 on tier 2),
   but without this override the stacked sections inherit full
   py-section-vertical-spacing on both edges and produce a gap
   that breaks the masthead reading. Bottom of tier 1 + top of
   tier 2 collapsed to zero; the natural padding between rows
   inside each section still provides breathing room.

   Tier 2 also has empty subheading + title settings on purpose
   so the "Masthead / The Team" header only shows once at the
   top of tier 1; the section-header snippet in Baseline self-
   hides when both are empty.
   ------------------------------------------------------------ */
/* Section IDs in Shopify JSON templates render as
   `shopify-section-template--<id>__team_tier_1` (and _2). Using the
   bare `#shopify-section-team_tier_1` form does NOT match, so all
   selectors here use the [id*="__team_tier_N"] attribute-contains
   form. Same pattern we use for [id*="__anniversary_hero"] elsewhere
   in this file. */
[id*="__team_tier_1"] .py-section-vertical-spacing {
  padding-bottom: 0;
}
[id*="__team_tier_2"] .py-section-vertical-spacing {
  padding-top: 0;
}

/* Constrain both team tiers to a magazine reading column instead of
   letting Baseline's 12-column grid stretch edge to edge. At 1440px+
   the unconstrained grid put tier-1 portraits around 700px each and
   tier-2 around 480px each, far too wide for head-and-shoulders shots
   and out of register with the editorial-magazine voice of the rest
   of the page. 1080px matches the pullquote and other editorial
   surfaces. The clamp() side padding keeps things breathing on
   tablet / mobile where the section already collapses to single-
   column anyway. */
[id*="__team_tier_1"] > section,
[id*="__team_tier_2"] > section {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  box-sizing: content-box;
}

/* Tighten the gap between portrait and name within each masthead
   column. Baseline's text-columns-with-images puts the column's
   text block inside a `.py-section-vertical-spacing` div that
   inherits ~36px top + bottom padding. That's too generous below
   a magazine-portrait scale image; the portrait + name pairing
   loses its visual coupling.

   Note: this selector has higher specificity than the outer-wrapper
   coupling rules above (which also matched `.py-section-vertical-
   spacing` but on the section wrapper), so the column-text-container
   spacing here wins for the inner-column case while the outer-wrapper
   rule still wins for the section-coupling case. */
[id*="__team_tier_1"] li .py-section-vertical-spacing,
[id*="__team_tier_2"] li .py-section-vertical-spacing {
  padding-top: clamp(8px, 0.7vw, 10px);
  padding-bottom: clamp(20px, 2vw, 32px);
}

/* Reduce bio body type in both team tiers. Baseline ships .rte at
   text-base (16px) which reads chunky at tier 2's narrower ~340px
   columns and makes longer bios (Meredith, Dave) feel text-heavy.
   14px / 1.55 line-height is the editorial-magazine register —
   names (h3) stay at their display size, so the masthead's name
   hierarchy is preserved. */
[id*="__team_tier_1"] li .rte,
[id*="__team_tier_2"] li .rte {
  font-size: 15px;
  line-height: 1.55;
}

/* Thin hairline border on each masthead portrait. Matches the
   page's other hairlines (magazine teaser chapter rules at
   rgba(10, 10, 10, 0.12)) so all the ink-on-cream hairlines share
   one value. Defines the photo edge against the cream page bg
   without enclosing it like a frame — editorial-magazine register,
   not website-team-page register.

   Hover state shifts the hairline to the brand gold (same color
   already used for eyebrows and the magazine teaser emphasis), so
   the hover language stays inside the brand vocabulary rather than
   borrowing a generic website-interaction pattern. Triggered on
   the whole column (li:hover) so hovering name or bio also
   activates the portrait border — the column reads as one unit.
   280ms ease-out is intentionally slow for the editorial-magazine
   feel; snappier timing reads as SaaS-app.

   :focus-within is included for keyboard accessibility — currently
   no-op because team columns have no focusable children, but
   future-proof if a contributor-page link ever gets wired in. */
[id*="__team_tier_1"] li .aspect-media,
[id*="__team_tier_2"] li .aspect-media {
  border: 1px solid rgba(10, 10, 10, 0.12);
  transition: border-color 280ms ease-out;
}
[id*="__team_tier_1"] li:hover .aspect-media,
[id*="__team_tier_1"] li:focus-within .aspect-media,
[id*="__team_tier_2"] li:hover .aspect-media,
[id*="__team_tier_2"] li:focus-within .aspect-media {
  border-color: var(--starlog-accent-gold);
}

/* Footer newsletter title ("Don't miss what comes next.") — keep
   on a single line at desktop. Scoped to the footer group's
   newsletter h2 via the for="Email" attribute (Baseline emits that
   on the newsletter title h2 specifically; other footer h2s like
   column headings don't get matched). Mobile allows wrap. */
.shopify-section-group-footer-group h2.font-heading[for="Email"] {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .shopify-section-group-footer-group h2.font-heading[for="Email"] {
    white-space: normal;
  }
}