/* ============================================================
   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) ---- */
/* SITE CREDIT STANDARD, set 2026-07-29 — two treatments only:
     full-page hero  -> 11.52px / 600  (the site default credit)
     everything else -> 10px    / 400
   The cover hero measures 793px, 92% of a 860px viewport, so it is a
   full-page hero and takes the default size. Was clamp(10px,.75vw,12px)/400,
   which also meant the size drifted with viewport width — credits are chrome
   and should not scale. Flat px, deliberately.
   NOTE: showing-up.css used to pin its credit to "EXACTLY" this rule; that
   pairing is intentionally broken now — its hero is 654px / 76%, not
   full-page, so it stays at 10px/400. */
.sow-hero__credit {
  margin: 1.2rem 0 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.52px;
  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). */
  /* 12.5%, was 16.6% (Stuart, 2026-07-29). At 16.6% the right barbell plate's
     edge sat at 69.7% of band width while the seam at the plate's BOTTOM is only
     at 63.4% — so the -13% diagonal swept 91px across the plate and left it badly
     partial. The tablet block trims only ~17px of a 753px band, which Stuart
     approved; 12.5% reproduces that same proportion here (~32px at 1425px), so
     the plate reads whole and still touches the seam where the noodle picks up.
     Plate right edge = source x=841, measured off the PNG — NOT the 865 the
     comment below claims. */
  /* 13.2% (Stuart, 2026-07-29). The plate's right edge now sits ON the seam at the
     plate's mid-height, which balances the geometry: the -13% diagonal sweeps 63px
     horizontally across the plate's 179px height while the plate is only ~80px
     wide, so the seam MUST cut diagonally through it. Touching at the top and
     clearing at the bottom are mutually exclusive — centring splits the
     difference (~38px gap at the top, ~24px trimmed at the bottom). */
  --land-x: 14.5%;
  /* NOT raised to align the plate with the noodle. The plate centre sits 57px
     below the noodle centre, but lifting the land image 57px puts the figure's
     HEAD (source y~240) at -23px — decapitated. The water image is moved DOWN
     instead; see --water-y. */
  --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%;
  /* -11.5%, was -22.2% (Stuart, 2026-07-29): lowers the noodle 57px so its centre
     lines up with the barbell plate's centre, so the plate no longer reads as
     sitting too high beside it. Derived, not eyeballed — the noodle's tan mass
     (15,680px, source x 243-612) has its weighted centre at source y=417, i.e.
     38.6% of image height; on a 530px band that put it 57px above the plate
     centre. Moved the WATER rather than the LAND because raising the land image
     by 57px cuts the figure's head off (see --land-y above). */
  --water-y: -19.5%;
}

.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) {
  /* width:max-content, NOT auto (Stuart, 2026-07-29: "the closing quotation is
     out in right field" on tablet). .sow-hero__qfoot is a flex row with
     justify-content:space-between holding the rule and the closing mark. With
     `width:auto` the blockquote stretched to the full 26rem/416px regardless of
     how narrow the text is, so space-between threw the closing mark to the far
     right edge — 175px past where the sentence actually ends. Shrinking the
     block to its content puts the mark back at the end of the quote.
     This is the SAME bug the desktop rule was already written to avoid; the
     tablet override reintroduced it. max-width still caps it. */
  .sow-hero__quote { position: static; width: max-content; max-width: 26rem; margin: 2.4rem 0 0; }
  /* Nudge the closing mark clear of the copy. max-content sizes the block to the
     WIDEST line ("The value is not that", 195px), but the LAST line is shorter
     (182px) — so a flush-right mark started 12px BEHIND the end of the sentence
     and read as sitting under the final "e". 0.42em puts its ink just past the
     full stop, roughly mirroring the opening mark's offset from the left edge. */
  .sow-hero__qmark--close { transform: translate(0.42em, 0.12em); }
  .sow-pillars { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 0; max-width: 460px; }
  .sow-pillar { border-left: none; padding-left: 0; }

  /* PILLARS BEFORE THE QUOTE once stacked (Stuart, 2026-07-29, list item #2).
     On desktop the pillars sit bottom-LEFT and the quote bottom-RIGHT, so the eye
     takes the four pillars first. Below 900px they collapse into one column and
     DOM order (head -> quote -> pillars) put the quote first, inverting that
     reading order. `order` restores the desktop sequence without touching the
     markup, which the desktop paint order depends on.
     .sow-hero__inner is display:flex/column — see the base rule at line 91. */
  .sow-hero__head    { order: 1; }
  .sow-pillars       { order: 2; }
  .sow-hero__quote   { order: 3; }
  .sow-hero__credit  { order: 4; }
}

/* PHONE TITLE (Stuart, 2026-07-29, list item #3).
   The base rule is clamp(74px, min(6.2vw,10.4vh), 126px). At 390px the fluid
   term computes to 24px, so the 74px FLOOR wins and a phone was rendering the
   title at exactly the size a 768px tablet does — 6 lines, 426px tall, 38% of
   the hero, pushing the whole hero to 1129px (134% of the screen). The floor was
   written for desktop and has no business applying here.
   Anton stays Anton, 400, ls 0, uppercase — only the size changes. */
@media (max-width: 700px) {
  .sow-hero__title { font-size: clamp(34px, 10.6vw, 58px); }


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

/* ==========================================================================
   TABLET DEAD ZONE — 701px to 900px   (Stuart, 2026-07-29, list item #4)
   --------------------------------------------------------------------------
   The phone stack starts at 700px and the diagonal composition was tuned for
   desktop, so iPad portrait fell between them: desktop diagonals, but at 753px
   the 941/350 aspect gave the band only 280px of height while the text column
   needed 421px. Copy overflowed its own band onto the photos.
   Stuart wants the DESKTOP composition here, not the phone stack, so this block
   buys ROOM rather than re-laying out.

   ⚠️ WHICH VALUES SCALE AND WHICH DO NOT — the thing that cost several rounds:
     * `height` (land 173.9%) and every `--*-y` are percentages of BAND HEIGHT.
       They are ASPECT-INDEPENDENT and already reproduce the desktop crop at any
       band height. DO NOT override them here. An earlier pass divided all of
       them by 545/350 and broke the framing — grey gaps under both photos, the
       plate drifting off the seam, captions rendering invisible.
     * `--*-x` are percentages of WIDTH. These DO need adjusting, because this
       block changes the band's aspect ratio.
   ========================================================================== */
@media (min-width: 701px) and (max-width: 900px) {
  .myg { aspect-ratio: 941 / 545; }

  /* 24vw, not more. The text column sits left of --d1, which TAPERS as it
     descends: 294px of room at the top of the copy, 210px at the bottom. A
     fixed-width column must clear the NARROWEST point. Widening to 31vw looked
     fine beside the title and ran 65px into the land image beside the body.
     Note: narrowing does NOT help either — a narrower column is taller, so its
     bottom sits lower where the taper is worse. */
  .myg__text { max-width: min(20rem, 24vw); }
  .myg__caption { max-width: 13rem; }

  /* Captions re-pinned to the eased diagonals below. Their base 33%/64% were
     tuned to the -13% run; at -6% the boundaries move right at caption height,
     which left the LAND caption's first characters on the CREAM panel — and
     since the caption is white, INVISIBLE rather than clipped ("LAND" read as
     "AND"). Move these whenever --d1-bot / --d2-bot change. */
  .myg__caption--land  { left: 37%; }
  .myg__caption--water { left: 68%; }

  .myg {
    /* Ease the taper: both diagonals run -13% at desktop. At 1425px that costs
       the text column 185px across its height and still clears; at 753px the
       fixed 48px inset is 6.4% of the band (vs 3.4% at desktop), so the column
       is squeezed from both sides. -6% clears it and keeps the two diagonals
       PARALLEL, which the composition depends on. */
    --d1-top: 40%; --d1-bot: 34%;
    --d2-top: 71%; --d2-bot: 65%;

    /* X-PAN ONLY — derived, not eyeballed.
       The right barbell plate ends at source x=841, measured off
       land-silhouette.png by scanning rows for dark runs. (The long-standing code
       comment claiming x=865 is wrong by 24px — do not trust it.)
       Desktop reference, measured live at 1425x530: land scale 0.8999 puts the
       plate's right edge at 69.72% of band width; water scale 0.6084 puts source
       x=580 at 66.17%. Solving for those same two percentages at this block's
       aspect ratio gives the values below. */
    --land-x: -13.0%;
    --water-x: 27.6%;
  }
}

/* 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. */
/* CARD NO LONGER LIFTS (Stuart, 2026-07-29, list item #6).
   It used to `transform: translateY(-3px)` with a drop shadow. These cards have
   NO border and no filled background, so lifting them detached the copy from the
   page with nothing to hold it — "there is no border for the callout and it
   looks odd." Only the IMAGE moves now; the orange headline/arrow colour stays,
   which is what carries the affordance. Do not re-add the lift without giving
   the card a border or a surface first. */
.research-collection .featured-research:has(a[href]):hover,
.research-collection .research-card:has(a[href]):hover {
  transform: none;
  box-shadow: none;
}
.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; }

/* 15px, was 13px (Stuart, 2026-07-29) — "Read the Research" was the smallest
   thing in the card and it is the call to action. Applies at all widths. */
.research-collection a { color: var(--aqua-dark); font-size: 15px; 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; }

/* TOUCH DEVICES GET THE ORANGE BY DEFAULT (Stuart, 2026-07-29: "on phone &
   tablet nada, nothing, zilch").
   Every part of this card's treatment — orange headline, orange link, image zoom
   — hangs off :hover, which NEVER fires on a touch screen, so a phone or tablet
   saw a completely inert card. The image zoom genuinely cannot work without a
   pointer, but the colour can: on no-hover devices the orange CTA state becomes
   the RESTING state, so the link still reads as a link.
   The :not([href]) guard is repeated here on purpose — unbuilt articles have no
   href and must stay muted, not orange, or they read as live links. */
@media (hover: none) {
  .research-collection a { color: #ff6a00; }
  .research-collection a:not([href]) { color: var(--body); opacity: .55; }
  /* 18px tall measured — under the 32px minimum, and this is the card's primary
     call to action. Padded to ~40px, same treatment as the footer nav, the
     credibility-strip links and the Yelp link on index. Padding rather than
     line-height so the underline stays tight to the words. */
  .research-collection a[href] { display: inline-block; padding-top: 9px; padding-bottom: 13px; }
}

@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%; }
/* font-family is explicit, not inherited: this figcaption sits inside
   .editors-note, which is set in Cabin, so with no declaration the credit
   inherited Cabin while every other credit on the site is Montserrat. Same
   10px, but Cabin renders ~19% narrower per character, so it read visibly
   smaller than its siblings on desktop (Stuart, 2026-07-29) even though the
   measured font-size matched exactly. Credits are chrome, not editorial
   voice — they stay in --sans regardless of the section they sit in. */
.editors-note .sunset-panel figcaption { position: absolute; right: 11px; bottom: 8px; z-index: 2; font-family: var(--sans); 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; }
}

/* ==========================================================================
   TOUCH DEVICES — remaining hover-only link states   (Stuart, 2026-07-29)
   --------------------------------------------------------------------------
   Companion to the (hover: none) block up in the research-collection section.
   Stuart tested with Firefox touch simulation and found the orange working on
   "Explore Our Research Collection" but NOT on "Feature Story" — because that
   link is .myg__link with its own separate :hover rule, and "Stay Updated" is a
   third one again. On a touch screen none of them ever fire, so each needs its
   resting state to BE the orange.
   Placed at the END of the file deliberately: the .in-development rules live at
   ~line 1026, after the earlier touch block, so a rule there would lose.
   ========================================================================== */
@media (hover: none) {
  /* "READ THE FULL FEATURE" — Max Gains / Feature Story band.
     Padded to ~40px as well; it is an 18px tap target at rest like the others. */
  .myg__link {
    color: #ff6a00;
    display: inline-block;
    padding-top: 9px;
    padding-bottom: 13px;
  }

  /* NOTHING NEEDED for the In Development tile. It no longer contains an <a>:
     the old "Stay Updated" href="#" placeholder has been replaced by a real
     Web3Forms signup form, and .sow-signup__btn is a BUTTON with a filled
     background, which already reads as actionable without a hover state.
     (A rule targeting .stay-connected a was written here first and matched
     nothing — verified against the markup, not assumed.) */
}