/* ============================================================
   Stephanie Griswold — Editorial Theme CSS
   Design: editorial, warm, restrained. Inspired by Kinfolk,
   The Atlantic, Aeon. Centered on long-form reading.
   ============================================================ */

/* ─── Custom Properties ────────────────────────────────────── */

:root {
  /* Colors — warm forest palette */
  --sg-forest:          #183C32;   /* deep forest: hero + newsletter backgrounds */
  --sg-forest-dark:     #0E2820;
  --sg-forest-mid:      #1F4A3C;   /* forest-mid: speaking section bg */
  --sg-forest-muted:    #BDC9B8;   /* desaturated sage: text on dark bg */
  --sg-moss:            #68785B;   /* moss: decorative/secondary accents */
  --sg-sage:            #D9E0D3;   /* soft sage: gentle section backgrounds */
  --sg-cream:           #F7F2E8;   /* warm cream: main page background */
  --sg-sand:            #EDE3D2;   /* sand/parchment: cards, panels */
  --sg-parchment:       #E4DAC8;   /* deeper parchment */
  --sg-clay:            #AD705B;   /* muted clay: accent (large text / decorative) */
  --sg-timber:          #3D5E4A;   /* dark forest green: links + interactive (WCAG AA) */
  --sg-timber-light:    #4F5C45;   /* moss: secondary labels. Darkened from
                                       #68785B (3.73:1 on sand) to clear AA while
                                       staying distinct from --sg-timber. */
  --sg-timber-pale:     #BDC9B8;   /* soft sage border */
  --sg-ink:             #302C27;   /* warm brown-black: headings + body text */
  --sg-ink-mid:         #4E4841;   /* warm mid gray: body paragraphs */
  --sg-ink-light:       #635E58;   /* warm gray: meta, captions. Darkened from
                                       #7A7570, which measured 4.09:1 on cream,
                                       3.59:1 on sand and 3.38:1 on sage — all
                                       under AA for the small text it carries. */
  --sg-border:          #DDD6C8;
  --sg-border-dark:     #C4BAA8;

  /* Typography */
  --sg-font-display:    'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sg-font-body:       'Lora', Georgia, 'Times New Roman', serif;
  --sg-font-ui:         'Space Grotesk', 'Helvetica Neue', Arial, system-ui, sans-serif;

  /* Component-level spacing (not for section rhythm — use --sg-space-* below) */
  --sg-gap-xs:    0.5rem;
  --sg-gap-sm:    1rem;
  --sg-gap-md:    2rem;
  --sg-gap-lg:    4rem;
  --sg-gap-xl:    6rem;
  --sg-gap-2xl:   9rem;

  /* ─── Layout: the canonical width system ───────────────────
     Three widths, one horizontal padding value. Every section on
     the site aligns to one of these three edges. Nothing else.   */
  /* Three named tiers, used everywhere. No section invents its own width. */
  --sg-width-page:      77.5rem;         /* 1240px — page shell, archives, footer */
  --sg-width-narrative: 48.75rem;        /*  780px — narrative columns            */
  --sg-width-form:      43rem;           /*  688px — compact form measure         */
  --sg-width-reading:   43rem;           /*  688px — essay body measure           */
  /* Aliases for the names used in the refinement brief. Same values, one
     source — a parallel scale would drift from this one. */
  /* Accessible colour values from the corrective brief. Added rather than
     overwriting the global palette: measured, every existing *text* token
     already clears 4.5:1 on sand, cream and sage, so none of them needed
     replacing. These exist for the cases that did fail — controls, helper
     text and focus — and for the dark sections, where opacity was being used
     to make essential colours. */
  --ca-cream:              #f6f1e8;
  --ca-white:              #fffdf8;
  --ca-sage:               #dfe8df;
  --ca-text:               #203731;
  --ca-muted:              #55645f;
  --ca-eyebrow:            #385b51;
  --ca-dark:               #17362f;
  --ca-on-dark:            #f9f5ec;
  --ca-on-dark-secondary:  #dde8e1;
  --ca-control-border:     #5f746c;
  --ca-focus:              #0b6657;

  --sg-page-max:        var(--sg-width-page);
  --sg-reading-max:     var(--sg-width-narrative);
  --sg-page-gutter:     var(--sg-page-padding);
  --sg-rule:            var(--sg-border);

  --sg-width-wide:      86rem;           /* 1376px — deliberate wide compositions */

  /* Alias: .sg-container's default cap. Kept so existing markup keeps working. */
  --sg-width-content:   var(--sg-width-page);

  --sg-page-padding:    clamp(1.25rem, 4vw, 4rem);

  /* Legacy aliases — retained so pre-migration block markup keeps
     rendering during the Stage 2 cutover. Remove once all inline
     contentSize values are gone from templates and Pages. */
  --sg-content-width:   var(--sg-width-reading);
  --sg-wide-width:      var(--sg-width-content);

  /* Masthead height — one value, every page. */
  --sg-header-h:            4.75rem;

  /* ─── Spacing rhythm ─────────────────────────────────────── */
  /* Three tiers. Major = the reader should pause. Related = sections that
     belong together. Group = internal rhythm inside one section. */
  --sg-space-major:    clamp(4.5rem, 11vw, 9rem);     /*  72 → 144px; 112px+ from 1024 */
  --sg-space-related:  clamp(3.5rem, 7vw, 6rem);      /*  56 →  96px;  72px+ from 1024 */
  --sg-space-group:    clamp(2rem, 4vw, 3.5rem);      /*  32 →  56px */

  /* Aliases onto the tiers, so existing selectors keep working unchanged. */
  --sg-space-section:        var(--sg-space-major);
  --sg-space-section-small:  var(--sg-space-related);
  --sg-space-content:        var(--sg-space-group);

  /* Transitions */
  --sg-transition:      150ms ease;
  --sg-transition-med:  250ms ease;
  --sg-transition-slow: 400ms ease;

  /* Border radius */
  --sg-radius-sm: 4px;
  --sg-radius:    8px;
  --sg-radius-lg: 12px;

  /* Shadows */
  --sg-shadow-soft:   0 2px 12px rgba(28,28,26,0.08);
  --sg-shadow-medium: 0 4px 24px rgba(28,28,26,0.12);
  --sg-shadow-card:   0 1px 4px rgba(28,28,26,0.06), 0 4px 16px rgba(28,28,26,0.08);
}


/* ─── Reset & Base ─────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* No overflow-x here by design.
     A body-level `overflow-x: clip` (or `hidden`) silently truncates
     anything that extends past the viewport — which produces the exact
     "content cut off at viewport edges" symptom it appears to fix, and
     makes the real cause undetectable in QA. Horizontal overflow is
     prevented structurally instead, via the min-width:0 and
     max-width:100% safeguards in the container system below.
     If a scrollbar ever appears, that is the correct signal: find the
     element that overflows rather than masking it here. */
  background-color: var(--sg-cream);
  color: var(--sg-ink);
  font-family: var(--sg-font-body);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--sg-timber);
  text-decoration: none;
  transition: color var(--sg-transition);
}

a:hover {
  color: var(--sg-ink);
}

a:focus-visible {
  outline: 2px solid var(--sg-timber);
  outline-offset: 3px;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* ─── Eyebrow / Label Utility ──────────────────────────────── */

.sg-eyebrow,
.sg-label {
  font-family: var(--sg-font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-timber);
  display: block;
  margin: 0 0 0.75rem;
}

.sg-eyebrow--light {
  color: var(--sg-forest-muted);
}

.sg-eyebrow--ink {
  color: var(--sg-ink-light);
}


/* ─── Site Header ──────────────────────────────────────────── */

/* One masthead, every page. Height and alignment never change; only the
   background opacity and the bottom rule respond to scroll. */
.sg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--sg-header-h, 4.75rem);
  display: flex;
  align-items: center;
  background-color: rgba(247, 242, 232, 0.92);
  border-bottom: 1px solid transparent;
  transition: background-color var(--sg-transition-med),
              border-color var(--sg-transition-med),
              box-shadow var(--sg-transition-med);
}

@supports (backdrop-filter: blur(8px)) {
  .sg-header { backdrop-filter: blur(8px); }
}

/* theme.js adds .is-scrolled past 20px. */
.sg-header.is-scrolled {
  background-color: var(--sg-cream);
  border-bottom-color: var(--sg-border);
  box-shadow: 0 1px 12px rgba(28, 28, 26, 0.04);
}

.sg-header__inner { width: 100%; }

.sg-header.is-scrolled {
  box-shadow: var(--sg-shadow-soft);
}

.sg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  padding: 1rem var(--sg-page-padding);
}

.sg-site-title {
  font-family: var(--sg-font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--sg-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sg-site-title:hover {
  color: var(--sg-forest);
}

/* Navigation */
.sg-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-nav a {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sg-ink-mid);
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  border-radius: var(--sg-radius-sm);
  transition: color var(--sg-transition), background-color var(--sg-transition);
  letter-spacing: 0.01em;
}

.sg-nav a:hover,
.sg-nav a[aria-current="page"],
.sg-nav .current-menu-item > a,
.sg-nav .current_page_item > a {
  color: var(--sg-ink);
  background-color: var(--sg-parchment);
}

.sg-subscribe-link {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sg-timber);
  text-decoration: none;
  border: 1.5px solid var(--sg-timber-pale);
  border-radius: var(--sg-radius-sm);
  padding: 0.375rem 0.875rem;
  transition: all var(--sg-transition);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sg-subscribe-link:hover {
  background-color: var(--sg-timber);
  border-color: var(--sg-timber);
  color: var(--sg-cream);
}


/* ─── Hero Section ─────────────────────────────────────────── */

/* ─── Portrait-Led Split Hero ──────────────────────── */

.sg-hero {
  background-color: var(--sg-cream);
  overflow: hidden;
}

.sg-hero .wp-block-columns.sg-hero__cols,
.sg-home-hero .wp-block-columns.sg-hero__cols {
  display: grid !important;
  grid-template-columns: 45fr 55fr !important;
  gap: 0 !important;
  max-width: none !important;
  align-items: stretch !important;
  min-height: clamp(480px, 75vh, 800px); /* constrained: shorter on landscape phones */
  margin: 0 !important;
  padding: 0 !important;
}

.sg-hero .wp-block-column.sg-hero__copy-col {
  flex-basis: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.5rem, 4vw, 4.5rem) clamp(3.5rem, 9vw, 7rem) var(--sg-page-padding) !important;
  background: var(--sg-cream);
}

.sg-hero__eyebrow {
  font-family: var(--sg-font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-moss);
  margin: 0 0 1.25rem;
}

.sg-hero__headline {
  font-family: var(--sg-font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sg-ink);
  margin: 0 0 1.5rem;
  /* No max-width here. The hero measure has exactly one owner:
     body.home .sg-hero__copy-col > * via --sg-hero-measure. A 16ch cap lived
     here from when the headline was 80px and starved it once the size dropped
     to 56px, leaving the headline narrower than its own body copy. */
}

.sg-hero__subhead {
  font-family: var(--sg-font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(48, 44, 39, 0.72);
  margin: 0 0 2.5rem;
  
}

.sg-hero .wp-block-column.sg-hero__image-col {
  flex-basis: auto !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  background: var(--sg-sage); /* staging placeholder — hidden once portrait is added */
}

.sg-hero__portrait {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.sg-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

@media (max-width: 767px) {
  .sg-hero .wp-block-columns.sg-hero__cols,
  .sg-home-hero .wp-block-columns.sg-hero__cols {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .sg-hero .wp-block-column.sg-hero__copy-col,
  .sg-home-hero .wp-block-column.sg-hero__copy-col {
    padding: 3rem var(--sg-page-padding) !important;
  }

  /* ─── HERO MOBILE ORDER: Option A — portrait ABOVE the copy ───
     This is a deliberate choice, not inherited behaviour.

     Why: this is an author platform, and leading with the portrait
     establishes the person before the argument — the standard editorial
     magazine treatment, and consistent with the About section, which also
     puts its portrait first on small screens.

     Implemented with `order`, so the DOM keeps copy first. That matters:
     the <h1> stays the first content node for screen readers and crawlers
     while the portrait leads visually. The image is non-interactive, so the
     visual/DOM divergence carries no focus-order cost.

     Height is capped at 52vh so the headline and both CTAs remain within
     roughly one scroll on a 375 × 667 viewport rather than being pushed
     entirely below the fold.

     To switch to Option B (portrait below copy): delete this order rule.
     Update HOME-CUTOVER-STEPS.md § "Hero mobile behaviour" if you do. */
  .sg-hero .wp-block-column.sg-hero__image-col,
  .sg-home-hero .wp-block-column.sg-hero__image-col {
    order: -1;
    position: relative;
    min-height: 0;
    max-height: 52vh;
    overflow: hidden;
  }

  .sg-hero .wp-block-column.sg-hero__image-col .sg-photo-slot--bleed,
  .sg-home-hero .wp-block-column.sg-hero__image-col .sg-photo-slot--bleed {
    min-height: 0;
    height: 52vh;
  }

  .sg-hero__headline {
    max-width: none;
  }
}


/* ─── Buttons ──────────────────────────────────────────────── */

.sg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.625rem 1.375rem;
  border-radius: var(--sg-radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--sg-transition);
  white-space: nowrap;
  line-height: 1.4;
}

.sg-btn--primary {
  background-color: var(--sg-timber);
  color: var(--sg-cream);
  border-color: var(--sg-timber);
}

.sg-btn--primary:hover {
  background-color: var(--sg-ink);
  border-color: var(--sg-ink);
  color: var(--sg-cream);
}

.sg-btn--outline {
  background-color: transparent;
  color: var(--sg-cream);
  border-color: rgba(253, 254, 245, 0.35);
}

.sg-btn--outline:hover {
  border-color: var(--sg-cream);
  color: var(--sg-cream);
  background-color: rgba(253, 254, 245, 0.1);
}

.sg-btn--outline-ink {
  background-color: transparent;
  color: var(--sg-timber);
  border-color: var(--sg-timber-pale);
}

.sg-btn--outline-ink:hover {
  background-color: var(--sg-timber);
  border-color: var(--sg-timber);
  color: var(--sg-cream);
}

.sg-btn--ghost {
  background: none;
  border: none;
  color: var(--sg-timber);
  padding-left: 0;
  padding-right: 0;
  font-weight: 500;
}

.sg-btn--ghost:hover {
  color: var(--sg-ink);
}


/* ─── Pillar Cards (Writing / Speaking) ────────────────────── */

.sg-pillars {
  padding: var(--sg-space-section-small) var(--sg-page-padding);
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.sg-pillar {
  border-radius: var(--sg-radius-lg);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sg-pillar--light {
  background-color: var(--sg-parchment);
  color: var(--sg-ink);
}

.sg-pillar--dark {
  background-color: var(--sg-forest);
  color: var(--sg-cream);
}

.sg-pillar__number {
  font-family: var(--sg-font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-timber);
  margin: 0;
}

.sg-pillar--dark .sg-pillar__number {
  color: var(--sg-forest-muted);
}

.sg-pillar__title {
  font-family: var(--sg-font-display);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: inherit;
}

.sg-pillar__desc {
  font-family: var(--sg-font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sg-ink-mid);
  margin: 0;
  flex-grow: 1;
}



/* ─── Section Header ───────────────────────────────────────── */

.sg-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sg-border);
}

/* ═══════════════════════════════════════════════════════════════
   TYPE SCALE — four principal levels plus a label
   ═══════════════════════════════════════════════════════════════
   Literary serif carries ideas (display, page/section titles, quotes).
   Restrained sans carries interface (nav, metadata, forms, labels).
   Use ONE of these per element. Do not stack an eyebrow + title +
   subtitle + paragraph + multiple CTAs in every section.
   ═══════════════════════════════════════════════════════════════ */

.sg-display {
  font-family: var(--sg-font-display);
  /* Was clamp(3rem, 7vw, 6.25rem) — 100px at 1440, which no column on this
     site is wide enough to carry. */
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--sg-ink);
  text-wrap: balance;
}

.sg-page-title {
  font-family: var(--sg-font-display);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--sg-ink);
  text-wrap: balance;
}

.sg-section-title {
  font-family: var(--sg-font-display);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--sg-ink);
  text-wrap: balance;
}

.sg-body {
  font-family: var(--sg-font-body);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.7;
  color: var(--sg-ink-mid);
}

/* Reading measure for long-form prose — caps line length independently
   of the container so body copy stays comfortable in wide compositions. */
.sg-body--measure { max-width: 34em; }

.sg-eyebrow {
  font-family: var(--sg-font-ui);
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sg-timber);
  margin: 0 0 var(--sg-gap-sm);
}

/* On dark sections the label needs a lighter tone to hold AA contrast. */
.sg-page-hero--dark .sg-eyebrow,
.sg-about-writing .sg-eyebrow,

/* text-wrap: balance is a progressive enhancement; it must not shrink
   the measure on long headings in unsupporting browsers. */
@supports not (text-wrap: balance) {
  .sg-display,
  .sg-page-title,
  .sg-section-title { text-wrap: normal; }
}

.sg-section-link {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sg-timber);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sg-section-link:hover {
  color: var(--sg-ink);
}


/* ─── Essay Cards ──────────────────────────────────────────── */

.sg-essay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.sg-essay-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.sg-essay-card__image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0; /* Publication-Wide Editorial System: no rounded images. See top of file. */
  background-color: var(--sg-parchment);
}

.sg-essay-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.sg-essay-card:hover .sg-essay-card__image img {
  transform: scale(1.02);
}

.sg-essay-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sg-topic-tag {
  font-family: var(--sg-font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-timber);
  text-decoration: none;
}

.sg-topic-tag:hover {
  color: var(--sg-ink);
}

.sg-essay-date {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-ink-light);
}

.sg-essay-card__title {
  font-family: var(--sg-font-display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  color: var(--sg-ink);
}

.sg-essay-card__title a {
  color: inherit;
  text-decoration: none;
}

.sg-essay-card__title a:hover {
  color: var(--sg-forest);
}

.sg-essay-card__excerpt {
  font-family: var(--sg-font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--sg-ink-mid);
  margin: 0;
}

.sg-essay-card__read {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sg-timber);
  text-decoration: none;
  letter-spacing: 0.01em;
  margin-top: auto;
}

.sg-essay-card__read:hover {
  color: var(--sg-ink);
}


/* ─── Featured Essay ───────────────────────────────────────── */

.sg-featured-essay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: var(--sg-space-section-small) var(--sg-page-padding);
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  border-bottom: 1px solid var(--sg-border);
}

.sg-featured-essay__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0; /* Publication-Wide Editorial System: no rounded images. See top of file. */
  background-color: var(--sg-parchment);
}

.sg-featured-essay__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-featured-essay__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sg-featured-essay__label {
  font-family: var(--sg-font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-timber);
}

.sg-featured-essay__title {
  font-family: var(--sg-font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--sg-ink);
}

.sg-featured-essay__title a {
  color: inherit;
  text-decoration: none;
}

.sg-featured-essay__title a:hover {
  color: var(--sg-forest);
}

.sg-featured-essay__excerpt {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--sg-ink-mid);
  margin: 0;
}

.sg-featured-essay__read-time {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-ink-light);
}


/* ─── Areas of Inquiry ─────────────────────────────────────── */

.sg-areas {
  background-color: var(--sg-parchment);
  padding: var(--sg-space-section-small) var(--sg-page-padding);
}

.sg-areas__inner {
  max-width: var(--sg-wide-width);
  margin: 0 auto;
}

.sg-areas__intro {
  max-width: 540px;
  margin-bottom: 3rem;
}

.sg-areas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.sg-area {
  border-top: 2px solid var(--sg-timber-pale);
  padding-top: 1.5rem;
}

.sg-area__name {
  font-family: var(--sg-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 0.75rem;
  color: var(--sg-ink);
}

.sg-area__desc {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--sg-ink-mid);
  margin: 0 0 1rem;
}

.sg-area__link {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sg-timber);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.sg-area__link:hover {
  color: var(--sg-ink);
}


/* ─── Newsletter / Subscribe ───────────────────────────────── */

.sg-newsletter {
  background-color: var(--sg-forest);
  color: var(--sg-cream);
  /* No padding: .sg-section owns vertical rhythm and .sg-container owns the
     horizontal measure. Declaring padding here as well double-padded the
     newsletter section. */
}

.sg-newsletter__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.sg-newsletter__label {
  font-family: var(--sg-font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-forest-muted);
  display: block;
  margin-bottom: 1rem;
}

.sg-newsletter__headline {
  font-family: var(--sg-font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--sg-cream);
  margin: 0 0 1rem;
}

.sg-newsletter__desc {
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 2rem;
}

.sg-subscribe-form {
  display: block;
  max-width: 480px;
  margin: 0 auto 1rem;
}

.sg-subscribe-form__row {
  display: flex;
  gap: 0.75rem;
}

.sg-subscribe-form__input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--sg-radius-sm);
  color: var(--sg-cream);
  font-family: var(--sg-font-ui);
  font-size: 0.9375rem;
  transition: border-color var(--sg-transition);
}


.sg-subscribe-form__input:focus {
  border-color: var(--sg-timber-light);
}

.sg-subscribe-form__btn {
  padding: 0.75rem 1.5rem;
  background: var(--sg-timber);
  color: var(--sg-cream);
  border: 1.5px solid var(--sg-timber);
  border-radius: var(--sg-radius-sm);
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--sg-transition);
  white-space: nowrap;
}

.sg-subscribe-form__btn:hover {
  background: var(--sg-cream);
  color: var(--sg-ink);
  border-color: var(--sg-cream);
}

.sg-newsletter__notice {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
}



/* ─── About Brief (Homepage) ───────────────────────────────── */

.sg-about-brief {
  padding: var(--sg-space-section-small) var(--sg-page-padding);
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 4rem;
  align-items: center;
}

.sg-about-brief__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sg-about-brief__name {
  font-family: var(--sg-font-display);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--sg-ink);
  margin: 0;
}

.sg-about-brief__bio {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--sg-ink-mid);
  margin: 0;
}

.sg-about-brief__links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sg-about-brief__portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0; /* Publication-Wide Editorial System: no rounded images. See top of file. */
  background-color: var(--sg-parchment);
  position: relative;
}

.sg-about-brief__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-portrait-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--sg-parchment) 0%, var(--sg-timber-pale) 100%);
  color: var(--sg-timber-light);
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  text-align: center;
  padding: 2rem;
}


/* ─── Credentials Bar ──────────────────────────────────────── */

.sg-credentials {
  background-color: var(--sg-forest-mid);
  color: var(--sg-cream);
  padding: 2rem var(--sg-page-padding);
}

.sg-credentials__inner {
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.sg-credentials__facts {
  font-family: var(--sg-font-display);
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

.sg-credentials__quote {
  border-left: 2px solid var(--sg-timber);
  padding-left: 1.5rem;
}

.sg-credentials__quote blockquote {
  font-family: var(--sg-font-display);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.sg-credentials__attribution {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-forest-muted);
  margin: 0;
}


/* ─── Essay Archive (Writing Page) ────────────────────────── */

.sg-archive-header {
  padding: var(--sg-space-section-small) var(--sg-page-padding) var(--sg-space-content);
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  border-bottom: 1px solid var(--sg-border);
}

.sg-archive-header__title {
  font-family: var(--sg-font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 400;
  margin: 0 0 0.75rem;
  line-height: 1.1;
  color: var(--sg-ink);
}

.sg-archive-header__desc {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--sg-ink-mid);
  max-width: 480px;
  margin: 0;
}

/* Topic filter pills */
.sg-topic-filter {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1.5rem var(--sg-page-padding);
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  border-bottom: 1px solid var(--sg-border);
}




/* ─── Essay List (Archive grid) ────────────────────────────── */

.sg-essay-list {
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  padding: var(--sg-space-content) var(--sg-page-padding) var(--sg-space-section-small);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2.5rem;
}

.sg-essay-list .sg-essay-card__image {
  aspect-ratio: 16 / 9;
}


/* ─── Single Essay ─────────────────────────────────────────── */

/* Section wrapper only. Width and inset come from the .sg-container inside it;
   vertical rhythm from .sg-section. Declaring max-width/margin/padding here as
   well double-inset the essay header once single.html adopted the container
   system. Text alignment is set on .sg-page--essay .sg-essay-header. */
.sg-essay-header {
  /* intentionally no width, margin or padding */
}

.sg-essay-header__topic {
  font-family: var(--sg-font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-timber);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1.25rem;
}

.sg-essay-header__title {
  font-family: var(--sg-font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  color: var(--sg-ink);
}

.sg-essay-header__deck {
  font-family: var(--sg-font-body);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--sg-ink-mid);
  margin: 0 0 1.5rem;
}

.sg-essay-header__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-ink-light);
}

.sg-essay-header__meta span::before {
  content: '·';
  margin-right: 1rem;
}

.sg-essay-header__meta span:first-child::before {
  content: '';
  margin-right: 0;
}


/* Featured image */
.sg-essay-hero-image {
  max-width: var(--sg-wide-width);
  margin: 0 auto 0;
  padding: 0 var(--sg-page-padding);
}

/* Sizing/radius for .sg-essay-hero-image img now lives in the
   ESSAYS ARCHIVE + SINGLE ESSAY section below, under the
   Publication-Wide Editorial System. This earlier duplicate
   (rounded corners, fixed 520px height) has been removed. */


/* ─── Essay Body ────────────────────────────────────────────── */

/* Section wrapper only — see the note on .sg-essay-header. */
.sg-essay-body {
  /* intentionally no width, margin or padding */
}

/* Typography for essay prose */
.sg-essay-body p {
  font-family: var(--sg-font-body);
  font-size: 1.125rem;
  line-height: 1.82;
  color: var(--sg-ink);
  margin: 0 0 1.5em;
}

.sg-essay-body h2 {
  font-family: var(--sg-font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 2.5em 0 0.75em;
  color: var(--sg-ink);
  letter-spacing: -0.01em;
}

.sg-essay-body h3 {
  font-family: var(--sg-font-display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 2em 0 0.5em;
  color: var(--sg-ink);
}

.sg-essay-body h4,
.sg-essay-body h5,
.sg-essay-body h6 {
  font-family: var(--sg-font-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  margin: 2em 0 0.5em;
  color: var(--sg-ink-mid);
}

/* Drop cap for essay opening. Add class no-dropcap to the first paragraph block
   to suppress for poems, short reflections, or pieces where a drop cap is wrong. */
.sg-essay-body > p:first-of-type::first-letter {
  font-family: var(--sg-font-display);
  font-size: 4.25em;
  font-weight: 400;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.1em 0 0;
  color: var(--sg-timber);
}
.sg-essay-body > p.no-dropcap:first-of-type::first-letter {
  all: unset;
}

.sg-essay-body ul,
.sg-essay-body ol {
  margin: 0 0 1.5em 1.5rem;
  padding: 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--sg-ink);
}

.sg-essay-body li {
  margin-bottom: 0.4em;
}

.sg-essay-body blockquote {
  border-left: 3px solid var(--sg-timber);
  margin: 2em 0;
  padding: 0.25em 0 0.25em 1.75em;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--sg-ink-mid);
}

.sg-essay-body blockquote cite {
  display: block;
  font-family: var(--sg-font-ui);
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--sg-ink-light);
  margin-top: 0.75em;
}

/* Pull quotes */
.wp-block-pullquote {
  border-top: 2px solid var(--sg-timber) !important;
  border-bottom: 2px solid var(--sg-timber) !important;
  padding: 1.75rem 0 !important;
  margin: 2.5em 0 !important;
}

.wp-block-pullquote blockquote p {
  font-family: var(--sg-font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
  line-height: 1.4;
  margin: 0;
  color: var(--sg-ink);
}

.wp-block-pullquote cite {
  font-family: var(--sg-font-ui);
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--sg-ink-light);
  letter-spacing: 0.04em;
}

/* Footnotes */
.sg-essay-body .footnotes {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--sg-ink-mid);
  border-top: 1px solid var(--sg-border);
  margin-top: 4rem;
  padding-top: 2rem;
}

.sg-essay-body .footnotes ol {
  margin: 0;
  padding-left: 1.25rem;
}

.sg-essay-body a.footnote-backref {
  font-size: 0.8em;
  text-decoration: none;
  color: var(--sg-timber);
}

/* Images in essays */
.sg-essay-body figure {
  margin: 2.5em 0;
}

.sg-essay-body figure img {
  width: 100%;
  height: auto;
  border-radius: 0; /* Publication-Wide Editorial System: no rounded images. See top of file. */
}

.sg-essay-body figcaption {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--sg-ink-light);
  text-align: center;
  margin-top: 0.625rem;
}

/* Horizontal rule */
.sg-essay-body hr {
  border: none;
  border-top: 1px solid var(--sg-border);
  margin: 3em 0;
}

/* Section break ornament */
.sg-essay-body hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  width: 48px;
  border-top-color: var(--sg-timber-pale);
  border-top-width: 2px;
}


/* ─── Essay Footer ──────────────────────────────────────────── */

.sg-essay-footer {
  max-width: var(--sg-content-width);
  margin: 0 auto;
  padding: 0 var(--sg-page-padding) var(--sg-space-section-small);
}

.sg-essay-share {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--sg-border);
  border-bottom: 1px solid var(--sg-border);
  margin-bottom: 2.5rem;
}

.sg-essay-share__label {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sg-ink-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* Related essays */
/* Background only — .sg-section supplies the vertical rhythm. */
.sg-related {
  background-color: var(--sg-parchment);
}

.sg-related__inner {
  max-width: var(--sg-wide-width);
  margin: 0 auto;
}


/* ─── About Page ────────────────────────────────────────────── */

.sg-about-hero {
  padding: var(--sg-space-section) var(--sg-page-padding) var(--sg-space-section-small);
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.sg-about-hero__content {
  max-width: 540px;
}

.sg-about-hero__title {
  font-family: var(--sg-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1.5rem;
  color: var(--sg-ink);
  letter-spacing: -0.01em;
}

.sg-about-hero__lead {
  font-size: 1.125rem;
  line-height: 1.78;
  color: var(--sg-ink-mid);
  margin: 0 0 1.5rem;
}

.sg-about-hero__portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0; /* Publication-Wide Editorial System: no rounded images. See top of file. */
  background-color: var(--sg-parchment);
  position: sticky;
  top: 5rem;
}

.sg-about-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-credentials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: var(--sg-gap-md) 0;
  border-top: 1px solid var(--sg-border);
}

.sg-credential-group dt {
  font-family: var(--sg-font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-timber);
  margin-bottom: 0.5rem;
}

.sg-credential-group dd {
  font-family: var(--sg-font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--sg-ink-mid);
  margin: 0;
}


/* ─── Speaking & Consulting Page ───────────────────────────── */

.sg-speaking-hero {
  background-color: var(--sg-forest);
  color: var(--sg-cream);
  padding: var(--sg-space-section) var(--sg-page-padding) var(--sg-space-section-small);
}

.sg-speaking-hero__inner {
  max-width: 680px;
  margin: 0 auto;
}

.sg-speaking-hero__title {
  font-family: var(--sg-font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--sg-cream);
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
}

.sg-speaking-hero__desc {
  font-size: 1.125rem;
  line-height: 1.7;
  margin: 0;
  max-width: 560px;
}

.sg-offering {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--sg-border);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}

.sg-offering__label {
  font-family: var(--sg-font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-timber);
  padding-top: 0.25rem;
}

.sg-offering__title {
  font-family: var(--sg-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 0.75rem;
  color: var(--sg-ink);
}

.sg-offering__desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--sg-ink-mid);
  margin: 0 0 1.25rem;
}

.sg-offering__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-offering__topic-tag {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-timber);
  background-color: var(--sg-parchment);
  border: 1px solid var(--sg-border);
  padding: 0.25rem 0.6875rem;
  border-radius: 100px;
}


/* ─── Contact Page ──────────────────────────────────────────── */

.sg-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem;
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  padding: var(--sg-space-section) var(--sg-page-padding);
  align-items: start;
}

.sg-contact-intro {
  position: sticky;
  top: 5rem;
}

.sg-contact-intro__title {
  font-family: var(--sg-font-display);
  font-size: 2rem;
  font-weight: 400;
  margin: 0 0 1rem;
  color: var(--sg-ink);
  line-height: 1.2;
}

.sg-contact-intro__desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--sg-ink-mid);
  margin: 0 0 1.5rem;
}

.sg-contact-paths {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.sg-contact-path {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  color: var(--sg-ink-mid);
  text-decoration: none;
}

.sg-contact-path__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--sg-timber-pale);
  flex-shrink: 0;
}

.sg-contact-notice {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sg-ink-light);
  padding: 1rem 1.25rem;
  background-color: var(--sg-parchment);
  border-radius: var(--sg-radius);
  border-left: 3px solid var(--sg-timber-pale);
}

/* Form */
.sg-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sg-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sg-form-group--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.sg-form-label {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sg-ink-mid);
  letter-spacing: 0.01em;
}

.sg-form-label .required {
  color: var(--sg-timber);
  margin-left: 0.1em;
}

.sg-form-input,
.sg-form-select,
.sg-form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-radius-sm);
  background-color: var(--sg-cream);
  color: var(--sg-ink);
  font-family: var(--sg-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: border-color var(--sg-transition);
  appearance: none;
  -webkit-appearance: none;
}

.sg-form-input:focus,
.sg-form-select:focus,
.sg-form-textarea:focus {
  outline: none;
  border-color: var(--sg-timber);
  box-shadow: 0 0 0 3px rgba(119, 95, 59, 0.1);
}

.sg-form-input::placeholder,
.sg-form-textarea::placeholder {
  color: var(--sg-ink-light);
}

.sg-form-textarea {
  resize: vertical;
  min-height: 120px;
}

.sg-form-hint {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-ink-light);
  line-height: 1.5;
}

.sg-form-submit {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.sg-form-privacy {
  font-family: var(--sg-font-ui);
  font-size: 0.75rem;
  color: var(--sg-ink-light);
}


/* Pagination styling now lives in the ESSAYS ARCHIVE + SINGLE ESSAY
   section below ("Pagination: text and rules, not pills"), under the
   Publication-Wide Editorial System. This earlier duplicate (rounded
   pill background) has been removed. */


/* ─── 404 Page ──────────────────────────────────────────────── */

.sg-404 {
  text-align: center;
  padding: var(--sg-space-section) var(--sg-page-padding);
  max-width: 560px;
  margin: 0 auto;
}

.sg-404__number {
  font-family: var(--sg-font-display);
  font-size: 6rem;
  font-weight: 400;
  color: var(--sg-timber-pale);
  line-height: 1;
  margin: 0 0 1rem;
}

.sg-404__title {
  font-family: var(--sg-font-display);
  font-size: 2rem;
  font-weight: 400;
  margin: 0 0 1rem;
  color: var(--sg-ink);
}

.sg-404__message {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--sg-ink-mid);
  margin: 0 0 2rem;
}


/* ─── Search Results ────────────────────────────────────────── */

.sg-search-header {
  padding: var(--sg-space-section-small) var(--sg-page-padding) var(--sg-space-content);
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  border-bottom: 1px solid var(--sg-border);
}

.sg-search-header__label {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-ink-light);
  margin-bottom: 0.5rem;
}

.sg-search-header__title {
  font-family: var(--sg-font-display);
  font-size: 2rem;
  font-weight: 400;
  margin: 0;
  color: var(--sg-ink);
}

.sg-search-box {
  max-width: var(--sg-wide-width);
  margin: 0 auto;
  padding: 1.5rem var(--sg-page-padding);
  border-bottom: 1px solid var(--sg-border);
}

.sg-search-form {
  display: flex;
  gap: 0.75rem;
  max-width: 480px;
}

.sg-search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-radius-sm);
  background-color: var(--sg-cream);
  color: var(--sg-ink);
  font-family: var(--sg-font-ui);
  font-size: 0.9375rem;
  transition: border-color var(--sg-transition);
}

.sg-search-input:focus {
  outline: none;
  border-color: var(--sg-timber);
}


/* ─── Footer ────────────────────────────────────────────────── */

.sg-footer {
  padding: var(--sg-space-section) var(--sg-page-padding) var(--sg-space-section-small);
}

.sg-footer__inner {
  max-width: var(--sg-wide-width);
  margin: 0 auto;
}


.sg-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.sg-footer__legal {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
}

.sg-footer__legal-links {
  display: flex;
  gap: 1.25rem;
}

.sg-footer__legal-links a {
  text-decoration: none;
  transition: color var(--sg-transition);
}



/* ═══════════════════════════════════════════════════════════════
   THE CONTAINER SYSTEM — single source of truth for page layout
   ═══════════════════════════════════════════════════════════════

   Two responsibilities, deliberately separated:

     .sg-section    owns VERTICAL rhythm and background. Full-bleed.
                    Never sets horizontal padding.
     .sg-container   owns HORIZONTAL width and centring.
                    Never sets vertical padding.

   Horizontal inset is folded into the container's width calculation
   rather than applied as padding. That is what makes duplicate
   padding structurally impossible: a nested .sg-container cannot
   double an inset that is expressed as a width.

   Correct usage:

     <section class="wp-block-group alignfull sg-section sg-home-hero">
       <div class="sg-container sg-container--wide"> … </div>
     </section>

   Never put .sg-container inside another .sg-container.
   ═══════════════════════════════════════════════════════════════ */

.sg-section {
  width: 100%;
  padding-block: var(--sg-space-section);
}

.sg-section--compact {
  padding-block: var(--sg-space-section-small);
}

/* Flush variants — for sections whose child supplies its own edge
   (e.g. a full-bleed image half, or a shortcode that self-pads). */
.sg-section--flush      { padding-block: 0; }
.sg-section--flush-top  { padding-block-start: 0; }
.sg-section--flush-end  { padding-block-end: 0; }

/* The cap is a custom property, NOT a max-width override.
   `width: min(…, cap)` already resolves to the smaller value, so a
   `max-width` modifier can only ever narrow the result — it cannot widen it.
   That silently broke --wide (86rem) which sat above the 72rem base and so
   never took effect. Overriding the cap variable works in both directions. */
.sg-container {
  --sg-container-cap: var(--sg-width-content);
  width: min(
    calc(100% - (2 * var(--sg-page-padding))),
    var(--sg-container-cap)
  );
  margin-inline: auto;
  min-width: 0;
}

.sg-container--wide      { --sg-container-cap: var(--sg-width-wide); }
.sg-container--narrative { --sg-container-cap: var(--sg-width-narrative); }
.sg-container--reading   { --sg-container-cap: var(--sg-width-reading); }

/* A container nested in a container would compound the inset. Neutralise
   it rather than letting the layout silently narrow. */
.sg-container .sg-container {
  width: 100%;
  margin-inline: 0;
}


/* ─── Overflow safeguards ────────────────────────────────────────
   Flex and grid children default to min-width:auto, which lets long
   words, <pre>, and wide tables push a track past its track size —
   the actual cause of horizontal scroll. Fix the cause, not the
   symptom: no overflow-x:hidden anywhere in this file. */

.wp-block-column,
.wp-block-group,
.sg-container,
.sg-container--wide,
.sg-container--reading {
  min-width: 0;
}

img,
svg,
video,
iframe,
input,
textarea,
select,
table,
pre {
  max-width: 100%;
}

/* Preserve intrinsic proportions when width is constrained. */
img,
video {
  height: auto;
}

/* Long unbroken strings (URLs in essay copy) must wrap, not overflow. */
.sg-container p,
.sg-container li,
.sg-container h1,
.sg-container h2,
.sg-container h3 {
  overflow-wrap: break-word;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link */
.sg-skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--sg-forest);
  color: var(--sg-cream);
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--sg-radius) var(--sg-radius);
  text-decoration: none;
}

.sg-skip-link:focus {
  top: 0;
  outline: none;
  box-shadow: 0 2px 12px rgba(14,38,14,0.4);
}


/* ─── Enter Animations ──────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .sg-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease, transform 600ms ease;
  }

  .sg-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .sg-reveal-delay-1 { transition-delay: 100ms; }
  .sg-reveal-delay-2 { transition-delay: 200ms; }
  .sg-reveal-delay-3 { transition-delay: 300ms; }

  .sg-essay-card {
    transition: transform var(--sg-transition-med);
  }

  .sg-essay-card:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─── Responsive ────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .sg-areas__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sg-about-brief {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sg-about-brief__portrait {
    aspect-ratio: 16 / 9;
  }

  .sg-featured-essay {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sg-essay-list {
    grid-template-columns: 1fr;
  }

  .sg-credentials__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .sg-pillars {
    grid-template-columns: 1fr;
    padding: var(--sg-gap-md) var(--sg-page-padding);
  }

  .sg-areas__grid {
    grid-template-columns: 1fr;
  }

  .sg-about-hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .sg-about-hero__portrait {
    position: static;
    aspect-ratio: 4 / 3;
    order: -1;
  }

  .sg-speaking-hero {
    padding: var(--sg-gap-lg) var(--sg-page-padding);
  }

  .sg-offering {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .sg-contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .sg-contact-intro {
    position: static;
  }

  .sg-form-group--half {
    grid-template-columns: 1fr;
  }

  .sg-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .sg-credentials-grid {
    grid-template-columns: 1fr;
  }

  .sg-subscribe-form__row {
    flex-direction: column;
  }

  .sg-essay-header {
    text-align: left;
  }

  .sg-essay-header__meta {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .sg-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sg-hero__actions .sg-btn {
    text-align: center;
    justify-content: center;
  }
}


/* ─── WordPress Core Block Overrides ───────────────────────── */


/* Query loop cards styling */
.wp-block-query .wp-block-post-template {
  gap: 2rem;
}

/* Post meta typography */
.wp-block-post-date,
.wp-block-post-author__name {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-ink-light);
}

/* Navigation block */
.wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--sg-font-ui);
  font-weight: 500;
  font-size: 0.875rem;
}

/* Post title */
.wp-block-post-title a {
  color: var(--sg-ink);
  text-decoration: none;
}

.wp-block-post-title a:hover {
  color: var(--sg-forest);
}


/* ─── Featured Essay Shortcode: [sg_featured_essay] ───────────────────────── */

/* Remove inline-block collapse on shortcode wrapper inside featured section */
.sg-featured-essay-hp .wp-block-shortcode {
  display: block !important;
  width: 100%;
}

.sg-featured-hp {
  display: grid;
  grid-template-columns: 57fr 43fr;
  gap: 0;
  min-height: 520px;
  max-width: 1280px;
  margin: 0 auto;
}

.sg-featured-hp.no-image {
  grid-template-columns: 1fr;
  max-width: 760px;
  padding: 5rem var(--sg-page-padding);
}

.sg-featured-hp__image {
  overflow: hidden;
}

.sg-featured-hp__image img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  aspect-ratio: auto;
}

.sg-featured-hp__label {
  font-family: var(--sg-font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sg-moss);
  margin: 0 0 1rem;
}

.sg-featured-hp__content {
  padding: 3.5rem clamp(2rem, 4vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--sg-sand);
}

.sg-featured-hp__meta {
  font-family: var(--sg-font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sg-moss);
  margin: 0 0 0.625rem;
}

.sg-featured-hp__meta .sg-topic-label {
  color: var(--sg-moss);
}

.sg-featured-hp__title {
  font-family: var(--sg-font-display);
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sg-ink);
  margin: 0 0 0.875rem;
}

.sg-featured-hp__title a {
  color: inherit;
  text-decoration: none;
}

.sg-featured-hp__title a:hover {
  color: var(--sg-timber);
}

.sg-featured-hp__excerpt {
  font-size: 1.0625rem;
  line-height: 1.75;
  font-style: italic;
  color: var(--sg-ink-mid);
  margin: 0 0 1.5rem;
}


.sg-btn--forest {
  background-color: var(--sg-timber);
  color: var(--sg-cream);
}

.sg-btn--forest:hover {
  background-color: var(--sg-forest-mid);
  color: var(--sg-cream);
}

@media (max-width: 767px) {
  .sg-featured-hp {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}


/* Override WordPress core's display:inline-block on shortcode wrappers so they
   fill their column instead of collapsing to min-content width */
.sg-newsletter .wp-block-shortcode,
.sg-footer .wp-block-shortcode {
  display: block !important;
  width: 100%;
}

/* ─── Newsletter Shortcode: [sg_newsletter] ───────────────────────────────── */

.sg-newsletter-block {
  text-align: center;
}

.sg-newsletter-block .sg-subscribe-form__label,
.sg-subscribe-form .sg-subscribe-form__label {
  font-family: var(--sg-font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  display: block;
  margin: 0 0 0.5rem;
}

.sg-newsletter-block .sg-subscribe-form__heading,
.sg-subscribe-form .sg-subscribe-form__heading {
  font-family: var(--sg-font-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sg-cream);
  margin: 0 0 0.75rem;
}

.sg-newsletter-block .sg-subscribe-form__subtext,
.sg-subscribe-form .sg-subscribe-form__subtext {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(247, 242, 232, 0.65);
  margin: 0 0 1.5rem;
}

.sg-subscribe-form__privacy {
  /* Size and colour now set in the accessibility corrections below: this was
     12px cream at 0.35 opacity, measuring 2.71:1 on the forest sections. */
  margin: 0.75rem 0 0;
  text-align: center;
}




/* ─── Form: accessible status and field errors ────────────────────────────── */

.sg-subscribe-form__status,
.sg-form-status {
  min-height: 1.5em;
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0.75rem 0 0;
  text-align: center;
}

.sg-status--success {
  color: #a8c4a0;
}

.sg-status--error {
  color: #e08a7a;
}

/* Field-level error messages */
.sg-field-error {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: #c0392b;
  margin: 0.25rem 0 0;
}

/* Highlight invalid fields */
.sg-form-input[aria-invalid="true"],
.sg-form-textarea[aria-invalid="true"],
.sg-form-select[aria-invalid="true"],
.sg-subscribe-form__input[aria-invalid="true"] {
  border-color: #c0392b;
  outline-color: #c0392b;
}

/* On dark backgrounds, use lighter error color */
.sg-essay-newsletter .sg-field-error,
.sg-newsletter .sg-field-error {
  color: #e08a7a;
}


/* ─── Honeypot: hidden from real users ────────────────────────────────────── */

.sg-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  tab-size: 0;
}


/* ─── Share buttons (now <button> not <a>) ────────────────────────────────── */

.sg-share-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sg-share-link:hover {
  color: var(--sg-timber);
}


/* ============================================================
   HOMEPAGE EDITORIAL SECTIONS — v3 rebuild
   ============================================================ */


/* ─── Featured Essay: updated layout ─────────────────────── */

@media (max-width: 767px) {
  .sg-featured-hp {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .sg-featured-hp__image img {
    aspect-ratio: 16 / 9;
  }

  .sg-featured-hp__content {
    padding: 2rem var(--sg-page-padding);
  }
}


/* ─── Editorial Statement ────────────────────────────────── */

.sg-editorial-statement .wp-block-columns.sg-editorial-statement__cols {
  align-items: center;
}

/* Previously hid this column until a photo was added. Removed: photography
   placeholders are core/group blocks holding an aspect ratio, not <img>
   elements, so :not(:has(img)) matched them and collapsed the media half of
   the spread — leaving one empty 50% column. The placeholder is now the
   intentional empty state. */

.sg-editorial-portrait {
  margin: 0 !important;
  border-radius: 0; /* Publication-Wide Editorial System: no rounded images. See top of file. */
  overflow: hidden;
}

.sg-editorial-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}


/* ─── Recent Essays: asymmetric grid ────────────────────── */

.sg-recent-essays-section {
  background: var(--sg-cream);
  padding: clamp(4rem, 8vw, 6rem) var(--sg-page-padding);
}

.sg-recent-essays__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Also fix inline-block collapse when inside the shortcode */
.sg-recent-essays-section .wp-block-shortcode {
  display: block !important;
}

.sg-recent-essays__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sg-recent-essays__title {
  font-family: var(--sg-font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--sg-ink);
  margin: 0;
}

.sg-recent-essays__all {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sg-timber);
  text-decoration: none;
}

.sg-recent-essays__all:hover {
  color: var(--sg-ink);
}



.sg-essay-hp-card--lead {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.sg-essay-hp-card--supporting {
  border-top: 1px solid var(--sg-border);
  padding-top: 1.75rem;
}

.sg-essay-hp-card--supporting:first-of-type {
  border-top: none;
  padding-top: 0;
}

.sg-essay-hp-card__image {
  display: block;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.sg-essay-hp-card--lead .sg-essay-hp-card__image {
  aspect-ratio: 4 / 3;
}

.sg-essay-hp-card--supporting .sg-essay-hp-card__image {
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
}

.sg-essay-hp-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--sg-transition-med);
}

.sg-essay-hp-card:hover .sg-essay-hp-card__image img {
  transform: scale(1.02);
}

.sg-essay-hp-card__body {
  flex: 1;
}

.sg-essay-hp-card__topic {
  font-family: var(--sg-font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.sg-essay-hp-card__topic a {
  color: var(--sg-timber);
  text-decoration: none;
}

.sg-essay-hp-card__title {
  font-family: var(--sg-font-display);
  font-weight: 400;
  color: var(--sg-ink);
  line-height: 1.25;
  margin: 0 0 0.625rem;
}

.sg-essay-hp-card--lead .sg-essay-hp-card__title {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
}

.sg-essay-hp-card--supporting .sg-essay-hp-card__title {
  font-size: 1.125rem;
}

.sg-essay-hp-card__title a {
  color: inherit;
  text-decoration: none;
}

.sg-essay-hp-card__title a:hover {
  color: var(--sg-timber);
}

.sg-essay-hp-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--sg-ink-mid);
  margin: 0 0 0.875rem;
}

.sg-essay-hp-card__meta {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-ink-light);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sg-essay-hp-card__sep {
  opacity: 0.5;
}

@media (max-width: 767px) {
  .sg-recent-essays__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sg-essay-hp-card--lead {
    grid-row: auto;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--sg-border);
    margin-bottom: 2rem;
  }

  .sg-essay-hp-card--supporting {
    padding-top: 0;
    margin-bottom: 2rem;
  }

  .sg-essay-hp-card--supporting:first-of-type {
    padding-top: 0;
  }
}


/* ─── Areas of Inquiry: editorial index ─────────────────── */

.sg-inquiry-section .wp-block-shortcode {
  display: block !important;
  width: 100%;
}

.sg-inquiry-index {
  border-top: 1px solid rgba(48, 44, 39, 0.15);
}

.sg-inquiry-index__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(48, 44, 39, 0.12);
  text-decoration: none;
  transition: background var(--sg-transition);
}

.sg-inquiry-index__num {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: rgba(48, 44, 39, 0.3);
  align-self: start;
  padding-top: 0.2rem;
  line-height: 1;
}

.sg-inquiry-index__name {
  display: block;
  font-family: var(--sg-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--sg-ink);
  text-decoration: none;
  margin-bottom: 0.375rem;
  line-height: 1.2;
  transition: color var(--sg-transition);
}

.sg-inquiry-index__item:hover .sg-inquiry-index__name,
.sg-inquiry-index__name:focus {
  color: var(--sg-timber);
}

.sg-inquiry-index__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sg-ink-mid);
  margin: 0;
}

.sg-inquiry-index__arrow {
  font-size: 1rem;
  color: rgba(48, 44, 39, 0.25);
  text-decoration: none;
  transition: transform var(--sg-transition), color var(--sg-transition);
  align-self: center;
}

.sg-inquiry-index__item:hover .sg-inquiry-index__arrow {
  transform: translateX(5px);
  color: var(--sg-timber);
}

@media (max-width: 600px) {
  .sg-inquiry-index__item {
    grid-template-columns: 2rem 1fr auto;
    gap: 0 0.875rem;
    padding: 1.25rem 0;
  }

  .sg-inquiry-index__desc {
    display: none;
  }
}


/* ─── About: portrait-led two-column ────────────────────── */

.sg-about-hp .wp-block-columns.sg-about-hp__cols {
  align-items: center;
}

.sg-about-hp__portrait-col {
  background: var(--sg-sage); /* staging placeholder */
  border-radius: 0 !important; /* Publication-Wide Editorial System: no rounded images. See top of file. */
  overflow: hidden;
}

.sg-about-hp__portrait {
  margin: 0 !important;
  display: block;
  line-height: 0;
}

.sg-about-hp__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Portrait column sizing on mobile */
@media (max-width: 767px) {
  .sg-about-hp__portrait-col {
    border-radius: 0 !important; /* Publication-Wide Editorial System: no rounded images. */
  }

  .sg-about-hp__portrait img {
    aspect-ratio: 3 / 2; /* landscape on mobile to reduce height */
  }
}


/* ─── Speaking: sage section with optional image ─────────── */

/* Removed for the same reason as .sg-editorial-image-col above: this rule
   collapsed the Speaking spread's media half on the homepage, because the
   placeholder is a group rather than an <img>. */

/* When no image, copy col takes full width */

.sg-speaking-hp__photo {
  margin: 0 !important;
  border-radius: 0; /* Publication-Wide Editorial System: no rounded images. See top of file. */
  overflow: hidden;
}

.sg-speaking-hp__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.sg-speaking-labels {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-top: 1px solid rgba(48, 44, 39, 0.2);
  border-bottom: 1px solid rgba(48, 44, 39, 0.2);
  padding: 1rem 0;
}

.sg-speaking-label {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sg-timber);
  padding: 0 1.25rem 0 0;
  letter-spacing: 0.01em;
}

.sg-speaking-label + .sg-speaking-label {
  padding-left: 1.25rem;
  border-left: 1px solid rgba(48, 44, 39, 0.2);
}



/* ─── Footer: simplified ─────────────────────────────────── */

.sg-footer__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 3rem 0 2.5rem;
  border-bottom: 1px solid rgba(247, 242, 232, 0.1);
}

.sg-footer__brand .sg-footer__name,
.sg-footer__brand .wp-block-site-title {
  font-family: var(--sg-font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 0.375rem !important;
  text-decoration: none;
  display: block;
}

.sg-footer__brand .wp-block-site-title a {
  text-decoration: none;
}

.sg-footer__nav {
  align-self: center;
  flex-direction: row; /* override old vertical layout */
}

.sg-footer__nav .wp-block-navigation__container {
  flex-direction: row !important;
  gap: 1.5rem !important;
}

.sg-footer__nav a {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--sg-transition);
}

.sg-footer__nav a:hover,
.sg-footer__nav a[aria-current="page"] { color: var(--sg-ink); }

.sg-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.25rem 0 2.5rem;
}

.sg-footer__legal {
  margin: 0;
}

@media (max-width: 600px) {
  .sg-footer__main {
    flex-direction: column;
  }

  .sg-footer__nav .wp-block-navigation__container {
    flex-direction: column !important;
    gap: 0.625rem !important;
  }
}


/* ─── Reduced-motion: honor system preference ────────────── */

@media (prefers-reduced-motion: reduce) {
  .sg-essay-hp-card:hover .sg-essay-hp-card__image img {
    transform: none;
  }

  .sg-inquiry-index__item:hover .sg-inquiry-index__arrow {
    transform: none;
  }
}


/* ============================================================
   SECTION CLASS REGISTRY — v4
   Named classes for every major section. Backgrounds, padding,
   and widths live here; inline block styles should reference
   these class names in className attributes.
   ============================================================ */

/* ─── Homepage sections ─────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   SECTION REGISTRY
   ═══════════════════════════════════════════════════════════════
   These classes own BACKGROUND and colour only. Vertical rhythm comes
   from .sg-section / .sg-section--compact; horizontal width comes from
   .sg-container. Never add padding here — that reintroduces the
   duplicate-inset bug the container system exists to prevent.

   Colour rhythm (Stage 4): warm cream is the dominant canvas. Deep
   forest is used sparingly — hero-adjacent moment, newsletter, footer.
   Sage and sand carry at most one or two supporting sections per page.
   Avoid consecutive coloured panels.
   ═══════════════════════════════════════════════════════════════ */

/* .sg-home-hero — hero inherits its grid from the .sg-hero rules above.
   Keeps overflow:hidden to contain the portrait crop, not to mask layout. */
.sg-home-hero {
  background-color: var(--sg-cream);
  overflow: hidden;
}

/* .sg-featured-panel — full-bleed sand panel that wraps [sg_featured_essay].
   NOTE: deliberately NOT named .sg-featured-essay. That class is already an
   older grid component (display:grid + max-width + padding, further up this
   file); reusing it as a section wrapper would constrain the panel and force
   it into a two-column grid. Section wrappers must not share a name with a
   component. */
.sg-featured-panel      { background-color: var(--sg-sand); }
.sg-editorial-statement { background-color: var(--sg-cream); }
.sg-questions           { background-color: var(--sg-sand); }
.sg-home-about          { background-color: var(--sg-cream); }
.sg-home-speaking       { background-color: var(--sg-sage); }

/* .sg-newsletter — background/padding (defined above; ensure parity) */


/* ═══════════════════════════════════════════════════════════════
   PHOTOGRAPHY SLOTS
   ═══════════════════════════════════════════════════════════════
   Standing in for photography that does not exist yet. Implemented as
   core/group blocks, NOT empty core/image blocks: an <figure> with no
   <img> fails core/image's save-output validation and shows
   "This block contains unexpected or invalid content" in the editor.

   A slot is a quiet tonal panel holding its correct aspect ratio, so the
   surrounding composition lays out at final proportions. Replace each one
   by deleting the group and inserting a real Image block with the same
   class (e.g. sg-hero__portrait).

   These are staging furniture. They must all be replaced before launch —
   see PHOTOGRAPHY-SHOT-LIST.md.
   ═══════════════════════════════════════════════════════════════ */

/* FRONT END: a silent neutral panel. No border, no instructional text.
   It holds the aspect ratio so the composition stays at final proportions,
   and reads as an intentional tonal block rather than an unfinished page.

   The dashed border and the "replace with photograph" label live in
   assets/css/editor.css, which is loaded ONLY inside the block editor.
   Editing guidance must never reach a visitor. */
.sg-photo-slot {
  background-color: var(--sg-parchment);
  border: none;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;              /* default: vertical portrait */
  width: 100%;
  min-width: 0;
}

/* Instructional label is suppressed on the front end at all times. */
.sg-photo-slot__label { display: none; }

.sg-photo-slot--landscape { aspect-ratio: 3 / 2; }
.sg-photo-slot--square    { aspect-ratio: 1 / 1; }

/* Fills its column edge to edge — used for the hero, where the image side
   is a full-bleed half of the composition rather than a contained figure. */
.sg-photo-slot--bleed {
  aspect-ratio: auto;
  height: 100%;
  min-height: clamp(320px, 60vh, 800px);
  border: none;
  background-color: var(--sg-sage);
}

/* No front-end typography for .sg-photo-slot__label — it is display:none
   above. All of its visible styling lives in assets/css/editor.css. */


/* ─── Editorial primitives used from Page content ────────── */

/* Thin editorial rule — replaces card borders as the divider of choice. */
.sg-rule {
  border: 0;
  border-top: 1px solid var(--sg-border);
  margin-block: var(--sg-space-content);
  opacity: 1;
  width: 100%;
}

/* Understated tertiary link. Used where a third button would be too loud. */
.sg-textlink {
  font-family: var(--sg-font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  margin-block: var(--sg-gap-sm) 0;
}

.sg-textlink a {
  color: var(--sg-forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--sg-transition);
}

.sg-textlink a:hover,
.sg-textlink a:focus-visible { border-bottom-color: currentColor; }

/* Hero action row + the speaking text link beneath it. */
.sg-hero__actions { margin-block: var(--sg-space-content) 0; }

.sg-hero__tertiary {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  margin-block: var(--sg-gap-sm) 0;
}

.sg-hero__tertiary a {
  color: var(--sg-forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--sg-transition);
}

.sg-hero__tertiary a:hover,
.sg-hero__tertiary a:focus-visible { border-bottom-color: currentColor; }

/* On sage/sand sections the forest link still clears AA; on forest it must
   flip to cream. */
.sg-home-speaking .sg-textlink a { color: var(--sg-forest-dark); }
.sg-newsletter .sg-textlink a,
.sg-about-writing .sg-textlink a,
.sg-page-hero--dark .sg-textlink a { color: var(--sg-cream); }


/* ─── Generic page sections ──────────────────────────────── */

.sg-page-hero { background-color: var(--sg-cream); }

.sg-page-hero--dark {
  background-color: var(--sg-forest);
  color: var(--sg-cream);
}

.sg-page-hero--dark h1,
.sg-page-hero--dark h2,
.sg-page-hero--dark h3 {
  color: var(--sg-cream);
}


/* ─── About page sections ────────────────────────────────── */

.sg-about-questions   { background-color: var(--sg-sand); }
.sg-about-credentials { background-color: var(--sg-sand); }

/* .sg-about-writing — "Why I write" is the emotional centre of the About
   page (Stage 5). Deep forest gives it the contrast the brief asks for
   rather than another soft panel. */
.sg-about-writing {
  background-color: var(--sg-forest);
  color: var(--sg-cream);
}

/* Every text element on this forest spread must be light. Previously only the
   headings were set, so .sg-body paragraphs kept --sg-ink-mid and rendered at
   1.34:1 against the forest background — measured live on /about/. */
.sg-about-writing h2,
.sg-about-writing h3,
.sg-about-writing blockquote,
.sg-about-writing p,
.sg-about-writing li,
.sg-about-writing .sg-body {
  color: var(--sg-cream);
}

.sg-about-writing .sg-body { color: rgba(247, 242, 232, 0.86); }

.sg-about-writing a { color: var(--sg-cream); }


/* ─── Speaking page sections ─────────────────────────────── */

.sg-speaking-situations { background-color: var(--sg-sand); }
.sg-speaking-services   { background-color: var(--sg-cream); }
.sg-speaking-approach   { background-color: var(--sg-sage); }
.sg-speaking-form       { background-color: var(--sg-parchment); }

/* Inquiry form sits in its own narrow measure, per Stage 5. */
.sg-speaking-form .sg-speaking-inquiry-form,
.sg-speaking-form form {
  max-width: 46rem;
  margin-inline: auto;
}


/* ─── Contact page sections ──────────────────────────────── */

.sg-contact-paths { background-color: var(--sg-sand); }

/* .sg-contact-panel — section wrapper for the contact form.
   NOTE: deliberately NOT named .sg-contact-form. That class is on the actual
   <form> element in both page-contact.html and page-speaking.html, so a
   section rule of that name applies its background — and previously a full
   --sg-space-section padding — directly to the form control group. Fixed by
   separating the section name from the component name. */
.sg-contact-panel { background-color: var(--sg-cream); }

.sg-contact-panel form {
  max-width: 46rem;
  margin-inline: auto;
}


/* ─── Footer ─────────────────────────────────────────────── */

/* .sg-site-footer — alias for .sg-footer. Background and colour only;
   .sg-footer above still supplies its internal layout. */
.sg-site-footer {
  background-color: var(--sg-ink);
  color: rgba(247, 242, 232, 0.7);
}


/* ═══════════════════════════════════════════════════════════════
   NUMBERED EDITORIAL INDEX — "Questions I Keep Returning To"
   ═══════════════════════════════════════════════════════════════
   Replaces the five topic cards. Rows, rules and large type instead of
   boxes. One number, one question, one rule, one arrow — nothing more.
   ═══════════════════════════════════════════════════════════════ */

.sg-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sg-border);
}

.sg-index__row { border-bottom: 1px solid var(--sg-border); }

.sg-index__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  text-decoration: none;
  color: inherit;
  transition: color var(--sg-transition);
}

.sg-index__num {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--sg-timber);
  font-variant-numeric: tabular-nums;
}

.sg-index__question {
  font-family: var(--sg-font-display);
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  line-height: 1.15;
  font-weight: 400;
  color: var(--sg-ink);
  margin: 0;
}

.sg-index__arrow {
  font-family: var(--sg-font-ui);
  font-size: 1rem;
  color: var(--sg-timber);
  transition: transform var(--sg-transition-med);
  align-self: center;
}

.sg-index__link:hover .sg-index__question,
.sg-index__link:focus-visible .sg-index__question { color: var(--sg-forest); }

.sg-index__link:hover .sg-index__arrow,
.sg-index__link:focus-visible .sg-index__arrow { transform: translateX(6px); }

/* Focus must be visible on the row, not just the text. */
.sg-index__link:focus-visible {
  outline: 2px solid var(--sg-forest);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .sg-index__arrow { transition: none; }
  .sg-index__link:hover .sg-index__arrow,
  .sg-index__link:focus-visible .sg-index__arrow { transform: none; }
}


/* ─── Archive content-state classes ─────────────────────── */

/* Sparse state: fewer than 5 published essays.
   The topic filter bar and the archive note are NOT hidden here — they are
   not rendered at all ([sg_topic_filters] / [sg_archive_note] return an empty
   string below the threshold). Hiding substantive content with display:none
   left it in the DOM for screen readers and made the behaviour dependent on a
   CSS rule that an optimiser can strip.

   Pagination is the exception: it is emitted by core's query-pagination block,
   which cannot be made conditional from a template. WordPress already renders
   nothing when there is only one page of results, so this rule only covers the
   edge case of a stale paginated cache. */
body.sg-archive--sparse .sg-pagination { display: none; }

/* Single column, reading measure — a two-up grid with two entries
   reads as a broken grid rather than a small collection. */
body.sg-archive--sparse .sg-essay-list {
  grid-template-columns: 1fr;
  max-width: var(--sg-width-reading);
  gap: var(--sg-space-section-small);
}

/* The note is rendered conditionally by [sg_archive_note], so it needs no
   display toggle — only typography. */
.sg-archive-growing {
  display: block;
  font-family: var(--sg-font-ui);
  font-size: 0.9375rem;
  color: var(--sg-ink-light);
  max-width: var(--sg-width-reading);
  margin-inline: auto;
  padding-block-start: var(--sg-space-content);
  border-top: 1px solid var(--sg-border);
}



/* ═══════════════════════════════════════════════════════════════════════════
   HOME — EDITORIAL SPREAD ART DIRECTION
   ═══════════════════════════════════════════════════════════════════════════
   Everything here is scoped to body.home so essay, archive, form and interior
   page layouts are untouched. The homepage reads as a sequence of full-bleed
   spreads; the rest of the site keeps the contained reading layout.

   Structural companion changes live in the Home Page content and in the
   [sg_newsletter] / [sg_featured_essay] markup — not in descendant selectors
   guessing at context.
   ═══════════════════════════════════════════════════════════════════════════ */

body.home {
  /* Shorter spreads. Redefining the tokens cascades through .sg-section, so
     no per-section padding overrides are needed. */
  --sg-space-section:       clamp(3.5rem, 6vw, 6rem);
  --sg-space-section-small: clamp(2.5rem, 4.5vw, 4rem);
  --sg-header-h:            4.75rem;
}


/* ─── 1. Header — one shared component, no homepage exception ─────────────────
   The homepage previously used position:fixed with a transparent background,
   which made it read as a different site from the interior pages and left the
   hero crowded directly under the nav.

   Now: identical height, container, logo position and vertical rhythm on every
   page. The homepage difference is limited to a slightly warmer tint before
   scroll — see .sg-header rules in the base layer. Hero clearance is handled by
   padding on the copy column below, not by removing the header from flow. */

body.home .sg-home-hero .wp-block-column.sg-hero__image-col {
  padding-top: 0;
}

/* ─── 2. Hero — 44 / 56 ──────────────────────────────────────────────────── */

body.home .sg-home-hero .wp-block-columns.sg-hero__cols {
  grid-template-columns: 44fr 56fr !important;
  /* Lowered from 88vh/900px: the hero no longer needs to reserve height the
     content does not use, and over-reserving pushed the CTAs off screen. */
  min-height: clamp(480px, 78vh, 780px);
}

/* Trim the copy column inset to widen the measure without touching the split. */
/* Hero copy inset. Equal top and bottom so the block reads centred in its half
   rather than top-weighted; a larger right gutter than left so the copy has room
   to breathe before meeting the image edge.
   Measured before: 80px top / 72px bottom / 57.6 left / 48.96 right — four
   different values, which is what read as unresolved. */
body.home .sg-home-hero .wp-block-column.sg-hero__copy-col {
  padding-block: clamp(3rem, 6vw, 5.5rem) !important;
  padding-inline: var(--sg-page-padding) clamp(2rem, 4.5vw, 5rem) !important;
}

/* Hero headline sized against its MEASURE, not the viewport.
   Measured on the live site: at 1440px the copy column gives ~512px of measure,
   and the previous clamp resolved to 80.6px there — 8 lines at 10 characters
   per line, a 639px-tall headline, a 1405px hero, and both CTAs 276px below the
   fold. Editorial display type wants 20–40 characters per line.

   The About page hero is the reference: 72px in a 597px measure reads correctly
   at 17 characters per line. The homepage column is narrower AND its headline is
   longer (82 vs 68 characters), so it needs a smaller size, not the same one. */
body.home .sg-hero__headline {
  font-size: clamp(2.25rem, 3.9vw, 3.5rem);   /* ~56px at 1440 → ~18 ch/line */
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* ─── 3. Featured essay — 44 / 56 spread, image leading ──────────────────── */
/* Inverted from the hero (image left) so consecutive spreads alternate. */

body.home .sg-featured-hp {
  grid-template-columns: 56fr 44fr;
  max-width: none;
  margin: 0;
  min-height: clamp(400px, 62vh, 660px);
}

body.home .sg-featured-hp__content {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4.5rem);
  align-content: center;
}

body.home .sg-featured-hp__title {
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  line-height: 1.06;
}

body.home .sg-featured-hp__excerpt { max-width: 40ch; }

/* Text-only state: a centred measure, not a card. */
body.home .sg-featured-hp.no-image {
  grid-template-columns: 1fr;
  max-width: var(--sg-width-reading);
  margin-inline: auto;
  min-height: 0;
  padding-block: var(--sg-space-section);
}


/* ─── 4. Editorial interlude — deep forest, compact ──────────────────────── */

body.home .sg-editorial-statement {
  background-color: var(--sg-forest);
  color: var(--sg-cream);
  padding-block: var(--sg-space-section-small);
  text-align: center;
}

body.home .sg-editorial-statement .sg-section-title {
  color: var(--sg-cream);
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  max-width: 30ch;
  margin-inline: auto;
}

body.home .sg-editorial-statement .sg-body {
  color: rgba(247, 242, 232, 0.78);
  max-width: 46ch;
  margin-inline: auto;
}

body.home .sg-editorial-statement .sg-rule {
  border-top-color: rgba(247, 242, 232, 0.22);
  width: 3rem;
  margin-inline: auto;
}


/* ─── 5. Questions — two columns ─────────────────────────────────────────── */

body.home .sg-questions__title-col .sg-section-title { position: sticky; top: 7rem; }

@media (max-width: 781px) {
  body.home .sg-questions__title-col .sg-section-title { position: static; }
}

body.home .sg-index { border-top-color: var(--sg-border-dark); }

body.home .sg-index__question {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
}


/* ─── 6 & 7. About and Speaking — full-bleed 50 / 50 spreads ─────────────── */

.sg-spread {
  align-items: stretch;
  gap: 0;
}

.sg-spread > .wp-block-column { min-width: 0; }

/* Media half bleeds to the viewport edge. */
.sg-spread__media {
  display: flex;
  align-self: stretch;
}

.sg-spread__media > * {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.sg-spread__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* Copy half carries the inset. */
.sg-spread__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4.5rem);
}

.sg-spread__copy > * { max-width: 42ch; }

.sg-spread .sg-photo-slot {
  aspect-ratio: auto;
  height: 100%;
  min-height: clamp(320px, 52vh, 620px);
  border: none;
}

@media (max-width: 781px) {
  .sg-spread .sg-photo-slot { min-height: 60vw; }
  .sg-spread__copy { padding-inline: var(--sg-page-padding); }
}


/* ─── 8. Newsletter — horizontal close ───────────────────────────────────── */

body.home .sg-newsletter { padding-block: var(--sg-space-section-small); }

.sg-subscribe-form--horizontal {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  text-align: left;
}

@media (min-width: 900px) {
  .sg-subscribe-form--horizontal {
    grid-template-columns: 1fr 1fr;
  }
}

.sg-subscribe-form--horizontal .sg-subscribe-form__heading {
  margin-block: 0.25rem 0.5rem;
}

.sg-subscribe-form--horizontal .sg-subscribe-form__subtext {
  max-width: 44ch;
  margin-block-end: 0;
}

.sg-subscribe-form--horizontal .sg-subscribe-form__privacy { margin-block-end: 0; }


/* ─── 9. Remove rounded corners and card styling from home imagery ───────── */

body.home .sg-photo-slot,
body.home .sg-hero__portrait,
body.home .sg-hero__portrait img,
body.home .sg-featured-hp__image,
body.home .sg-featured-hp__image img,
.sg-spread__media,
.sg-spread__media img,
body.home .wp-block-image,
body.home .wp-block-image img,
body.home figure.wp-block-image > img {
  border-radius: 0;
}

/* No borders, shadows or panel fills on primary homepage compositions. */
body.home .sg-photo-slot--bleed,
.sg-spread .sg-photo-slot {
  border: none;
  box-shadow: none;
}

body.home .sg-featured-hp,
body.home .sg-featured-hp__content {
  background: none;
  border: none;
  box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — MINIMAL CREAM
   ═══════════════════════════════════════════════════════════════════════════
   Global, not scoped to body.home: a footer that changed colour between the
   homepage and interior pages would read as a bug. Colour lives here rather
   than as inline per-block values so it can be re-toned in one place.

   Overrides the earlier ink .sg-footer rule, which remains above for the
   .sg-site-footer alias.
   ═══════════════════════════════════════════════════════════════════════════ */

.sg-footer--cream {
  background-color: var(--sg-cream);
  color: var(--sg-ink-mid);
  border-top: 1px solid var(--sg-border);
  padding-block: var(--sg-space-section-small) var(--sg-gap-md);
}

.sg-footer--cream .sg-footer__inner { margin-inline: auto; }

.sg-footer--cream .sg-footer__main {
  padding-block: 0 var(--sg-gap-md);
}

.sg-footer--cream .sg-footer__name a,
.sg-footer--cream .sg-footer__name {
  color: var(--sg-ink);
  text-decoration: none;
}

.sg-footer--cream .sg-footer__tagline {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  /* --sg-ink-light measured 4.09:1 on cream — under AA. */
  color: var(--sg-ink-mid);
  margin: 0;
}

.sg-footer--cream .sg-footer__nav a {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sg-ink-mid);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--sg-transition), color var(--sg-transition);
}

.sg-footer--cream .sg-footer__nav a:hover,
.sg-footer--cream .sg-footer__nav a:focus-visible {
  color: var(--sg-forest);
  border-bottom-color: currentColor;
}

.sg-footer--cream .sg-footer__bottom {
  border-top: 1px solid var(--sg-border);
  padding-block-start: var(--sg-gap-sm);
}

.sg-footer--cream .sg-footer__legal {
  font-size: 0.8125rem;
  color: var(--sg-ink-mid);
  margin: 0;
}

.sg-footer--cream .sg-footer__legal a {
  color: var(--sg-ink-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sg-footer--cream .sg-footer__legal a:hover,
.sg-footer--cream .sg-footer__legal a:focus-visible {
  color: var(--sg-forest);
  border-bottom-color: currentColor;
}


/* ─── HOME: mobile and tablet reflow ─────────────────────────────────────────
   The body.home rules above raise specificity to (0,1,1), which outranks the
   existing bare .sg-featured-hp mobile rules at (0,1,0) — specificity beats
   media-query source order. These home-scoped overrides restore stacking. */

@media (max-width: 1023px) {
  /* Tablet: spreads keep two halves but need a shorter media edge. */
  .sg-spread .sg-photo-slot { min-height: clamp(280px, 40vh, 420px); }

  body.home .sg-featured-hp { min-height: 0; }

  /* At 768px a 44/56 split leaves the copy column ~338px, which is too narrow
     for the display headline. Even the halves and step the type down. */
  body.home .sg-home-hero .wp-block-columns.sg-hero__cols {
    grid-template-columns: 50fr 50fr !important;
    min-height: clamp(460px, 70vh, 640px);
  }

  body.home .sg-hero__headline {
    font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  }

  body.home .sg-hero__subhead { max-width: none; }
}

@media (max-width: 781px) {
  /* Spreads stack. Media leads on both, matching the hero's portrait-first
     decision, so mobile reads consistently regardless of desktop side. */
  .sg-spread { flex-direction: column; }
  .sg-spread__media { order: -1; }

  .sg-spread__copy {
    padding-block: var(--sg-space-section-small);
  }

  .sg-spread__copy > * { max-width: none; }

  /* Questions: title stops being a sticky sidebar and sits above the index. */
  body.home .sg-questions__cols { flex-direction: column; }
}

@media (max-width: 767px) {
  /* The 44/56 hero rule above is (0,4,1) !important and outranks the generic
     `.sg-hero__cols { grid-template-columns: 1fr !important }` mobile rule at
     (0,3,0). Without this the hero would stay two-column at 375px. */
  body.home .sg-home-hero .wp-block-columns.sg-hero__cols {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  body.home .sg-featured-hp {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1.5rem;
  }

  body.home .sg-featured-hp__content {
    padding: 0 var(--sg-page-padding) var(--sg-space-section-small);
  }

  body.home .sg-featured-hp.no-image {
    padding-inline: var(--sg-page-padding);
  }

}


/* ═══════════════════════════════════════════════════════════════════════════
   PUBLICATION-WIDE EDITORIAL SYSTEM
   ═══════════════════════════════════════════════════════════════════════════
   Home established the language. These are the shared primitives every other
   spread reuses, so About / Speaking / Contact extend one system rather than
   introducing a second. Nothing here is page-specific.

   Two primitives cover almost every list on the site:
     .sg-editorial-list   rules + serif lines (questions, situations, topics)
     .sg-cols             two or three text columns, no cards
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared editorial rhythm for every migrated page, matching Home. */
body.home,
body.sg-page-about,
body.sg-page-speaking,
body.sg-page-contact {
  --sg-space-section:       clamp(3.5rem, 6vw, 6rem);
  --sg-space-section-small: clamp(2.5rem, 4.5vw, 4rem);
  --sg-header-h:            4.75rem;
}


/* ─── Editorial list — rules and serif lines, never cards ────────────────── */

.sg-editorial-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sg-border);
}

.sg-editorial-list > li {
  border-bottom: 1px solid var(--sg-border);
  padding-block: clamp(1.125rem, 2.2vw, 1.75rem);
  font-family: var(--sg-font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.875rem);
  line-height: 1.2;
  font-weight: 400;
  color: var(--sg-ink);
  margin: 0;
}

/* Compact: credentials, topics — UI type, tighter rows. */
.sg-editorial-list--compact > li {
  font-family: var(--sg-font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--sg-ink-mid);
  padding-block: 0.875rem;
}

/* Split: long compact lists flow into two columns on wide viewports. */
@media (min-width: 782px) {
  .sg-editorial-list--split {
    columns: 2;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .sg-editorial-list--split > li { break-inside: avoid; }
}

/* Numbered variant reuses the .sg-index counter treatment. */
.sg-editorial-list--numbered { counter-reset: sg-li; }

.sg-editorial-list--numbered > li {
  counter-increment: sg-li;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
}

.sg-editorial-list--numbered > li::before {
  content: counter(sg-li, decimal-leading-zero);
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--sg-timber);
  font-variant-numeric: tabular-nums;
}


/* ─── Text columns — no cards, no icons, no equal-height tiles ───────────── */

.sg-cols {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 782px) {
  .sg-cols--2 { grid-template-columns: 1fr 1fr; }
  .sg-cols--3 { grid-template-columns: repeat(3, 1fr); }
  .sg-cols--asym { grid-template-columns: 1fr 1fr; }
}

.sg-cols__label {
  font-family: var(--sg-font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sg-ink);
  margin: 0 0 0.5rem;
  padding-block-end: 0.625rem;
  border-bottom: 1px solid var(--sg-border);
}


/* ─── Pull quote — the one large typographic moment per page ─────────────── */

.sg-pullquote {
  font-family: var(--sg-font-display);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--sg-ink);
  margin: 0;
  max-width: 30ch;
  text-wrap: balance;
}

.sg-page-hero--dark .sg-pullquote,
.sg-about-writing .sg-pullquote { color: var(--sg-cream); }


/* ─── Single CTA — one action per page, never a row of buttons ───────────── */

.sg-cta-single { margin-block-start: var(--sg-space-content); }


/* ─── Spread media: real photography fills its half ─────────────────────── */
/* Applies once an Image block replaces a .sg-photo-slot placeholder. */

.sg-spread__media .wp-block-image,
.sg-spread__media figure {
  height: 100%;
  margin: 0;
}

.sg-spread__media .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}


/* ─── Interior page heroes reuse the hero split ──────────────────────────── */

.sg-page-hero-spread { min-height: clamp(440px, 72vh, 760px); }

@media (max-width: 781px) {
  .sg-page-hero-spread { min-height: 0; }
}


/* ─── Remove rounded corners and cards across the publication ────────────── */

body.sg-page-about .wp-block-image img,
body.sg-page-speaking .wp-block-image img,
body.sg-page-contact .wp-block-image img,
body.sg-page-about .sg-photo-slot,
body.sg-page-speaking .sg-photo-slot,
body.sg-page-contact .sg-photo-slot {
  border-radius: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ESSAYS ARCHIVE + SINGLE ESSAY
   ═══════════════════════════════════════════════════════════════════════════
   Archives are editorial lists, not card grids. Each entry is meta line,
   serif title, excerpt, separated by a thin rule — the same language as
   .sg-editorial-list, applied to dynamic query output.
   ═══════════════════════════════════════════════════════════════════════════ */

.sg-archive-intro .sg-body { max-width: 46ch; }

/* Override the earlier two-column card grid: .sg-essay-list now wraps
   .sg-essay-entry rows rather than .sg-essay-card tiles. */
.sg-essay-list {
  display: block;
  grid-template-columns: none;
  max-width: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--sg-border);
}

.sg-essay-entry {
  border-bottom: 1px solid var(--sg-border);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: var(--sg-width-reading);
}

.sg-essay-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-block-end: 0.625rem;
}

.sg-essay-entry__meta .sg-topic-tag,
.sg-essay-entry__meta .sg-topic-tag a,
.sg-essay-date {
  font-family: var(--sg-font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sg-timber);
  text-decoration: none;
}

.sg-essay-date { color: var(--sg-ink-light); letter-spacing: 0.04em; }

.sg-essay-entry__title {
  font-family: var(--sg-font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.sg-essay-entry__title a {
  color: var(--sg-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--sg-transition), color var(--sg-transition);
}

.sg-essay-entry__title a:hover,
.sg-essay-entry__title a:focus-visible {
  color: var(--sg-forest);
  border-bottom-color: currentColor;
}

.sg-essay-entry__excerpt {
  font-family: var(--sg-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sg-ink-mid);
  margin: 0;
  max-width: 62ch;
}

/* Topic filter pills — hidden entirely in the sparse state */
.sg-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* Sets background AND text together. Previously this set colour only, while an
   earlier .sg-filter-pill:hover rule supplied a dark green background — the
   combination rendered #183C32 text on #3D5E4A at roughly 1.6:1. A hover rule
   that changes only one half of the pair is unsafe whenever any other rule
   supplies the other half. */
.sg-filter-pills .sg-filter-pill:hover,
.sg-filter-pills .sg-filter-pill:focus-visible,
.sg-filter-pills .sg-filter-pill.is-active {
  background-color: var(--sg-forest);
  border-color: var(--sg-forest);
  color: var(--sg-cream);
}

.sg-topic-filter-bar {
  padding-block: var(--sg-space-content);
  border-bottom: 1px solid var(--sg-border);
}


/* ─── Single essay ───────────────────────────────────────────────────────── */

.sg-page--essay .sg-essay-header { text-align: left; }

.sg-essay-header__deck {
  font-family: var(--sg-font-body);
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--sg-ink-mid);
  margin-block: 0.75rem 0;
  max-width: 52ch;
}

.sg-essay-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-block-start: 1rem;
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-ink-light);
}

.sg-essay-header__meta .wp-block-post-date { margin: 0; }

.sg-reading-time {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-ink-light);
}

/* Featured image spans the full viewport, square corners, capped height so a
   tall image cannot push the essay off the first screen. */
.sg-essay-hero-image img {
  width: 100%;
  /* height:auto is required, not redundant. It lived only in the earlier
     duplicate of this rule that the radius pass removed. Without it, the
     width/height attributes core prints on the featured image apply as
     presentational hints, so the box takes the file's intrinsic pixel height
     instead of scaling with its container — a fixed band on narrow viewports
     rather than a proportional image. */
  height: auto;
  max-height: clamp(320px, 64vh, 680px);
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.sg-page--essay .sg-related { background-color: var(--sg-sand); }

.sg-page--essay .sg-related .sg-essay-entry__excerpt { display: none; }


/* ─── Interior page section tones ────────────────────────────────────────── */

.sg-speaking-topics { background-color: var(--sg-sand); }
.sg-about-close     { background-color: var(--sg-cream); }

.sg-about-hero-section,
.sg-speaking-hero-section { background-color: var(--sg-cream); }

.sg-contact-note {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sg-ink-light);
  margin-block-start: var(--sg-space-content);
  padding-block-start: var(--sg-gap-sm);
  border-top: 1px solid var(--sg-border);
}

/* About: speaking / teaching / consulting bridge — cream, keeps the page's
   alternation from running two sand sections together. */
.sg-about-work { background-color: var(--sg-cream); }


/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIVE STATES — buttons, links, focus, forms
   ═══════════════════════════════════════════════════════════════════════════
   Every variant declares BOTH background and text colour in BOTH default and
   hover. The previous bug was hover rules that changed only the background,
   inheriting dark text onto a newly dark surface. Declaring the pair together
   makes that class of failure impossible to reintroduce silently.

   Contrast, checked against WCAG 2.2 AA (4.5:1 normal text, 3:1 large):
     cream #F7F2E8 on forest  #183C32  ≈ 11.6:1
     cream #F7F2E8 on timber  #3D5E4A  ≈  6.7:1
     forest #183C32 on cream  #F7F2E8  ≈ 11.6:1
     ink   #302C27 on sand    #EDE3D2  ≈  9.8:1
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Primary ─────────────────────────────────────────────────────────────── */

.sg-btn--forest,
.sg-btn--primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--sg-forest);
  color: var(--sg-cream);
  border: 1.5px solid var(--sg-forest);
  transition: background-color var(--sg-transition-med),
              border-color var(--sg-transition-med),
              transform var(--sg-transition-med);
}

.sg-btn--forest:hover,
.sg-btn--primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--sg-forest-mid);
  border-color: var(--sg-forest-mid);
  color: var(--sg-cream);   /* explicit: never inherit on hover */
}

.sg-btn--forest:active,
.sg-btn--primary:active,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
  background-color: var(--sg-forest-dark);
  border-color: var(--sg-forest-dark);
  color: var(--sg-cream);
}

/* ─── Secondary / outline ─────────────────────────────────────────────────── */

.sg-btn--outline-ink,
.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--sg-forest);
  border: 1.5px solid var(--sg-forest);
  transition: background-color var(--sg-transition-med),
              color var(--sg-transition-med),
              transform var(--sg-transition-med);
}

.sg-btn--outline-ink:hover,
.is-style-outline .wp-block-button__link:hover {
  background-color: var(--sg-forest);
  color: var(--sg-cream);
  border-color: var(--sg-forest);
}

/* On dark sections the outline inverts. */
.sg-newsletter .is-style-outline .wp-block-button__link,
.sg-page-hero--dark .is-style-outline .wp-block-button__link,
.sg-about-writing .is-style-outline .wp-block-button__link,
.sg-btn--outline {
  color: var(--sg-cream);
  border-color: rgba(247, 242, 232, 0.45);
  background-color: transparent;
}

.sg-newsletter .is-style-outline .wp-block-button__link:hover,
.sg-page-hero--dark .is-style-outline .wp-block-button__link:hover,
.sg-about-writing .is-style-outline .wp-block-button__link:hover,
.sg-btn--outline:hover {
  background-color: var(--sg-cream);
  color: var(--sg-forest);      /* dark text on the now-light surface */
  border-color: var(--sg-cream);
}

/* ─── Newsletter submit ───────────────────────────────────────────────────── */
/* Sits on forest, so it inverts to cream and must darken its text on hover. */

.sg-subscribe-form__btn {
  background-color: var(--sg-cream);
  color: var(--sg-forest);
  border: 1.5px solid var(--sg-cream);
  transition: background-color var(--sg-transition-med),
              color var(--sg-transition-med);
}

.sg-subscribe-form__btn:hover {
  background-color: var(--sg-sand);
  color: var(--sg-forest-dark);
  border-color: var(--sg-sand);
}

/* ─── Form submit (contact / speaking) ────────────────────────────────────── */

.sg-form-submit {
  background-color: var(--sg-forest);
  color: var(--sg-cream);
  border: 1.5px solid var(--sg-forest);
  transition: background-color var(--sg-transition-med),
              border-color var(--sg-transition-med);
}

.sg-form-submit:hover {
  background-color: var(--sg-forest-mid);
  border-color: var(--sg-forest-mid);
  color: var(--sg-cream);
}

/* ─── Loading and disabled ────────────────────────────────────────────────── */

.sg-form-submit[aria-busy="true"],
.sg-subscribe-form__btn[aria-busy="true"],
.sg-form-submit:disabled,
.sg-subscribe-form__btn:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

/* Text stays legible while busy — opacity alone, never a colour swap. */
.sg-form-submit[aria-busy="true"]::after,
.sg-subscribe-form__btn[aria-busy="true"]::after {
  content: "…";
  margin-inline-start: 0.375rem;
}


/* ─── Focus: visible everywhere, never colour-only ────────────────────────── */

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

/* On dark surfaces the ring flips to cream so it stays perceptible. */
.sg-newsletter :where(a, button, input):focus-visible,
.sg-page-hero--dark :where(a, button, input):focus-visible,
.sg-about-writing :where(a, button, input):focus-visible,
.sg-editorial-statement :where(a, button, input):focus-visible {
  outline-color: var(--sg-cream);
}

/* Never remove the ring for mouse users without providing an alternative. */
:where(a, button):focus:not(:focus-visible) { outline: none; }


/* ─── Navigation: hover, focus, current page ──────────────────────────────── */

.sg-header__nav a,
.sg-footer--cream .sg-footer__nav a {
  transition: color var(--sg-transition), border-color var(--sg-transition);
}

.sg-header__nav a:hover,
.sg-header__nav a:focus-visible { color: var(--sg-forest); }

/* Current page indication — not colour alone. */
.sg-header__nav .current-menu-item > a,
.sg-header__nav [aria-current="page"],
.sg-footer--cream .sg-footer__nav [aria-current="page"] {
  color: var(--sg-forest);
  border-bottom: 1.5px solid currentColor;
}


/* ─── Form fields ─────────────────────────────────────────────────────────── */

.sg-form-input,
.sg-form-select,
.sg-form-textarea,
.sg-subscribe-form__input {
  transition: border-color var(--sg-transition), box-shadow var(--sg-transition);
}

.sg-form-input:focus-visible,
.sg-form-select:focus-visible,
.sg-form-textarea:focus-visible,
.sg-subscribe-form__input:focus-visible {
  outline: 2px solid var(--sg-forest);
  outline-offset: 1px;
  border-color: var(--sg-forest);
}

/* Error and success states carry an icon-free but non-colour-only cue: a
   thicker border plus text, so they survive colour-blindness and forced colours. */
.sg-form-field[data-state="error"] .sg-form-input,
.sg-form-field[data-state="error"] .sg-form-textarea,
.sg-form-input[aria-invalid="true"],
.sg-form-textarea[aria-invalid="true"] {
  border-width: 2px;
  border-color: #9B3B2F;
}

.sg-field-error {
  display: block;
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: #9B3B2F;
  margin-block-start: 0.375rem;
}

.sg-form-status:empty { display: none; }

.sg-form-status,
.sg-subscribe-form__status {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  margin-block: 0.75rem 0;
}

.sg-form-status[data-state="success"],
.sg-subscribe-form__status[data-state="success"] {
  color: var(--sg-forest);
  border-left: 2px solid var(--sg-forest);
  padding-inline-start: 0.75rem;
}

.sg-form-status[data-state="error"],
.sg-subscribe-form__status[data-state="error"] {
  color: #9B3B2F;
  border-left: 2px solid #9B3B2F;
  padding-inline-start: 0.75rem;
}

.sg-newsletter .sg-subscribe-form__status[data-state="success"] {
  color: var(--sg-cream);
  border-left-color: var(--sg-cream);
}


/* ─── Inert question rows (no destination yet) ─────────────────────────────── */

.sg-index__row--inert .sg-index__link { cursor: default; }
.sg-index__row--inert .sg-index__question { color: var(--sg-ink-mid); }


/* ═══════════════════════════════════════════════════════════════════════════
   MOTION — restrained, and off by default
   ═══════════════════════════════════════════════════════════════════════════
   Built the other way round from the usual: the static experience is the
   baseline, and motion is added only inside prefers-reduced-motion:
   no-preference. Nothing here is required to understand the page.

   Deliberately absent: parallax, scroll-jacking, paragraph reveals inside
   essays, animated cursors, floating decoration, letter-by-letter headlines.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — once, on load, major elements only. */
  .sg-home-hero .sg-eyebrow,
  .sg-home-hero .sg-hero__headline,
  .sg-home-hero .sg-hero__subhead,
  .sg-home-hero .sg-hero__actions,
  .sg-home-hero .sg-hero__tertiary,
  .sg-page-hero-spread .sg-eyebrow,
  .sg-page-hero-spread .sg-page-title {
    animation: sg-rise 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .sg-home-hero .sg-hero__headline    { animation-delay: 70ms; }
  .sg-home-hero .sg-hero__subhead     { animation-delay: 140ms; }
  .sg-home-hero .sg-hero__actions     { animation-delay: 200ms; }
  .sg-home-hero .sg-hero__tertiary    { animation-delay: 250ms; }
  .sg-page-hero-spread .sg-page-title { animation-delay: 70ms; }

  @keyframes sg-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  /* Essay rows — barely-there lift and arrow nudge. */
  .sg-essay-entry { transition: transform 200ms ease; }
  .sg-essay-entry:hover { transform: translateY(-1px); }

  /* Buttons — small lift only, no shadow-and-scale pile-up. */
  .sg-btn--forest:hover,
  .sg-btn--primary:hover,
  .wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); }

  /* Question rows. */
  .sg-index__link { transition: background-color 200ms ease; }
  .sg-index__row:not(.sg-index__row--inert) .sg-index__link:hover {
    background-color: rgba(61, 94, 74, 0.04);
  }

  /* Form feedback fades in rather than snapping. */
  .sg-form-status:not(:empty),
  .sg-subscribe-form__status:not(:empty) {
    animation: sg-fade 220ms ease both;
  }

  @keyframes sg-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* Belt and braces: if any transition slips in above this layer, neutralise it
   when the user has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LIVE-AUDIT CORRECTIONS — 2026-08-03
   ═══════════════════════════════════════════════════════════════════════════
   Four issues found by measuring the rendered page, each traced to a stale
   rule that predated a later change.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Hero: one measure, not three ─────────────────────────────────────────
   Measured live at 1440: headline 450px (max-width:16ch), subhead 403px
   (max-width:38ch), remaining paragraphs 520px. Three different line lengths
   stacked, with the headline NARROWER than its own body copy — typographically
   backwards and the cause of the "strange width".

   16ch dates from when the headline was 80px, where it was a sensible cap. At
   56px it just starves the display type. All hero text now shares the column
   measure so the left and right edges agree. */

/* SINGLE source of truth for hero measure.
   The previous attempt used two rules — `max-width: none` on the subhead and
   body paragraphs at (0,3,1), and a 34rem cap on `> *` at (0,2,1) inside a
   1600px media query. Specificity beats media queries, so the `none` won and
   the widths diverged again: headline 544px, paragraphs 718px at 1920.

   Now ONE declaration sets max-width for every child, driven by a custom
   property. Changing the measure cannot reopen a specificity contest because
   there is nothing to contest. */

body.home .sg-hero__copy-col {
  --sg-hero-measure: none;
}

@media (min-width: 1600px) {
  body.home .sg-hero__copy-col { --sg-hero-measure: 40rem; }
}

body.home .sg-hero__copy-col > * {
  max-width: var(--sg-hero-measure);
}




/* ─── 2. Newsletter: stop the horizontal variant collapsing ───────────────────
   .sg-subscribe-form carries max-width:480px for the centred/stacked variant.
   The horizontal variant inherited it, so two columns had to share 424px and
   degenerated to 131px / 362px — the email input's min-content width won, and
   the copy column wrapped into a 460px-tall sliver. That is the "looks like an
   error" state.

   minmax(0, …) lets the tracks actually divide, and the cap is lifted so the
   section uses its container. */

.sg-subscribe-form--horizontal {
  max-width: none;
  row-gap: var(--sg-space-content);
}

@media (min-width: 900px) {
  .sg-subscribe-form--horizontal {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(2.5rem, 6vw, 5rem);
  }
}

/* A little more air inside the block — the previous 4px/8px margins read as
   cramped once the copy had room to breathe. */
.sg-subscribe-form--horizontal .sg-subscribe-form__label { margin-block-end: 0.75rem; }
.sg-subscribe-form--horizontal .sg-subscribe-form__heading { margin-block: 0 0.75rem; }
.sg-subscribe-form--horizontal .sg-subscribe-form__subtext { margin-block-end: 0; max-width: 42ch; }
.sg-subscribe-form--horizontal .sg-subscribe-form__row { margin-block-start: 0.25rem; }
.sg-subscribe-form--horizontal .sg-subscribe-form__privacy { margin-block-start: 1rem; }

body.home .sg-newsletter { padding-block: var(--sg-space-section); }

/* The newsletter name is the publication's identity, not a caption. */
.sg-subscribe-form--horizontal .sg-subscribe-form__label {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
}


/* ─── 3. Essay opening: centred, with a rule ──────────────────────────────────
   A left-aligned topic/title/deck/meta stack with no image reads as an
   unfinished page rather than a considered opening. Centring the header is the
   conventional editorial treatment for an essay without a lead image, and it
   gives the composition a deliberate axis. A hairline under the meta separates
   the opening from the body without adding furniture.

   Applies only to the essay template, so archive and page layouts are
   unaffected. */

.sg-page--essay .sg-essay-header { text-align: center; }

.sg-page--essay .sg-essay-header .sg-eyebrow { margin-inline: auto; }

.sg-page--essay .sg-essay-header__title {
  max-width: 30ch;
  margin-inline: auto;
}

.sg-page--essay .sg-essay-header__deck {
  max-width: 46ch;
  margin-inline: auto;
}

.sg-page--essay .sg-essay-header__meta {
  justify-content: center;
  padding-block-end: var(--sg-space-content);
  border-bottom: 1px solid var(--sg-border);
  max-width: 12rem;
  margin-inline: auto;
}

/* Body copy stays left-aligned — centred long-form prose is unreadable. */
.sg-page--essay .sg-essay-body { text-align: left; }

/* When an essay DOES have a lead image, the centred header still reads well
   above it, so no separate variant is needed. */

@media (max-width: 781px) {
  .sg-page--essay .sg-essay-header__meta { max-width: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON METRICS — one size for every variant
   ═══════════════════════════════════════════════════════════════════════════
   Measured live in the hero: primary 45px tall, outline 41px. WordPress core
   pads buttons with `calc(.667em + 2px)` and the outline style drops the +2px
   to compensate for its border — which is correct only when the solid variant
   has no border. This theme gives the solid variant a 1.5px border too, so the
   compensation double-counted and the two buttons ended up 4px apart.

   Fixed by making outer size explicit — min-height plus flex centring — so the
   variants match regardless of how core computes padding.

   Hierarchy is carried by treatment and one type step, not by size accidents:
     primary    solid forest,  cream text      15px
     secondary  outline forest, forest text    15px   (same box as primary)
     tertiary   text + arrow, no box           14px
   ═══════════════════════════════════════════════════════════════════════════ */

.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link,
.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.875rem;                 /* 46px — one outer height */
  padding: 0 clamp(1.25rem, 2vw, 1.75rem);
  border-width: 1.5px;
  border-style: solid;
  border-radius: 4px;
  font-family: var(--sg-font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
}

/* Tertiary: one step down, no box, arrow carries the affordance. */
.sg-hero__tertiary,
.sg-textlink {
  font-size: 0.875rem;
}

.sg-hero__tertiary a,
.sg-textlink a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  letter-spacing: 0.01em;
}

/* Give the hero action row and the tertiary link a consistent rhythm so the
   three levels read as one stack rather than three unrelated controls. */
body.home .sg-hero__actions { margin-block: var(--sg-space-content) 0; }
body.home .sg-hero__tertiary { margin-block: 0.875rem 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   .sg-cols — neutralise WordPress flow margins on grid children
   ═══════════════════════════════════════════════════════════════════════════
   Measured on /speaking/: columns 2 and 3 carried margin-top: 16px while column
   1 had none, so their headings and body copy sat 16px lower — the uneven top
   alignment across Speaking / Teaching and training / Consulting.

   Cause: the wrapper is a .wp-block-group with is-layout-flow, and core applies
   `margin-block-start: var(--wp--style--block-gap)` to every child after the
   first. Turning the wrapper into a grid left those margins in place with
   nothing useful to do. The grid's own `gap` is the only spacing needed.
   ═══════════════════════════════════════════════════════════════════════════ */

.sg-cols > *,
.sg-cols > * + * {
  margin-block-start: 0;
}

/* Align the label baselines across columns even when one label wraps to two
   lines, so the body copy starts at the same height in every column. */
@media (min-width: 782px) {
  .sg-cols--2,
  .sg-cols--3 { align-items: start; }

  .sg-cols--2 > *,
  .sg-cols--3 > * {
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }

  /* Reserve two lines for the label so a one-line and a two-line label occupy
     the same height. Cheaper and more predictable than subgrid, and it degrades
     to natural height on narrow viewports where the columns stack. */
  .sg-cols--2 > * > .sg-cols__label,
  .sg-cols--3 > * > .sg-cols__label {
    min-height: calc(2 * 1.2em + 0.625rem);
    align-content: start;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   POETRY VARIATION
   ═══════════════════════════════════════════════════════════════════════════
   "The Night Before" should not be set like prose. Triggered by body.sg-poetry,
   which functions.php adds when the post format is aside/quote or the sg_poetry
   field is set — so an editor never has to touch CSS.

   Reading time is suppressed automatically for the same posts.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sg-poetry .sg-essay-body .sg-container {
  max-width: 34rem;                 /* narrower than prose measure */
}

body.sg-poetry .sg-essay-body {
  padding-block: var(--sg-space-section);
}

body.sg-poetry .sg-essay-body p {
  line-height: 1.95;                /* generous, for breath between lines */
  margin-block-end: 1.75em;
  text-wrap: pretty;
}

/* Respect author-entered line breaks without collapsing them. */
body.sg-poetry .sg-essay-body br { line-height: inherit; }

body.sg-poetry .sg-essay-body p:last-child { margin-block-end: 0; }

/* No pull quotes competing with the poem's own lines. */
body.sg-poetry .sg-essay-body blockquote {
  border: 0;
  padding-inline: 0;
  font-style: normal;
}

/* Related content stays visually secondary after a poem. */
body.sg-poetry .sg-related { background-color: var(--sg-cream); }
body.sg-poetry .sg-related .sg-section-title { font-size: clamp(1.25rem, 2vw, 1.5rem); }


/* ─── Newsletter: visible field label ─────────────────────────────────────── */

.sg-subscribe-form__field-label {
  display: block;
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-block-end: 0.5rem;
  color: inherit;
}



/* The status region is focusable (tabindex="-1") so success can move focus to
   it. Never show a focus ring for that programmatic move. */
.sg-subscribe-form__status:focus { outline: none; }


/* ─── Questions: forthcoming label ────────────────────────────────────────── */

.sg-index__forthcoming {
  font-family: var(--sg-font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-ink-light);
  border: 1px solid var(--sg-border);
  border-radius: 100px;
  padding: 0.2rem 0.625rem;
  white-space: nowrap;
  align-self: center;
}

/* Unlinked rows must not look interactive: no pointer, no hover response. */
.sg-index__row--inert .sg-index__link { cursor: default; }
.sg-index__row--inert:hover .sg-index__link { background-color: transparent; }







/* Poems keep related content quieter still. */
body.sg-poetry 

/* ═══════════════════════════════════════════════════════════════════════════
   CONTINUE READING — one primary, up to two supporting
   ═══════════════════════════════════════════════════════════════════════════
   Deliberately not three equal cards: identical weight makes every option feel
   interchangeable and turns the module into a miniature archive. One
   recommendation leads; the others support.

   No boxes, no shadows, no radius, no carousel. Hairline rules and whitespace
   carry the separation.
   ═══════════════════════════════════════════════════════════════════════════ */

.sg-continue {
  display: grid;
  gap: var(--sg-space-group);
}



/* ─── Primary ─────────────────────────────────────────────────────────────── */

.sg-continue__image-link { display: block; overflow: hidden; }

.sg-continue__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  margin-block-end: var(--sg-space-group);
}

.sg-continue__meta {
  font-family: var(--sg-font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-timber);
  margin: 0 0 0.5rem;
}

.sg-continue__title {
  font-family: var(--sg-font-display);
  font-size: clamp(1.75rem, 2.9vw, 2.375rem);   /* 28 → 38px */
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.625rem;
  max-width: 24ch;                               /* stop a long title running to five lines */
}

.sg-continue__subtitle {
  font-family: var(--sg-font-display);
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);    /* 22 → 28px */
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 0.375rem;
  max-width: 28ch;
}

.sg-continue__title a,
.sg-continue__subtitle a {
  color: var(--sg-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sg-continue__title a:hover,
.sg-continue__title a:focus-visible,
.sg-continue__subtitle a:hover,
.sg-continue__subtitle a:focus-visible {
  color: var(--sg-forest);
  border-bottom-color: currentColor;
}

.sg-continue__desc {
  font-family: var(--sg-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--sg-ink-mid);
  margin: 0;
  max-width: 46ch;
}

.sg-continue__desc--short { max-width: 40ch; }

.sg-continue__link {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  margin-block: var(--sg-space-group) 0;
}

.sg-continue__link a {
  color: var(--sg-forest);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  border-bottom: 1px solid transparent;
}

.sg-continue__link a:hover,
.sg-continue__link a:focus-visible { border-bottom-color: currentColor; }

/* ─── Supporting ──────────────────────────────────────────────────────────── */

.sg-continue__supporting {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sg-border);
}

.sg-continue__item {
  border-bottom: 1px solid var(--sg-border);
  padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
  transition: border-color var(--sg-transition);
}

.sg-continue__item:hover { border-bottom-color: var(--sg-border-dark); }

.sg-continue__arrow {
  display: inline-block;
  transition: transform var(--sg-transition-med);
}

@media (prefers-reduced-motion: no-preference) {
  .sg-continue__link a:hover .sg-continue__arrow,
  .sg-continue__subtitle a:hover .sg-continue__arrow { transform: translateX(3px); }

  .sg-continue__image { transition: transform 200ms ease; }
  .sg-continue__image-link:hover .sg-continue__image { transform: scale(1.02); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CLOSING RHYTHM — three sections, three weights
   ═══════════════════════════════════════════════════════════════════════════
   Continue reading is the largest and sits on pale sage: another essay is the
   most generous thing to offer. About is a compact cream strip: context, not a
   biography page. Close Attention is the deep field: the ongoing relationship.
   The footer is quieter still and visually separate from the newsletter.
   ═══════════════════════════════════════════════════════════════════════════ */

.sg-page--essay .sg-related {
  background-color: var(--sg-sage);
  padding-block: var(--sg-space-major);
}

.sg-page--essay .sg-essay-author {
  background-color: var(--sg-cream);
  padding-block: var(--sg-space-related);
  border-block: 1px solid var(--sg-border);
}

.sg-page--essay .sg-essay-author .sg-body { max-width: 62ch; }

.sg-page--essay .sg-newsletter { padding-block: var(--sg-space-major); }

/* On sage, the related heading and metadata need their own contrast footing. */
.sg-page--essay .sg-related .sg-section-title { color: var(--sg-ink); }
.sg-page--essay .sg-related .sg-continue__meta { color: var(--sg-forest-dark); }
.sg-page--essay .sg-related .sg-continue__item { border-color: rgba(48, 44, 39, 0.14); }
.sg-page--essay .sg-related .sg-continue__supporting { border-top-color: rgba(48, 44, 39, 0.14); }


/* ═══════════════════════════════════════════════════════════════════════════
   ESSAYS ARCHIVE — masthead, Start Here, editorial filters
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Masthead ────────────────────────────────────────────────────────────── */

.sg-archive-masthead {
  background-color: var(--sg-cream);
  /* 40–56px mobile, 64–88px desktop. Was clamp(64px, 8vw, 150px) — hero-scale,
     which is the wrong job now that Start Here is the page's visual anchor. */
  padding-block: clamp(2.5rem, 5vw, 5.5rem);
  border-bottom: 1px solid var(--sg-border);
}

.sg-masthead__support {
  margin-block-start: 0.875rem;
  max-width: none;              /* the reading container already caps it */
}



/* Mobile order: eyebrow, H1, statement, supporting copy. The statement moves
   above the supporting copy, which the desktop two-column layout gets for free
   but a stacked column does not. */
@media (max-width: 781px) {
  .sg-masthead__cols { display: flex; flex-direction: column; }
  .sg-masthead__statement { order: -1; }
  .sg-masthead__support { margin-block-start: var(--sg-space-group); }
  }


/* ─── Start Here ──────────────────────────────────────────────────────────── */

.sg-starthere-section { background-color: var(--sg-sage); }

.sg-starthere {
  display: grid;
  gap: var(--sg-space-group);
  align-items: center;
}

@media (min-width: 782px) {
  .sg-starthere {
    grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.sg-starthere__media { display: block; overflow: hidden; }

.sg-starthere__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}


.sg-starthere__label { color: var(--sg-forest-dark); }

.sg-starthere__meta {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  color: var(--sg-forest-dark);
  margin: 0 0 0.5rem;
}

.sg-starthere__title {
  font-family: var(--sg-font-display);
  font-size: clamp(1.875rem, 3.2vw, 2.625rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  max-width: 24ch;
}

.sg-starthere__title a {
  color: var(--sg-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sg-starthere__title a:hover,
.sg-starthere__title a:focus-visible {
  color: var(--sg-forest-dark);
  border-bottom-color: currentColor;
}

.sg-starthere__desc {
  font-family: var(--sg-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--sg-ink-mid);
  margin: 0;
  max-width: 46ch;
}

.sg-starthere__link {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  margin-block: var(--sg-space-group) 0;
}

.sg-starthere__link a {
  color: var(--sg-forest-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  border-bottom: 1px solid transparent;
}

.sg-starthere__link a:hover,
.sg-starthere__link a:focus-visible { border-bottom-color: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  .sg-starthere__image { transition: transform 200ms ease; }
  .sg-starthere__media:hover .sg-starthere__image { transform: scale(1.02); }
}


/* ─── Archive heading + filters as editorial navigation ───────────────────── */

.sg-archive-heading {
  padding-block: var(--sg-space-related) 0;
}

/* Filters were rounded pills. They are now text links with a fine underline for
   the active state — navigation, not chips. */
.sg-topic-filter-bar {
  padding-block: var(--sg-space-group);
  border-bottom: 1px solid var(--sg-border);
}

.sg-filter-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sg-filter-pills::-webkit-scrollbar { display: none; }

.sg-filter-pills .sg-filter-pill {
  flex: 0 0 auto;
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sg-ink-mid);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  padding: 0.25rem 0;
  white-space: nowrap;
  transition: color var(--sg-transition), border-color var(--sg-transition);
}

.sg-filter-pills .sg-filter-pill:hover,
.sg-filter-pills .sg-filter-pill:focus-visible {
  background: none;
  color: var(--sg-forest);
  border-bottom-color: var(--sg-border-dark);
}

.sg-filter-pills .sg-filter-pill.is-active {
  background: none;
  color: var(--sg-ink);
  border-bottom-color: var(--sg-forest);
}

@media (min-width: 782px) {
  .sg-filter-pills { flex-wrap: wrap; overflow-x: visible; }
}

/* The archive list itself sits closer to its heading than to the masthead. */
.sg-page--essays .sg-essay-list { padding-block-start: var(--sg-space-group); }


/* ═══════════════════════════════════════════════════════════════════════════
   CONTINUE READING — text-led, revised
   ═══════════════════════════════════════════════════════════════════════════
   The previous treatment gave the primary recommendation a half-width image,
   which read as a second hero and competed with the essay's own ending. The
   module now leads with type; the image is a small optional thumbnail.

   Overrides the earlier .sg-continue rules below them in the cascade.
   ═══════════════════════════════════════════════════════════════════════════ */

.sg-page--essay .sg-related {
  /* 48–56px mobile, 64–80px desktop. Was --sg-space-major (up to 144px). */
  padding-block: clamp(3rem, 5.5vw, 5rem);
}

.sg-page--essay .sg-related .sg-section-title {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);   /* 28 → 36px */
}

/* ─── Primary: compact horizontal row ─────────────────────────────────────── */

.sg-continue__primary {
  display: grid;
  gap: var(--sg-space-group);
  align-items: start;
}

@media (min-width: 600px) {
  /* Thumbnail ~27% of the row, copy ~73%. Only applied when an image exists —
     :has() keeps a text-only lead from reserving an empty track. */
  .sg-continue__primary:has(.sg-continue__image-link) {
    grid-template-columns: minmax(0, 27fr) minmax(0, 73fr);
    column-gap: clamp(1.5rem, 3vw, 2.25rem);
  }
}

.sg-continue__image-link {
  display: block;
  overflow: hidden;
  max-width: 280px;          /* never half the section */
}

.sg-continue__image {
  display: block;
  width: 100%;
  max-height: 180px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  margin-block-end: 0;
}

/* Copy spans the full row when there is no image. */
.sg-continue__primary > :not(.sg-continue__image-link) { grid-column: auto; }

.sg-continue__title {
  font-size: clamp(1.5625rem, 2.4vw, 2.125rem);   /* 25 → 34px */
  max-width: 30ch;
}

.sg-continue__link { margin-block-start: 0.875rem; }

/* ─── Supporting: quieter, tighter ────────────────────────────────────────── */

.sg-continue__subtitle {
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);       /* 20 → 24px */
  max-width: 30ch;
}

.sg-continue__item { padding-block: clamp(1rem, 1.6vw, 1.25rem); }

.sg-continue__desc--short {
  font-size: 0.9375rem;
  max-width: 38ch;
}

/* ─── Mobile: image full content width, capped, or hidden if it dominates ─── */

@media (max-width: 599px) {
  .sg-continue__image-link { max-width: 100%; }
  .sg-continue__image { max-height: 200px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ESSAYS PAGE — featured panel, two-column archive, text pagination
   ═══════════════════════════════════════════════════════════════════════════ */

/* The featured panel now supplies its own section, so nothing is left behind
   when no essay is selected. */
.sg-featured-panel-section {
  background-color: var(--sg-sage);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* ─── Two-column archive ──────────────────────────────────────────────────── */

@media (min-width: 782px) {
  .sg-essay-list--two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3.5rem);
    border-top: 1px solid var(--sg-border);
  }

  /* Entries align on a shared baseline even when titles wrap differently: each
     entry is its own grid with the excerpt pushed to the bottom of its row. */
  .sg-essay-list--two-col > .sg-essay-entry {
    display: grid;
    grid-template-rows: auto auto 1fr;
    max-width: none;
  }

  /* Hairline rules between rows, not around every entry. The last row of each
     column loses its rule. */
  .sg-essay-list--two-col > .sg-essay-entry:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

.sg-essay-list--two-col .sg-essay-entry__excerpt {
  /* ~3 lines, so entries stay comparable in height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 46ch;
}

.sg-essay-list--two-col .sg-essay-entry__title {
  font-size: clamp(1.375rem, 2.1vw, 1.75rem);
}

/* ─── Pagination: text and rules, not pills ───────────────────────────────── */

.sg-pagination {
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-block: var(--sg-space-related);
  border-top: 1px solid var(--sg-border);
  font-family: var(--sg-font-ui);
  font-size: 0.9375rem;
}

.sg-pagination a,
.sg-pagination span {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0.25rem 0;
  color: var(--sg-ink-mid);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color var(--sg-transition), border-color var(--sg-transition);
}

.sg-pagination a:hover,
.sg-pagination a:focus-visible {
  background: none;
  color: var(--sg-forest);
  border-bottom-color: var(--sg-border-dark);
}

.sg-pagination .current,
.sg-pagination [aria-current="page"] {
  background: none;
  color: var(--sg-ink);
  border-bottom-color: var(--sg-forest);
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════════
   POST CLOSE — author and newsletter side by side
   ═══════════════════════════════════════════════════════════════════════════
   Two full-width stacked bands became one grid: 42% author on cream, 58%
   newsletter on forest, equal height, hairline divider, no gap.
   ═══════════════════════════════════════════════════════════════════════════ */

.sg-postclose {
  display: grid;
  background-color: var(--sg-cream);
}

@media (min-width: 900px) {
  /* Equal containers. A 42/58 split made the newsletter read as the dominant
     destination and broke alignment with the two-column structure above it;
     the content lengths differ but the columns should not. */
  .sg-postclose {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
  }

  /* One boundary between the columns, and no gap — these are two halves of one
     band, not two cards. */
  .sg-postclose__author { border-right: 1px solid var(--sg-border); }
}

.sg-postclose__author,
.sg-postclose__newsletter {
  padding: clamp(2.5rem, 4.5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}

.sg-postclose__author { background-color: var(--sg-cream); }

.sg-postclose__author .sg-body { max-width: 42ch; }

.sg-postclose__newsletter {
  background-color: var(--sg-forest);
  color: var(--sg-cream);
}

.sg-postclose__newsletter .sg-subscribe-form__heading,

.sg-postclose__newsletter .sg-subscribe-form__subtext,



.sg-postclose__newsletter .sg-subscribe-form__privacy a { color: var(--sg-cream); }

/* Inside a column this narrow the horizontal variant would cramp; keep it
   stacked and let the grid provide the side-by-side relationship. */
.sg-postclose__newsletter .sg-subscribe-form { max-width: 34rem; }

.sg-postclose__newsletter :where(a, button, input):focus-visible {
  outline-color: var(--sg-cream);
}


/* ─── Homepage hero: stacked CTAs get equal width ─────────────────────────── */
/* When the two buttons wrap, flex was leaving them different widths and
   right-aligned against the row. Stacked, they should be one column, full
   width of the action row, left-aligned. */

@media (max-width: 599px) {
  body.home .sg-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  body.home .sg-hero__actions .wp-block-button { width: 100%; }

  body.home .sg-hero__actions .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }
}


/* ─── Speaking: grouped topic clusters ────────────────────────────────────── */
/* Ten flat bullets read as tags. Three groups with a fine top rule read as a
   curated view of the work. No icons, no pills, no cards. */

.sg-topics { margin-block-start: var(--sg-space-group); }

.sg-topics > .wp-block-group {
  border-top: 1px solid var(--sg-border);
  padding-block-start: var(--sg-space-group);
}

.sg-topics__group {
  font-family: var(--sg-font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-timber);
  margin: 0 0 0.875rem;
}

.sg-topics__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-topics__list > li {
  font-family: var(--sg-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sg-ink-mid);
  margin-block-end: 0.5rem;
}

.sg-topics__list > li:last-child { margin-block-end: 0; }

/* Two columns at tablet, one on mobile — .sg-cols--3 handles desktop. */
@media (min-width: 600px) and (max-width: 899px) {
  .sg-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The label min-height reserved for .sg-cols__label does not apply here. */
@media (min-width: 782px) {
  .sg-topics > .wp-block-group { display: block; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MEASURED FIXES — 2026-08-03, second pass
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Continue Reading: restore the two-column shell ───────────────────────
   Measured live: .sg-continue computed to display:block while still carrying
   grid-template-columns, so primary and supporting stacked. The bare
   `.sg-continue { display: grid }` rule had been destroyed by one of my own
   regex rule-removals in an earlier pass. Restored, and now stated once. */

.sg-continue {
  display: grid;
  gap: var(--sg-space-group);
  align-items: start;
}


/* ─── 2. Primary row: two children, not seven ─────────────────────────────────
   The copy is wrapped in .sg-continue__body so the thumbnail/copy grid has
   exactly two items. Previously all seven of the primary's children were grid
   items and flowed into the two tracks — which is why the title appeared beside
   the metadata and the link beside the description. */

.sg-continue__primary {
  display: grid;
  gap: var(--sg-space-group);
  align-items: start;
}

@media (min-width: 600px) {
  .sg-continue__primary:has(.sg-continue__image-link) {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
  }
}

.sg-continue__body { min-width: 0; }

.sg-continue__image-link { max-width: 260px; }
.sg-continue__image { max-height: 175px; }


/* ─── 3. Hero CTAs: equal width at every breakpoint ──────────────────────────
   Measured 182px vs 208px at 1440 — the buttons sized to their labels. A grid
   with equal tracks makes them match regardless of text length, and the row is
   capped so two buttons never stretch across the whole column. */

body.home .sg-hero__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.75rem;
  max-width: 26rem;
  align-items: stretch;
}

body.home .sg-hero__actions .wp-block-button { width: 100%; }

body.home .sg-hero__actions .wp-block-button__link {
  width: 100%;
  justify-content: center;
  text-align: center;
}

@media (max-width: 599px) {
  body.home .sg-hero__actions {
    grid-auto-flow: row;
    max-width: none;
  }
}


/* ─── 4. Recent essays: match the section below, and lead larger ─────────────
   Measured: the Recent Essays section was 704px wide while the Questions
   section below it was 1248px. The shortcode sits in post-content's constrained
   layout, so WordPress capped it at theme.json contentSize. The Home page
   content now wraps it in an alignfull group; these rules align the inner width
   to the page token and give the lead more room. */

.sg-recent-essays__inner {
  max-width: var(--sg-width-page);
  margin-inline: auto;
  padding-inline: var(--sg-page-padding);
}

.sg-recent-essays__grid {
  display: grid;
  gap: var(--sg-space-group);
}

@media (min-width: 782px) {
  /* Lead gets roughly 56%; the two supporting essays share the rest. */
  .sg-recent-essays__grid {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    grid-template-rows: auto auto;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: var(--sg-space-group);
  }

  .sg-recent-essays__grid > .sg-essay-hp-card--lead {
    grid-row: 1 / span 2;
  }
}

.sg-essay-hp-card--lead .sg-essay-hp-card__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}


/* ─── 5. "All essays" heading: far less weight ───────────────────────────────
   Measured 150px tall with a 50.4px heading and 96px of top padding. It is a
   divider between the feature and the archive, not a section title. */

.sg-archive-heading {
  padding-block: var(--sg-space-related) 0;
}

.sg-archive-heading .sg-section-title {
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  font-family: var(--sg-font-ui);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-ink-mid);
}


/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT PASS — explicit structure over grid-child inference
   ═══════════════════════════════════════════════════════════════════════════
   Three of the problems in this round came from the same mistake: a grid whose
   child count I assumed rather than controlled. Fixed by making each layout's
   children explicit and few.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Hero actions: the 1fr min-content trap ───────────────────────────────
   Measured at 860px: the buttons reached x=470 while the image column began at
   x=423 — 47px of overlap. `grid-auto-columns: 1fr` resolves its minimum to
   min-content, and "Receive new essays" is wider than the available track, so
   the tracks blew past their container. Same trap as the newsletter grid.

   auto-fit + minmax gives equal widths when two fit and drops to one column
   when they do not, with no overflow at any width. */

body.home .sg-hero__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  grid-auto-flow: row;
  gap: 0.75rem;
  max-width: 28rem;
  align-items: stretch;
}

body.home .sg-hero__actions .wp-block-button { width: 100%; min-width: 0; }

body.home .sg-hero__actions .wp-block-button__link {
  width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
}


/* ─── Button wrappers are not buttons ────────────────────────────────────────
   The sg-btn class is authored on the button *block*, so WordPress prints it on
   the .wp-block-button wrapper div rather than the <a>. The shared button rule
   below matches a bare .sg-btn, so the wrapper was given the full button box —
   padding, 1.5px border and a forest background — and the <a> inside was given
   it a second time. Measured at 1440: a 202px track, a wrapper content box of
   143px, and 84px of room for a label needing 149px. Hence the bleed.

   The wrapper is a layout div in every case. It never carries a button box. */

/* The hover and active selectors are here because the colour variants define
   .sg-btn--forest:hover and :active at the same specificity as the plain
   neutraliser. Any page still running an older paste keeps a clean wrapper. */
.wp-block-button.sg-btn,
.wp-block-button.sg-btn:hover,
.wp-block-button.sg-btn:active {
  display: block;
  padding: 0;
  border: 0;
  min-height: 0;
  background: none;
  border-radius: 0;
}

/* And if a label ever outgrows its track, it wraps rather than bleeding: two
   lines at 1.2 still fit inside the 46px minimum, so the box does not change. */
body.home .sg-hero__actions .wp-block-button__link { white-space: normal; }


/* ─── 2. Arrow alignment ──────────────────────────────────────────────────────
   Measured 13px above the text baseline. The arrow was a flex item with its own
   line-height, centred against a taller text box. Both text and arrow are now
   spans with a shared line-height, so they sit on one line. */

.sg-continue__link a,
.sg-starthere__link a,
.sg-continue__subtitle a {
  display: inline;                    /* no flex box to mis-centre */
}

.sg-continue__linktext { display: inline; }

.sg-continue__arrow {
  display: inline;
  line-height: inherit;
  margin-inline-start: 0.3em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .sg-continue__arrow {
    display: inline-block;
    transition: transform var(--sg-transition-med);
  }
  .sg-continue__link a:hover .sg-continue__arrow,
  .sg-starthere__link a:hover .sg-continue__arrow,
  .sg-continue__subtitle a:hover .sg-continue__arrow { transform: translateX(3px); }
}


/* ─── 3. Featured essay: image left, copy right, stacked on mobile ────────────
   Explicit column assignment rather than relying on source order and implicit
   placement. Both children reported the same left offset before, which meant
   they were resolving into one track. */

.sg-starthere--media-left {
  display: grid;
  gap: var(--sg-space-group);
  align-items: center;
}

@media (min-width: 782px) {
  .sg-starthere--media-left {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .sg-starthere--media-left > .sg-starthere__media { grid-column: 1; grid-row: 1; }
  .sg-starthere--media-left > .sg-starthere__body  { grid-column: 2; grid-row: 1; }
}

@media (max-width: 781px) {
  /* Stacked: image first, then copy. One column, explicit rows. */
  .sg-starthere--media-left {
    grid-template-columns: minmax(0, 1fr);
  }
  .sg-starthere--media-left > .sg-starthere__media { grid-row: 1; }
  .sg-starthere--media-left > .sg-starthere__body  { grid-row: 2; }
}

.sg-starthere__body { min-width: 0; }


/* ─── 4. "All essays": reduce height ──────────────────────────────────────────
   Measured 118px tall, 96px of it padding-top. It is a label between the
   feature and the archive. */

.sg-archive-heading {
  padding-block: var(--sg-space-group) 0;
}


/* ─── 5. Continue Reading: single column, two-up supporting ───────────────────
   REPLACES the 62/38 two-column shell.

   Why: pairing a tall primary against two short supporting items left one
   column short and the section unbalanced at most widths, and the nested grid
   inside the primary kept producing placement bugs. A single column removes the
   pairing problem entirely.

     ┌─────────────────────────────────────────┐
     │ [thumb]  meta · title · desc · link     │   primary row
     ├─────────────────────────────────────────┤   hairline
     │ supporting one     │  supporting two    │   two-up
     └─────────────────────────────────────────┘

   The primary reads as the recommendation; the pair beneath reads as
   alternatives. Both stack on mobile. */

.sg-continue--stacked {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sg-space-related);
}

@media (min-width: 782px) {
  /* 62/38 per the refinement brief: one primary recommendation beside a stacked
     column of up to two supporting ones. This supersedes the single-column
     arrangement from v13.2 — see the deployment report, the change is a
     deliberate reversal and not a regression. */
  .sg-continue--stacked {
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }

  .sg-continue--stacked > .sg-continue__primary    { grid-column: 1; grid-row: 1; }
  .sg-continue--stacked > .sg-continue__supporting { grid-column: 2; grid-row: 1; }
}

.sg-continue--stacked > .sg-continue__primary { grid-column: 1; }

/* Primary row: thumbnail and copy, exactly two children. */
.sg-continue__primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sg-space-group);
  align-items: start;
}

@media (min-width: 600px) {
  /* Matches the homepage featured spread: 44/56, image left, copy right. */
  .sg-continue__primary:has(.sg-continue__image-link) {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .sg-continue__primary:has(.sg-continue__image-link) > .sg-continue__image-link { grid-column: 1; }
  .sg-continue__primary:has(.sg-continue__image-link) > .sg-continue__body       { grid-column: 2; }
}

/* The 260 x 175 thumbnail read as a favicon beside 956px of copy. The featured
   recommendation now uses the same treatment as the homepage lead card — fill
   the column at 4/3, cover-cropped — so the two featured spreads are one
   system. At 1248px that is a 532px image, still under half the section. */

.sg-continue__primary .sg-continue__image-link {
  max-width: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.sg-continue__primary .sg-continue__image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}

/* An empty paragraph carries no content, so it is never a grid child. Belt and
   braces now that sg_tidy() stops wpautop producing them at the source. */
.sg-continue__primary > p:empty,
.sg-continue__supporting > p:empty { display: none; }

/* Supporting: two side by side beneath a hairline. */
.sg-continue__supporting {
  list-style: none;
  margin: 0;
  padding-block-start: var(--sg-space-group);
  border-top: 1px solid var(--sg-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sg-space-group);
}

/* Stacked, never side by side: the brief specifies a vertical supporting
   column with fine rules, which also removes the tall/short pairing that made
   the earlier two-up arrangement hard to balance. */
.sg-continue__supporting > .sg-continue__item + .sg-continue__item {
  border-top: 1px solid var(--sg-border);
  padding-block-start: var(--sg-space-group);
}

/* No per-item rules or borders — the single hairline above the pair is enough. */
.sg-continue__item {
  border: 0;
  padding-block: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Template-consistency and spacing pass
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── Continue Reading: back to a compact thumbnail ───────────────────────────
   The previous pass sized this to match the homepage lead card — 532 x 399 at a
   1248px section. The brief that followed asks for a small optional lead
   thumbnail and no giant photo, so the scale is reverted while the homepage's
   crop system (4/3, cover) is kept, so the two still read as one family. */

@media (min-width: 600px) {
  .sg-continue__primary:has(.sg-continue__image-link) {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

.sg-continue__primary .sg-continue__image-link {
  max-width: 15rem;                     /* 240px, inside the 220-260 range */
  aspect-ratio: 3 / 2;                  /* the brief specifies 3:2 here */
  max-height: 175px;
}


/* ─── Essays: the opening reads as one continuous system ──────────────────────
   Measured at 1440 before changing anything, against the target in the brief:

     masthead bottom padding      72px   ->  48-64
     all-essays heading to filters 72px  ->  24-32
     filters to first archive row  73px  ->  40-48
     archive row gap               32px  ->  64-80

   The featured essay used to begin roughly a screen below the introduction. */

.sg-archive-masthead { padding-block-end: 3.5rem; }            /* 56px */

/* The featured essay is a coloured band, so its own padding is what creates the
   gap above and below it. Spacing belongs on the section the shortcode emits,
   not on the inner grid — a margin there would sit inside the sage and add to
   the wrapper's padding rather than replace it. */
.sg-featured-panel-section {
  padding-block: 3.5rem;                                       /* 56px inside */
  margin-block-end: 6rem;                                      /* 96px after  */
}

.sg-archive-heading {
  padding-block: 0 0;
  margin-block: 0 1.75rem;                                     /* 28px to filters */
}

.sg-filter-pills { margin-block-end: 2.75rem; }                /* 44px to row 1 */

.sg-essay-list { padding-block-start: 0; }

@media (min-width: 782px) {
  .sg-essay-list--two-col { row-gap: 4.5rem; }                 /* 72px */
}


/* ─── Archive rows start on one line ─────────────────────────────────────────
   Measured: row 1 column 2 sat 16px lower than column 1 (tops 1399 / 1415,
   both bottoms 1657). WordPress applies its block-gap as a top margin through
   .is-layout-flow > * + *, which lands on grid children and offsets them. The
   same cause was fixed on the Speaking columns. */

.sg-essay-list > * + *,
.sg-essay-list.is-layout-flow > * + *,
.sg-continue__supporting > * + * { margin-block-start: 0; }


/* ─── About: one shared page edge and one grid ────────────────────────────────
   Measured four different text left edges at 1440 — 58, 89, 369 and 770. The
   770 belongs to the two full-bleed image spreads, which are intentional. The
   other three were drift: two sections centred a reading column at 369 while
   the credentials section began at the 89px page edge, and the forest writing
   spread began at 58.

   Every text section now begins on the same page edge, with the heading in the
   first four of twelve columns and the narrative in the remaining eight, capped
   inside the 720-780px reading target. */

@media (min-width: 900px) {
  .sg-about-questions > .sg-container,
  .sg-about-work > .sg-container {
    --sg-container-cap: var(--sg-width-page);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
    align-items: start;
  }

  .sg-about-questions > .sg-container > :is(h2, h3),
  .sg-about-work > .sg-container > :is(h2, h3) { grid-column: 1 / span 4; }

  .sg-about-questions > .sg-container > :not(h2, h3),
  .sg-about-work > .sg-container > :not(h2, h3) {
    grid-column: 5 / span 8;
    max-width: 47.5rem;                 /* 760px — inside the 720-780 target */
  }

  /* The forest writing spread shares the page edge rather than its own 58px. */
  .sg-about-writing > :not(.sg-container) {
    padding-inline: max(var(--sg-page-padding), calc((100% - var(--sg-width-page)) / 2));
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Keyboard and focus QA
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── Core's skip link must be visible when focused ──────────────────────────
   Block themes get a second skip link from WordPress core ("Skip to content")
   alongside the theme's own .sg-skip-link. Core styles it through an injected
   inline <style>, and measured live that style is not surviving — the link
   stayed 1x1 when focused, so a keyboard user tabbing into the page saw
   nothing. LiteSpeed's Remove Unused CSS is the likely cause, and it has
   stripped runtime-only selectors in this install before. Owning the rule here
   means it cannot be optimised away. */

.skip-link.screen-reader-text:focus,
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: 10000;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 0.75rem 1.25rem;
  background: var(--sg-forest);
  color: var(--sg-cream);
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  text-decoration: underline;
  box-shadow: 0 2px 12px rgba(14, 38, 14, 0.4);
}


/* ─── No control loses its focus indicator without a replacement ──────────────
   Core zeroes the outline on the responsive nav close button and supplies
   nothing in its place, so the mobile menu's close control was unfocusable to
   the eye. The search input replaced its outline with a 1px border-colour
   change only, which is too small an area to read as focus under WCAG 2.2's
   focus-appearance requirement. Both get a real indicator. */

.wp-block-navigation__responsive-close:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible {
  outline: 2px solid var(--sg-forest);
  outline-offset: 2px;
}

.sg-search-input:focus-visible {
  outline: 2px solid var(--sg-timber);
  outline-offset: 1px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Speaking: sessions, proof, and the two-column inquiry rows
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 6F · Two-column form rows ───────────────────────────────────────────────
   The markup already paired Name/Email, Organization/Audience and
   Timeframe/Location in .sg-form-row--two, but no rule for that class existed
   anywhere in the stylesheet — so every pair rendered stacked. The full-width
   fields (engagement type, the narrative, consent, submit) sit outside these
   rows already and are unaffected.

   minmax(0, 1fr) rather than 1fr: an input's min-content width would otherwise
   push the tracks past the form. */

.sg-form-row--two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 600px) {
  .sg-form-row--two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1rem, 2.5vw, 1.75rem);
  }
}

/* Was an arbitrary 46rem (736px), outside the 620-720 the brief specifies for
   a compact form. Now the shared token. */
.sg-speaking-form .sg-speaking-inquiry-form,
.sg-speaking-form form { max-width: var(--sg-width-form); }


/* ─── 6D · Representative sessions ────────────────────────────────────────────
   Editorial rows separated by fine rules, not cards. Optional thumbnail on the
   left at the same 240px measure as Continue Reading, so the two components
   share one image scale. */

.sg-sessions__list {
  list-style: none;
  margin: var(--sg-space-related) 0 0;
  padding: 0;
  border-top: 1px solid var(--sg-border);
}

.sg-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sg-space-group);
  padding-block: var(--sg-space-related);
  border-bottom: 1px solid var(--sg-border);
}

@media (min-width: 700px) {
  .sg-session:has(.sg-session__media) {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  .sg-session:has(.sg-session__media) > .sg-session__media { grid-column: 1; grid-row: 1; }
  .sg-session:has(.sg-session__media) > .sg-session__body  { grid-column: 2; grid-row: 1; }
}

.sg-session__media {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  max-width: 15rem;
}

.sg-session__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sg-session__title {
  font-family: var(--sg-font-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 0.5rem;
  color: var(--sg-ink);
}

.sg-session__meta {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-ink-light);
  margin: 0 0 0.75rem;
}

.sg-session__premise,
.sg-session__outcomes {
  margin: 0 0 0.75rem;
  max-width: var(--sg-width-reading);
  color: var(--sg-ink-mid);
  line-height: 1.6;
}

.sg-session__outcomes-label {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sg-ink-light);
}

.sg-session__link { margin: 0; }

.sg-sessions__empty,
.sg-proof__empty {
  margin-block-start: var(--sg-space-group);
  color: var(--sg-ink-light);
  max-width: var(--sg-width-reading);
}


/* ─── 6E · Proof ──────────────────────────────────────────────────────────────
   The quotation leads at a generous measure; the optional photograph is a
   companion, never the subject. */

.sg-proof__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sg-space-related);
  margin-block-start: var(--sg-space-related);
}

@media (min-width: 782px) {
  .sg-proof__grid:has(.sg-proof__media) {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }

  /* Placed explicitly rather than left to auto-placement. A stray child — a
     wpautop paragraph, say — put the copy in the wrong track once already in
     Continue Reading, and named tracks make that impossible here. */
  .sg-proof__grid:has(.sg-proof__media) > .sg-proof__body  { grid-column: 1; grid-row: 1; }
  .sg-proof__grid:has(.sg-proof__media) > .sg-proof__media { grid-column: 2; grid-row: 1; }
}

.sg-proof__body { min-width: 0; }

.sg-proof__quote {
  margin: 0;
  padding-inline-start: clamp(1rem, 2vw, 1.5rem);
  border-inline-start: 2px solid var(--sg-timber-pale);
}

.sg-proof__quote p {
  font-family: var(--sg-font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.45;
  color: var(--sg-ink);
  margin: 0 0 1rem;
}

.sg-proof__attrib {
  font-family: var(--sg-font-ui);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--sg-ink-light);
}

.sg-proof__audiences { margin-block-start: var(--sg-space-group); }

.sg-proof__audience-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.375rem clamp(1rem, 2vw, 2rem);
}

.sg-proof__audience-list li {
  font-family: var(--sg-font-ui);
  font-size: 0.9375rem;
  color: var(--sg-ink-mid);
  padding-block: 0.375rem;
  border-top: 1px solid var(--sg-border);
}

.sg-proof__video { margin-block-start: var(--sg-space-group); }

.sg-proof__media { overflow: hidden; aspect-ratio: 4 / 5; }

.sg-proof__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ─── Homepage Speaking bridge: a contained 5/7 grid ──────────────────────────
   This was a full-bleed 50/50 .sg-spread, the same composition as the About
   section directly above it — which is why it read as a mirrored second hero
   rather than a bridge. It now sits in the global page container on a 5/7 grid,
   and no longer borrows the spread system at all: the markup dropped
   .sg-spread, .sg-spread__copy and .sg-spread__media, so the inherited
   vertical centring, the min-height clamp and the mobile order:-1 that put the
   image first simply do not apply. Nothing was overridden to achieve that.

   Everything removed per the brief: viewport-edge alignment (now contained),
   min-height (none), absolute positioning (never used here), translate and
   negative margins (never used here), vertical centring in an oversized row
   (align-items: start), card shadow (none).

   Background stays --sg-sage. The brief allows "warm cream or existing light
   neutral"; sage is the existing neutral and keeps the page's colour rhythm,
   where three cream sections in a row would flatten it. */

.sg-speaking-hp {
  padding-block: clamp(3rem, 7vw, 6rem);   /* 48px mobile → 96px desktop */
}

.sg-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 2.5rem);           /* 32-40 stacked */
  align-items: start;
}

@media (min-width: 782px) {
  .sg-bridge {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 5vw, 4.5rem);         /* 48-72 */
  }

  /* Explicit, so a stray child cannot reorder the row. */
  .sg-bridge > .sg-bridge__copy  { grid-column: 1; grid-row: 1; }
  .sg-bridge > .sg-bridge__media { grid-column: 2; grid-row: 1; }
}

/* Copy first when stacked — the media column follows in source order, so no
   order property is needed and none is used. */
.sg-bridge__copy,
.sg-bridge__media { min-width: 0; }

.sg-bridge__copy > * { max-width: 31.25rem; }   /* 500px */

.sg-bridge__copy > .sg-section-title { margin-block-start: 0.35em; }

/* The proof line: quiet, and clearly not a heading. */
.sg-bridge__proof {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-timber-light);
  margin-block: var(--sg-space-group) 0.75rem;
}

/* The image column's top edge aligns with the top of the copy block, and the
   slot no longer inherits the spread's min-height. */
.sg-speaking-hp .sg-speaking-hp__photo {
  aspect-ratio: 3 / 2;
  min-height: 0;
  height: auto;
  overflow: hidden;
  border: none;
  box-shadow: none;
  margin: 0;
}

.sg-speaking-hp .sg-speaking-hp__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Focal point: adjust this one declaration to reframe the crop. */
  object-position: center 20%;
  display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Close Attention landing page

   Section rhythm, each owning its background but resolving to one container:
     hero      sand   — warm cream, slightly deeper so the hero reads as a top
     purpose   cream  — warm white
     essays    sage   — pale sage
     details   cream  — warm white
     close     forest — deep green
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── Editorial hero ─────────────────────────────────────────────────────────
   One integrated section: the signup is the right-hand column of the hero, not
   a band beneath it and not a card. The only division is a hairline. */

.sg-ca-hero {
  background-color: var(--sg-sand);
  padding-block: clamp(4rem, 10vw, 8.5rem);     /* 64px mobile → 136px desktop */
}

.sg-ca-hero__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3rem);                /* 40-48 stacked */
}

.sg-ca-hero__copy,
.sg-ca-hero__form { min-width: 0; }

/* Stacked: a hairline above the form replaces the vertical rule. */
.sg-ca-hero__form {
  border-top: 1px solid var(--sg-rule);
  padding-block-start: clamp(2.5rem, 5vw, 3rem);
}

@media (min-width: 900px) {
  .sg-ca-hero__cols {
    grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.8fr);
    column-gap: clamp(4rem, 7vw, 5.5rem);       /* 64-88 */
    align-items: center;
  }

  .sg-ca-hero__cols > .sg-ca-hero__copy { grid-column: 1; grid-row: 1; }
  .sg-ca-hero__cols > .sg-ca-hero__form { grid-column: 2; grid-row: 1; }

  .sg-ca-hero__form {
    border-top: 0;
    border-inline-start: 1px solid var(--sg-rule);
    padding-block-start: 0;
    padding-inline-start: clamp(3rem, 4vw, 4rem);   /* 48-64 */
  }
}

.sg-ca-hero__copy > * { max-width: 42.5rem; }       /* 680px */
.sg-ca-hero .sg-page-title { margin-block: 0.25em 0.5em; }
.sg-ca-hero .sg-lede { margin-block-end: var(--sg-space-group); }
.sg-ca-hero .sg-body + .sg-body { margin-block-start: 1.1em; }

/* The form component is authored for the deep-forest sections, where its label
   and microcopy are cream — the microcopy at 35% opacity, which on this warm
   ground is invisible. Restated in ink for light placements. No background, no
   shadow, no radius: it is a column, not a panel. */

.sg-ca-hero__form .sg-subscribe-form {
  max-width: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.sg-ca-hero__form .sg-subscribe-form__heading,
.sg-ca-hero__form .sg-subscribe-form__field-label { color: var(--sg-ink); }

.sg-ca-hero__form .sg-subscribe-form__privacy {
  color: var(--sg-ink-light);
  text-align: start;
}

.sg-ca-hero__form .sg-subscribe-form__privacy a,
.sg-ca-hero__form .sg-subscribe-form__about a { color: var(--sg-forest); }

/* heading_style="label": a real h2 for the form's accessible name, rendered as
   quiet UI type so it does not compete with the page h1. */
.sg-subscribe-form--quiet-heading .sg-subscribe-form__heading {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}


/* ─── The work of noticing ───────────────────────────────────────────────── */

.sg-ca-purpose {
  background-color: var(--sg-cream);
  padding-block: clamp(4rem, 8vw, 7.5rem);      /* → 120px desktop */
}

/* A short rule above the eyebrow, rather than a heavier section divider. */
.sg-ca-purpose .sg-eyebrow {
  padding-block-start: var(--sg-space-group);
  border-top: 1px solid var(--sg-rule);
  display: block;
  max-width: 4rem;
}

.sg-ca-purpose .sg-section-title { margin-block: 0.5em var(--sg-space-group); }

/* The opening paragraph carries slightly more weight; measure and leading are
   unchanged so it stays comfortable to read. */
.sg-ca-purpose .sg-body:first-of-type {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.7;
}

.sg-ca-purpose .sg-body + .sg-body { margin-block-start: 1.25em; }


/* ─── Selected essays ────────────────────────────────────────────────────── */

.sg-ca-picks {
  background-color: var(--sg-sage);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.sg-ca-picks__all { margin-block-start: var(--sg-space-related); }
.sg-picks__intro { max-width: var(--sg-width-reading); margin-block-end: var(--sg-space-related); }

/* Three across, on shared rules rather than individual cards. */
.sg-picks__list--grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sg-space-related);
  border-top: 0;
}

@media (min-width: 700px) {
  .sg-picks__list--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2.25rem, 4vw, 3rem);      /* 36-48 */
  }
}

.sg-picks__list--grid > .sg-picks__item {
  border-top: 1px solid var(--sg-rule);
  border-bottom: 0;
  padding-block: var(--sg-space-group) 0;
  max-width: none;
  background: none;
  box-shadow: none;
}

/* Block-gap margins land on grid children and offset the first row. */
.sg-picks__list--grid > * + * { margin-block-start: 0; }

/* One consistent 4:3 wrapper, so a mixed set of crops still aligns. */
.sg-picks__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-block-end: var(--sg-space-group);
}

.sg-picks__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ─── What you'll find here ──────────────────────────────────────────────── */

.sg-ca-inside {
  background-color: var(--sg-cream);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.sg-ca-inside__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sg-space-related);
  margin-block-start: var(--sg-space-related);
  align-items: start;
}

@media (min-width: 600px) {
  .sg-ca-inside__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .sg-ca-inside__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 4vw, 3.5rem);     /* 40-56 */
  }
}

.sg-ca-inside__cols > * + * { margin-block-start: 0; }

.sg-ca-inside__cols > .wp-block-column {
  border-top: 1px solid var(--sg-rule);
  padding-block-start: var(--sg-space-group);
  text-align: start;
}

.sg-ca-inside__label {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-ink-light);
  margin: 0 0 0.75rem;
}


/* ─── Compact close: copy 5, form 7 ──────────────────────────────────────── */

.sg-ca-close {
  padding-block: clamp(3rem, 6vw, 6rem);        /* → 96px desktop */
  scroll-margin-block-start: 5rem;              /* #signup clears the header */
}




.sg-ca-close .sg-section-title { margin-block: 0.25em 0.5em; }
.sg-ca-close .sg-body { margin-block-end: 0; }


.sg-picks__heading { margin-block-end: var(--sg-space-group); }

.sg-picks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sg-border);
}

.sg-picks__item {
  padding-block: var(--sg-space-group);
  border-bottom: 1px solid var(--sg-border);
  max-width: var(--sg-width-narrative);
}

.sg-picks__meta {
  font-family: var(--sg-font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sg-ink-light);
  margin: 0 0 0.375rem;
}

.sg-picks__title {
  font-family: var(--sg-font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.sg-picks__title a { color: var(--sg-ink); text-decoration: none; }

.sg-picks__title a:hover { color: var(--sg-forest); text-decoration: underline; }

.sg-picks__desc {
  margin: 0;
  color: var(--sg-ink-mid);
  line-height: 1.6;
  max-width: var(--sg-width-reading);
}

.sg-picks__archive { margin-block-start: var(--sg-space-group); }






/* Between 900 and 1180 the five labels are tight. Tighten the gutters between
   them rather than reducing the label to an inaccessible size. */
@media (min-width: 900px) and (max-width: 1180px) {
  .sg-nav a { padding-inline: 0.375rem; }
  .sg-header__inner { column-gap: clamp(1rem, 2vw, 2rem); }
}



/* ─── "About Close Attention" — the link inside the shared signup module ──────
   Appears on the homepage module, the archive and the essay close; never on the
   landing page's own forms. Restrained text, sized under the microcopy, and
   legible on both the forest sections and light placements. */

.sg-subscribe-form__about {
  font-family: var(--sg-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  margin: 1rem 0 0;
}

.sg-subscribe-form__about a {
  color: var(--sg-forest);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sg-subscribe-form__about a:hover,
.sg-subscribe-form__about a:focus-visible { border-bottom-color: currentColor; }

/* Cream on the deep-forest placements. */
.sg-newsletter .sg-subscribe-form__about a,
.sg-postclose__newsletter .sg-subscribe-form__about a { color: rgba(247, 242, 232, 0.86); }

.sg-subscribe-form--horizontal .sg-subscribe-form__about { margin-block-start: 0.75rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   Accessibility corrections — measured, not assumed
   ═══════════════════════════════════════════════════════════════════════════
   Contrast was computed against the actual rendered colours, including the
   composite of every rgba() over its real background. Results:

     text tokens on sand / cream / sage   4.75-12.42:1   all already pass
     privacy microcopy on forest          2.71:1         FAIL (cream @ 0.35)
     privacy link on forest               3.96:1         FAIL (cream @ 0.50)
     input border on forest               1.84:1         FAIL (white @ 0.20)
     eyebrow on forest                    6.46:1         passes, but via opacity
     field label on forest                7.85:1         passes, but via opacity

   So the global text palette is left alone. What changes is the three genuine
   failures, and the four places opacity was producing an essential colour.

   One correction to the brief's own recommendation: --ca-focus (#0b6657) is
   1.76:1 on the forest sections, so a single focus colour cannot serve the
   whole site. Light sections get #0b6657 (5.10-6.17:1); dark sections get
   --ca-on-dark (11.15:1). */


/* ─── Form controls ────────────────────────────────────────────────────────── */

.sg-subscribe-form__input {
  min-height: 3.25rem;                  /* 52px */
  font-size: 1rem;                      /* 16px — also stops iOS zooming in */
  border: 2px solid var(--ca-control-border);
  background: var(--ca-white);
  color: var(--ca-text);
}

/* Dark sections: a solid light border, not white at 20% opacity. */
.sg-newsletter .sg-subscribe-form__input,
.sg-postclose__newsletter .sg-subscribe-form__input {
  border-color: var(--ca-on-dark-secondary);
  background: var(--ca-white);
  color: var(--ca-text);
}

.sg-subscribe-form__input::placeholder { color: var(--ca-muted); }

.sg-subscribe-form__btn {
  min-height: 3.25rem;                  /* 52px */
  font-size: 1rem;
  border-width: 2px;
}

/* Field label and helper text: solid colours, and large enough to read. */
.sg-subscribe-form__field-label {
  font-size: 0.9375rem;                 /* 15px */
  font-weight: 600;
  color: var(--ca-text);
}

.sg-subscribe-form__privacy {
  font-size: 0.9375rem;                 /* 15px, was 12px */
  line-height: 1.55;
  color: var(--ca-muted);
}

.sg-subscribe-form__privacy a { color: var(--ca-eyebrow); }

.sg-newsletter .sg-subscribe-form__field-label,
.sg-postclose__newsletter .sg-subscribe-form__field-label { color: var(--ca-on-dark); }

.sg-newsletter .sg-subscribe-form__privacy,
.sg-postclose__newsletter .sg-subscribe-form__privacy { color: var(--ca-on-dark-secondary); }

.sg-newsletter .sg-subscribe-form__privacy a,
.sg-postclose__newsletter .sg-subscribe-form__privacy a,
.sg-newsletter .sg-subscribe-form__about a,
.sg-postclose__newsletter .sg-subscribe-form__about a { color: var(--ca-on-dark); }

.sg-subscribe-form__about { font-size: 0.9375rem; }

/* Eyebrows: 14px, heavier, and less tracking than 0.12em. */
.sg-eyebrow {
  font-size: 0.875rem;                  /* 14px, was 12px */
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sg-newsletter .sg-eyebrow { color: var(--ca-on-dark-secondary); }


/* ─── Focus: 3px, and never invisible ─────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ca-focus);
  outline-offset: 3px;
}

/* #0b6657 measures 1.76:1 on forest, so the dark sections invert it. */
.sg-newsletter :is(a, button, input, select, textarea):focus-visible,
.sg-postclose__newsletter :is(a, button, input, select, textarea):focus-visible,
.sg-about-writing :is(a, button, input, select, textarea):focus-visible,
.sg-page-hero--dark :is(a, button, input, select, textarea):focus-visible {
  outline-color: var(--ca-on-dark);
}

/* The input keeps its own ring rather than suppressing the outline. */
.sg-subscribe-form__input:focus-visible,
.sg-form-input:focus-visible,
.sg-form-select:focus-visible,
.sg-form-textarea:focus-visible {
  outline: 3px solid var(--ca-focus);
  outline-offset: 3px;
}


/* ─── Body links are not distinguished by colour alone ────────────────────── */

.sg-body a,
.sg-lede a,
.sg-essay-body p a,
.sg-picks__desc a,
.sg-continue__desc a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.sg-body a:hover,
.sg-lede a:hover,
.sg-essay-body p a:hover,
.sg-picks__desc a:hover,
.sg-continue__desc a:hover { text-decoration-thickness: 2px; }


/* ─── Close Attention typography ──────────────────────────────────────────── */

.sg-page--newsletter .sg-body {
  font-size: clamp(1.0625rem, 0.98rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
  max-width: 45rem;                     /* 720px */
}

.sg-page--newsletter .sg-lede {
  font-size: clamp(1.25rem, 1.08rem + 0.65vw, 1.625rem);
  line-height: 1.5;
}

/* The hero already caps its column at 680px; this keeps the purpose section
   inside the same measure rather than the container's full 780px. */
.sg-ca-purpose .sg-body { max-width: 44rem; }   /* 704px */

/* The invitation back to the hero form. */
.sg-ca-close__back { margin-block-start: var(--sg-space-group); }
.sg-ca-close__back a { color: var(--ca-on-dark); }

/* The anchor target clears the sticky header, with or without JavaScript. */
#read-along { scroll-margin-block-start: 6rem; }


/* ─── Publication label above the signup form ─────────────────────────────────
   Measured on the live Close Attention hero: --sg-timber-pale on sand is
   1.35:1 at 11.2px — effectively invisible. The label was written for the
   deep-forest sections and never restated for a light placement; the last pass
   corrected __field-label and __privacy and missed __label.

   Base is now light-safe, with the dark sections overriding, so any future
   light placement inherits a legible value rather than an invisible one. */

.sg-subscribe-form .sg-subscribe-form__label {
  font-size: 0.875rem;            /* 14px, was 11.2px */
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ca-eyebrow);       /* 6.71:1 on sand, 7.42:1 on cream */
}

.sg-newsletter .sg-subscribe-form__label,
.sg-postclose__newsletter .sg-subscribe-form__label,
.sg-page-hero--dark .sg-subscribe-form__label {
  color: var(--ca-on-dark-secondary);   /* 9.65:1 on forest */
}