/** Shopify CDN: Minification failed

Line 2869: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: #6b520c; /* 2026-10-27: was #7a5e0e; darker so 12px eyebrows clear AA with margin */
  --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;
}


/* Sticky header offset for anchor links. Fixed per breakpoint on purpose:
   Baseline's --sticky-header-height is a unitless 0 until a helper script
   runs after load, which makes any calc() with it invalid at the moment
   the browser jumps to a #hash. Measured sticky header (2026-11-02):
   83px at 375 and 768, 126px at 1024 (nav wraps the Shop pill to a second
   row), 63px at 1440. Each value is the header plus about 16px of air. */
:where([id]) {
  scroll-margin-top: 100px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  :where([id]) {
    scroll-margin-top: 144px;
  }
}
@media (min-width: 1280px) {
  :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.
   Gated on html.js (snippets/js-bridge.liquid swaps no-js for js), so
   with scripts blocked or failed nothing is ever hidden. */
html.js [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);
}

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

/* Anchor landings (/#newsletter from another page): whatever is already on
   screen when the browser jumps must appear at once, not fade in 700ms later
   (starlog-reveals.js adds this class to in-viewport elements on load). */
html.js [data-reveal].is-revealed-instant {
  transition-duration: 0s;
  transition-delay: 0s;
}

/* 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) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hero: above the fold, so it must not wait for the scroll observer
   (which could leave the cover and headline dim for up to 3 seconds on
   phones, mobile review 2026-11-02). A short load animation instead,
   same cascade, no dependency on .is-revealed. */
html.js .starlog-hero [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
  animation: starlog-hero-in 480ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
html.js .starlog-hero [data-reveal-delay="1"] { animation-delay: 40ms; }
html.js .starlog-hero [data-reveal-delay="2"] { animation-delay: 80ms; }
html.js .starlog-hero [data-reveal-delay="3"] { animation-delay: 120ms; }
html.js .starlog-hero [data-reveal-delay="4"] { animation-delay: 160ms; }
html.js .starlog-hero [data-reveal-delay="5"] { animation-delay: 200ms; }
@keyframes starlog-hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .starlog-hero [data-reveal] { animation: 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: 12px;
  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: 12px;
  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: 12px;
  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: 24px;
    font-size: 19px;
  }
  /* The strip is a flex row, so its height follows the tallest caption
     (the 1979 Alien card runs four lines). Clamp captions to three lines
     and tighten the strip's bottom padding so the coda sits close to the
     covers on phones (mobile review 2026-11-02). */
  .starlog-archive__strip {
    padding-bottom: 16px;
  }
  .starlog-archive__caption p,
  .starlog-archive__caption span:not(.starlog-archive__year) {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ============================================================
   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: var(--starlog-accent-gold-text, #7a5e0e) !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;
}

/* Dark schemes set link text to gold, which the gold hover fill then
   swallows (podcast "Listen on" links, 2026-11-02). Ink on gold on hover
   everywhere, whatever the scheme says. */
[data-color-scheme="scheme2"] .rte a:not(.button):hover,
[data-color-scheme="scheme3"] .rte a:not(.button):hover,
.rte a:not(.button):hover {
  color: #000 !important;
}

/* 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: 12px;
}

.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-contact__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.starlog-press__asset {
  display: flex;
  flex-wrap: nowrap;
  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 0;
  min-width: 0;
}

.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 {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  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);
}

/* 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);
}
.starlog-hero__mark-label {
  font-family: var(--font-body-family, 'Lora', serif);
}


/* ============================================================
   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-text); /* cream section: text gold, not bright 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;
  }
}

/* ============================================================
   Launch (2026-11-03): the Cart link is back in the header now
   that the Magazine and merch are for sale. The Account link
   stays hidden: customer accounts are not part of the launch and
   the login popup leaves a residual gold underline on close.
   ============================================================ */
shopify-account {
  display: none !important;
}

/* Smooth-scroll for in-page anchors so the header Subscribe pill
   doesn't jump-cut to the hero. */
/* No smooth scrolling. Set on <html> it made Chrome abandon the scroll to a
   #hash arriving from another page (landed at the top); scoped to
   html:focus-within it still broke iOS Safari, where a smooth scroll to a
   hash from the menu drawer left the sticky header unstuck and the landing
   offset wrong (menu > Podcast, 2026-11-02). Instant jumps are reliable in
   every engine; the drawer closes before the jump so nothing animates over it. */
html {
  scroll-behavior: auto;
}

/* ------------------------------------------------------------
   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;
  }
}


/* ============================================================
   LAUNCH 2026-11-03: hero with the Vol 2 No. 1 cover + Shop CTA.
   The email form left the hero; newsletter capture now lives in
   04 Lodestar and the footer, and the header pill goes to the Shop.
   ============================================================ */
.starlog-hero__cover-link {
  display: block;
  color: inherit;
  text-decoration: none !important;
}

.starlog-hero__cover-link:hover .starlog-hero__cover-img,
.starlog-hero__cover-link:focus-visible .starlog-hero__cover-img {
  transform: translateY(-4px);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.6),
    0 10px 28px rgba(0, 0, 0, 0.5);
}

.starlog-hero__cover-img {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* "Vol 2, No. 1 is here. $19.99, ships mid-November." Sits between
   the lede and the button. Gold, body face, slightly tracked. */
.starlog-hero__deck-line {
  margin: 0;
  font-family: var(--font-body-family, inherit);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--starlog-accent-gold);
}

@media (max-width: 900px) {
  .starlog-hero__actions {
    justify-content: center;
  }
}

/* ============================================================
   LAUNCH 2026-11-03: magazine teaser becomes the Magazine block.
   Cover on the left, copy on the right, numbered "what's inside"
   list, price line, Pre-order CTA. Renders with no dependency on
   the product's status, so it previews on the staged theme while
   the product is still draft.
   ============================================================ */
.starlog-magazine-teaser__inner--cover {
  /* 2026-10-30: cover floats to the top and sits against the left edge of the
     reading column; the column itself is the site's 1240px width so the block
     does not leave a wide empty margin on large screens. */
  display: grid;
  grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  text-align: left;
  max-width: 1240px;
}

.starlog-magazine-teaser__inner--cover .starlog-magazine-teaser__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.starlog-magazine-teaser__inner--cover .starlog-magazine-teaser__title {
  white-space: normal;
  font-size: clamp(40px, 4.6vw, 68px);
}

.starlog-magazine-teaser__inner--cover .starlog-magazine-teaser__lede {
  max-width: 56ch;
  text-align: left;
}

.starlog-magazine-teaser__cover {
  margin: 0;
  width: 100%;
  max-width: 460px;
  justify-self: start;
  align-self: start;
  padding-top: 6px; /* optically level with the eyebrow */
}

.starlog-magazine-teaser__cover a {
  display: block;
  text-decoration: none !important;
}

.starlog-magazine-teaser__cover img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow:
    0 24px 60px rgba(10, 10, 10, 0.22),
    0 6px 18px rgba(10, 10, 10, 0.14);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.starlog-magazine-teaser__cover a:hover img,
.starlog-magazine-teaser__cover a:focus-visible img {
  transform: translateY(-4px);
  box-shadow:
    0 32px 70px rgba(10, 10, 10, 0.26),
    0 8px 22px rgba(10, 10, 10, 0.16);
}

.starlog-magazine-teaser__stack {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 60ch;
}

.starlog-magazine-teaser__stack li {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-body-family, inherit);
  font-size: 16px;
  line-height: 1.5;
  color: var(--starlog-ink, #0a0a0a);
  padding-top: 10px;
  border-top: 1px solid var(--starlog-rule, rgba(10, 10, 10, 0.12));
}

.starlog-magazine-teaser__stack-num {
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: 15px;
  color: var(--starlog-accent-gold-text);
}

.starlog-magazine-teaser__price {
  margin: 0;
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  color: var(--starlog-ink, #0a0a0a);
}

.starlog-magazine-teaser__price small {
  display: block;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.6);
  margin-top: 4px;
}

@media (max-width: 820px) {
  .starlog-magazine-teaser__inner--cover {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .starlog-magazine-teaser__inner--cover .starlog-magazine-teaser__copy {
    align-items: center;
  }
  .starlog-magazine-teaser__inner--cover .starlog-magazine-teaser__lede {
    text-align: center;
  }
  .starlog-magazine-teaser__cover {
    max-width: 300px;
    justify-self: center; /* single column: centre the cover over the centred copy */
    padding-top: 0;
  }
  .starlog-magazine-teaser__stack li {
    text-align: left;
  }
}

/* ============================================================
   LAUNCH 2026-11-03: "Inside the issue" spreads strip
   (sections/starlog-spreads.liquid). Horizontal scroll-snap track,
   lazy images, numbered captions. Cream ground, hairline frame.
   ============================================================ */
.starlog-spreads {
  width: 100%;
  background-color: var(--starlog-cream, #f2f2eb);
  color: var(--starlog-ink, #0a0a0a);
  padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

.starlog-spreads::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(20px, 5vw, 48px);
  right: clamp(20px, 5vw, 48px);
  height: 1px;
  background-color: var(--starlog-rule, rgba(10, 10, 10, 0.12));
}

.starlog-spreads__head {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.starlog-spreads__title {
  margin: 0;
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.starlog-spreads__lede {
  max-width: 60ch;
  font-family: var(--font-body-family, inherit);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(10, 10, 10, 0.72);
}

.starlog-spreads__lede p { margin: 0; }

.starlog-spreads__track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 5vw, 48px) 8px;
  scroll-padding-left: clamp(20px, 5vw, 48px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 10, 10, 0.3) transparent;
}

.starlog-spreads__item {
  flex: 0 0 auto;
  width: min(62vw, 640px);
  margin: 0;
  scroll-snap-align: start;
}

.starlog-spreads__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 870;
  background: rgba(10, 10, 10, 0.06);
  box-shadow:
    0 18px 44px rgba(10, 10, 10, 0.18),
    0 4px 12px rgba(10, 10, 10, 0.10);
}

.starlog-spreads__caption {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: 8px;
  margin: 14px 0 0;
  font-family: var(--font-body-family, inherit);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.78);
}

.starlog-spreads__num {
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif);
  font-style: italic;
  color: var(--starlog-accent-gold-text);
}

.starlog-spreads__hint {
  margin: 10px 0 0;
  padding: 0 clamp(20px, 5vw, 48px);
  font-family: var(--font-body-family, inherit);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.5);
}

@media (max-width: 640px) {
  .starlog-spreads__item { width: 86vw; }
}

/* ============================================================
   LAUNCH 2026-11-03: product pages (magazine + merch share this).
   Baseline's stock product layout is edge to edge with a gridline
   column divider and a billboard title. Frame it like an object:
   contained width, no divider, calmer title, readable measure,
   breadcrumbs gone site-wide since 2026-10-29. Scoped to the product
   template via the body class added in snippets/body-classes.liquid.
   ============================================================ */
/* 2026-10-29: breadcrumbs section removed from the header group site-wide; the
   product-only hide rule that lived here is no longer needed. */

.template-product data-island[data-product-root] {
  max-width: 1240px;
  margin: 0 auto;
  background: transparent !important;
  border-bottom: 0 !important;
  padding: clamp(24px, 3vw, 40px) clamp(16px, 3vw, 40px) 0;
  gap: clamp(24px, 4vw, 56px);
}

.template-product .product-media-container,
.template-product .product-content-container {
  background: transparent !important;
}

.template-product .product-content-container {
  padding-left: 0;
  padding-right: 0;
}

.template-product .product-block-area {
  padding-top: clamp(8px, 1.5vw, 24px);
}

.template-product .product-content-container h1 {
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.template-product .product-content-container .rte,
.template-product .product-content-container .rte p {
  max-width: 60ch;
}

/* Media: the cover (first, full width) reads as the object; the
   spreads sit two-up beneath it. Soft shadow, no gridline frames. */
.template-product .product-media-container img {
  box-shadow:
    0 18px 44px rgba(10, 10, 10, 0.16),
    0 4px 12px rgba(10, 10, 10, 0.08);
}

/* What's inside, on the product page (cream scheme). */
.template-product .starlog-value-stack {
  margin-top: 8px;
  color: var(--starlog-ink, #0a0a0a);
}
.template-product .starlog-value-stack__eyebrow {
  color: var(--starlog-accent-gold-text);
}
.template-product .starlog-value-stack__list li {
  border-top: 1px solid var(--starlog-rule, rgba(10, 10, 10, 0.12));
  color: var(--starlog-ink, #0a0a0a);
}
.template-product .starlog-value-stack__num {
  color: var(--starlog-accent-gold-text);
}

@media (max-width: 1023px) {
  .template-product data-island[data-product-root] {
    padding-top: 0;
  }

  /* Phones and tablets: cap the gallery height so the title, price and
     buy button start inside the first screen instead of after a full
     scroll of a 4:5 photo (mobile review 2026-11-02). The image keeps
     its ratio and centres; the placeholder overlay follows the wrapper. */
  .template-product .product-media-container image-with-placeholder {
    display: flex;
    justify-content: center;
    max-height: 44vh;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .template-product .product-media-container image-with-placeholder img {
    max-height: 44vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }
}

/* Cart: the Availability note (line-item property) as its own small line. */
.starlog-cart-availability {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  margin: 6px 0 0;
  padding: 4px 8px;
  background-color: var(--starlog-accent-gold, #edc331);
  color: #000;
  font-family: var(--font-body-family, inherit);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

@media (max-width: 420px) {
  .starlog-cart-availability {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
}

/* Payment buttons area: Shopify's dynamic-checkout wrapper inherits the
   big button type. Keep the "More payment options" link and the
   Managed Markets (Global-e) disclaimer at small-print size. */
.shopify-payment-button__more-options {
  font-size: 14px !important;
  font-family: var(--font-body-family, inherit);
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 10px;
  color: inherit !important;
  opacity: 0.8;
}

.shopify-payment-button p,
.shopify-payment-button [class*="disclaimer"],
.shopify-payment-button + p,
[data-shopify="payment-button"] ~ p {
  font-size: 13px !important;
  line-height: 1.5;
  max-width: 60ch;
  color: rgba(10, 10, 10, 0.65);
  margin-top: 12px;
}

/* Managed Markets (Global-e) buyer consent line: Shopify injects
   <small id="shopify-buyer-consent"> inside the payment-button wrapper,
   which inherits the big button type. Small print it is. */
#shopify-buyer-consent {
  display: block;
  font-size: 12px !important;
  line-height: 1.5;
  max-width: 60ch;
  margin-top: 12px;
  color: rgba(10, 10, 10, 0.6);
  font-family: var(--font-body-family, inherit);
}
#shopify-buyer-consent span {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* What's inside list (product page + Shop page featured block): sized to
   the body, not footnote size. 15px on 18px body read as an afterthought. */
.starlog-value-stack__item {
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.55;
}

.starlog-value-stack__num {
  font-size: clamp(22px, 1.6vw, 26px);
}

.starlog-value-stack__list {
  gap: clamp(14px, 1.3vw, 18px);
}

.starlog-value-stack__eyebrow {
  font-size: 13px;
}

/* On the cream product page the earlier dark-scheme colors are overridden
   in the .template-product block above; on the dark Shop block the item text
   stays light. Make both resolve to the scheme's own text color. */
.starlog-value-stack__item {
  color: inherit;
}
.template-product .starlog-value-stack__item {
  color: var(--starlog-ink, #0a0a0a);
}

/* ============================================================
   TYPE PASS 2026-10-22
   Root cause: Baseline exposes --font-heading / --font-body, while the
   STARLOG sections reference --font-heading-family / --font-body-family.
   Undefined, so every heading whose fallback was `inherit` rendered in
   Lora. Alias them once; every custom headline becomes Fraunces, per
   the Design Direction (Fraunces 700 headings, Lora 400 body).
   ============================================================ */
:root {
  --font-heading-family: var(--font-heading, 'Fraunces', Georgia, serif);
  --font-body-family: var(--font-body, 'Lora', Georgia, serif);
}

/* Eyebrows: one treatment. Gold-text on cream, gold on dark. Baseline's
   own subheadings (Shop strip, Masthead, Newsletter, footer) were black;
   the promise, pull quote and FAQ eyebrows were 55% black. */
.shopify-section .font-subheading.text-subheading,
.starlog-promise__eyebrow,
.starlog-pullquote__eyebrow,
.starlog-faq__eyebrow,
.starlog-spreads__eyebrow {
  color: var(--starlog-accent-gold-text, #7a5e0e) !important;
}
.shopify-section [data-color-scheme="scheme3"] .font-subheading.text-subheading,
.shopify-section [data-color-scheme="scheme3"] .starlog-pullquote__eyebrow,
[data-color-scheme="scheme3"] .starlog-pullquote__eyebrow {
  color: var(--starlog-accent-gold, #edc331) !important;
}
/* 2026-10-27: .starlog-value-stack__eyebrow was in the !important list above,
   which forced bright gold on the cream product page (1.5:1). Its color is
   now decided by the scheme rules in the UX-review block at the end. */

/* Section titles: Baseline's standard (about 44px at desktop) is the
   reference. The Subscribe headline and the FAQ title sat at 64px, a
   size otherwise reserved for the archive and magazine marquees. */
.starlog-promise__headline,
.starlog-faq__title {
  font-size: clamp(34px, 3.1vw, 46px);
  line-height: 1.08;
}

/* Product title: the Shop page's featured block used Baseline's 86px
   display size while the product page is 52px. Same clamp everywhere. */
.product-title-block {
  font-size: clamp(34px, 3.6vw, 54px) !important;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Buy button: 35px Fraunces shouted over a 52px title. */
.add-to-cart.font-button,
.shopify-payment-button + .add-to-cart {
  font-size: clamp(18px, 1.6vw, 24px) !important;
  letter-spacing: 0.06em;
}

/* The two primary CTAs (hero, magazine block) now match each other. */
.starlog-hero__cta,
.starlog-magazine-teaser__cta {
  font-family: var(--font-body-family, inherit);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Homepage magazine block list matches the product-page list size. */
.starlog-magazine-teaser__stack li {
  font-size: clamp(17px, 1.25vw, 19px);
}

/* ---- KITS (Shopify fixed bundles): component list under the cart line ---- */
.starlog-cart-components {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(10, 10, 10, 0.72);
}
.starlog-cart-components li::before {
  content: "\2193\00a0";
}

/* ---- COMPLETE THE MISSION: kit cross-sell on merch pages and in the cart ---- */
.starlog-mission,
.starlog-cart-upsell {
  border-top: 1px solid rgba(10, 10, 10, 0.18);
  border-bottom: 1px solid rgba(10, 10, 10, 0.18);
  padding: 1.1rem 0 1.2rem;
}
.starlog-cart-upsell {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 1.5rem;
}
.starlog-mission__eyebrow,
.starlog-cart-upsell__eyebrow {
  margin: 0 0 0.45rem;
  font-family: var(--font-body-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(122, 94, 14);
}
.starlog-mission__text,
.starlog-cart-upsell__text {
  margin: 0 0 0.6rem;
  font-size: 17px;
  line-height: 1.5;
}
.starlog-mission__cta,
.starlog-cart-upsell__cta {
  display: inline-block;
  font-family: var(--font-body-family);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid #edc331;
  padding-bottom: 2px;
}

/* Mission / upsell layout: image left, copy right */
.starlog-mission,
.starlog-cart-upsell {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 1.1rem;
  align-items: center;
}
.starlog-cart-upsell {
  grid-template-columns: 72px 1fr;
  max-width: none;
  margin: 1.25rem 0 0;
  padding: 1.1rem 0.5rem 1.2rem;
}
.template-cart .starlog-cart-upsell {
  padding: 1.25rem 1rem 1.5rem;
}
.starlog-mission__media,
.starlog-cart-upsell__media {
  display: block;
  line-height: 0;
}
.starlog-mission__media img,
.starlog-cart-upsell__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgba(10, 10, 10, 0.18);
}
.starlog-mission__text,
.starlog-cart-upsell__text { font-size: 16px; }

/* Room under the last block (the ships / returns / questions table) on every product page */
.template-product .product-content-container {
  padding-bottom: 3rem;
}
@media (min-width: 1024px) {
  .template-product .product-content-container {
    padding-bottom: 4rem;
  }
}

/* Cart upsell: one-click swap controls */
.starlog-cart-upsell button.starlog-cart-upsell__cta {
  background: none;
  border: 0;
  border-bottom: 2px solid #edc331;
  border-radius: 0;
  padding: 0 0 2px;
  cursor: pointer;
  color: inherit;
}
.starlog-cart-upsell__cta--quiet {
  margin-left: 1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  border-bottom-color: rgba(10, 10, 10, 0.25);
}
.starlog-cart-upsell__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 0.7rem;
}
.starlog-cart-upsell__size {
  min-width: 2.6rem;
  padding: 0.35rem 0.55rem;
  background: none;
  border: 1px solid rgba(10, 10, 10, 0.35);
  border-radius: 0;
  font-family: var(--font-body-family);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: inherit;
}
.starlog-cart-upsell__size:hover { border-color: #0a0a0a; background: #edc331; }
.starlog-cart-upsell__size[disabled] { opacity: 0.35; cursor: not-allowed; }
.starlog-cart-upsell.is-busy { opacity: 0.55; pointer-events: none; }
.starlog-cart-upsell__error { margin: 0.5rem 0 0; font-size: 13px; color: #9a1b1b; }

/* ---- COMPLETE THE MISSION, v2: an ink panel so it reads as an offer, not body copy ---- */
.starlog-mission,
.starlog-cart-upsell {
  background: #0a0a0a;
  color: #f2f2eb;
  border: 2px solid #0a0a0a;
  padding: 1rem 1.1rem 1.1rem;
  grid-template-columns: 84px 1fr;
  gap: 1.1rem;
  align-items: center;
}
.starlog-mission { margin: 0.25rem 0 0.5rem; }
.starlog-cart-upsell { margin: 1.25rem 0.5rem 0; padding: 1rem 1rem 1.1rem; grid-template-columns: 72px 1fr; }
.template-cart .starlog-cart-upsell { margin: 1.5rem 0 0; max-width: 44rem; }
.starlog-mission__media img,
.starlog-cart-upsell__media img {
  border: 2px solid #f2f2eb;
}
.starlog-mission__eyebrow,
.starlog-cart-upsell__eyebrow {
  color: #edc331;
  margin-bottom: 0.4rem;
}
.starlog-mission__eyebrow::before,
.starlog-cart-upsell__eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.5rem;
  background: #edc331;
  vertical-align: 1px;
}
.starlog-mission__text,
.starlog-cart-upsell__text {
  color: #f2f2eb;
  font-size: 16px;
  margin-bottom: 0.75rem;
}
.starlog-mission__cta,
.starlog-cart-upsell button.starlog-cart-upsell__cta,
.starlog-cart-upsell a.starlog-cart-upsell__cta {
  display: inline-block;
  background: #edc331;
  color: #0a0a0a;
  border: 0;
  border-radius: 0;
  padding: 0.55rem 0.9rem;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: none;
  line-height: 1;
}
.starlog-mission__cta:hover,
.starlog-cart-upsell button.starlog-cart-upsell__cta:hover,
.starlog-cart-upsell a.starlog-cart-upsell__cta:hover {
  background: #f2f2eb;
  color: #0a0a0a;
}
.starlog-cart-upsell a.starlog-cart-upsell__cta--quiet {
  background: none;
  color: #f2f2eb;
  padding: 0.55rem 0;
  margin-left: 0.9rem;
  border-bottom: 1px solid rgba(242, 242, 235, 0.5);
  border-radius: 0;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.starlog-cart-upsell a.starlog-cart-upsell__cta--quiet:hover { background: none; color: #edc331; border-bottom-color: #edc331; }
.starlog-cart-upsell__size {
  color: #f2f2eb;
  border-color: rgba(242, 242, 235, 0.45);
}
.starlog-cart-upsell__size:hover { background: #edc331; color: #0a0a0a; border-color: #edc331; }
.starlog-cart-upsell__error { color: #ffb4b4; }
@media (max-width: 640px) {
  .starlog-mission { grid-template-columns: 64px 1fr; gap: 0.9rem; padding: 0.9rem; }
}

/* Mission panel: lift the copy off the black */
.starlog-mission__text,
.starlog-cart-upsell__text {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 500;
  margin-bottom: 0.85rem;
}
.starlog-cart-upsell__text { font-size: 17px; }
.starlog-mission__eyebrow,
.starlog-cart-upsell__eyebrow {
  font-size: 13px;
  letter-spacing: 0.16em;
  margin-bottom: 0.55rem;
}
.starlog-mission,
.starlog-cart-upsell {
  padding: 1.15rem 1.25rem 1.25rem;
  gap: 1.25rem;
}
.starlog-cart-upsell { padding: 1.1rem 1.1rem 1.2rem; }
@media (max-width: 640px) {
  .starlog-mission__text { font-size: 17px; }
}

.starlog-mission__cta,
.starlog-cart-upsell button.starlog-cart-upsell__cta,
.starlog-cart-upsell a.starlog-cart-upsell__cta {
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}

/* Mission panel: the label becomes the headline */
.starlog-mission__eyebrow,
.starlog-cart-upsell__eyebrow {
  font-family: var(--font-heading-family);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.1;
  color: #edc331;
  margin: 0 0 0.5rem;
}
.starlog-cart-upsell__eyebrow { font-size: 21px; }
.starlog-mission__eyebrow::before,
.starlog-cart-upsell__eyebrow::before {
  width: 10px;
  height: 10px;
  margin-right: 0.55rem;
  vertical-align: 3px;
}
.starlog-mission__text,
.starlog-cart-upsell__text { font-size: 17px; font-weight: 400; }
@media (max-width: 640px) {
  .starlog-mission__eyebrow { font-size: 21px; }
}

/* Mission panel label: back to the small caps label, in a lighter gold */
.starlog-mission__eyebrow,
.starlog-cart-upsell__eyebrow {
  font-family: var(--font-body-family);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #f6dd7a;
  margin: 0 0 0.55rem;
}
.starlog-cart-upsell__eyebrow { font-size: 13px; }
.starlog-mission__eyebrow::before,
.starlog-cart-upsell__eyebrow::before {
  width: 8px;
  height: 8px;
  margin-right: 0.5rem;
  vertical-align: 1px;
  background: #f6dd7a;
}
@media (max-width: 640px) {
  .starlog-mission__eyebrow { font-size: 13px; }
}

/* ---- Mission panels on phones: label beside a small thumbnail, copy and buttons full width ---- */
@media (max-width: 640px) {
  .starlog-mission,
  .starlog-cart-upsell {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-areas:
      "media label"
      "text text"
      "sizes sizes"
      "cta cta"
      "quiet quiet"
      "error error";
    column-gap: 0.75rem;
    row-gap: 0;
    align-items: center;
    padding: 0.9rem 0.9rem 1rem;
  }
  .starlog-cart-upsell { margin: 1rem 0 0; }
  .starlog-mission__body,
  .starlog-cart-upsell__body { display: contents; }
  .starlog-mission__media,
  .starlog-cart-upsell__media { grid-area: media; }
  .starlog-mission__media img,
  .starlog-cart-upsell__media img { aspect-ratio: 3 / 4; }
  .starlog-mission__eyebrow,
  .starlog-cart-upsell__eyebrow {
    grid-area: label;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.12em;
    line-height: 1.3;
  }
  .starlog-mission__text,
  .starlog-cart-upsell__text {
    grid-area: text;
    margin: 0.8rem 0 0.75rem;
    font-size: 15px;
    line-height: 1.45;
  }
  .starlog-cart-upsell__sizes { grid-area: sizes; margin-bottom: 0.6rem; }
  .starlog-mission__cta,
  .starlog-cart-upsell button.starlog-cart-upsell__cta,
  .starlog-cart-upsell a.starlog-cart-upsell__cta:not(.starlog-cart-upsell__cta--quiet) {
    grid-area: cta;
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.7rem 0.75rem;
    font-size: 12px;
  }
  .starlog-cart-upsell a.starlog-cart-upsell__cta--quiet {
    grid-area: quiet;
    display: inline-block;
    justify-self: start;
    margin: 0.6rem 0 0;
    padding: 0 0 2px;
    font-size: 12px;
  }
  .starlog-cart-upsell__error { grid-area: error; }
}

/* ============================================================
   UX review 2026-10-27 (Starlog/Website/UX Review 2026-10-27.md), P1 fixes
   ============================================================ */

/* 4. Contrast: the "What's inside" value stack renders on cream (product
   page main section) and on ink (homepage product block). Default to the
   text gold; bright gold only inside a scheme3 wrapper. */
.starlog-value-stack__eyebrow {
  color: var(--starlog-accent-gold-text);
}
[data-color-scheme="scheme3"] .starlog-value-stack__eyebrow,
.scheme3 .starlog-value-stack__eyebrow {
  color: var(--starlog-accent-gold) !important;
}

/* 5. Tap targets: 44px hit areas without changing the visual size.
   Baseline's .min-touch-target::before is 100% x 100% of the button,
   so it never enlarged anything; give it a real minimum. */
.min-touch-target::before {
  min-width: 44px;
  min-height: 44px;
}

/* "More payment options" (Shopify dynamic checkout): 15px tall link -> 44px row. */
.shopify-payment-button__more-options {
  display: inline-block !important;
  min-height: 44px;
  padding: 11px 0 !important;
  margin-top: 2px !important;
  line-height: 1.5;
}

/* Cart line items: minus / plus (24px boxes) get a centred 44px hit area;
   the Remove link's <small> gets padding so the anchor's own display
   classes (hidden / lg:block) are left alone. */
#main-cart-items button[name="minus"],
#main-cart-items button[name="plus"],
.drawer-cart button[name="minus"],
.drawer-cart button[name="plus"],
[data-starlog-drawer] button[name="minus"],
[data-starlog-drawer] button[name="plus"],
form[action*="/cart"] button[name="minus"],
form[action*="/cart"] button[name="plus"] {
  position: relative;
}
form[action*="/cart"] button[name="minus"]::before,
form[action*="/cart"] button[name="plus"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
a[href*="/cart/change"][href*="quantity=0"] small {
  display: inline-block;
  padding: 12px 0;
  line-height: 1.4;
}

/* Cart cross-sell size buttons: 30px -> 40px, 44px on touch. */
.starlog-cart-upsell__size {
  min-height: 40px;
  min-width: 2.75rem;
}
.starlog-cart-upsell button.starlog-cart-upsell__cta,
.starlog-cart-upsell a.starlog-cart-upsell__cta:not(.starlog-cart-upsell__cta--quiet),
.starlog-mission__cta {
  min-height: 44px;
}
@media (pointer: coarse) {
  .starlog-cart-upsell__size {
    min-height: 44px;
    min-width: 44px;
  }
  .starlog-cart-upsell a.starlog-cart-upsell__cta--quiet {
    display: inline-block;
    padding: 10px 0;
  }
}

/* 6. Homepage length on phones and tablets: below Baseline's lg breakpoint
   (1024px) the masthead grid is one column, so five portraits ran at full
   width (687px wide on a 768px tablet). Make it a compact list instead:
   96px portrait (120px from 640px up) left, name + bio right. */
@media (max-width: 1023px) {
  [id*="__team_tier_1"] li,
  [id*="__team_tier_2"] li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 14px 0;
  }
  [id*="__team_tier_1"] li + li,
  [id*="__team_tier_2"] li + li {
    border-top: 1px solid rgba(10, 10, 10, 0.1);
  }
  [id*="__team_tier_1"] li .p-grid-media,
  [id*="__team_tier_2"] li .p-grid-media {
    padding: 0;
  }
  [id*="__team_tier_1"] li .py-section-vertical-spacing,
  [id*="__team_tier_2"] li .py-section-vertical-spacing {
    padding: 0 !important;
  }
  [id*="__team_tier_1"] li .text-heading-secondary,
  [id*="__team_tier_2"] li .text-heading-secondary {
    font-size: 20px;
    line-height: 1.15;
  }
  [id*="__team_tier_1"] li .rte,
  [id*="__team_tier_2"] li .rte {
    font-size: 14px;
    line-height: 1.5;
  }
  [id*="__team_tier_1"] li .rte p,
  [id*="__team_tier_2"] li .rte p {
    margin-bottom: 0.4em;
  }
  [id*="__team_tier_2"] > section {
    padding-top: 0;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  [id*="__team_tier_1"] li,
  [id*="__team_tier_2"] li {
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 24px;
  }
  [id*="__team_tier_1"] li .rte,
  [id*="__team_tier_2"] li .rte {
    font-size: 15px;
  }
}

/* 6b. One email capture on the homepage: the body already has the Lodestar
   signup (section 04), so the footer's "One More Thing" form is hidden on
   the homepage only. Every other page keeps it. */
.template-index .shopify-section-group-footer-group section:has(h2[for="Email"]) {
  display: none;
}


/* Size guide (2026-10-29): inline disclosure under the size picker, sized products only */
.starlog-size-guide { margin: 0.35rem 0 0.25rem; }
.starlog-size-guide__summary {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; list-style: none;
  min-height: 44px; padding: 0.5rem 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--starlog-ink); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--starlog-accent-gold);
}
.starlog-size-guide__summary::-webkit-details-marker { display: none; }
.starlog-size-guide__summary::after {
  content: ""; width: 0.45em; height: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em); transition: transform 0.15s ease;
}
.starlog-size-guide[open] .starlog-size-guide__summary::after { transform: rotate(-135deg) translateY(0.1em); }
.starlog-size-guide__body { padding: 0.25rem 0 0.75rem; }
.starlog-size-guide__intro, .starlog-size-guide__note { font-size: 14px; line-height: 1.55; color: var(--starlog-text-soft); margin: 0 0 0.75rem; }
.starlog-size-guide__note { margin: 0.75rem 0 0; }
.starlog-size-guide__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.starlog-size-guide__table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .starlog-size-guide__table { font-size: 13px; }
  .starlog-size-guide__table th, .starlog-size-guide__table td { padding: 0.45rem 0.35rem; }
}
.starlog-size-guide__table th, .starlog-size-guide__table td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid rgba(10, 10, 10, 0.14); white-space: nowrap; }
.starlog-size-guide__table thead th { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--starlog-text-mute); font-weight: 600; border-bottom-color: var(--starlog-ink); white-space: normal; vertical-align: bottom; line-height: 1.25; }
.starlog-size-guide__table tbody th { font-weight: 700; }
.starlog-size-guide__table th:first-child, .starlog-size-guide__table td:first-child { padding-left: 0; }

/* ============================================================
   Issue page (/pages/inside), 2026-10-29. Back Room rules: cream,
   Fraunces heads, Lora body, gold on folios and rules only, sharp
   corners, hairline dividers. Sections: starlog-issue-hero,
   -contents, -contributors, -close. Spec: docs/superpowers/specs/
   2026-10-29-issue-landing-page-design.md
   ============================================================ */
.starlog-issue-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--starlog-accent-gold-text); }
.starlog-issue-eyebrow--light { color: var(--starlog-accent-gold); }
.starlog-issue-h2 { margin: 0; font-family: var(--font-heading-family, 'Fraunces', Georgia, serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.01em; }
.starlog-issue-lede { max-width: 75ch; font-size: 16px; line-height: 1.55; color: rgba(10, 10, 10, 0.72); }
.starlog-issue-lede p { margin: 0; }
.starlog-issue-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.5rem; border: 1px solid var(--starlog-ink); background: var(--starlog-ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border-radius: 0; transition: background-color 0.15s ease, color 0.15s ease; }
.starlog-issue-btn:hover, .starlog-issue-btn:focus-visible { background: var(--starlog-accent-gold); color: var(--starlog-ink); border-color: var(--starlog-accent-gold); }
.starlog-issue-btn--small { min-height: 40px; padding: 0 1rem; font-size: 11px; }
.starlog-issue-btn--light { background: var(--starlog-cream); color: var(--starlog-ink); border-color: var(--starlog-cream); }

/* hero */
.starlog-issue-hero { background: var(--starlog-cream); color: var(--starlog-ink); padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 48px) clamp(48px, 6vw, 80px); }
.starlog-issue-hero__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.starlog-issue-hero__cover { margin: 0; }
.starlog-issue-hero__cover img { display: block; width: 100%; height: auto; border: 1px solid var(--starlog-ink); background: #fff; }
.starlog-issue-hero__cover figcaption { margin-top: 10px; font-size: 12px; font-style: italic; color: rgba(10, 10, 10, 0.6); }
.starlog-issue-hero__eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--starlog-accent-gold-text); }
.starlog-issue-hero__title { margin: 0; font-family: var(--font-heading-family, 'Fraunces', Georgia, serif); font-weight: 400; font-size: clamp(44px, 6.4vw, 96px); line-height: 0.98; letter-spacing: -0.02em; }
.starlog-issue-hero__deck { margin-top: 20px; max-width: 54ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: rgba(10, 10, 10, 0.78); }
.starlog-issue-hero__deck p { margin: 0; }
.starlog-issue-hero__cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.starlog-issue-hero__note { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--starlog-accent-gold-text); }
.starlog-issue-hero__facts { margin: 36px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(10, 10, 10, 0.14); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.starlog-issue-hero__facts dt { font-family: var(--font-heading-family, 'Fraunces', Georgia, serif); font-size: clamp(28px, 3vw, 40px); line-height: 1; font-weight: 400; }
.starlog-issue-hero__facts dd { margin: 6px 0 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(10, 10, 10, 0.6); }

/* sticky bar */
.starlog-issue-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--starlog-cream); border-top: 1px solid var(--starlog-ink); padding: 10px clamp(16px, 4vw, 48px) calc(10px + env(safe-area-inset-bottom)); transform: translateY(0); transition: transform 0.25s ease, opacity 0.25s ease; }
.starlog-issue-bar[hidden] { display: block; transform: translateY(110%); opacity: 0; pointer-events: none; }
.starlog-issue-bar__inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.starlog-issue-bar__label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.starlog-issue-bar__note { font-weight: 500; color: var(--starlog-accent-gold-text); }
@media (prefers-reduced-motion: reduce) { .starlog-issue-bar { transition: none; } }

/* contents */
.starlog-issue-contents { background: var(--starlog-cream); color: var(--starlog-ink); padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 48px); border-top: 1px solid rgba(10, 10, 10, 0.12); }
.starlog-issue-contents__head, .starlog-issue-section { max-width: 1000px; margin: 0 auto; }
.starlog-issue-contents__head { display: flex; flex-direction: column; gap: 14px; }
.starlog-issue-section { margin-top: clamp(48px, 6vw, 88px); }
.starlog-issue-section__head { display: block; padding: 18px 0 22px; border-top: 3px solid var(--starlog-ink); border-bottom: 1px solid rgba(10, 10, 10, 0.14); }
.starlog-issue-section__label { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--starlog-accent-gold-text); }
.starlog-issue-section__name { margin: 0; font-family: var(--font-heading-family, 'Fraunces', Georgia, serif); font-weight: 600; font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.015em; }
.starlog-issue-section--front { margin-top: clamp(28px, 4vw, 48px); }
.starlog-issue-section__rule { border-top: 1px solid rgba(10, 10, 10, 0.14); margin-bottom: 4px; }
.starlog-issue-section__head--front { border-top: 1px solid rgba(10, 10, 10, 0.14); padding: 14px 0 6px; }
.starlog-issue-section__desc { margin: 10px 0 0; font-size: 15px; color: rgba(10, 10, 10, 0.62); }
.starlog-issue-list { list-style: none; margin: 0; padding: 0; }
.starlog-issue-piece { border-bottom: 1px solid rgba(10, 10, 10, 0.14); scroll-margin-top: 96px; }
/* lead spreads sit in a small grid under each section head (2026-10-30): no sideways scrolling,
   three across on desktop, two across on phones, rows wrap */
.starlog-issue-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; margin: 18px 0 6px; max-width: 700px; }
.starlog-issue-strip__item { margin: 0; min-width: 0; }
.starlog-issue-strip__item img { display: block; width: 100%; height: auto; border: 1px solid var(--starlog-ink); background: #fff; }
.starlog-issue-strip__item a { display: block; }
.starlog-issue-strip__item figcaption { margin-top: 7px; font-size: 12px; line-height: 1.4; color: rgba(10, 10, 10, 0.72); }
.starlog-issue-strip__folio { color: var(--starlog-accent-gold-text); margin-right: 4px; }
.starlog-issue-piece__row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 16px; padding: 18px 0 20px; }
.starlog-issue-piece__folio { padding-top: 0.45em; font-size: 13px; line-height: 1.2; letter-spacing: 0.04em; color: rgba(10, 10, 10, 0.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.starlog-issue-piece__folio-p { font-style: italic; margin-right: 1px; }
.starlog-issue-piece__kicker { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10, 10, 10, 0.55); }
.starlog-issue-piece__title { margin: 0; font-family: var(--font-heading-family, 'Fraunces', Georgia, serif); font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; }
.starlog-issue-piece__byline { margin: 6px 0 0; font-size: 15px; color: rgba(10, 10, 10, 0.72); }
.starlog-issue-piece__byline a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--starlog-accent-gold); }
.starlog-issue-piece__byline a:hover { color: var(--starlog-ink); text-decoration-color: var(--starlog-ink); }

/* contributors */
.starlog-issue-people { background: #fff; color: var(--starlog-ink); padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 48px); border-top: 1px solid rgba(10, 10, 10, 0.12); }
.starlog-issue-people__head { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.starlog-issue-people__grid { list-style: none; max-width: 1240px; margin: clamp(32px, 4vw, 56px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 clamp(24px, 3vw, 48px); border-top: 1px solid rgba(10, 10, 10, 0.14); }
.starlog-issue-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 0 26px; border-bottom: 1px solid rgba(10, 10, 10, 0.14); scroll-margin-top: 96px; }
.starlog-issue-card.has-photo { grid-template-columns: 96px minmax(0, 1fr); }
.starlog-issue-card__photo img { display: block; width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--starlog-ink); background: #f2f2eb; }
.starlog-issue-card__name { margin: 0; font-family: var(--font-heading-family, 'Fraunces', Georgia, serif); font-weight: 400; font-size: 22px; line-height: 1.2; }
.starlog-issue-card__role { margin: 2px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--starlog-accent-gold-text); }
.starlog-issue-card__wrote { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: rgba(10, 10, 10, 0.72); }
.starlog-issue-card__wrote-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10, 10, 10, 0.5); margin-bottom: 2px; }
.starlog-issue-card__wrote a { color: var(--starlog-ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--starlog-accent-gold); }
.starlog-issue-card__sep { color: var(--starlog-accent-gold-text); }
.starlog-issue-card__bio { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: rgba(10, 10, 10, 0.78); }
.starlog-issue-card__site { margin: 8px 0 0; font-size: 13px; }
.starlog-issue-card__site a { color: var(--starlog-ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--starlog-accent-gold); }

/* close */
.starlog-issue-close { background: var(--starlog-ink); color: var(--starlog-text-on-dark, #fafaf7); padding: clamp(64px, 8vw, 112px) clamp(20px, 5vw, 48px) clamp(96px, 10vw, 140px); text-align: center; }
.starlog-issue-close__inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.starlog-issue-close__title { margin: 0; font-family: var(--font-heading-family, 'Fraunces', Georgia, serif); font-weight: 400; font-size: clamp(30px, 4vw, 56px); line-height: 1.08; letter-spacing: -0.01em; }
.starlog-issue-close__text { font-size: 17px; line-height: 1.55; color: rgba(250, 250, 247, 0.78); }
.starlog-issue-close__text p { margin: 0; }
.starlog-issue-close__cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
.starlog-issue-close__fine { margin: 0; font-size: 12px; font-style: italic; color: rgba(250, 250, 247, 0.6); }
.starlog-issue-close__newsletter { margin: 10px 0 0; font-size: 14px; color: rgba(250, 250, 247, 0.72); }
.starlog-issue-close__newsletter a { color: var(--starlog-accent-gold); text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 1023px) {
  .starlog-issue-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .starlog-issue-hero__cover { max-width: 420px; }
  .starlog-issue-piece__row { grid-template-columns: 2.9rem minmax(0, 1fr); column-gap: 12px; }
  .starlog-issue-people__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .starlog-issue-bar__label { font-size: 11px; }
  .starlog-issue-bar__note { display: none; }
  .starlog-issue-hero__facts { gap: 10px; }
}

/* link from the magazine page value stack to /pages/inside (2026-10-29) */
.starlog-value-stack__more { margin: 14px 0 0; font-size: 14px; }
.starlog-value-stack__more a { color: inherit; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-color: var(--starlog-accent-gold); }
.starlog-value-stack__more a:hover { text-decoration-color: currentColor; }

/* teaser: secondary link to /pages/inside (2026-10-30) */
.starlog-magazine-teaser__secondary { margin: -10px 0 0; font-size: 14px; } /* the copy column's 20px gap already applies; net 10px under the button */
.starlog-magazine-teaser__secondary a { color: inherit; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-color: var(--starlog-accent-gold); }
.starlog-magazine-teaser__secondary a:hover { text-decoration-color: currentColor; }