/* ────────────────────────────────────────────────────────────────────
   EAS SINGLE POST — v2 (blog-engine-final-fixes-v2 brief, Part A;
   revised by the "GENUINELY FINAL ROUND" brief, Parts A/B/C/D)

   Full design replacement for the old magazine-masthead template.
   Built to Mockups/blog-template-v2.html, with one disclosed
   substitution: the mockup's own <link> loads Fraunces + Manrope, but
   this app's real, currently-requested Google Fonts (confirmed in
   layout.tsx's own GOOGLE_FONTS_URL comment) are Cormorant Garamond +
   Jost only -- the exact same "a font referenced in CSS that was never
   actually loaded silently falls back to a generic font" bug this
   project's own BlogPostTemplate.tsx docblock already documents for
   Playfair Display. Rather than repeat that bug, or widen the site-wide
   font request for one template, this file uses the real, already-
   loaded pair: Cormorant Garamond standing in for Fraunces' display
   role, Jost standing in for Manrope's body role.

   GENUINELY FINAL ROUND (this revision) corrects the scope of the prior
   round's "replace the design" instruction: the macro layout (hero band,
   share row, 3-column body grid, Related-before-Author order, Final CTA
   presence) stays the v2 mockup's own structure -- but every COMPONENT's
   visual styling (sidebar module cards, Related Posts cards, the Final
   CTA block and button) is reverted to the REAL values extracted from
   the original WordPress template, `eas-single-post.css` (still loaded
   site-wide, `.eas-st-*` namespace, 652 lines, read in full this round --
   every property value cited in this file's own comments below is a
   real, confirmed value from that file, not a guess). Font-SIZE is the
   one property deliberately NOT carried over verbatim everywhere: this
   session's own sealed Phase-1 rule (16px minimum for flowing body/
   prose text, 13px minimum for short labels/meta/buttons, no
   exceptions) overrides the real original's own much smaller caption
   scale (that file used 8-12px extensively for labels and even some
   sentence-level sidebar copy) -- every non-size property (font-family,
   letter-spacing, text-transform, color, border, background, padding,
   corner radius) is carried over verbatim; only font-size is raised to
   whichever floor applies. See this round's own completion report for
   the full element-by-element audit of what was below the floor and is
   now fixed.

   All classes stay namespaced `eas-stv2-*` -- the old eas-single-post.css
   / eas-single-post-seal.css files are left in place (harmless, scoped
   to the old `eas-st-*` prefix, which this template no longer uses
   anywhere in its own class names, only as the real *source of values*
   documented in these comments).
───────────────────────────────────────────────────────────────────── */

.eas-stv2-root {
  background: #FAF7F0;
  color: #1C1A14;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
}
.eas-stv2-root * { box-sizing: border-box; }
.eas-stv2-disp { font-family: 'Cormorant Garamond', serif; }

/* ── HERO ───────────────────────────────────────────────────────── *
 * Part A, GENUINELY FINAL ROUND -- real, confirmed bug: the old
 * gradient (80% -> 10% -> transparent, with the 10% stop already
 * reached by the 50% mark) left the bottom third of the photo almost
 * fully exposed, exactly where the title/byline sit (hero uses
 * align-items:flex-end) -- illegible against a bright real photo
 * (confirmed against a real hippo/daylight-water hero image). Fixed
 * with a steeper, darker curve that stays near-opaque through the
 * bottom ~25% (where text actually sits) and only starts clearing
 * past the 65% mark, plus a real text-shadow on every hero text
 * element as a second, independent legibility layer -- so the text
 * stays readable even on an unusually bright/high-key photo the
 * gradient alone might not fully neutralize. */
.eas-stv2-hero {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.eas-stv2-hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
}
.eas-stv2-hero-photo-fade { animation: eas-stv2-hero-fade-in .6s ease both; }
@keyframes eas-stv2-hero-fade-in { from { opacity: .55; } to { opacity: 1; } }
.eas-stv2-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(8,6,3,0.95) 0%,
    rgba(8,6,3,0.90) 20%,
    rgba(8,6,3,0.68) 40%,
    rgba(8,6,3,0.32) 62%,
    rgba(8,6,3,0.06) 85%,
    rgba(8,6,3,0) 100%
  );
}
.eas-stv2-hero-inner {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  padding: 48px clamp(24px, 7vw, 100px) 40px;
  width: 100%;
}
.eas-stv2-kicker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.eas-stv2-kicker-line { width: 26px; height: 1px; background: #D98A4A; }
.eas-stv2-kicker-text {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #E8B87A;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.65);
}
.eas-stv2-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.1;
  margin: 0 0 14px;
  max-width: 880px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 6px 22px rgba(0,0,0,0.4);
  /* REAL, CONFIRMED FIX -- a global base rule (`h1, h2, h3, h4 {
     color: var(--ink) }`, no !important, but a DIRECT declaration on the
     element, which always beats an INHERITED value regardless of
     specificity) was silently overriding the white color this hero text
     needs to inherit from `.eas-stv2-hero-inner`, rendering the main
     title in dark ink against the hero photo -- a real legibility
     regression directly working against this round's own Part A goal,
     found only by checking the live computed color on staging, not
     visible from a screenshot alone at every photo brightness. Declaring
     color explicitly here (a class selector, (0,1,0)) beats the global
     rule's type-only selector (0,0,1) outright, no !important needed. */
  color: #FFFFFF;
}
.eas-stv2-h1-em { color: #E8B87A; font-style: normal; }
.eas-stv2-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  flex-wrap: wrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.eas-stv2-avatar {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  text-shadow: none;
}
.eas-stv2-byline-dot { opacity: 0.6; }

/* ── SHARE ROW ──────────────────────────────────────────────────── */
.eas-stv2-share {
  display: flex;
  gap: 10px;
  padding: 14px clamp(24px, 7vw, 100px);
  background: #F2EBD9;
}
/* Explicit font-family override -- without this, the OLD eas-single-
   post.css's own unscoped `.eas-st-pcap-link` rule (still loaded site-
   wide, scoped by class name only, not by any ancestor) would still win
   on that one property and silently fall back to a never-loaded
   'Overpass Mono' -- every OTHER property here already beats it on
   specificity (2 classes vs. 1), font-family was the one gap. */
.eas-stv2-share .eas-st-pcap-link {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid rgba(28,26,20,0.15);
  border-radius: 6px;
  cursor: pointer;
  color: #1C1A14;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: border-color .2s, background .2s;
}
.eas-stv2-share .eas-st-pcap-link:hover {
  border-color: #B8780A;
  background: rgba(184,120,10,0.06);
}

/* ── BODY GRID ──────────────────────────────────────────────────── *
 * Part C, GENUINELY FINAL ROUND -- real, recovered target: the
 * original WordPress template's own `.eas-st-magazine-body` used
 * `max-width:1280px; grid-template-columns:148px 1fr 272px;
 * padding:0 48px` with NO grid gap -- spacing came entirely from each
 * child column's own internal padding instead
   (`.eas-st-margin-col{padding-right:32px}`,
    `.eas-st-copy{padding:72px 56px 88px}`,
    `.eas-st-sidebar{padding:72px 0 72px 36px}`).
 * At >=1376px viewport this produces a real ~764px center grid track,
 * and (after `.eas-st-copy`'s own 56px+56px internal padding) a real
 * ~652px actual text measure -- the genuine original reading-column
 * width, well above this file's prior ~510px. Reproduced here exactly:
 * same 148/1fr/272 columns, same zero grid-gap, same per-column
 * padding values, carried over verbatim. */
.eas-stv2-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px clamp(20px, 6vw, 48px) 88px;
  display: grid;
  grid-template-columns: 148px 1fr 272px;
  gap: 0;
  align-items: start;
}
/* REAL, CONFIRMED BUG FIX -- found via Playwright, not guessed:
   ChapterNav.tsx returns null (renders nothing) whenever a post has no
   real <h2 id="..."> headings -- true for any short/un-chaptered post,
   confirmed live on a real test post. Grid columns were being claimed by
   DOM order, not identity: with the TOC absent, .eas-stv2-copy (the
   article) fell into the 148px column meant for the TOC -- crushing the
   entire article to one word per line -- and .eas-stv2-sidebar expanded
   into the 1fr column meant for the article, rendering 2.6x too wide.
   This is what read as "the sidebar is broken": the sidebar itself was
   fine, it was occupying the wrong grid cell. Fixed by giving all three
   regions an explicit column, independent of whether the TOC renders. */
.eas-stv2-toc { grid-column: 1; }
.eas-stv2-copy { grid-column: 2; }
.eas-stv2-sidebar { grid-column: 3; }
@media (max-width: 980px) {
  .eas-stv2-body { grid-template-columns: 1fr; padding: 32px clamp(20px, 6vw, 48px) 56px; }
  .eas-stv2-toc { display: none; }
  .eas-stv2-toc, .eas-stv2-copy, .eas-stv2-sidebar { grid-column: 1; }
}

.eas-stv2-toc {
  font-size: 13px;
  color: rgba(28,26,20,0.5);
  position: sticky;
  top: 24px;
  align-self: start;
  padding-right: 32px;
  border-right: 1px solid rgba(28,26,20,0.10);
}
.eas-stv2-toc-label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(28,26,20,0.4);
  margin-bottom: 10px;
}
.eas-stv2-toc-list { display: flex; flex-direction: column; gap: 9px; }
.eas-stv2-toc-item {
  color: inherit;
  text-decoration: none;
  display: flex;
  gap: 8px;
  transition: color .2s, padding-left .2s;
}
.eas-stv2-toc-item:hover { color: #B8780A; }
.eas-stv2-toc-num { color: rgba(28,26,20,0.35); font-variant-numeric: tabular-nums; }
/* Part B, GENUINELY FINAL ROUND -- real, NEW addition: a scroll-spy
   active-state highlight on the chapter nav. Never specified in the
   original mockup or the WordPress template -- this is new work, not a
   reversion. Driven by ChapterNav.tsx's own real IntersectionObserver;
   this class is toggled client-side as the reader scrolls. */
.eas-stv2-toc-item--active {
  color: #A85C38;
  font-weight: 500;
  position: relative;
  padding-left: 10px;
}
.eas-stv2-toc-item--active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 3px;
  bottom: 3px;
  width: 2px;
  background: #A85C38;
}
.eas-stv2-toc-item--active .eas-stv2-toc-num { color: #A85C38; }

.eas-stv2-copy {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(28,26,20,0.85);
  min-width: 0;
  padding: 0 56px;
  border-right: 1px solid rgba(28,26,20,0.08);
}
.eas-stv2-copy p { margin: 0 0 18px; }
.eas-stv2-copy h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 26px;
  margin: 36px 0 16px;
  color: #1C1A14;
}
.eas-stv2-copy blockquote {
  /* REAL, CONFIRMED FIX -- this project has a sealed, founder-ruled
     site-wide "no slanted text anywhere" constraint ("SITE-WIDE ITALIC
     BAN", style.css, 2026-07-11). Its own CSS selector only targets
     `em/i/cite/address/var/dfn/q` directly, so a bare `<blockquote>`
     with its own inline `font-style` isn't technically caught by that
     rule's selector -- but using italic here would still violate the
     rule's actual intent, found only by reading style.css's own
     docblock while sweeping for other site-wide collisions, not
     something the original request named. Removed; the left accent
     border + serif display font + muted color already carry the
     "editorial quote" character without slanting the text. */
  border-left: 3px solid #B8780A;
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-style: normal;
  color: #584738;
}
/* Images on the post are never rounded -- direct founder instruction,
   this session. Applies to every photo on the template, not just this
   one: see the matching fixes below on .eas-stv2-avatar and
   .eas-stv2-author-avatar (both circular placeholder bubbles standing
   in for a real photo slot) and the already-sharp .eas-stv2-rcard-img/
   .eas-stv2-sb-guide-avatar, which needed no change. */
.eas-stv2-copy img { max-width: 100%; border-radius: 0; height: auto; }

.eas-stv2-tags { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.eas-stv2-tags-label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(28,26,20,0.4);
  margin-right: 4px;
}
.eas-stv2-tag {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(28,26,20,0.06);
  color: rgba(28,26,20,0.65);
}

/* ── SIDEBAR MODULES ────────────────────────────────────────────── *
 * Part D.1, GENUINELY FINAL ROUND -- real, confirmed reversion: the
 * prior round's generic rounded-corner card (`border-radius:10px`,
 * plain `rgba(28,26,20,0.08)` hairline, no background) is replaced with
 * the real original's editorial block treatment -- sharp corners
 * (the original never uses border-radius on ANY sidebar module), a real
 * paper background (`--eas-paper` #FDFAF6, confirmed, vs. the prior
 * transparent card), a real hairline border (`--eas-rule`
 * rgba(30,26,21,.10)), and a real accent-colored edge marker (either a
 * top or left border in `--eas-accent`/`--eas-accent-md`, clay #A85C38
 * -- confirmed on `.eas-st-sb-journey` [top, 3px] and
 * `.eas-st-sb-itinerary` [left, 2px]) -- applied per real module type
 * via modifier classes BlogPostTemplate.tsx now passes in (see that
 * file's own comment on this). Card "title" text is the real editorial
 * headline treatment the original used for these (`.eas-st-jc-title`
 * 18px, `.eas-st-sbi-name` 16px, `.eas-st-guide-name` 15px -- all
 * Cormorant-style serif display headlines, never a small sans-serif
 * label as the prior round had it). */
.eas-stv2-sidebar { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-left: 36px; }
.eas-stv2-sb-card {
  padding: 20px 22px;
  background: #FDFAF6;
  border: 1px solid rgba(30,26,21,0.10);
}
.eas-stv2-sb-card--journey { border-top: 3px solid #A85C38; }
.eas-stv2-sb-card--itinerary { border-left: 2px solid rgba(168,92,56,0.32); }
.eas-stv2-sb-card--price { background: #EDE7DB; }
.eas-stv2-sb-card--departure { background: #EDE4D4; }
/* Real eyebrow label, confirmed against part-f2-ORIGINAL-wp-sidebar-
   mid.png -- every module in the real original sidebar carries a small-
   caps kicker ABOVE its own title/body ("SAFARI JOURNEY", "NEXT
   DEPARTURES", "SHORT RAINS ADVANTAGE", "BEST TIME TO TRAVEL"), not just
   a bare title as the prior round had it. Two real colors confirmed in
   that screenshot: a muted ink-brown for plain data/utility modules
   (Next Departures, Best Time to Travel) and the same clay accent as the
   card's own top/left border for editorial modules introducing prose
   (Safari Journey, Short Rains Advantage) -- the --accent modifier below
   is that second variant. 13px floor per this file's own sitewide label
   minimum (Part C), not the smaller size the real screenshot renders at. */
.eas-stv2-sb-label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28,26,20,0.45);
  margin-bottom: 8px;
}
.eas-stv2-sb-label--accent { color: #A85C38; }
.eas-stv2-sb-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #1C1A14;
}
.eas-stv2-sb-guide-row { display: flex; gap: 10px; align-items: center; }
.eas-stv2-sb-guide-avatar {
  width: 44px; height: 44px; border-radius: 0;
  background: rgba(28,26,20,0.08);
  border: 1px solid rgba(168,92,56,0.32);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: rgba(28,26,20,0.5); flex-shrink: 0;
  object-fit: cover;
}
.eas-stv2-sb-guide-name { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 500; }
.eas-stv2-sb-guide-sub { font-size: 13px; color: rgba(28,26,20,0.5); }
.eas-stv2-sb-link {
  font-size: 13px; color: #A85C38; text-decoration: none;
  display: inline-flex; margin-top: 8px;
}
.eas-stv2-sb-link:hover { text-decoration: underline; }
.eas-stv2-sb-body { font-size: 16px; line-height: 1.6; color: rgba(28,26,20,0.75); }
.eas-stv2-sb-quote {
  /* Site-wide "no slanted text anywhere" rule (style.css, 2026-07-11) --
     see the matching note on .eas-stv2-copy blockquote above. The real
     literal curly-quote marks already wrapping this text in JSX
     (&ldquo;...&rdquo;) plus the serif display font carry the "this is a
     quote" signal without italicizing it. */
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: normal;
  color: rgba(28,26,20,0.8);
  line-height: 1.4;
  margin: 0 0 8px;
}
.eas-stv2-sb-price-figure { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 500; margin: 2px 0; }
.eas-stv2-sb-price-sub { font-size: 13px; color: rgba(28,26,20,0.5); }
.eas-stv2-sb-price-btn {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 500;
  font-family: 'Jost', sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  background: #1C1A14; color: #FAF7F0; padding: 12px 16px; border-radius: 0; text-decoration: none;
  border: 2px solid #1C1A14;
}
.eas-stv2-sb-price-btn:hover { background: #2C3424; border-color: #2C3424; }
.eas-stv2-sb-season-bar { position: relative; height: 4px; background: rgba(28,26,20,0.08); border-radius: 2px; margin: 8px 0; }
.eas-stv2-sb-season-peak { position: absolute; top: 0; bottom: 0; background: rgba(168,92,56,0.4); border-radius: 2px; }
.eas-stv2-sb-season-now { position: absolute; top: -2px; width: 2px; height: 8px; background: #1C1A14; }
.eas-stv2-sb-departure-next { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0; }
.eas-stv2-sb-departure-month { font-family: 'Cormorant Garamond', serif; font-size: 20px; }
.eas-stv2-sb-departure-slots { font-size: 13px; color: rgba(28,26,20,0.5); text-align: right; }
.eas-stv2-sb-divider { height: 1px; background: rgba(28,26,20,0.08); margin: 10px 0; }

/* Scroll-triggered intent CTA -- CORRECTED AGAIN, this session: direct
   founder feedback confirmed the plain-hairline-divider treatment from
   the prior round (a literal copy of eas-single-post.css:323-329, which
   assumed this always sits directly below an already-boxed module in
   the same column) reads as un-styled/orphaned next to its sibling
   cards, since -- per the real, confirmed Payload-API finding logged in
   this file's history -- 0 of 117 real posts have any other module
   active, so this card is routinely the ONLY thing in the sidebar, with
   no "fellow card" above it to visually explain the bare hairline. Given
   the same paper-card box every sibling module already uses
   (`.eas-st-sb-journey`/`-itinerary`/`-departure`/`-season`/`-guide`/
   `-price`/`-trust`, all `background:var(--eas-paper)` or
   `--eas-linen`, `border`, `padding:20-22px`, confirmed in
   eas-single-post.css), so it now reads as one more card in the same
   family, not a different kind of element. The real original's own
   324px-era lesson is kept exactly where it still applies: the text
   itself stays the real original's values -- `.eas-st-intent-copy` is
   `font-weight:400` (NOT 500, the mismatch this round's feedback
   caught), Cormorant Garamond in this rebuild (Playfair Display is the
   OLD template's font, not used anywhere here), 13px label floor on the
   note/button (the real original's 8px is below this file's own Part C
   sweep floor). margin-top removed -- `.eas-stv2-sidebar`'s own flex
   `gap:14px` already spaces every card consistently, a second margin
   here would just double it. */
.eas-stv2-sb-intent {
  position: relative;
  padding: 20px 22px;
  background: #FDFAF6;
  border: 1px solid rgba(30,26,21,0.10);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.eas-stv2-sb-intent.eas-stv2-visible { opacity: 1; transform: none; pointer-events: auto; }
.eas-stv2-sb-intent-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: rgba(28,26,20,0.4); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px;
}
/* font-style: normal -- site-wide "no slanted text anywhere" rule
   (style.css, 2026-07-11), same as the two quote fixes above.
   `:not(.eas-stv2-sb-intent-note)` -- REAL, CAUGHT-BY-VERIFICATION fix:
   without it, this element+class selector's specificity (0,1,1) beats
   the plain single-class `.eas-stv2-sb-intent-note` rule below (0,1,0)
   regardless of source order, so the note <p> was silently inheriting
   this rule's 18px/serif/dark-ink values instead of its own 13px/Jost/
   muted ones -- confirmed via live computed-style inspection, not
   visible from a plain screenshot (the two text blocks sit close enough
   in tone that the wrong-size/wrong-font substitution didn't jump out
   until measured). */
.eas-stv2-sb-intent p:not(.eas-stv2-sb-intent-note) {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 400; line-height: 1.4;
  color: #1C1A14; margin: 0 24px 12px 0; font-style: normal;
}
.eas-stv2-sb-intent-note {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(28,26,20,0.5); margin-bottom: 14px; font-style: normal !important;
}
.eas-stv2-sb-intent-btn {
  display: block; text-align: center;
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: #1C1A14; padding: 14px 16px; border-radius: 0;
  border: 1px solid #1C1A14; text-decoration: none;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.eas-stv2-sb-intent-btn:hover { background: #A85C38; border-color: #A85C38; color: #FDFAF6; }

/* ── RELATED POSTS (rendered before Author Bio, Part D.2) ────────── *
 * Real, confirmed reversion: the original `.eas-st-related-grid` was a
 * flat 3-column grid with only a 2px gap (near edge-to-edge); each real
 * `.eas-st-rcard` had sharp corners, a 218px-tall image (vs. this
 * template's prior 110px), and revealed a real clay-colored top border
 * on hover (`border-top-color: var(--eas-accent)`) instead of a lift/
 * shadow. Card title used a real 20px serif headline, not a 12px
 * sans-serif label. */
.eas-stv2-related {
  padding: 40px clamp(24px, 7vw, 100px);
  background: #F2EBD9;
}
.eas-stv2-related-head { font-size: 22px; margin-bottom: 16px; }
.eas-stv2-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 14px;
}
@media (max-width: 780px) {
  .eas-stv2-related-grid { grid-template-columns: 1fr; gap: 16px; }
}
.eas-stv2-rcard {
  background: #FDFAF6;
  border-radius: 0;
  border-top: 2px solid transparent;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-top-color .28s ease;
}
.eas-stv2-rcard:hover { border-top-color: #A85C38; }
.eas-stv2-rcard-img {
  height: 218px;
  background: rgba(28,26,20,0.08);
  background-size: cover;
  background-position: center;
}
.eas-stv2-rcard-body { padding: 18px 16px; }
.eas-stv2-rcard-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.25;
}
.eas-stv2-rcard-meta { font-size: 13px; color: rgba(28,26,20,0.5); }

/* ── AUTHOR BIO (now after Related Posts) ───────────────────────── */
.eas-stv2-author {
  padding: 32px clamp(24px, 7vw, 100px);
  display: flex;
  gap: 16px;
  align-items: center;
}
.eas-stv2-author-avatar {
  width: 52px; height: 52px; border-radius: 0;
  background: rgba(28,26,20,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: rgba(28,26,20,0.5); flex-shrink: 0;
}
.eas-stv2-author-name { font-size: 13px; font-weight: 500; }
.eas-stv2-author-bio { font-size: 16px; line-height: 1.6; color: rgba(28,26,20,0.65); max-width: 700px; margin: 2px 0 0; }

/* ── FINAL CTA ────────────────────────────────────────────────────── *
 * CORRECTED, this session, for real this time: `PillarFinalCTA`/
 * `.btn-primary` (the previous round's source) is dead code -- grepped
 * the whole repo, it is defined in PillarPrimitives.tsx but imported
 * nowhere. The REAL, currently-live, sitewide Final CTA is the shared
 * `.eas-comp-final` family in eas-components.css (loaded globally via
 * layout.tsx -- already present on this page, no new stylesheet link
 * needed), used verbatim by Homepage.tsx ("Section 9 -- Final CTA, real
 * verbatim"), DestinationSingle.tsx, and DepartureSingle.tsx. No local
 * `.eas-stv2-cta*` CSS exists anymore for this reason -- the JSX below
 * now renders the real shared markup/classes directly
 * (`.eas-comp-final`/`__rotated`/`__grid`/`__eyebrow`/`__headline`/
 * `__sub`/`__action`/`__body`/`__btn`/`__btn-label`/`__secondary`),
 * exactly as DestinationSingle.tsx's own `FinalCta()` does, so this is
 * pixel-identical to every other page's closing section by construction,
 * not a re-derivation that can drift out of sync again. */

/* ── REAL, CONFIRMED FIX, corrected after a real specificity miscalc
   caught by live re-verification (the first attempt below this comment
   in git history still lost): a site-wide brand-font rule in style.css
   forces Jost on every <p>/<li>/<span> under any eas-* ancestor outside
   the OLD template's `.eas-st-root`, via THREE separate comma-joined
   branches with DIFFERENT specificities -- found only by inspecting the
   real CSSOM on the live deployed staging site, not visible from reading
   source:
     p/li branch: `[class*="eas-"] p:not([class*="-label"])
       :not([class*="__label"]):not(.eas-st-root *)` -- 3 `:not()`
       clauses -> specificity (0,4,1).
     span branch: `[class*="eas-"] span:not(.rb-):not(.eas-eyebrow-std)
       :not([class*="-label"]):not([class*="__label"]):not(.eas-st-root *)`
       -- 5 `:not()` clauses (two more than the p/li branch: `:not(.rb-)`
       and `:not(.eas-eyebrow-std)`) -> specificity (0,6,1), NOT (0,4,1).
   The first fix attempt here used the p/li branch's lower specificity
   for BOTH span-target fixes (h1-em, departure-month) and genuinely
   still lost in the real browser -- caught by re-querying the live
   CSSOM after deploying, not assumed fixed from the file diff alone.
   Corrected by using each element's REAL full ancestor chain (every
   real class between `.eas-stv2-root` and the target, several classes
   more than strictly needed, as real safety margin) plus `html body`
   prefixes for a small amount of real, truthful extra margin --
   deliberately not an exact tie with the site-wide rule's specificity,
   to avoid depending on source-order tie-break behavior at all. */
html body .eas-stv2-root .eas-stv2-hero .eas-stv2-hero-inner .eas-stv2-h1.eas-stv2-disp .eas-stv2-h1-em {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
html body .eas-stv2-root .eas-stv2-body .eas-stv2-sidebar .eas-stv2-sb-card .eas-stv2-sb-quote {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
html body .eas-stv2-root .eas-stv2-body .eas-stv2-sidebar .eas-stv2-sb-card .eas-stv2-sb-departure-next .eas-stv2-sb-departure-month.eas-stv2-disp {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
/* Same real site-wide Jost-forcing rule, a FOURTH instance -- caught by
   re-querying the live CSSOM on the real deployed intent card after
   this session's own font-weight fix, not assumed correct from the
   source diff. `.eas-stv2-sb-intent` carries "eas-" and its <p> child
   has neither a `-label`/`__label` class nor a `.eas-st-root` ancestor,
   so the site-wide rule's `!important` still won despite this file's
   own (non-!important) font-family declaration -- font-weight:400 held
   correctly since the site-wide rule doesn't touch that property, which
   is exactly why this one slipped past a plain visual check.
   `:not(.eas-stv2-sb-intent-note)` -- a second real bug caught in the
   SAME re-verification pass: without it, this override's own higher
   specificity would force Cormorant Garamond onto the note line too
   (which must stay Jost, matching its own base rule below), the exact
   same element+class-beats-single-class mistake just fixed on the base
   rule -- excluded here for the identical reason. */
html body .eas-stv2-root .eas-stv2-body .eas-stv2-sidebar .eas-stv2-sb-intent p:not(.eas-stv2-sb-intent-note) {
  font-family: 'Cormorant Garamond', serif !important;
}

/* ── REAL, CONFIRMED FIX (a second, distinct site-wide rule, found in the
   same live-CSSOM sweep as the one above): style.css also carries a
   heading-weight rule -- `[class*="eas-"] h1/h2/h3:not([class*="eas-
   comp-"]):not(.eas-st-root):not(.eas-st-root *) { ... font-weight: 300
   !important; ... }`, specificity (0,4,1) -- that silently forced this
   hero H1 down to font-weight 300 regardless of the 500 this rule
   explicitly asked for (and, before the color fix above this block, ALSO
   silently forced the H1's color to the global page-body ink tone instead
   of the white `.eas-stv2-hero-inner` means to supply, confirmed via the
   same live computed-style check -- not a hypothesis). Its font-family/
   font-style values happen to already match this rule's own intent (both
   Cormorant Garamond / normal), so only font-weight needed a targeted
   override here; its letter-spacing/line-height values differ only
   trivially (-0.01em / 1.15 vs this rule's 1.1) and are left as-is. */
html body .eas-stv2-root .eas-stv2-hero .eas-stv2-hero-inner .eas-stv2-h1.eas-stv2-disp {
  font-weight: 500 !important;
}

/* BLOG-EDITOR-ROUND-2 phase D fix: elements the new editor writes. Scoped to classes the editor adds, so existing posts
   (which never carry these classes) render exactly as before. */
.eas-stv2-copy mark.eas-hl { background: rgba(184,120,10,.25); color: inherit; padding: 0 2px; }
.eas-stv2-copy blockquote.eas-pull-quote { margin: 44px 0; padding: 40px 36px; background: #F4F1E9; border: 0; text-align: center; font-family: 'Cormorant Garamond', serif; font-style: normal; color: #1C1A14; }
.eas-stv2-copy blockquote.eas-pull-quote p { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; font-weight: 500; margin: 0 0 12px; color: #1C1A14; text-align: center !important; hyphens: none; }
.eas-stv2-copy blockquote.eas-pull-quote p:last-child { margin-bottom: 0; }