/* ============================================================
   SCIENCE OF WATER — cover page
   Fonts: Anton (headlines) · DM Serif Display (editorial) · Manrope (everything else)
   ============================================================ */
/* Type system per the SOW typography reference:
   Anton (Regular 400 ONLY — never bolded) for the hero title. Montserrat for everything else.
   No serif anywhere on the cover. */
@font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
/* Montserrat local (variable font) — replaces the Google Fonts API on the SOW cover (Stuart). */
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* Cabin — SOW editorial body font (Stuart's SOW font set: Anton / Barlow / Cabin / Libre Baskerville) */
@font-face { font-family: "Cabin"; src: url("../fonts/Cabin-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../fonts/Cabin-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../fonts/Cabin-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../fonts/Cabin-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../fonts/Cabin-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../fonts/Cabin-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../fonts/Cabin-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("../fonts/Cabin-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

/* Libre Baskerville — SOW editorial display serif (Why-SOW heading + closing, per production spec) */
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/LibreBaskerville-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/LibreBaskerville-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/LibreBaskerville-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

.sow {
  --navy: #000033;
  --slate: #111827;
  --blue-black: #080f17;
  --aqua: #00cfff;
  --aqf-blue: #00aeef;
  --orange: #ff6a00;
  --sand: #efe6d7;
  --light-gray: #e6e6e6;
  --anton: "Anton", Impact, sans-serif;
  --sans: "Montserrat", Arial, sans-serif;
  font-family: var(--sans);
  background: var(--blue-black);
}
.sow * { box-sizing: border-box; }

/* ---- slim solid white nav bar (sits above the cover, in flow) ---- */
.site-header.sow-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 51, 0.08);
}
/* Typography, colors, hover states, height and logo size ALL come from styles.css — the nav is
   identical to the rest of the site, and there are no SOW size overrides here by design.
   styles.css --nav-h is now fluid site-wide (62px on short windows -> 83px where there's room),
   so every page compacts together and SOW is never the odd one out. The hero below subtracts
   that same --nav-h from 100vh to sit exactly one screen tall, so --nav-h is the single source
   of truth: override the bar's height here without correcting it and the scroll comes back. */

/* ============================================================
   HERO — full bleed magazine cover
   ============================================================ */
.sow-hero {
  /* --nav-h is defined at :root in styles.css and drives the real bar height, so this always
     matches it. Do NOT redeclare it here or in .sow — the <header> sits OUTSIDE main.sow, so a
     var scoped to .sow is invisible to the bar, and a stale local copy desyncs nav+hero -> scroll. */
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  overflow: hidden;
  color: #fff;
  background: var(--blue-black);
}
.sow-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sow-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* text legibility — left (title sits over the dark tree line) */
    linear-gradient(100deg, rgba(4,10,8,0.88) 0%, rgba(4,10,8,0.58) 26%, rgba(4,10,8,0.14) 50%, rgba(4,10,8,0) 72%),
    /* bottom band — pillars + credit */
    linear-gradient(0deg, rgba(3,8,6,0.86) 0%, rgba(3,8,6,0.42) 17%, rgba(3,8,6,0.08) 34%, rgba(3,8,6,0) 52%),
    /* darker bottom-right pocket — carries the pull quote */
    radial-gradient(58% 52% at 88% 88%, rgba(2,8,12,0.72) 0%, rgba(2,8,12,0.34) 55%, rgba(2,8,12,0) 100%);
}
.sow-hero__inner {
  position: relative;
  width: min(1400px, calc(100% - 6rem));
  margin-inline: auto;
  min-height: calc(100vh - var(--nav-h));
  padding: clamp(1.1rem, 2.4vh, 1.9rem) 0 clamp(1.4rem, 3vh, 2.2rem);
  display: flex;
  flex-direction: column;
}
/* eyebrow — Montserrat 700, 18–22px, ls .22–.28em, orange */
.sow-hero__eyebrow {
  /* top margin trimmed so the pillars' auto-margin has more free space to absorb — opens up the
     subhead→icons gap, which read cramped (only ~20px) on a short 27" window. */
  margin: clamp(0.35rem, 1.1vh, 0.9rem) 0 0.55rem;
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  line-height: 1.1;
  color: var(--orange);
  font-size: clamp(14px, 1.35vw, 20px);
}
/* hero title — Anton Regular 400 ONLY, letter-spacing 0, never bolded */
.sow-hero__title {
  margin: 0;
  font-family: var(--anton);
  font-weight: 400;
  text-transform: uppercase;
  /* spec: clamp(74px, 6.2vw, 126px) — the 10.4vh term keeps the 4-line title
     inside the cover on short/wide viewports so the hero never scrolls */
  font-size: clamp(74px, min(6.2vw, 10.4vh), 126px);
  line-height: 0.96;
  letter-spacing: 0;
  text-shadow: 0 4px 34px rgba(0, 0, 12, 0.45);
}
/* subhead — Montserrat 500, ls .22–.32em */
.sow-hero__subhead {
  margin: clamp(1.5rem, 3vh, 2.2rem) 0 0;
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  line-height: 1.25;
  color: #ffffff;
  font-size: clamp(14px, 1.25vw, 19px);
}

/* ---- pillars (bottom-left row) ---- */
.sow-pillars {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 700px;
}
.sow-pillar {
  padding: 0 clamp(0.7rem, 1.3vw, 1.4rem);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  text-align: center;
}
.sow-pillar:first-child { border-left: none; }
.sow-pillar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 4.2vw, 64px);
  height: clamp(52px, 4.2vw, 64px);
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  border: 2px solid var(--aqua);
}
/* icon PNGs are solid --aqua at full opacity, so they read at the same weight as the circles */
.sow-pillar__icon img { width: 58%; height: 58%; object-fit: contain; display: block; }
/* icon titles — Montserrat 700, 16–19px, ls .01–.025em */
.sow-pillar__title {
  margin: 0 0 0.45rem;
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.2;
}
/* icon supporting copy — Montserrat 400, 15–18px, ls 0 */
.sow-pillar__desc {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--light-gray);
  font-size: clamp(12px, 0.95vw, 15px);
  line-height: 1.45;
  letter-spacing: 0;
}

/* ---- pull quote (right, mid-lower) ---- */
.sow-hero__quote {
  position: absolute;
  margin: 0;
  right: 0;
  bottom: clamp(2.4rem, 6vh, 4rem);
  width: max-content;      /* hug the text so the closing mark lands at the text edge */
  max-width: min(30rem, 40vw);
}
/* pull quote — Montserrat 500, 27–34px, lh 1.45–1.55, ls 0, no serif */
.sow-hero__quote p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(19px, 1.55vw, 29px);
  line-height: 1.5;
  letter-spacing: 0;
  color: #fff;
}
.sow-hero__qmark {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--aqua);
  line-height: 0.5;
}
.sow-hero__qmark--open { font-size: clamp(3.2rem, 4vw, 4.6rem); margin: 0.5rem 0 0.55rem; }
.sow-hero__qfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.3rem;
}
.sow-hero__qrule {
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--aqua);
  flex: none;
}
.sow-hero__qmark--close {
  font-size: clamp(3.2rem, 4vw, 4.6rem);
  margin: 0;
  transform: translateY(0.12em);
}

/* ---- photo credit (bottom-left) ---- */
/* photo credit — Montserrat 400, 13–16px, ls 0 */
.sow-hero__credit {
  margin: 1.2rem 0 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(10px, 0.75vw, 12px);
  line-height: 1.3;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
}

/* ============================================================
   01.5 — WHY SCIENCE OF WATER? — Stuart's source-of-truth build (zip: sow-cover-s2-why-
   science-of-water-current). Layout / copy / colors / gradient / spacing / weights / sizes are
   the zip's index.html+styles.css EXACTLY. FONT is Cabin per Stuart's explicit instruction —
   the zip README says "Montserrat only"; flagged, one-line swap. Vars scoped to .sow-purpose so
   the zip's --aqua (#00aecd) / --sand (#f7efe3) don't clobber the rest of the SOW palette.
   ============================================================ */
.sow-purpose {
  --navy-soft: #172143;
  --aqua: #00aecd;
  --sand: #f7efe3;
  min-height: 690px;
  padding: 68px clamp(24px, 4vw, 48px) 62px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #e8f6fb 0%, #eef8f8 31%, #f4f5ee 66%, var(--sand) 100%);
  font-family: "Cabin", var(--sans);
  color: var(--navy);
}
.sow-purpose__inner { width: min(100%, 1120px); margin: 0 auto; }
.sow-purpose__header { width: min(100%, 1000px); margin: 0 auto; text-align: center; }
.sow-purpose__lead {
  margin: 0;
  color: var(--navy);
  font-family: "Cabin", var(--sans);
  font-size: clamp(29px, 2.25vw, 40px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.sow-purpose__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 82px);
  margin-top: 48px;
  text-align: left;
}
.sow-purpose__column { display: grid; gap: 22px; align-content: start; }
.sow-purpose__column p {
  margin: 0;
  color: var(--navy-soft);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.66;
  letter-spacing: -.004em;
}
/* em bumped alongside the body (was 500 = same as the new body weight) */
.sow-purpose__column em { font-weight: 600; font-style: italic; }
.sow-purpose__column--right { grid-template-rows: auto 1fr; }
.sow-purpose__question { align-self: end; padding-top: 5px; }
.sow-purpose__question-label {
  margin: 0;
  color: var(--navy);
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .035em !important;
}
.sow-purpose__question-text {
  margin-top: 9px !important;
  color: var(--navy) !important;
  font-size: 21px !important;
  font-style: italic;
  font-weight: 500 !important;
  line-height: 1.48 !important;
  letter-spacing: -.012em !important;
  text-wrap: balance;
}
.sow-purpose__philosophy { margin: 38px auto 0; padding: 0; border: 0; text-align: center; }
.sow-purpose__philosophy p { margin: 0; }
.sow-purpose__philosophy p:first-child {
  color: var(--navy);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
}
.sow-purpose__philosophy p:last-child {
  margin-top: 5px;
  color: var(--aqua);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
}

/* ============================================================
   02 — MAXIMIZE YOUR GAINS — feature story
   Built from Stuart's ORIGINAL full-page design, not the VPP's approved-max-gains PNG (that
   renderer used a serif and invented its copy, so it is layout-reference only — superseded).
   Structure: light text panel on the left, then two image wedges (LAND | WATER) running to the
   right edge, each carrying its own label. Two parallel diagonals at ~20.5deg:
     d1 = text panel -> land      d2 = land -> water (the white seam)
   The optical trick lives on d2: the barbell's right 45 lb plate meets the line with its bar
   cropped away, and the noodle picks the line up on the water side.
   ============================================================ */
.myg {
  position: relative;
  overflow: hidden;
  /* Original design's band ratio. NO min-height: with aspect-ratio, a height floor makes the box
     grow its WIDTH to satisfy the ratio, which blew the band past the viewport and overflowed. */
  aspect-ratio: 941 / 350;
  background: #f7f7f5;

  /* Diagonal geometry — single source of truth. Every clip-path and the seam derive from these,
     so they cannot drift apart. Both diagonals share the same -13% run = parallel. */
  --d1-top: 40%;   /* text panel -> land */
  --d1-bot: 27%;
  --d2-top: 71%;   /* land -> water (white seam) */
  --d2-bot: 58%;
  --seam-w: 1.5px;

  /* Land image pan. --land-x and --d2 MUST move together: shift the seam without shifting the
     image and the line just slices the plate off (it is only ~90px wide on screen). */
  --land-x: 16.6%;
  --land-y: -34.3%;
  /* Water image pan. The noodle sits on the LEFT-centre of this photo, but the water panel shows
     the RIGHT of the band — with object-fit:cover there's no horizontal slack, so the seam only
     ever showed open water. Sized explicitly (like the land img) so it pans in BOTH axes to bring
     the noodle's entry to the seam. --water-scale >100% gives overflow to pan into. */
  /* Seam sits on source-x ~580 — just PAST the left hand (x280-520), so the fist is clipped into
     the land region and never shows. A short stretch of noodle meets the seam, shorts beyond. */
  /* Framed to feature the PERSON (source body ~x680-1120), not zoomed out — a smaller figure in a
     bigger bubble field reads MORE abstract, and low zoom leaves no room to pan the surface churn
     out of frame. Higher zoom = person prominent, churn excluded, panel fully covered. */
  --water-scale: 124%;
  --water-x: 41.4%;
  --water-y: -22.2%;
}

.myg__panel { position: absolute; inset: 0; }
.myg__panel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.myg__panel--land { clip-path: polygon(var(--d1-top) 0, var(--d2-top) 0, var(--d2-bot) 100%, var(--d1-bot) 100%); }
/* Sized explicitly rather than object-fit:cover, because cover leaves NO horizontal slack here
   (the band is wider than the source's 3:2, so cover crops vertically only and object-position X
   does nothing). height:179.3% reproduces cover's scale exactly at the 941/350 ratio — the image
   lands exactly band-width wide — while leaving left/top free to pan the plate onto the seam.
   Measured source coords: right plate ends x≈865, centre y≈420; bar runs on to x≈1050. */
.myg__panel--land img {
  position: absolute;
  width: auto;
  height: 173.9%;
  max-width: none;
  object-fit: fill;
  left: var(--land-x);
  top: var(--land-y);
}

.myg__panel--water { clip-path: polygon(var(--d2-top) 0, 100% 0, 100% 100%, var(--d2-bot) 100%); }
/* water-noodle-v2.jpg: explicitly sized + absolutely positioned so it pans in BOTH axes (cover
   couldn't pan horizontally, and the noodle lives on the left of the frame). --water-x/-y slide
   the noodle's entry onto the seam; --water-scale sets the zoom / pan room. Tuned by eye. */
.myg__panel--water img {
  position: absolute;
  width: auto;
  height: var(--water-scale);
  max-width: none;
  object-fit: fill;
  left: var(--water-x);
  top: var(--water-y);
}

/* Photo credit on the water/noodle shot (Stuart's own photograph — the land
   silhouette is not his, so only this panel is credited). Bottom-RIGHT: the
   water panel's clip-path runs `100% 0 → 100% 100%` on that side, so the right
   edge is full-height and the credit can't be clipped off by the diagonal.
   Sits above .myg__panel::after (z-index) and matches the page's other credits. */
.myg__panel--water .myg__credit {
  position: absolute;
  right: 12px;
  bottom: 9px;
  z-index: 2;
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.84);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* Label legibility. The land shot is already dark; the water shot is a bright pool, so its label
   needs real help. Clipped along with the panel, so the scrim never crosses the seam. */
.myg__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(2, 8, 16, 0.82) 0%, rgba(2, 8, 16, 0.3) 32%, rgba(2, 8, 16, 0) 58%);
}

.myg__seam {
  position: absolute;
  inset: 0;
  background: #ffffff;
  clip-path: polygon(
    calc(var(--d2-top) - var(--seam-w)) 0,
    calc(var(--d2-top) + var(--seam-w)) 0,
    calc(var(--d2-bot) + var(--seam-w)) 100%,
    calc(var(--d2-bot) - var(--seam-w)) 100%
  );
}

.myg__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1400px, calc(100% - 6rem));
  display: flex;
  align-items: center;
}
/* Must scale with the band, not sit at a fixed rem: the d1 diagonal is a % of width, so a fixed
   column stays put while the diagonal marches left as the viewport narrows — at 985px a flat
   20rem ran the body copy straight over the land image and into the LAND label.
   20rem matches the original design at ~1440; 22vw keeps the same gap to d1 below that. */
.myg__text { max-width: min(20rem, 22vw); }

/* section eyebrow — Montserrat 700, 12–15px, ls .16–.24em (cheat sheet §4). No rule under it in
   the original design — the aqua rule sits under the title instead. */
.myg__eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(11px, 0.85vw, 14px);
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}

/* Feature title — ANTON per the original design. Deviates from cheat sheet §4 (which specifies
   Montserrat 800 for a "primary section title" and reserves Anton for hero/article-hero/evidence),
   but the mockup is unambiguous and reads as a feature headline. Flagged with Stuart.
   Anton = Regular 400 ONLY, never bolded. Explicit family: styles.css h1,h2,h3 leaks var(--serif). */
.myg__title {
  margin: 0;
  font-family: var(--anton);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 72px);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--slate);
}

.myg__rule {
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--aqua);
  margin: clamp(1rem, 1.8vw, 1.5rem) 0;
}

/* secondary section title — Montserrat 700, 22–32px (cheat sheet §4) */
.myg__deck {
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 23px);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--slate);
}

/* body copy — Montserrat 500, 16–18px, lh 1.65–1.8 (cheat sheet §4 said 400;
   SOW Mag rule now sets reading copy at 500 — 400 reads too thin on screen) */
.myg__body {
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.7;
  letter-spacing: 0;
  color: #4a5a6a;
}

/* links — Montserrat 700, 14–17px, ls .02–.06em, uppercase (cheat sheet §4) */
.myg__link {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(11px, 0.9vw, 14px);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--aqf-blue);
}
.myg__link { transition: color .25s ease; }
.myg__link span { transition: transform 0.2s ease; display: inline-block; }
/* orange on hover, matching the research-collection links (Stuart) */
.myg__link:hover,
.myg__link:focus-visible { color: #ff6a00; }
.myg__link:hover span { transform: translateX(4px); }

/* ---- LAND / WATER labels, set inside their own image wedge ---- */
.myg__caption { position: absolute; bottom: 9%; max-width: 13rem; color: #fff; }
.myg__caption--land { left: 33%; }
.myg__caption--water { left: 64%; }

.myg__caption-rule {
  display: block;
  width: 2rem;
  height: 3px;
  background: var(--orange);
  margin-bottom: 0.7rem;
}
.myg__caption-title {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(16px, 1.9vw, 30px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.myg__caption-copy {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(10px, 0.95vw, 14px);
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Short-window squeeze (pairs with the compact-bar rules near the top of this file). Must sit
   after the base .sow-hero__inner rule to win — @media carries no extra specificity.
   At ~660px the hero has zero slack, so sub-pixel rounding alone rounds up into a 1px
   scrollbar. Buy it back from the cover's padding — never the title, which is at its 74px floor. */
@media (max-height: 700px) {
  .sow-hero__inner { padding-top: 1.1rem; padding-bottom: 0.9rem; }
}

@media (max-width: 900px) {
  .sow-hero__quote { position: static; width: auto; max-width: 26rem; margin: 2.4rem 0 0; }
  .sow-hero__qmark--close { text-align: left; }
  .sow-pillars { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 0; max-width: 460px; }
  .sow-pillar { border-left: none; padding-left: 0; }


  /* The plate/noodle alignment needs width to survive; below this the diagonals are abandoned and
     the section stacks: text, then each image followed by its own label (flex order, because the
     DOM order is images-then-text to keep the desktop paint order right).
     Desktop-first — refine once Stu signs off on the desktop composition. */
  .myg {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
  .myg__panel { position: relative; inset: auto; clip-path: none; }
  .myg__panel::after { display: none; }
  .myg__panel img,
  .myg__panel--land img {
    position: static;
    width: 100%;
    height: clamp(200px, 50vw, 300px);
    object-fit: cover;
    object-position: center;
  }
  .myg__seam { display: none; }
  .myg__inner,
  .myg__caption {
    position: static;
    transform: none;
    width: calc(100% - 3rem);
    max-width: none;
    margin-inline: auto;
  }
  .myg__inner { padding: 2rem 0; display: block; }
  .myg__text { max-width: none; }
  .myg__caption { padding: 1.2rem 0 1.8rem; color: var(--slate); }
  .myg__caption-copy { color: #4a5a6a; }

  .myg__inner { order: 1; }
  .myg__panel--land { order: 2; }
  .myg__caption--land { order: 3; }
  .myg__panel--water { order: 4; }
  .myg__caption--water { order: 5; }
}

/* Why-SOW section — the zip's own responsive breakpoint (stack the two columns) */
@media (max-width: 760px) {
  .sow-purpose { min-height: auto; padding: 64px 24px 60px; }
  .sow-purpose__body { grid-template-columns: 1fr; gap: 22px; margin-top: 38px; }
  .sow-purpose__question { padding-top: 10px; }
}

/* ============================================================
   SOW COVER · S4 — EXPLORE OUR RESEARCH COLLECTION
   Eddy's final editorial pass (v4), used verbatim and scoped
   under .research-collection so its generic selectors
   (.shell / .section-header / .eyebrow→.roc-eyebrow / bare a)
   and :root vars can't collide with site styles.css or the
   other .sow sections. Montserrat only. Assets live in
   assets/images/sow/research/. Design = the zip, unchanged.
   ============================================================ */
.research-collection {
  --navy: #000033;
  --body: #354057;
  --aqua: #00aeef;
  --aqua-dark: #007fa9;
  --rule: #bac6cf;
  --white: #ffffff;
  --feature-height: 360px;
  /* bottom padding raised from Eddy's 44px so the lower CTA row clears the
     section edge (Stuart: CTAs were sitting right at the bottom) */
  padding: 42px 0 74px;
  /* §4 gets its OWN cool pale blue-gray ground, distinct from §3's warm #f7f7f5
     full-bleed block — a deliberate "new chapter" separation, and it leans into
     the science-of-water feel + harmonizes with the navy/aqua/blue thumbnails
     (Stuart, editorial pass — chose over gradient/neutral/sand; deepened from
     the initial #eaf0f4 so it reads clearly as a separate cool panel) */
  background: #dce6ee;
  color: var(--body);
  font-family: "Montserrat", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.research-collection * { box-sizing: border-box; }
/* beat styles.css global h1,h2,h3{font-family:var(--serif)} */
.research-collection h2, .research-collection h3 { font-family: "Montserrat", Arial, sans-serif; }

.research-collection .shell { width: min(1780px, calc(100% - 86px)); margin: 0 auto; }

/* rule removed — §4's own cool ground does the separating now; a full-width
   hairline under the short label read template-y (Stuart's call). Spacing kept. */
.research-collection .section-header { margin-bottom: 30px; padding-bottom: 14px; }
.research-collection .section-header h2 { margin: 0; color: #008fb5; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }

.research-collection .research-grid { display: grid; grid-template-columns: minmax(630px, 2.85fr) repeat(4, minmax(195px, 1fr)); gap: 30px; align-items: start; }

.research-collection .featured-research { display: grid; grid-template-columns: minmax(260px, .88fr) minmax(320px, 1.12fr); gap: 28px; min-width: 0; height: var(--feature-height); }
.research-collection .featured-copy { display: flex; flex-direction: column; min-width: 0; height: 100%; padding-top: 2px; }
.research-collection .roc-eyebrow { margin: 0 0 18px; color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.15; letter-spacing: .07em; text-transform: uppercase; }
.research-collection .featured-copy h3 { margin: 0; color: var(--navy); font-size: clamp(27px, 1.55vw, 33px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; }
.research-collection .accent-rule { display: block; width: 38px; height: 3px; margin: 18px 0 17px; background: var(--aqua); }
.research-collection .feature-subtitle { margin: 0 0 14px; color: #007db7; font-size: 17px; font-weight: 700; line-height: 1.35; }
/* body copy 400->500 site-voice bump: 400 reads too thin on screen (Stuart,
   same call made on the Showing Up article) */
.research-collection .feature-summary { margin: 0; color: var(--body); font-size: 15px; font-weight: 500; line-height: 1.58; }
.research-collection .featured-copy a { margin-top: auto; }

.research-collection .featured-image { position: relative; height: var(--feature-height); margin: 0; overflow: hidden; background: #e8edf0; }
.research-collection .featured-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 44%; }
.research-collection .featured-image figcaption { position: absolute; right: 10px; bottom: 8px; color: rgba(255,255,255,.84); font-size: 10px; font-weight: 400; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.55); }

.research-collection .research-card { display: flex; flex-direction: column; min-width: 0; height: var(--feature-height); }
.research-collection .research-card > img { width: 100%; display: block; object-fit: cover; background: #07162d; }
.research-collection .card-water > img { height: 176px; object-position: center 50%; }
.research-collection .card-hypertrophy > img { height: 186px; object-position: center 43%; }
.research-collection .card-bfr > img { height: 172px; object-position: center 50%; }

/* Featured image is a link (Stuart) — descendant selector still styles the <img>;
   the anchor just needs to fill the figure. */
.research-collection .featured-image__link { display: block; width: 100%; height: 100%; }

/* ============================================================
   WHOLE-CARD LINK + COORDINATED HOVER (Stuart 2026-07-25)
   Every article (featured + all 4 cards) is fully clickable —
   image, copy, and headline. The "Read the Research" anchor is
   stretched over the whole card so the markup stays valid (no
   nested <a>), and hover moves several small things together
   rather than one loud effect: photo zooms inside a fixed frame,
   card lifts, headline goes orange, arrow slides. Restrained +
   coordinated = premium (Outside/Monocle article-card pattern).
   ============================================================ */
.research-collection .featured-research,
.research-collection .research-card {
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* stretched link: the existing text anchor covers the whole card.
   [href] — unbuilt articles have NO href at all (Stuart removed them), so they
   get no stretched link and no hover. A card that lifts invitingly and then
   goes nowhere reads BROKEN, not premium. When an article ships, add its href
   and the whole treatment turns on automatically. */
.research-collection .featured-copy > a[href]::after,
.research-collection .card-copy > a[href]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* the photo frame clips the zoom */
.research-collection .featured-image,
.research-collection .research-card > img,
.research-collection .research-card__imgwrap { overflow: hidden; }
.research-collection .featured-image img,
.research-collection .research-card > img {
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
/* --- hover state (fires from anywhere on the card) ---
   :has(a[href]) scopes every hover to cards that actually link somewhere, so
   unbuilt articles stay completely inert. Add an href and it turns on. */
.research-collection .featured-research:has(a[href]):hover,
.research-collection .research-card:has(a[href]):hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 51, .16);
}
.research-collection .featured-research:has(a[href]):hover .featured-image img,
.research-collection .research-card:has(a[href]):hover > img { transform: scale(1.04); }
.research-collection .featured-research:has(a[href]):hover h3,
.research-collection .research-card:has(a[href]):hover h3 { color: #ff6a00; }
.research-collection .featured-research:has(a[href]):hover a,
.research-collection .research-card:has(a[href]):hover a { color: #ff6a00; }
.research-collection .featured-research:has(a[href]):hover a span,
.research-collection .research-card:has(a[href]):hover a span { transform: translateX(4px); }
/* an <a> with no href isn't a link — mute it so it reads "coming soon" */
.research-collection a:not([href]) { color: var(--body); cursor: default; opacity: .55; }
/* headline + arrow need the transition declared on the base element */
.research-collection .featured-copy h3,
.research-collection .card-copy h3 { transition: color .25s ease; }
.research-collection a span { display: inline-block; transition: transform .25s ease; }
/* keyboard parity — same treatment when tabbing to the link */
.research-collection .featured-copy > a:focus-visible,
.research-collection .card-copy > a:focus-visible { outline: 2px solid #ff6a00; outline-offset: 3px; }
.research-collection .card-spinal > img { height: 182px; object-position: center 47%; }

.research-collection .card-copy { display: flex; flex-direction: column; flex: 1; padding-top: 15px; }
.research-collection .card-copy h3 { margin: 0 0 10px; color: var(--navy); font-size: 17px; font-weight: 700; line-height: 1.22; letter-spacing: -.02em; }
.research-collection .card-copy p { margin: 0; color: var(--body); font-size: 13px; font-weight: 500; line-height: 1.5; }
.research-collection .card-copy a { margin-top: auto; }

.research-collection a { color: var(--aqua-dark); font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; }
/* hover turns orange (Stuart) — matches the site's --orange #ff6a00; referenced
   directly since .research-collection scopes its own var block, no --orange here */
.research-collection a:hover, .research-collection a:focus-visible { color: #ff6a00; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1350px) {
  .research-collection .research-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-collection .featured-research { grid-column: 1 / -1; }
  .research-collection .research-card { height: auto; min-height: 360px; }
}
@media (max-width: 720px) {
  .research-collection .shell { width: min(100% - 34px, 640px); }
  .research-collection .research-grid { grid-template-columns: 1fr; }
  .research-collection .featured-research { grid-template-columns: 1fr; height: auto; }
  .research-collection .featured-image { height: 420px; }
  .research-collection .research-card { min-height: 0; }
  .research-collection .research-card > img { height: auto; aspect-ratio: 1 / 1; }
}

/* ============================================================
   SOW COVER · S5 — IN DEVELOPMENT (LOCKED)
   Eddy's final-lock package, used verbatim and scoped under
   .in-development so its generic selectors (.section-shell /
   .section-heading→.indev-heading / .card-copy / .card-overlay /
   etc.) and :root vars can't collide with the site or other .sow
   sections. (.section-heading collides HARD with styles.css — it
   forces max-width:820px + centered — hence the rename.) Montserrat
   only. Dark navy + Stuart's water-caustics photo; treatment values
   are the README's FINAL LOCK — do NOT alter. Assets in
   assets/images/sow/in-development/.
   ============================================================ */
.in-development {
  --navy: #001126;
  --navy-right: #04213a;
  --aqua: #00c9e8;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, .76);
  --card-line: rgba(104, 157, 184, .30);
  --paper: #f4f0e8;
  --paper-ink: #0b1734;
  --paper-body: #5a6474;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #031326;
  /* bottom raised from Eddy's 36px to balance the generous space above §5
     (§4 carries 74px bottom padding) — more room below the cards (Stuart) */
  padding: 30px 0 58px;
  border-top: 1px solid rgba(255, 255, 255, .24);
  border-bottom: 1px solid rgba(255, 255, 255, .27);
  color: var(--white);
  font-family: "Montserrat", Arial, sans-serif;
}
.in-development * { box-sizing: border-box; }
/* beat styles.css global h1,h2,h3{font-family:var(--serif)} */
.in-development h2, .in-development h3 { font-family: "Montserrat", Arial, sans-serif; }

/* Background stack (README FINAL LOCK): navy base + caustics photo + navy
   readability overlay + radial glows behind the cards. Do not alter values. */
.in-development::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: 0;
  background: url("../images/sow/in-development/water-caustics.jpg") center 44% / 165% auto no-repeat;
  opacity: .48;
  filter: saturate(.42) brightness(.40) contrast(1.42) blur(2px);
  transform: scale(1.035);
}
.in-development::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(32% 120% at 18% 54%, rgba(31, 123, 157, .18), transparent 72%),
    radial-gradient(34% 120% at 47% 54%, rgba(31, 123, 157, .13), transparent 74%),
    radial-gradient(34% 118% at 74% 54%, rgba(31, 123, 157, .09), transparent 74%),
    linear-gradient(90deg, rgba(1, 10, 24, .54) 0%, rgba(1, 13, 28, .48) 50%, rgba(2, 23, 41, .44) 100%);
}

.in-development .section-shell { position: relative; z-index: 3; width: min(1440px, calc(100% - 76px)); margin: 0 auto; }
.in-development .indev-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.in-development .heading-rule { width: 38px; height: 2px; background: var(--aqua); }
.in-development .indev-heading h2 { margin: 0; color: var(--white); font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.in-development .development-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 270px; gap: 18px; align-items: stretch; }
.in-development .development-card { position: relative; min-height: 185px; overflow: hidden; border: 1px solid var(--card-line); background: #071d34; }
.in-development .development-card img { position: absolute; inset: -2%; width: 104%; height: 104%; display: block; object-fit: cover; transform: scale(1.01); }
.in-development .card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 9, 22, .02) 0%, rgba(1, 9, 22, .28) 50%, rgba(1, 9, 22, .88) 100%); }
.in-development .card-copy { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; }
.in-development .card-copy h3 { margin: 0 0 7px; color: var(--white); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.in-development .card-copy p { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.in-development .stay-connected { min-height: 185px; padding: 22px 22px 20px; background: var(--paper); color: var(--paper-ink); display: flex; flex-direction: column; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.in-development .cta-icon { width: 38px; height: 38px; display: block; object-fit: contain; margin-bottom: 13px; }
.in-development .stay-connected h3 { margin: 0 0 10px; color: var(--paper-ink); font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: .025em; text-transform: uppercase; }
.in-development .cta-lead { margin: 0 0 9px; color: #2c3950; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.in-development .cta-body { margin: 0 0 14px; color: var(--paper-body); font-size: 11.5px; font-weight: 500; line-height: 1.45; }
.in-development .stay-connected a { align-self: flex-start; margin-top: auto; color: #008fae; font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; text-decoration: none; border-bottom: 1px solid rgba(0, 143, 174, .35); padding-bottom: 3px; }
/* Stay Connected CTA — orange on hover + arrow slide, matching the article-card
   and Max Gains link vocabulary. NOTE: href="#" until the mailing-list flow
   exists; kept visually active on purpose (it's a real CTA, just not wired yet). */
.in-development .stay-connected a { transition: color .25s ease, border-color .25s ease; }
.in-development .stay-connected a span { display: inline-block; transition: transform .25s ease; }
.in-development .stay-connected a:hover,
.in-development .stay-connected a:focus-visible { color: #ff6a00; border-color: #ff6a00; }
.in-development .stay-connected a:hover span { transform: translateX(4px); }
/* the whole tile lifts, echoing the research cards */
.in-development .stay-connected { transition: transform .25s ease, box-shadow .25s ease; }
.in-development .stay-connected:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}
/* heading + book icon go orange with the tile (Stuart). The icon is an external
   SVG loaded via <img>, so currentColor can't reach it — a filter recolours it
   to #ff6a00 instead (values solved for that hue/saturation/lightness). */
.in-development .stay-connected h3 { transition: color .25s ease; }
.in-development .stay-connected:hover h3 { color: #ff6a00; }
.in-development .cta-icon { transition: filter .25s ease; }
.in-development .stay-connected:hover .cta-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(93%) saturate(2280%) hue-rotate(1deg) brightness(103%) contrast(105%);
}

/* ---- Stay Connected email capture (Web3Forms) ---- */
.sow-signup { margin-top: auto; }
.sow-signup__hp { position: absolute; left: -9999px; }
.su-visually-hidden-label {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sow-signup__row { display: flex; gap: 7px; align-items: stretch; }
.sow-signup__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 51, .22);
  border-radius: 3px;
  background: #fff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--paper-ink, #0b1b33);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sow-signup__input::placeholder { color: rgba(0, 0, 51, .42); font-weight: 400; }
.sow-signup__input:focus {
  outline: none;
  border-color: #ff6a00;
  box-shadow: 0 0 0 2px rgba(255, 106, 0, .18);
}
.sow-signup__btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 3px;
  background: #008fae;
  color: #fff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s ease, transform .25s ease;
}
.sow-signup__btn span { display: inline-block; transition: transform .25s ease; }
.sow-signup__btn:hover:not(:disabled) { background: #ff6a00; }
.sow-signup__btn:hover:not(:disabled) span { transform: translateX(3px); }
.sow-signup__btn:disabled { opacity: .6; cursor: default; }
.sow-signup__note {
  margin: 7px 0 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(0, 0, 51, .55);
}
.sow-signup__msg {
  margin: 6px 0 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  min-height: 0;
}
.sow-signup__msg.is-ok { color: #0a7d52; }
.sow-signup__msg.is-error { color: #c0392b; }

@media (max-width: 1050px) {
  .in-development .development-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-development .stay-connected { min-height: 200px; }
}
@media (max-width: 650px) {
  .in-development .section-shell { width: min(100% - 34px, 620px); }
  .in-development .development-grid { grid-template-columns: 1fr; }
  .in-development .development-card, .in-development .stay-connected { min-height: 210px; }
}

/* ============================================================
   SOW COVER · S6 — EDITOR'S NOTE (final)
   Eddy composition; CENTER copy updated to the locked two-line
   statement (the reference PNG shows older wording — Stuart
   confirmed the copy). CABIN throughout (SOW editorial font;
   @font-face already in sow.css). Scoped under .editors-note.
   Renames: .eyebrow→.en-eyebrow (styles.css pill), .signature→
   .en-signature (styles.css has a full .signature component).
   Assets in assets/images/sow/editors-note/.
   ============================================================ */
.editors-note {
  --navy: #06162f;
  --navy-deep: #020d20;
  --aqua: #00c9e8;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, .72);
  --divider: rgba(255, 255, 255, .20);
  width: 100%;
  min-height: 205px;
  display: grid;
  grid-template-columns: 22% 40% 38%;
  overflow: hidden;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, .24);
  border-bottom: 1px solid rgba(255, 255, 255, .24);
  font-family: "Cabin", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.editors-note * { box-sizing: border-box; }
/* beat styles.css global h1,h2,h3{font-family:var(--serif)} */
.editors-note h2 { font-family: "Cabin", Arial, sans-serif; }

.editors-note .identity-panel { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px 40px 22px 40px; background: linear-gradient(90deg, var(--navy-deep) 0%, var(--navy) 100%); }
.editors-note .identity-panel::after { content: ""; position: absolute; top: 24px; bottom: 24px; right: 0; width: 1px; background: var(--divider); }
.editors-note .en-signature { width: 128px; height: auto; display: block; margin: 0 0 8px; filter: brightness(0) invert(1); opacity: .94; }
.editors-note .identity-copy p { margin: 0; }
.editors-note .name { color: var(--white); font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; }
.editors-note .student { margin-top: 4px !important; color: var(--aqua); font-size: 14px; font-style: italic; font-weight: 500; line-height: 1.2; }
.editors-note .role { margin-top: 5px !important; color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.25; }

.editors-note .note-panel { display: flex; flex-direction: column; justify-content: center; padding: 26px 34px 24px 42px; background: var(--navy); }
.editors-note .en-eyebrow { margin: 0 0 12px; color: var(--aqua); font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.editors-note .note-panel h2 { margin: 0; font-size: clamp(25px, 2.15vw, 34px); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
.editors-note .note-panel h2 span { display: block; }
.editors-note .line-one { color: var(--white); }
.editors-note .line-two { margin-top: 4px; color: var(--aqua); }

.editors-note .sunset-panel { position: relative; min-height: 205px; margin: 0; overflow: hidden; background: var(--navy); }
.editors-note .sunset-panel::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--navy) 0%, rgba(6, 22, 47, .66) 16%, rgba(6, 22, 47, .18) 40%, rgba(6, 22, 47, 0) 62%); }
/* absolute so the photo can't drive the section height (a tall phone photo in
   normal flow was forcing ~360px) — it now crops into the short band via cover */
.editors-note .sunset-panel img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 52%; }
.editors-note .sunset-panel figcaption { position: absolute; right: 11px; bottom: 8px; z-index: 2; color: rgba(255, 255, 255, .82); font-size: 10px; font-weight: 400; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }

@media (max-width: 900px) {
  .editors-note { grid-template-columns: 28% 44% 28%; }
  .editors-note .identity-panel { padding-left: 28px; }
  .editors-note .en-signature { width: 104px; }
  .editors-note .note-panel { padding-left: 30px; padding-right: 24px; }
}
/* TABLET (681-900): three columns squeeze the sunset photo to ~211px — it needs
   real width to read. Go two-row: identity + note share the top row, the photo
   spans full width beneath it (Stuart: sunset shot was getting crushed). */
@media (max-width: 900px) and (min-width: 681px) {
  .editors-note {
    grid-template-columns: 34% 66%;
    grid-template-rows: auto auto;
  }
  .editors-note .sunset-panel {
    grid-column: 1 / -1;
    min-height: 240px;
  }
  .editors-note .sunset-panel::before {
    /* side-to-side scrim was for a narrow column; full-width wants a softer left wash */
    background: linear-gradient(90deg, var(--navy) 0%, rgba(6, 22, 47, .55) 12%, rgba(6, 22, 47, .12) 34%, rgba(6, 22, 47, 0) 55%);
  }
}
@media (max-width: 680px) {
  .editors-note { grid-template-columns: 1fr; }
  .editors-note .identity-panel::after { display: none; }
  .editors-note .identity-panel, .editors-note .note-panel { padding: 24px 26px; }
  .editors-note .sunset-panel { min-height: 190px; }
}