/* ==========================================================================
   polish.css — premium polish layer (motion, rhythm, type detail, interaction)
   Loaded after style.css. Additive only: no palette changes, no new type families.
   ========================================================================== */

:root {
  /* --- Missing tokens referenced by style.css (were computing to nothing) --- */
  --space-14: 3.5rem;
  --space-28: 7rem;
  --space-40: 10rem;
  --c-line: var(--c-rule);
  --font-serif: var(--font-display);
  --font-sans: var(--font-body);

  /* --- Section rhythm: one scale for every major band --- */
  --section-pad: clamp(4.75rem, 8.5vw, 9rem);
  --section-pad-tight: clamp(3.5rem, 6vw, 6rem);

  /* --- Motion --- */
  --ease-premium: cubic-bezier(.4, 0, .2, 1);
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 180ms;
  --dur: 260ms;
  --dur-slow: 560ms;
}

/* ==========================================================================
   1. SCROLL REVEAL
   Elements are only hidden when JS is present and motion is allowed, so a
   no-JS or reduced-motion visitor sees a complete page.
   ========================================================================== */
.has-motion [data-rise] {
  opacity: 1;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-premium) var(--rise-delay, 0ms),
    transform var(--dur-slow) var(--ease-out-soft) var(--rise-delay, 0ms);
  will-change: opacity, transform;
}
.has-motion [data-rise].is-in {
  opacity: 1;
  transform: none;
}
.has-motion [data-rise].is-in { will-change: auto; }

/* Hero arrives on load, not on scroll */
.has-motion [data-lift] {
  opacity: 1;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 620ms var(--ease-premium) var(--rise-delay, 0ms),
    transform 720ms var(--ease-out-soft) var(--rise-delay, 0ms);
}
.has-motion [data-lift].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .has-motion [data-rise],
  .has-motion [data-lift] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   2. HERO — drift, depth, pointer awareness
   ========================================================================== */
.hero-poster__object { will-change: transform; }
.hero-poster__portrait {
  transform: translate3d(var(--px, 0px), calc(var(--sy, 0px) * .5 + var(--py, 0px)), 0);
  transition: transform 900ms cubic-bezier(.2, .8, .25, 1);
}
.hero-poster__glasses {
  transform: translate3d(calc(var(--px, 0px) * -1.6), calc(var(--sy, 0px) * -1 + var(--py, 0px) * -1.4), 0);
  transition: transform 1100ms cubic-bezier(.2, .8, .25, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-poster__portrait,
  .hero-poster__glasses { transform: none !important; }
}

/* Hairline under the hero so the fold reads as a deliberate edge */
.hero--poster { position: relative; }
.hero--poster::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(92rem - 2.5rem, calc(100% - 2.5rem));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c-ink-navy) 26%, transparent) 0%,
    color-mix(in srgb, var(--c-ink-navy) 10%, transparent) 55%,
    transparent 100%);
}

/* ==========================================================================
   3. SECTION RHYTHM + EDGES
   ========================================================================== */
.engagements,
.closing-cta,
.moats,
.origin,
.publication,
.services-strip { padding-block: var(--section-pad); }

.engagements .section-heading { margin-bottom: clamp(2.5rem, 4vw, 4.5rem); }
.moats__masthead { margin-bottom: clamp(2.75rem, 4.5vw, 5rem); }

/* Quiet hairlines between light-on-light bands */
.moats,
.origin,
.publication { border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 9%, transparent); }

.page-hero { padding-block: clamp(3.5rem, 6vw, 6rem) clamp(2.5rem, 4vw, 4rem); }
.page-hero--tight { padding-top: clamp(2.5rem, 4vw, 4rem); }
.essay { padding-block: var(--section-pad-tight) var(--section-pad); }
.press-section { padding-block: var(--section-pad-tight); }
.article-page { padding-block: clamp(3.5rem, 6vw, 6.5rem) var(--section-pad-tight); }
.articles { gap: clamp(2.5rem, 4vw, 4rem); }
@media (min-width: 62rem) { .articles { column-gap: clamp(3rem, 5vw, 5.5rem); } }

/* Generous, consistent measure for lede blocks */
.page-hero__lede { max-width: 58ch; }

/* ==========================================================================
   4. TYPOGRAPHY DETAIL
   ========================================================================== */
body { font-feature-settings: "kern" 1, "liga" 1; hanging-punctuation: first last; }

.section-kicker,
.meta,
.publication__meta,
.engagement__number,
.record__label,
.record-row__index,
.article-header__kicker,
.footer-title,
.social-block__label {
  font-weight: 600;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums lining-nums;
}
.section-kicker {
  font-size: clamp(.8rem, .74rem + .18vw, .9rem);
  letter-spacing: .2em;
  /* optical: caps sit lower than lowercase, so nudge tracking off the last letter */
  text-indent: .01em;
}
.section-kicker > span,
.section-kicker { padding-right: .2em; }

/* Anchor the kicker with a hairline so it reads as a printed folio */
.section-heading .section-kicker,
.moats__masthead .section-kicker,
.publication__grid .section-kicker { display: flex; align-items: center; gap: .85em; }
.section-heading .section-kicker::before,
.moats__masthead .section-kicker::before,
.publication__grid .section-kicker::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: .5;
}

.moat__number,
.engagement__number,
.article-header__issue,
.record__metric,
.speaking__date,
.press-list__date,
.timeline__firm span { font-variant-numeric: tabular-nums lining-nums; }

/* Weight contrast: statements stay serif-heavy, supporting copy loosens */
.hero-poster__support,
.origin__lede,
.page-hero__lede,
.moat__body { line-height: 1.62; }

h1, h2 { letter-spacing: -.032em; }
h3 { letter-spacing: -.022em; }
.hero-poster__title { letter-spacing: -.038em; }
.moat__title, .article-card h3, .article-lead h3 { text-wrap: balance; }
.hero-poster__sales, .origin__h, .moats__h { text-wrap: balance; }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.site-header {
  transition: background-color var(--dur) var(--ease-premium),
              box-shadow var(--dur) var(--ease-premium),
              border-color var(--dur) var(--ease-premium);
}
.site-header__inner {
  transition: min-height var(--dur-slow) var(--ease-premium),
              padding-block var(--dur-slow) var(--ease-premium);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--c-ink-navy) 88%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--c-cream) 14%, transparent),
              0 18px 40px -32px rgba(0, 0, 0, .55);
}
.site-header.is-scrolled .site-header__inner { min-height: 4rem; }
.site-header.is-scrolled .brand .mark { transform: scale(.94); }
.brand .mark { transition: transform var(--dur-slow) var(--ease-premium); }
.brand__word { transition: opacity var(--dur) var(--ease-premium); }
.brand:hover .brand__word { opacity: .78; }

/* Nav: animated underline, active page marked by rule as well as color */
.site-header .nav a { position: relative; }
.site-header .nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.1em;
  height: 1px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-premium);
}
.site-header .nav a:hover::after { transform: scaleX(1); }
.site-header .nav a[aria-current="page"]::after { transform: scaleX(1); opacity: .85; }

.header-intake {
  position: relative;
  transition: color var(--dur) var(--ease-premium);
}
.header-intake::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.28em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur) var(--ease-premium);
}
.header-intake:hover::after { transform: scaleX(1); }

/* ==========================================================================
   6. BUTTONS + LINKS
   ========================================================================== */
.btn {
  transition: background-color var(--dur) var(--ease-premium),
              border-color var(--dur) var(--ease-premium),
              color var(--dur) var(--ease-premium),
              transform var(--dur) var(--ease-premium);
}
.btn--primary:hover { transform: translateY(-1px); }
.btn--primary::after {
  content: "";
  width: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: width var(--dur) var(--ease-premium), opacity var(--dur) var(--ease-premium);
}
.btn--primary:hover::after { width: 1.1rem; opacity: .8; }
.btn--ghost { transition: background-color var(--dur) var(--ease-premium), color var(--dur) var(--ease-premium); }

/* Text links: the rule redraws in orange instead of blinking */
.text-link {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: .22em;
  transition: color var(--dur) var(--ease-premium);
}
.text-link::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--c-orange);
  transition: width 420ms var(--ease-premium);
}
.text-link:hover::before { width: 100%; }

.article-footer a:not(.btn),
.publication__feature h3 a,
.press-list__title a,
.speaking__cta a { transition: color var(--dur) var(--ease-premium); }

/* ==========================================================================
   7. CARDS + ROWS
   ========================================================================== */
.moat,
.service-card,
.article-card,
.option,
.article-nav__item {
  transition: transform var(--dur) var(--ease-premium),
              border-color var(--dur) var(--ease-premium),
              background-color var(--dur) var(--ease-premium);
}
.moat { position: relative; }
.moat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--c-orange);
  transition: width 420ms var(--ease-premium);
}
.moat:hover::before { width: 3.5rem; }
.moat:hover .moat__number { color: var(--c-orange); }
.moat__number { transition: color var(--dur) var(--ease-premium); }

.article-card:hover,
.option:hover { transform: translateY(-2px); }
.article-card:hover h3 a, .article-card:hover h3 { color: var(--c-orange); }
.article-nav__item:hover { transform: translateY(-2px); }

.engagement { transition: background-color var(--dur-slow) var(--ease-premium); }
.engagement__figure img {
  transition: transform 640ms var(--ease-out-soft), opacity var(--dur-slow) var(--ease-premium);
}
.engagement:hover .engagement__figure img { transform: translateY(-4px) scale(1.012); }

.press-list__item,
.timeline__item,
.speaking__item { transition: background-color var(--dur) var(--ease-premium); }

/* ==========================================================================
   8. FORM FIELDS
   ========================================================================== */
.subscribe input[type="email"],
input[type="text"], input[type="email"], textarea, select {
  transition: border-color var(--dur) var(--ease-premium),
              background-color var(--dur) var(--ease-premium),
              box-shadow var(--dur) var(--ease-premium);
}
.subscribe input[type="email"]:hover { border-color: color-mix(in srgb, var(--c-ink-navy) 46%, transparent); }
.subscribe input[type="email"]:focus,
.subscribe input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--c-orange);
  box-shadow: 0 0 0 1px var(--c-orange), 0 10px 24px -22px rgba(23, 33, 50, .8);
}
.subscribe__note { transition: color var(--dur) var(--ease-premium); }

/* ==========================================================================
   9. FOOTER + MISC
   ========================================================================== */
.site-footer { padding-block: var(--section-pad-tight) var(--space-12); }
.footer-links a { position: relative; display: inline-block; }
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.2em;
  height: 1px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-premium);
}
.footer-links a:hover::after { transform: scaleX(1); }

.social-icons a { transition: background-color var(--dur) var(--ease-premium), color var(--dur) var(--ease-premium), border-color var(--dur) var(--ease-premium), transform var(--dur) var(--ease-premium); }

/* Journal banner: hold the crop, let it settle in */
.journal-banner img { transition: transform 900ms var(--ease-out-soft); }

/* Selection styling reads as a considered detail */
::selection { background: color-mix(in srgb, var(--c-orange) 22%, transparent); color: var(--c-ink-navy); }

/* ==========================================================================
   PASS 2 — composure: quieter orange, weight contrast, deeper whitespace
   ========================================================================== */

/* Hero: give the portrait presence and ground it */
.hero-poster__portrait {
  max-width: 470px;
  box-shadow: 0 48px 90px -64px rgba(23, 33, 50, .62);
}
.hero-poster__nameplate {
  font-weight: 700;
  letter-spacing: .3em;
  border-bottom-width: 1px;
  padding-bottom: var(--space-2);
  margin-block: 0 var(--space-8);
}
.hero-poster__sales { font-weight: 700; letter-spacing: .16em; }
.hero-poster__credit { font-weight: 600; letter-spacing: .2em; opacity: .62; }
.hero-poster__support { margin-bottom: var(--space-10); max-width: 50ch; }
.hero-poster__cta { gap: var(--space-5); margin-bottom: var(--space-8); }
@media (min-width: 900px) {
  .hero-poster__grid { gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
}

/* Moats: one orange gesture (the numbers) plus a rule that draws on hover */
.moat {
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 22%, transparent);
  padding-top: var(--space-6);
}
.moat::before {
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms var(--ease-premium);
}
.moat:hover::before { width: 100%; transform: scaleX(1); }
.moat__number { font-weight: 700; letter-spacing: .24em; }
.moat__body { max-width: 36ch; }

/* Engagement rows: quiet wash on hover, roomier rhythm */
.engagement { padding-block: clamp(2.75rem, 5vw, 5.25rem); }
.engagement:hover { background: color-mix(in srgb, var(--c-cream) 55%, transparent); }
.engagement__eyebrow { letter-spacing: .01em; }

/* Publication + closing bands breathe */
.publication__feature { padding-top: var(--space-2); }
.closing-cta__grid { gap: clamp(2.5rem, 4vw, 4.5rem); }

/* Origin: keep the pull quote optically aligned with the column */
.origin__h { text-indent: -.04em; }
.article-header__title, .moats__h, .hero-poster__title { text-indent: -.035em; }
@media (max-width: 60rem) {
  .origin__h, .moats__h, .hero-poster__title, .article-header__title { text-indent: 0; }
}

/* Journal + article measure discipline */
.article-body p, .article-body ul, .article-body ol { max-width: 64ch; }
.article-body h2 { margin-top: clamp(2.5rem, 4vw, 3.75rem); }
.article-footer { margin-top: clamp(3rem, 5vw, 4.5rem); }

/* About page: portrait and essay column align on the same baseline */
@media (min-width: 62rem) {
  .essay__grid { column-gap: clamp(3rem, 5vw, 5.5rem); }
}

/* ==========================================================================
   PASS 3 — interior heroes read as covers, not headers
   ========================================================================== */
.page-hero { position: relative; }
.page-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(100% - 2 * clamp(1.25rem, 4vw, 3rem));
  max-width: var(--wrap-wide);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c-ink-navy) 24%, transparent) 0%,
    color-mix(in srgb, var(--c-ink-navy) 9%, transparent) 60%,
    transparent 100%);
}
.page-hero .section-kicker {
  display: flex;
  align-items: center;
  gap: .85em;
  margin-bottom: var(--space-6);
}
.page-hero .section-kicker::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: .5;
}
.page-hero h1 { max-width: 22ch; }
.page-hero__lede { margin-top: var(--space-6); }
.page-hero--tight::after { background: none; }

/* ==========================================================================
   PASS 4 — final composure details
   ========================================================================== */
/* Contact options: equal cards, CTAs on a shared baseline */
.options-grid { align-items: stretch; }
.option { height: 100%; align-content: start; }
.option__cta { margin-top: auto; padding-top: var(--space-6); }
.option:hover { border-color: color-mix(in srgb, var(--c-ink-navy) 38%, transparent); }
.option--primary:hover { border-color: var(--c-orange); }

/* Cards that carry a CTA line keep the arrow on the type baseline */
.option__cta,
.article-card .meta { font-variant-numeric: tabular-nums lining-nums; }

/* Journal: the lead story earns a touch more air than the stack */
.article-lead { padding-right: clamp(0rem, 2vw, 2rem); }
.article-card + .article-card { margin-top: clamp(2rem, 3vw, 2.75rem); }

/* Footer: tighten the descriptor measure, align the columns optically */
.footer-descriptor { max-width: 30ch; line-height: 1.6; }
.footer-title { letter-spacing: .2em; font-weight: 600; }

/* ==========================================================================
   PASS 5 — the last five percent
   Focus rings, magnetic CTAs, orange caret, numeric flourishes,
   quiet ribbon under the hero nameplate, small-caps for eyebrow labels.
   ========================================================================== */

/* Accessibility-grade focus rings that match the brand instead of the browser default */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
  border-radius: 2px;
  transition: outline-offset 140ms var(--ease-premium);
}
.btn:focus-visible { outline-offset: 4px; }

/* Orange caret so typing feels branded, not generic */
input, textarea { caret-color: var(--c-orange); }

/* Magnetic primary CTA — pointer nudges it a hair before click */
.btn--primary { will-change: transform; }
.btn--primary:active { transform: translateY(0); transition-duration: 60ms; }

/* Orange gutter cap on primary CTA to echo the moats hover treatment */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-orange) 32%, transparent), transparent 65%);
  transform: translateX(-101%);
  transition: transform 520ms var(--ease-premium);
  z-index: -1;
}
.btn--primary:hover::before { transform: translateX(0); }

/* Hero nameplate: a hairline ribbon under the credit line so it reads like a spec sheet */
.hero-poster__nameplate { position: relative; }
.hero-poster__nameplate::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.35em;
  width: 3.25rem;
  height: 2px;
  background: var(--c-orange);
  opacity: .9;
}

/* Moats numbers: hairline vertical accent so they read as folio numerals, not decoration */
.moat { padding-inline-start: clamp(0rem, 1.5vw, 1.25rem); }
.moat__number { position: relative; display: inline-block; }
.moat__number::before {
  content: "";
  position: absolute;
  left: -.85em;
  top: .2em;
  bottom: .2em;
  width: 1px;
  background: color-mix(in srgb, var(--c-ink-navy) 30%, transparent);
  transition: background-color var(--dur) var(--ease-premium), transform var(--dur) var(--ease-premium);
  transform-origin: top;
}
.moat:hover .moat__number::before { background: var(--c-orange); }

/* Numeric elements: tabular everywhere they might jitter */
.engagement__number,
.article-header__issue,
.record__metric,
.moat__number,
.hero-poster__nameplate,
.article-card .meta,
time,
.publication__meta,
.speaking__date,
.press-list__date { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* Section kicker on hero: a hairline anchor even inside the poster hero */
.hero-poster__nameplate,
.article-header__kicker { text-transform: uppercase; }

/* Journal article body: elegant drop-cap-adjacent lead paragraph rhythm without a drop cap */
.article-body > p:first-of-type { font-size: clamp(1.05rem, 1.02rem + .18vw, 1.18rem); line-height: 1.6; }
.article-body > p:first-of-type::first-line { letter-spacing: .005em; }

/* Text-link hover keeps the descender clean */
.text-link { padding-bottom: .18em; }

/* Refined hover for options grid so Contact page reads as intentional, not stock */
.option { position: relative; overflow: hidden; }
.option::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 3px;
  background: var(--c-orange);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 480ms var(--ease-premium);
}
.option:hover::before { transform: scaleY(1); }

/* Press list rows: quiet hairline hover, faint background wash */
.press-list__item:hover,
.timeline__item:hover,
.speaking__item:hover { background: color-mix(in srgb, var(--c-cream) 45%, transparent); }

/* Article cards: hairline that draws in on hover, echoing moats */
.article-card { position: relative; }
.article-card::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--c-orange);
  transition: width 420ms var(--ease-premium);
}
.article-card:hover::after { width: 100%; }

/* Subtle print-poster grain on the cream page-background for tactile depth. */
.hero--poster,
.page-hero {
  background-image:
    radial-gradient(circle at 12% 20%, rgba(23,33,50,.018) 0.6px, transparent 0.8px),
    radial-gradient(circle at 82% 66%, rgba(23,33,50,.014) 0.5px, transparent 0.8px);
  background-size: 3px 3px, 5px 5px;
  background-attachment: fixed;
}

/* Scrollbar: match the palette so it feels considered on Windows/Linux */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in srgb, var(--c-ink-navy) 34%, transparent) transparent; }
}

/* Selection: crisper, warmer */
::selection { background: color-mix(in srgb, var(--c-orange) 26%, transparent); color: var(--c-ink-navy); text-shadow: none; }

/* ==========================================================================
   PASS 6 — Plaintiff Marketer issue cards
   Editorial index feel: lead cover + two stacked covers, hover lifts, orange folio number.
   ========================================================================== */
.issues-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 4vw, 4rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
@media (min-width: 62rem) {
  .issues-grid {
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(3rem, 5vw, 5rem);
    row-gap: clamp(2.5rem, 4vw, 4rem);
  }
  .issue-card--lead { grid-row: span 2; }
}

.issue-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  text-decoration: none;
  color: inherit;
  position: relative;
  isolation: isolate;
}
.issue-card__cover {
  margin: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-cream) 65%, #EDE7DB);
  border: 1px solid color-mix(in srgb, var(--c-ink-navy) 10%, transparent);
  position: relative;
}
.issue-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--c-ink-navy) 6%, transparent) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-premium);
}
.issue-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  aspect-ratio: 4 / 5;
  transition: transform 720ms var(--ease-out-soft), filter 480ms var(--ease-premium);
  transform-origin: center 55%;
}
.issue-card--lead .issue-card__cover img { aspect-ratio: 3 / 4; }
/* Issue-specific crops (Bass posters were composed at 16:9; anchor the focal point) */
.issue-card[href*="oil-check"] .issue-card__cover img { object-position: 18% center; }
.issue-card[href*="orange-glasses-origin"] .issue-card__cover img { object-position: center 42%; }

/* Hover: image lifts and warms, gradient veil appears, orange folio pulls in */
.issue-card:hover .issue-card__cover img { transform: scale(1.024); }
.issue-card:hover .issue-card__cover::after { opacity: 1; }

/* Body block */
.issue-card__body { display: grid; gap: clamp(.65rem, 1vw, .9rem); align-content: start; }
.issue-card__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-ink-navy);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
  transition: color var(--dur) var(--ease-premium);
}
.issue-card--lead .issue-card__body h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); line-height: 1.05; }
.issue-card__body p { margin: 0; color: color-mix(in srgb, var(--c-ink-navy) 78%, transparent); line-height: 1.55; max-width: 46ch; }
.issue-card__body .section-kicker {
  color: color-mix(in srgb, var(--c-ink-navy) 62%, transparent);
  font-weight: 600;
  letter-spacing: .2em;
  font-size: clamp(.72rem, .68rem + .12vw, .82rem);
  display: flex;
  align-items: center;
  gap: .85em;
}
.issue-card__body .section-kicker::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: .5;
  transition: background var(--dur) var(--ease-premium), width var(--dur) var(--ease-premium), opacity var(--dur) var(--ease-premium);
}
.issue-card:hover .issue-card__body .section-kicker::before {
  background: var(--c-orange);
  width: 3rem;
  opacity: 1;
}
.issue-card:hover .issue-card__body h3 { color: var(--c-orange); }
.issue-card__body .meta {
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink-navy) 55%, transparent);
  font-variant-numeric: tabular-nums lining-nums;
}
.issue-card__body .meta::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--dur) var(--ease-premium);
  margin-left: .3em;
}
.issue-card:hover .issue-card__body .meta::after { transform: translateX(.35em); }

/* Focus ring should hug the whole card, not the image */
.issue-card:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 6px; }
.issue-card:focus-visible .issue-card__cover img { transform: scale(1.024); }

/* ==========================================================================
   PASS 6b — hero banner (typewriter) polish
   ========================================================================== */
.journal-banner {
  margin: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.journal-banner img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.02);
  transition: transform 1400ms var(--ease-out-soft);
}
.journal-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--c-cream) 65%, transparent) 100%);
  pointer-events: none;
}

/* Notify form gets a warmer background so it doesn't disappear into the page */
.subscribe {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: color-mix(in srgb, var(--c-cream) 72%, #EDE7DB);
  border: 1px solid color-mix(in srgb, var(--c-ink-navy) 12%, transparent);
  border-top: 3px solid var(--c-orange);
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
  align-items: end;
  max-width: 46rem;
}
@media (min-width: 46rem) {
  .subscribe { grid-template-columns: 1fr auto; }
  .subscribe__note { grid-column: 1 / -1; margin: 0; }
}

/* ==========================================================================
   PASS 7 — Plaintiff Marketer editorial archive
   The archive behaves like an issue desk: one composed lead, followed by a
   compact reading list. Images identify issues, rather than carrying the page.
   ========================================================================== */
.journal-page {
  --c-bone: #F4EFE6;
  --c-cream: #F4EFE6;
  --c-bg: #F4EFE6;
}

.journal-page .journal-banner {
  height: clamp(8.75rem, 20vw, 18rem);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink-navy) 16%, transparent);
  background: var(--c-ink-navy);
}
.journal-page .journal-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  transform: none;
}
.journal-page .journal-banner::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink-navy) 10%, transparent), transparent 46%);
}

.journal-page .journal-intro {
  padding-block: clamp(2.25rem, 4.5vw, 4.5rem) clamp(3rem, 6vw, 6.5rem);
}
.journal-page .journal-intro h1 {
  color: var(--c-ink-navy);
  max-width: 12ch;
  font-size: clamp(3.1rem, 6.4vw, 6.7rem);
  line-height: .91;
}
.journal-page .section-kicker {
  color: var(--c-ink-navy);
}
.journal-page .journal-intro .page-hero__lede {
  margin-top: clamp(1.3rem, 2vw, 1.75rem);
  max-width: 53ch;
}

.journal-page .journal-archive {
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 17%, transparent);
  padding-block: clamp(3rem, 5.5vw, 6rem) clamp(4rem, 7vw, 7.5rem);
}
.journal-page .journal-archive .section-heading {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}
.journal-page .journal-archive .section-heading .section-kicker {
  margin: 0;
}

.journal-page .issues-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3.5rem, 7vw, 8rem);
  margin-top: clamp(2.75rem, 5vw, 5rem);
}
.journal-page .issue-card,
.journal-page .issue-index {
  min-width: 0;
}
.journal-page .issue-card {
  display: block;
  color: var(--c-ink-navy);
}
.journal-page .issue-card__link {
  color: inherit;
  display: grid;
  text-decoration: none;
}
.journal-page .issue-card__cover {
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-ink-navy) 16%, transparent);
  background: var(--c-cream);
}
.journal-page .issue-card__cover::after {
  display: none;
}
.journal-page .issue-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform 640ms var(--ease-out-soft);
}
.journal-page .issue-card__body {
  display: grid;
  align-content: start;
  gap: clamp(.75rem, 1.2vw, 1.1rem);
}
.journal-page .issue-card__body .section-kicker {
  display: block;
  color: color-mix(in srgb, var(--c-ink-navy) 64%, transparent);
  font-size: clamp(.7rem, .66rem + .1vw, .78rem);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.4;
  margin: 0;
}
.journal-page .issue-card__body .section-kicker::before {
  display: none;
}
.journal-page .issue-card__body h3 {
  color: var(--c-ink-navy);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.3rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  transition: color var(--dur) var(--ease-premium);
}
.journal-page .issue-card__body > p:not(.section-kicker):not(.meta) {
  color: color-mix(in srgb, var(--c-ink-navy) 78%, transparent);
  font-size: clamp(.98rem, .94rem + .15vw, 1.08rem);
  line-height: 1.58;
  max-width: 53ch;
}
.journal-page .issue-card__body .meta {
  color: color-mix(in srgb, var(--c-ink-navy) 61%, transparent);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.3;
  margin-top: var(--space-1);
}
.journal-page .issue-card__body .meta::after {
  content: " →";
  margin-left: .25em;
  transition: transform var(--dur) var(--ease-premium);
}

/* Lead: a compact image beside a substantial typographic story, not a poster card. */
.journal-page .issue-card--lead {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5.5rem);
}
.journal-page .issue-card--lead .issue-card__link {
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  grid-template-columns: minmax(9rem, 15.5rem) minmax(0, 1fr);
}
.journal-page .issue-card--lead .issue-card__cover {
  aspect-ratio: 3 / 4;
}
.journal-page .issue-card--lead .issue-card__body {
  max-width: 46rem;
}
.journal-page .issue-card--lead .issue-card__body h3 {
  font-size: clamp(2.45rem, 4.4vw, 4.7rem);
  line-height: .94;
  max-width: 13ch;
}
.journal-page .issue-card--lead .issue-card__body > p:not(.section-kicker):not(.meta) {
  max-width: 49ch;
}

/* Archive: the thumbnails are shelf marks. Rules and type do the organizing. */
.journal-page .issue-index {
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 24%, transparent);
}
.journal-page .issue-card--archive {
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink-navy) 24%, transparent);
}
.journal-page .issue-card--archive .issue-card__link {
  align-items: start;
  column-gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: clamp(5.25rem, 10vw, 8.25rem) minmax(0, 1fr);
  padding-block: clamp(1.75rem, 3.2vw, 3rem);
}
.journal-page .issue-card--archive .issue-card__cover {
  aspect-ratio: 4 / 3;
}
.journal-page .issue-card--archive .issue-card__link[href*="what-plaintiff"] .issue-card__cover img {
  object-position: center 42%;
}
.journal-page .issue-card--archive .issue-card__body {
  gap: clamp(.55rem, .8vw, .75rem);
}
.journal-page .issue-card--archive .issue-card__body h3 {
  font-size: clamp(1.5rem, 2.3vw, 2.25rem);
  max-width: 21ch;
}
.journal-page .issue-card--archive .issue-card__body > p:not(.section-kicker):not(.meta) {
  max-width: 52ch;
}

.journal-page .issue-card__link:hover h3,
.journal-page .issue-card__link:focus-visible h3 {
  color: var(--c-orange);
}
.journal-page .issue-card__link:hover .issue-card__cover img,
.journal-page .issue-card__link:focus-visible .issue-card__cover img {
  transform: scale(1.025);
}
.journal-page .issue-card__link:hover .meta::after,
.journal-page .issue-card__link:focus-visible .meta::after {
  transform: translateX(.35em);
}
.journal-page .issue-card__link:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 5px;
}

/* polish.js takes a frame to observe the archive. Keep all editorial content
   readable in the first paint, then allow its existing reveal state to settle. */
.journal-page .issues-grid [data-rise] {
  opacity: 1;
  transform: none;
}
.journal-page .closing-cta [data-rise] {
  opacity: 1;
  transform: none;
}

/* Subscription is supporting editorial matter below the lead, not a standalone campaign block. */
.journal-page .subscribe {
  align-items: end;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 22%, transparent);
  border-radius: 0;
  max-width: 100%;
  padding: clamp(1.25rem, 2vw, 1.75rem) 0 0;
}
.journal-page .subscribe label {
  color: var(--c-ink-navy);
  font-size: var(--text-ui);
  font-weight: 700;
}
.journal-page .subscribe__note {
  color: color-mix(in srgb, var(--c-ink-navy) 67%, transparent);
  font-size: .88rem;
  line-height: 1.5;
  max-width: 58ch;
}

/* The final note stays useful, but drops the generic, high-contrast campaign treatment. */
.journal-page .closing-cta {
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 17%, transparent);
  color: var(--c-ink-navy);
  padding-block: clamp(3.5rem, 6vw, 6.5rem);
}
.journal-page .closing-cta .section-kicker,
.journal-page .closing-cta h2,
.journal-page .closing-cta .lead {
  color: var(--c-ink-navy);
}
.journal-page .closing-cta h2 {
  font-size: clamp(2rem, 3.5vw, 3.65rem);
  line-height: .99;
  max-width: 14ch;
}
.journal-page .closing-cta .section-kicker {
  color: color-mix(in srgb, var(--c-ink-navy) 62%, transparent);
}

@media (min-width: 62rem) {
  .journal-page .issues-grid {
    grid-template-columns: minmax(0, 1.27fr) minmax(20rem, .73fr);
    align-items: start;
  }
  .journal-page .issue-card--lead .issue-card__link {
    grid-template-columns: minmax(11rem, 15.5rem) minmax(0, 1fr);
  }
  .journal-page .subscribe {
    grid-template-columns: minmax(17rem, 1fr) auto;
  }
}

@media (max-width: 38rem) {
  .journal-page .journal-banner {
    height: 8.5rem;
  }
  .journal-page .issue-card--lead .issue-card__link {
    align-items: start;
    grid-template-columns: minmax(6.5rem, 31vw) minmax(0, 1fr);
  }
  .journal-page .issue-card--lead .issue-card__body h3 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }
  .journal-page .issue-card--lead .issue-card__body > p:not(.section-kicker):not(.meta) {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
  }
  .journal-page .issue-card--lead .issue-card__body .meta {
    grid-column: 1 / -1;
  }
  .journal-page .issue-card--archive .issue-card__body > p:not(.section-kicker):not(.meta) {
    display: none;
  }
}

/* ==========================================================================
   PASS 7 — Colophon (replaces .closing-cta on journal.html)
   Editorial closing note in the print-magazine masthead tradition.
   Big statement in serif italic, folio label on the left, subscribe CTA sealed at the end.
   ========================================================================== */
.journal-page .colophon {
  background: var(--c-cream);
  padding: clamp(6rem, 10vw, 10rem) 0 clamp(5rem, 8vw, 8rem);
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 14%, transparent);
  position: relative;
}
.journal-page .colophon::before {
  /* Tiny orange hairline overlaid on the border, roughly under the folio column */
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(4rem, 8vw, 7rem);
  height: 2px;
  background: var(--c-orange);
}
.colophon__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .colophon__grid {
    grid-template-columns: minmax(9rem, 12rem) 1fr;
    column-gap: clamp(3rem, 6vw, 6rem);
  }
}
.colophon__folio {
  padding-top: .25rem;
  border-top: 0;
  display: grid;
  gap: .5rem;
}
.colophon__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-orange);
}
.colophon__vol {
  margin: 0;
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink-navy) 55%, transparent);
  font-variant-numeric: tabular-nums lining-nums;
}
.colophon__body {
  max-width: 44rem;
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
.colophon__statement {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-ink-navy);
  /* Large but not shouty. Sits below the h1 register. */
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  text-wrap: balance;
  max-width: 22ch;
}
.colophon__statement em {
  font-style: italic;
  font-weight: 500;
  color: var(--c-orange);
  /* Slight optical tuck so italic reads intentional, not sloppy */
  letter-spacing: -.014em;
}
.colophon__byline {
  margin: 0;
  padding-top: clamp(.5rem, 1vw, 1rem);
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 20%, transparent);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  max-width: 20rem;
  font-family: var(--font-body);
}
.colophon__byline-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink-navy) 55%, transparent);
}
.colophon__byline-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-ink-navy);
  letter-spacing: .01em;
}
.colophon__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(.98rem, .94rem + .2vw, 1.05rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-ink-navy) 78%, transparent);
  max-width: 42ch;
}
.colophon__cta {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  flex-wrap: wrap;
  padding-top: clamp(.5rem, 1vw, 1rem);
}
.colophon__cta .btn--primary {
  min-width: 11rem;
}
.colophon__cta .text-link {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  color: var(--c-ink-navy);
  text-decoration: none;
  letter-spacing: .01em;
  position: relative;
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink-navy) 30%, transparent);
  transition: color var(--dur) var(--ease-premium), border-color var(--dur) var(--ease-premium);
}
.colophon__cta .text-link:hover {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

/* ==========================================================================
   PASS 7b — Inline colophon subscribe form
   Editorial masthead-style: bottom-hairline field, subtle, no pill borders.
   ========================================================================== */
.colophon__form {
  display: grid;
  gap: .85rem;
  max-width: 32rem;
  padding-top: clamp(.75rem, 1.5vw, 1.25rem);
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 20%, transparent);
}
.colophon__form-label {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0;
}
.colophon__form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  align-items: stretch;
}
@media (min-width: 34rem) {
  .colophon__form-row {
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }
}
.colophon__form-input {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--c-ink-navy) 40%, transparent);
  border-radius: 0;
  padding: .65rem .1rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--c-ink-navy);
  caret-color: var(--c-orange);
  transition: border-color var(--dur) var(--ease-premium);
  min-width: 0;
}
.colophon__form-input::placeholder {
  color: color-mix(in srgb, var(--c-ink-navy) 40%, transparent);
  font-style: italic;
}
.colophon__form-input:focus {
  outline: none;
  border-bottom-color: var(--c-orange);
}
.colophon__form-input:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 4px;
  box-shadow: 0 1px 0 0 var(--c-orange);
}
.colophon__form-btn {
  white-space: nowrap;
  min-width: 9.5rem;
}
.colophon__form-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--c-ink-navy) 55%, transparent);
  transition: color var(--dur) var(--ease-premium);
}
.colophon__aside {
  margin: 0;
  padding-top: .25rem;
}

/* Preserve the journal’s existing masthead markup while keeping its type in
   the display register. This deliberately follows the legacy masthead reset. */
.journal-page .journal-intro h1 {
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 6.4vw, 6.7rem);
  font-weight: 700;
  line-height: .91;
  letter-spacing: -.032em;
  max-width: 12ch;
}
.journal-page .journal-intro .page-hero__lede {
  margin-top: clamp(1.3rem, 2vw, 1.75rem);
  max-width: 53ch;
}

/* ==========================================================================
   PASS 8 — Journal masthead (replaces the flat page-hero on journal.html)
   Real publication cover-page: hairline rules, folio meta, editorial voice.
   ========================================================================== */
.journal-page .journal-intro {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.journal-page .journal-intro .wrap-wide { padding-top: 0; padding-bottom: 0; }

.journal-masthead {
  max-width: 62rem;
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 20%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink-navy) 20%, transparent);
  position: relative;
}
/* Orange corner rules like a print masthead */
.journal-masthead::before,
.journal-masthead::after {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--c-orange);
}
.journal-masthead::before { top: -1px; left: 0; width: clamp(3.5rem, 7vw, 6rem); }
.journal-masthead::after  { bottom: -1px; right: 0; width: clamp(3.5rem, 7vw, 6rem); }

.journal-masthead__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink-navy) 62%, transparent);
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  flex-wrap: wrap;
}
.journal-masthead__kicker > span:first-child {
  color: color-mix(in srgb, var(--c-ink-navy) 45%, transparent);
  font-weight: 400;
}
.journal-masthead__kicker > span:last-child {
  color: var(--c-ink-navy);
  font-weight: 600;
}

.journal-masthead__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-ink-navy);
  font-size: clamp(2.6rem, 1.8rem + 4vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.journal-masthead__dek {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  line-height: 1.5;
  color: color-mix(in srgb, var(--c-ink-navy) 78%, transparent);
  max-width: 46rem;
}

.journal-masthead__meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink-navy) 55%, transparent);
  font-variant-numeric: tabular-nums lining-nums;
  display: inline-flex;
  align-items: baseline;
  gap: .9em;
  flex-wrap: wrap;
}
.journal-masthead__meta > span[aria-hidden="true"] {
  color: color-mix(in srgb, var(--c-ink-navy) 25%, transparent);
  font-weight: 400;
}
.journal-masthead__meta > span:last-child { color: var(--c-orange); font-weight: 600; }

/* Kill any legacy .journal-intro h1 / lede styles from earlier passes */
.journal-page .journal-intro h1 { font-size: inherit; }

/* ==========================================================================
   PASS 8b — Archive section heading
   ========================================================================== */
.journal-archive__heading {
  display: grid;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink-navy) 14%, transparent);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  max-width: none;
}
.journal-archive__heading .section-kicker {
  margin: 0;
  color: var(--c-orange);
  font-weight: 600;
  letter-spacing: .28em;
}
.journal-archive__title {
  margin: 0;
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  max-width: 22ch;
  text-wrap: balance;
}
.journal-archive__title-dot { color: var(--c-orange); }
.journal-archive__note {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink-navy) 65%, transparent);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  max-width: 42ch;
}

/* PASS 9 — Restore the direct headline after the legacy masthead reset. */
.journal-page .journal-intro h1 {
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 6.4vw, 6.7rem);
  font-weight: 700;
  line-height: .91;
  letter-spacing: -.032em;
  max-width: 12ch;
}
.journal-page .journal-intro .page-hero__lede {
  margin-top: clamp(1.3rem, 2vw, 1.75rem);
  max-width: 53ch;
}

/* ==========================================================================
   PASS 9 — Tighten the top of the Plaintiff Marketer page
   Nix the second header, condense the banner, get to the hooks faster.
   ========================================================================== */

/* Banner: back to full — but kill the space AROUND it */
.journal-page .journal-banner {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

/* Single H1, quiet folio meta, tight vertical rhythm.
   Aggressive top-padding cut so the hook lands right under the banner. */
.journal-page .journal-intro {
  padding-top: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(.75rem, 1.5vw, 1.25rem);
}
.journal-page .journal-intro .wrap-wide { padding-top: 0; padding-bottom: 0; }
.journal-intro__title {
  margin: 0 0 .5rem;
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.6rem + 4vw, 4.75rem);
  line-height: .96;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.journal-intro__meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink-navy) 55%, transparent);
  font-variant-numeric: tabular-nums lining-nums;
  display: inline-flex;
  align-items: baseline;
  gap: .7em;
  flex-wrap: wrap;
}
.journal-intro__meta > span[aria-hidden="true"] {
  color: color-mix(in srgb, var(--c-ink-navy) 25%, transparent);
  font-weight: 400;
}
.journal-intro__meta > span:last-child { color: var(--c-orange); font-weight: 600; }

/* Compress the "Currents / Three issues on the desk" heading a touch */
.journal-page .journal-archive {
  padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
}
.journal-page .journal-archive__heading {
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   PASS 9b — Enlarge Issue 02 and Issue 01 archive tiles
   Real image-forward archive entries, not thumbnails.
   ========================================================================== */
.journal-page .issue-index {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 720px) {
  .journal-page .issue-index {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 3vw, 2.75rem);
  }
}

.journal-page .issue-card--archive .issue-card__link {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.25rem);
  grid-template-columns: 1fr;
  text-decoration: none;
  color: inherit;
}
.journal-page .issue-card--archive .issue-card__cover {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-cream) 92%, var(--c-ink-navy) 4%);
  border: 1px solid color-mix(in srgb, var(--c-ink-navy) 8%, transparent);
}
.journal-page .issue-card--archive .issue-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 700ms var(--ease-out-soft);
}
.journal-page .issue-card--archive:hover .issue-card__cover img {
  transform: scale(1.02);
}

/* Issue 01 (wall of glasses) is landscape — crop to match portrait aspect */
.journal-page a[href*="orange-glasses-origin-story"] .issue-card__cover img {
  object-position: center center;
}

.journal-page .issue-card--archive .issue-card__body {
  display: grid;
  gap: .45rem;
}
.journal-page .issue-card--archive .issue-card__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--c-ink-navy);
  text-wrap: balance;
}
.journal-page .issue-card--archive .issue-card__body p:not(.meta):not(.section-kicker) {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .25vw, 1.08rem);
  line-height: 1.5;
  color: color-mix(in srgb, var(--c-ink-navy) 78%, transparent);
}
.journal-page .issue-card--archive .section-kicker {
  color: var(--c-orange);
  font-weight: 600;
}
.journal-page .issue-card--archive .meta {
  color: color-mix(in srgb, var(--c-ink-navy) 55%, transparent);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: .25rem;
}

/* PASS 9c — kill the gap ABOVE the typewriter banner (between nav and banner) */
.journal-page main#main { padding-top: 0; }
.journal-page main#main > .journal-banner:first-child { margin-top: 0; }

/* ==========================================================================
   PASS 10 — Trim the About page "On the record." section
   Same content, less real estate. Get to the next section faster.
   ========================================================================== */
.about-page .press-section {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.about-page .press-section__title {
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  margin: .35rem 0 clamp(1.25rem, 2.5vw, 1.75rem) 0;
}
.about-page .press-list {
  gap: 0;
  max-width: none;
}
.about-page .press-list .press-list__item {
  padding-top: clamp(.65rem, 1vw, .85rem);
  padding-bottom: clamp(.65rem, 1vw, .85rem);
  grid-template-columns: 1fr;
  gap: .15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink-navy) 10%, transparent);
}
.about-page .press-list .press-list__item:last-child {
  border-bottom: none;
}
.about-page .press-list__title {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.3;
  margin: 0;
}
.about-page .press-list__outlet {
  font-size: .88rem;
  line-height: 1.35;
  margin: 0;
}

/* Two-column press list on desktop for even more compression */
@media (min-width: 860px) {
  .about-page .press-list--inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 3rem);
  }
  .about-page .press-list--inline .press-list__item {
    padding-top: clamp(.55rem, .9vw, .75rem);
    padding-bottom: clamp(.55rem, .9vw, .75rem);
  }
}

/* ==========================================================================
   PASS 11 | About operator section
   Editorial reading sequence, with the visual placed inside the article flow.
   ========================================================================== */
.about-page .opening {
  padding-block: clamp(3.5rem, 8vw, 8rem);
}

.about-page .opening__editorial {
  max-width: 70rem;
  margin-inline: auto;
}

.about-page .opening__masthead {
  display: grid;
  grid-template-columns: minmax(3rem, 1fr) minmax(0, 10fr);
  gap: clamp(1.25rem, 3vw, 3.5rem);
  align-items: start;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink-navy) 18%, transparent);
}

.about-page .opening__folio,
.about-page .opening__chapter-number {
  margin: 0;
  color: var(--c-orange);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
}

.about-page .opening__claim {
  display: grid;
  justify-items: start;
}

.about-page .opening__claim .section-kicker {
  margin: 0 0 .85rem;
}

.about-page .opening__claim .statement {
  max-width: 12ch;
  font-size: clamp(2.8rem, 5.1vw, 5.35rem);
  line-height: .94;
}

.about-page .opening__subline {
  max-width: 34ch;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  font-weight: 500;
  line-height: 1.45;
}

.about-page .opening__reading {
  max-width: 58rem;
  margin: clamp(2.75rem, 6vw, 5.5rem) auto 0;
}

.about-page .opening__chapter {
  display: grid;
  grid-template-columns: minmax(3rem, 1fr) minmax(0, 10fr);
  gap: clamp(1.25rem, 3vw, 3.5rem);
  align-items: start;
}

.about-page .opening__chapter + .opening__chapter {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 13%, transparent);
}

.about-page .opening__chapter-body {
  max-width: 44rem;
}

.about-page .opening__chapter-body > p:not(.section-kicker) {
  max-width: 43ch;
  margin: 0;
  color: var(--c-ink-navy);
  font-family: var(--font-body);
  font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.58;
}

.about-page .opening__chapter-body .lead-intro::first-letter {
  float: left;
  margin: .08em .08em 0 0;
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-size: 4.85em;
  font-weight: 600;
  line-height: .72;
}

.about-page .opening__beat-kicker {
  margin: 0 0 1rem;
  color: var(--c-orange);
  letter-spacing: .16em;
}

.about-page .opening__figure {
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  padding-block: .75rem;
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink-navy) 18%, transparent);
  overflow: hidden;
  background: var(--c-cream);
}

.about-page .opening__figure img {
  display: block;
  width: 100%;
  height: clamp(15rem, 30vw, 27rem);
  object-fit: cover;
  object-position: center 28%;
}

@media (max-width: 719px) {
  .about-page .opening {
    padding-block: 3rem 3.5rem;
  }

  .about-page .opening__masthead,
  .about-page .opening__chapter {
    display: block;
  }

  .about-page .opening__folio,
  .about-page .opening__chapter-number {
    margin-bottom: 1rem;
  }

  .about-page .opening__claim .statement {
    max-width: 10ch;
    font-size: clamp(2.55rem, 11vw, 3.5rem);
  }

  .about-page .opening__reading {
    margin-top: 2.75rem;
  }

  .about-page .opening__chapter + .opening__chapter {
    margin-top: 2.75rem;
    padding-top: 2.75rem;
  }

  .about-page .opening__chapter-body > p:not(.section-kicker) {
    max-width: none;
    font-size: 1.06rem;
    line-height: 1.6;
  }

  .about-page .opening__figure {
    margin-top: 2rem;
  }

  .about-page .opening__figure img {
    height: 16rem;
    object-position: center 24%;
  }
}

/* ==========================================================================
   PASS 12 — Hero cleanup
   1. Remove orange bar under "Kim Lyons" nameplate.
   2. Un-color "Plaintiff heart" so the whole sales line reads as one unit.
   ========================================================================== */
.hero-poster__nameplate::after { display: none !important; }
.hero-poster__sales-accent { color: inherit !important; }

/* ==========================================================================
   PASS 13 — Show the full orb image on About (no crop)
   ========================================================================== */
.about-page .opening__figure img,
.about-page .opening__figure { overflow: visible; }
.about-page .opening__figure img {
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  width: 100%;
  aspect-ratio: 3 / 4;
}
@media (max-width: 719px) {
  .about-page .opening__figure img {
    height: auto !important;
    aspect-ratio: 3 / 4;
  }
}

/* ==========================================================================
   PASS 14 — Editorial masthead nav item for The Plaintiff Marketer
   Small "JOURNAL" kicker above the publication name.
   ========================================================================== */
.site-header .nav .nav-pub,
.mobile-nav .nav-pub {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  gap: .1rem;
  padding-block: 0;
}
.nav-pub__label {
  font-family: var(--font-sans);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-orange);
  opacity: .85;
}
.nav-pub__title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}
/* Mobile nav shows them stacked but slightly larger kicker for legibility */
.mobile-nav .nav-pub {
  gap: .15rem;
  padding-block: .35rem;
}
.mobile-nav .nav-pub__label {
  font-size: .65rem;
}

/* ==========================================================================
   PASS 15 — Collapse the seam between Five disciplines and On the record
   The two sections now sit next to each other; drop the stacked padding.
   ========================================================================== */
.about-page .engagements + .press-section {
  padding-top: 0;
  margin-top: 0;
}
.about-page .engagements:has(+ .press-section) {
  padding-bottom: clamp(1.25rem, 2vw, 2rem);
}
.about-page .engagements + .press-section .press-section__title {
  margin-top: 0;
}

/* ==========================================================================
   PASS 16 — Quiet down the "fifty-dollar bet" essay on About
   Same content, roughly two-thirds the visual weight.
   ========================================================================== */
.about-page .essay {
  padding-block: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 3.5vw, 3rem);
}
@media (min-width: 900px) {
  .about-page .essay__grid {
    grid-template-columns: 1fr 1.6fr;
    column-gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }
}
.about-page .essay__portrait {
  max-width: 22rem;
}
.about-page .essay__title {
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  margin: .35rem 0 .5rem;
  max-width: none;
}
.about-page .essay__body p {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 .75rem;
}
.about-page .essay__body .essay__title + p::first-letter {
  font-size: 3rem;
  line-height: .95;
  margin: .1rem .35rem 0 0;
}
.about-page .essay__continue {
  font-size: .95rem;
  margin-top: 1rem !important;
}

/* ==========================================================================
   PASS 17 — The Operator as an editorial two-column spread
   Sticky sidebar (bio + Bass illustration) + prose column + glance footer.
   Absorbs the old "At a glance" section into a natural section footer.
   ========================================================================== */

/* Two-column spread — desktop only */
@media (min-width: 960px) {
  .about-page .opening--twocol .opening__spread {
    display: grid;
    grid-template-columns: minmax(280px, 22rem) minmax(0, 1fr);
    column-gap: clamp(3rem, 5vw, 5.5rem);
    align-items: start;
  }
  .about-page .opening--twocol .opening__sidebar-sticky {
    position: sticky;
    top: 6rem;
  }
  .about-page .opening--twocol .opening__reading {
    max-width: 62ch;
  }
  /* Kill the redundant folio in the reading column (moved to sidebar) */
  .about-page .opening--twocol .opening__reading .opening__chapter {
    display: grid;
    grid-template-columns: 3rem 1fr;
    column-gap: 1rem;
    align-items: baseline;
  }
  .about-page .opening--twocol .opening__reading .opening__chapter-number {
    grid-column: 1;
    margin: 0;
    line-height: 1;
  }
  .about-page .opening--twocol .opening__reading .opening__chapter-body {
    grid-column: 2;
  }
}

/* Sidebar styling */
.about-page .opening__sidebar .opening__chapter-number {
  color: var(--c-orange);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0 0 1rem;
}
.about-page .opening__sidebar .lead-intro {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-ink-navy);
  margin: 0 0 1.75rem;
}
.about-page .opening__figure--sidebar {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(23, 33, 50, .12);
  padding-top: 1.5rem;
}
.about-page .opening__figure--sidebar img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 22rem;
  mix-blend-mode: multiply;
  opacity: .92;
}

/* Mobile: sidebar collapses inline, illustration shrinks */
@media (max-width: 959px) {
  .about-page .opening__sidebar {
    margin-bottom: 2.5rem;
  }
  .about-page .opening__figure--sidebar {
    max-width: 16rem;
  }
}

/* Glance footer — integrated, not a separate section */
.about-page .opening__glance {
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding-top: clamp(2rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(23, 33, 50, .15);
  position: relative;
}
.about-page .opening__glance::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 4rem;
  height: 2px;
  background: var(--c-orange);
}
.about-page .opening__glance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.about-page .opening__glance-list li .section-kicker {
  color: var(--c-ink-navy);
  opacity: .55;
  margin: 0 0 .35rem;
  font-size: .72rem;
}
.about-page .opening__glance-list li strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--c-ink-navy);
  letter-spacing: -.01em;
}

/* Neutralise the old .tight section spacing (now empty of content) */
.about-page section.tight { display: none; }

/* Also hide the standalone opening__figure that WAS in chapter II (now moved) */
.about-page .opening--twocol .opening__reading .opening__figure { display: none; }

/* ==========================================================================
   PASS 18 — Collapse the seam between The Operator and What she does
   The Operator now ends with the glance footer; drop the top gutter on
   engagements when it follows opening.
   ========================================================================== */
.about-page .opening + .engagements {
  padding-top: clamp(2rem, 3.5vw, 3rem);
}
.about-page .opening:has(+ .engagements) {
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

/* ==========================================================================
   PASS 19 — Mobile-only tightening on About
   Phones stack every section, so gaps compound. Tighten section padding
   and between-block margins under 720px without touching desktop.
   ========================================================================== */
@media (max-width: 720px) {
  /* Section padding across the board */
  .about-page section.page-hero { padding-block: 2rem 1rem; }
  .about-page .essay { padding-block: 1.5rem 2rem; }
  .about-page .opening { padding-block: 2rem; }
  .about-page .engagements { padding-block: 2.25rem !important; }
  .about-page .press-section { padding-block: 2rem !important; }
  .about-page .closing-cta { padding-block: 2.25rem; }

  /* Operator masthead + spread internals */
  .about-page .opening__masthead { margin-bottom: 1.5rem; }
  .about-page .opening__sidebar { margin-bottom: 1.5rem; }
  .about-page .opening__sidebar .lead-intro { margin-bottom: 1rem; }
  .about-page .opening__figure--sidebar { padding-top: 1rem; }
  .about-page .opening__chapter { margin-bottom: 1.25rem; }
  .about-page .opening__reading .opening__chapter-number {
    font-size: 1.6rem;
    margin-bottom: .25rem;
  }
  .about-page .opening__reading .opening__chapter-body p {
    margin-bottom: .5rem;
  }

  /* Glance footer */
  .about-page .opening__glance {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }
  .about-page .opening__glance-list { gap: 1.25rem; }

  /* Essay portrait smaller */
  .about-page .essay__portrait { max-width: 14rem; margin-inline: auto; }
  .about-page .essay__grid { gap: 1.25rem; }

  /* Press list gaps */
  .about-page .press-section__title { margin-bottom: 1.25rem; }
  .about-page .press-list__item { padding-block: .75rem !important; }
}

/* ==========================================================================
   PASS 20 — Tighten space above "Why Kim and The Orange Glasses" (moats)
   Landing hero has generous bottom padding + moats has top padding.
   Collapse the seam.
   ========================================================================== */
.hero-poster + .moats,
section.hero-poster + section.moats { padding-top: clamp(1.5rem, 3vw, 2.75rem) !important; }
.hero-poster:has(+ .moats) { padding-bottom: clamp(1rem, 2vw, 2rem) !important; }
.moats .moats__masthead { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

/* ==========================================================================
   PASS 21 — Credential line in Operator sidebar
   Formal footer-credit treatment; reads as CV, not body copy.
   ========================================================================== */
.about-page .opening__credential {
  font-family: var(--font-display);
  font-size: .82rem;
  font-style: italic;
  color: var(--c-ink-navy);
  opacity: .68;
  letter-spacing: .01em;
  margin: 0 0 1.5rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(23, 33, 50, .12);
}

/* ==========================================================================
   PASS 22 — Editorial split: kicker above H1, availability at bottom
   Move credentials to a kicker (top) where readers actually see them;
   leave only the booking cue at the bottom.
   ========================================================================== */
.hero-poster__kicker {
  align-items: stretch;
  border-left: 4px solid var(--c-orange);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: clamp(.76rem, .7rem + .14vw, .86rem);
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-ink-navy);
  margin: 1rem 0 1.5rem;
  line-height: 1.3;
  max-width: 48rem;
  padding: .55rem 0 .55rem 1rem;
}

.hero-poster__kicker span {
  align-items: center;
  display: inline-flex;
  white-space: nowrap;
}

.hero-poster__kicker span:not(:last-child)::after {
  background: color-mix(in srgb, var(--c-ink-navy) 28%, transparent);
  content: "";
  display: inline-block;
  height: 1.35em;
  margin: 0 clamp(.65rem, 1.25vw, 1rem);
  width: 1px;
}

/* Bottom credit becomes a lighter availability cue */
.hero-poster__credit {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-orange);
  opacity: .85;
}

@media (max-width: 720px) {
  .hero-poster__kicker {
    align-items: flex-start;
    flex-direction: column;
    font-size: .72rem;
    gap: .45rem;
    letter-spacing: .1em;
    margin: .75rem 0 1.15rem;
    padding: .45rem 0 .45rem .8rem;
  }

  .hero-poster__kicker span:not(:last-child)::after {
    display: none;
  }
  .hero-poster__kicker span:last-child {
    max-width: 100%;
    white-space: normal;
  }
  .hero-poster__credit {
    font-size: .72rem;
  }
}

/* ==========================================================================
   PASS 23 — Tighten gap below Solo Starter Pack (No. 04)
   The engagements section closed with 144px pad-bottom and the publication
   section opened with 144px pad-top: 288px of empty cream. Cut to 88px each.
   ========================================================================== */
section.engagements {
  padding-bottom: 5.5rem;   /* was 144px (~9rem) */
}
section.publication {
  padding-top: 5.5rem;      /* was 144px (~9rem) */
}
@media (max-width: 720px) {
  section.engagements { padding-bottom: 3.5rem; }
  section.publication { padding-top: 3.5rem; }
}

/* ==========================================================================
   PASS 24 — Landing hero top padding
   Was 128px above the nameplate — dominated the fold. Cut to 56px so the
   H1 sits proud of the nav without feeling glued to it. Portrait side is
   center-aligned in the grid, so it follows naturally.
   ========================================================================== */
.hero--poster {
  padding-top: 3.5rem;    /* was 8rem / 128px */
}
@media (max-width: 720px) {
  .hero--poster { padding-top: 2.25rem; }
}

/* ==========================================================================
   PASS 25 — Global section spacing normalization (landing page)
   Every section was 144px pad-top + 144px pad-bottom = 288px between sections.
   That's twice what a data-forward editorial page needs. Normalize to 88px
   on both sides so each transition is ~176px combined — enough for section
   identity, none of the vacant cream.
   ========================================================================== */
section.moats,
section.origin,
section.publication,
section.closing-cta,
section.engagements {
  padding-top: 5.5rem;      /* was 9rem / 144px */
  padding-bottom: 5.5rem;
}

/* Hero already at 3.5rem top / 3.5rem bottom is fine */

@media (max-width: 720px) {
  section.moats,
  section.origin,
  section.publication,
  section.closing-cta,
  section.engagements {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* ==========================================================================
   PASS 25b — About page section normalization
   ========================================================================== */
.about-page section.closing-cta {
  padding-top: 5.5rem;      /* was 144px */
  padding-bottom: 5.5rem;
}
.about-page .opening.opening--twocol {
  padding-top: 5rem;        /* was 128px, trim top of two-column */
}
@media (max-width: 720px) {
  .about-page section.closing-cta {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .about-page .opening.opening--twocol {
    padding-top: 3rem;
  }
}

/* ==========================================================================
   PASS 26 — Journal grid rebalance
   Original: lead 1.27fr / archive .73fr made No. 02 and No. 01 tiny.
   Rebalance to a proper "current + earlier" magazine spread: closer to
   1fr/1fr, larger archive covers, larger archive headlines. Still gives
   No. 03 primacy through the tall portrait cover and the huge headline,
   but doesn't hide the other two.
   ========================================================================== */
@media (min-width: 62rem) {
  .journal-page .issues-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(24rem, .95fr);
    column-gap: clamp(4rem, 6vw, 7rem);
  }
}

/* Grow the archive thumbnails and headlines so No. 02 and No. 01 read
   as real articles, not shelf marks. Doubling the cover width; bumping
   the h3 up ~30%; loosening the paragraph max-width. */
.journal-page .issue-card--archive .issue-card__link {
  column-gap: clamp(1.25rem, 2.2vw, 2rem);
  grid-template-columns: clamp(8rem, 15vw, 12.5rem) minmax(0, 1fr);
  padding-block: clamp(2.25rem, 3.8vw, 3.5rem);
}
.journal-page .issue-card--archive .issue-card__cover {
  aspect-ratio: 4 / 3;
}
.journal-page .issue-card--archive .issue-card__body h3 {
  font-size: clamp(1.85rem, 1.15rem + 1.4vw, 2.75rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  max-width: 22ch;
}
.journal-page .issue-card--archive .issue-card__body > p:not(.section-kicker):not(.meta) {
  font-size: clamp(1.02rem, .96rem + .2vw, 1.14rem);
  line-height: 1.55;
  max-width: 44ch;
}
.journal-page .issue-card--archive .issue-card__body .section-kicker {
  font-size: clamp(.72rem, .68rem + .12vw, .82rem);
  letter-spacing: .18em;
}

@media (max-width: 62rem) {
  .journal-page .issue-card--archive .issue-card__link {
    grid-template-columns: clamp(7rem, 22vw, 10rem) minmax(0, 1fr);
  }
}

/* ==========================================================================
   PASS 27 — Journal archive: single-column stack, image above text
   Was: two archives side-by-side in a narrow right rail (No. 02 and No. 01
   each got ~278px, headline collided with adjacent image). Now: right rail
   holds a stacked list; each archive is image-above-headline like a proper
   secondary lede, comfortably readable and clickable.
   ========================================================================== */
@media (min-width: 720px) {
  .journal-page .issue-index {
    grid-template-columns: 1fr;      /* was 1fr 1fr */
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }
}

/* Archive card: image on top full-width of the rail, text below.
   Overrides earlier PASS 26 columns which tried to keep image beside text. */
.journal-page .issue-card--archive .issue-card__link {
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 1.6vw, 1.5rem);
  padding-block: 0;
}
.journal-page .issue-card--archive .issue-card__cover {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.journal-page .issue-card--archive .issue-card__body h3 {
  font-size: clamp(1.75rem, 1.2rem + 1.1vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 22ch;
}

/* Return the grid to the original wider-lead balance now that each
   archive is stacked and can absorb a narrower rail. */
@media (min-width: 62rem) {
  .journal-page .issues-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(22rem, .75fr);
    column-gap: clamp(3.5rem, 5vw, 6rem);
  }
}

@media (max-width: 62rem) {
  .journal-page .issue-card--archive .issue-card__cover {
    aspect-ratio: 3 / 2;
  }
}

/* ==========================================================================
   PASS 28 — Journal archive balance at wide desktop widths
   The earlier-issue cards already use an image-above-text composition. At
   wide widths they can sit side by side without compressing their headlines,
   which keeps the archive from creating a long empty area below the lead.
   ========================================================================== */
@media (min-width: 75rem) {
  .journal-page .issues-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(34rem, .95fr);
    column-gap: clamp(3.5rem, 5vw, 6rem);
  }

  .journal-page .issue-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }
}

/* ==========================================================================
   PASS 29 — Keep the primary menu visible in previews and on tablets
   The original 62rem breakpoint hid every menu label at common embedded-
   preview widths. Reserve the hamburger for phone layouts only.
   ========================================================================== */
@media (min-width: 45rem) {
  .site-header .nav {
    display: flex;
    flex-shrink: 0;
  }

  .site-header .header-intake {
    display: inline;
    flex-shrink: 0;
  }

  .site-header .menu-btn {
    display: none;
  }

  .mobile-nav {
    display: none !important;
  }
}

@media (min-width: 45rem) and (max-width: 70rem) {
  .site-header__inner {
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
  }

  .site-header .brand {
    gap: .55rem;
  }

  .site-header .brand .mark {
    width: clamp(2.5rem, 4vw, 3rem);
  }

  .site-header .brand__word {
    font-size: clamp(1.02rem, 1.8vw, 1.25rem);
  }

  .site-header .nav {
    gap: clamp(1.15rem, 2.4vw, 2rem);
  }

  .site-header .nav a,
  .site-header .header-intake {
    font-size: clamp(.82rem, 1.35vw, .95rem);
    letter-spacing: .02em;
  }

  .site-header .nav-pub__label {
    font-size: .6rem;
    letter-spacing: .16em;
  }
}

@media (min-width: 45rem) and (max-width: 53rem) {
  .site-header .brand__word {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (min-width: 70.01rem) {
  .site-header__inner {
    gap: clamp(2rem, 4vw, 4.5rem);
  }

  .site-header .nav {
    gap: clamp(1.75rem, 2.75vw, 3rem);
  }

  .site-header .nav a,
  .site-header .header-intake {
    font-size: clamp(.9rem, .82rem + .16vw, 1rem);
  }

  .site-header .nav-pub__label {
    font-size: .62rem;
  }
}

/* ==========================================================================
   PASS 34 — Navigation contrast
   Keep menu text readable and reserve orange for marks and interaction rules.
   ========================================================================== */
.site-header .nav a,
.site-header .nav a:hover,
.site-header .nav a[aria-current="page"],
.site-header .nav .nav-pub__label,
.site-header .header-intake,
.site-header .header-intake:hover {
  color: var(--c-cream);
}

.site-header .nav a::after {
  height: 2px;
}

.site-header .header-intake:hover::after,
.site-header .header-intake:focus-visible::after,
.site-header .header-intake[aria-current="page"]::after {
  background: var(--c-orange);
  height: 2px;
  transform: scaleX(1);
}

.mobile-nav a {
  color: var(--c-ink-navy);
  position: relative;
}

.mobile-nav a:hover,
.mobile-nav a[aria-current="page"],
.mobile-nav .nav-pub__label {
  color: var(--c-ink-navy);
}

.mobile-nav a[aria-current="page"]::after {
  background: var(--c-orange);
  bottom: -1px;
  content: "";
  height: 3px;
  left: var(--space-6);
  position: absolute;
  right: var(--space-6);
}

/* ==========================================================================
   PASS 30 — Restore the original engagement illustration composition
   Keep the established desktop placement and contain the artwork on mobile.
   ========================================================================== */
@media (max-width: 57.99rem) {
  .engagements .engagement__figure--silhouette {
    width: 100%;
    margin-inline: 0;
  }

  .engagements .engagement__figure--silhouette img {
    width: 100%;
    max-width: min(100%, 22rem);
    margin-inline: auto;
  }

  .engagements .engagement__figure--intake img {
    max-width: min(100%, 13.75rem) !important;
  }
}

/* ==========================================================================
   PASS 31 — Tighten the closing space beneath the Solo Starter illustration
   The final row's padding compounded with the section transition below it.
   ========================================================================== */
.engagements .engagement:last-of-type {
  padding-bottom: var(--space-10);
}

/* ==========================================================================
   PASS 32 — Remove the stacked void below the final engagement rule
   The closing row already supplies its own breathing room. End the section at
   that rule, then use one controlled transition into the publication.
   ========================================================================== */
section.engagements {
  padding-bottom: 0;
}

section.publication {
  padding-top: var(--space-12);
}

@media (max-width: 720px) {
  section.publication {
    padding-top: var(--space-8);
  }
}

/* ==========================================================================
   PASS 33 — COMMERCIAL CLARITY
   Services page blocks (engagement detail, operating model, proof band) and
   the Contact page notice + FAQ. Tokens and section rhythm reused throughout.
   ========================================================================== */
.svc-section,
.operating,
.proof { padding-block: var(--section-pad-tight); }

.services-page .page-hero {
  padding-bottom: var(--space-8);
}
.services-page .page-hero::after {
  content: none;
}

.services-page .svc-section {
  padding-top: var(--space-10);
}

.operating,
.proof { border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 9%, transparent); }

.svc-list { display: grid; gap: var(--space-12); }
@media (min-width: 62rem) {
  .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--space-12); }
}

.svc {
  border-top: 2px solid var(--c-orange);
  padding-top: var(--space-6);
}
.svc__head { margin-bottom: var(--space-6); }
.svc__number { margin-bottom: var(--space-3); }
.svc__title {
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
}

.svc__rows { display: grid; gap: var(--space-5); margin: 0; }
.svc__row { display: grid; gap: var(--space-1); }
.svc__label {
  color: var(--c-oxblood);
  font-family: var(--font-label);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.3;
}
.svc__text {
  color: var(--c-slate);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}

.svc-boundary {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-rule);
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.35;
  max-width: 46ch;
}

.operating__grid { display: grid; gap: var(--space-8); }
@media (min-width: 48rem) {
  .operating__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
}
@media (min-width: 78rem) {
  .operating__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.op-item {
  border-top: 1px solid var(--c-rule);
  padding-top: var(--space-5);
}
.op-item__title {
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.14;
  letter-spacing: -.005em;
  margin: 0 0 var(--space-3);
}
.op-item__body {
  color: var(--c-slate);
  font-size: .98rem;
  line-height: 1.62;
  margin: 0;
  max-width: 44ch;
}
.operating__close {
  margin-top: clamp(2.25rem, 3.5vw, 3.5rem);
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.35;
  max-width: 46ch;
}

.proof__grid { display: grid; gap: var(--space-10); }
@media (min-width: 62rem) {
  .proof__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); }
}
.proof-item {
  border-top: 2px solid var(--c-orange);
  padding-top: var(--space-5);
}
.proof-item__number {
  color: var(--c-orange);
  font-family: var(--font-label);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
}
.proof__note {
  margin-top: clamp(2.25rem, 3.5vw, 3.5rem);
  color: var(--c-slate);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 60ch;
}

/* Contact: pre-submission notice */
.intake-notice { padding-block: var(--section-pad-tight) clamp(2rem, 3vw, 3rem); }
.intake-notice__card {
  border-top: 2px solid var(--c-orange);
  padding-top: var(--space-6);
  max-width: 68ch;
}
.intake-notice__h {
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 var(--space-5);
}
.intake-notice__body p {
  color: var(--c-slate);
  font-size: 1rem;
  line-height: 1.62;
  max-width: 62ch;
}
.intake-notice__body p + p { margin-top: var(--space-4); }

.form-intro {
  color: var(--c-slate);
  font-size: var(--text-lead);
  line-height: 1.55;
  max-width: 56ch;
  margin-top: var(--space-5);
}

/* Contact: FAQ */
.faq { padding-block: var(--section-pad-tight); border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 9%, transparent); }
.faq__grid { display: grid; gap: var(--space-8); }
@media (min-width: 62rem) {
  .faq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-12); }
}
.faq__item {
  border-top: 1px solid var(--c-rule);
  padding-top: var(--space-5);
}
.faq__q {
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.16;
  letter-spacing: -.005em;
  margin: 0 0 var(--space-3);
}
.faq__a {
  color: var(--c-slate);
  font-size: .98rem;
  line-height: 1.62;
  margin: 0;
  max-width: 52ch;
}
/* PASS 36 — NOT-FOUND PAGE */
.not-found h1 {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.not-found .lead {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* PASS 37: COLLAPSIBLE PUBLICATION SIGNUP */
.journal-page .publication-signup {
  background: color-mix(in srgb, var(--c-cream) 84%, white);
  border: 1px solid color-mix(in srgb, var(--c-ink-navy) 16%, transparent);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  scroll-margin-top: var(--space-20);
}

.journal-page .publication-signup__summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr) auto;
  list-style: none;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  -webkit-tap-highlight-color: transparent;
}

.journal-page .publication-signup__summary::-webkit-details-marker {
  display: none;
}

.journal-page .publication-signup__summary::marker {
  content: "";
}

.journal-page .publication-signup__summary:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 4px;
}

.journal-page .publication-signup__intro,
.journal-page .publication-signup__eyebrow,
.journal-page .publication-signup__title,
.journal-page .publication-signup__note {
  display: block;
}

.journal-page .publication-signup__eyebrow {
  color: var(--c-orange);
  font-family: var(--font-label);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: var(--space-3);
  text-transform: uppercase;
}

.journal-page .publication-signup__title {
  color: var(--c-ink-navy);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: var(--space-3);
}

.journal-page .publication-signup__note {
  color: color-mix(in srgb, var(--c-ink-navy) 70%, transparent);
  font-size: .92rem;
  line-height: 1.58;
  max-width: 66ch;
}

.journal-page .publication-signup__toggle {
  align-items: center;
  background: var(--c-ink-navy);
  color: var(--c-cream);
  display: inline-flex;
  font-family: var(--font-label);
  font-size: var(--text-ui);
  font-weight: 700;
  gap: var(--space-3);
  justify-content: center;
  letter-spacing: .08em;
  min-width: 8.75rem;
  padding: .9rem 1.2rem;
  text-transform: uppercase;
}

.journal-page .publication-signup__toggle svg {
  transition: transform 220ms var(--ease);
}

.journal-page .publication-signup__toggle-open {
  display: none;
}

.journal-page .publication-signup[open] .publication-signup__toggle-closed {
  display: none;
}

.journal-page .publication-signup[open] .publication-signup__toggle-open {
  display: inline;
}

.journal-page .publication-signup[open] .publication-signup__toggle svg {
  transform: rotate(180deg);
}

.journal-page .publication-signup__summary:hover .publication-signup__toggle {
  background: color-mix(in srgb, var(--c-ink-navy) 88%, var(--c-orange));
}

.journal-page .publication-signup__form-wrap {
  border-top: 1px solid color-mix(in srgb, var(--c-ink-navy) 13%, transparent);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.journal-page .publication-signup .branded-form {
  background: transparent;
  border: 0;
  margin: 0;
  max-width: 48rem;
  padding: 0;
}

.journal-page .publication-signup .branded-form__grid--subscribe {
  margin-top: 0;
}

.journal-page .publication-signup .form-field input,
.journal-page .publication-signup .form-field textarea {
  background: color-mix(in srgb, white 78%, var(--c-cream));
}

@media (max-width: 42rem) {
  .journal-page .publication-signup__summary {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .journal-page .publication-signup__toggle {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journal-page .publication-signup__toggle svg {
    transition: none;
  }
}