/* ============================================================
   THE PROPERTIES OF WATER — Science of Water article
   Built 2026-07-30 from Eddy's sequential visual reference v2.

   SOURCE-OF-TRUTH ORDER (Stuart + the package README):
     1. the package's index.html = the COPY. Verbatim, including the
        four real citations with DOI/PMID. The renderer PNGs show a
        DIFFERENT, invented citation set — do not use those.
     2. the renderer PNGs = ART DIRECTION ONLY (sequence, scale,
        contrast, rhythm, the notebook Field Note idea).
   Stuart: "if there is no reference guide then the html is the truth
   for copy… then it becomes image placement, icons scrims and so on."

   FONTS follow the site's SOW rules, NOT the renderer's:
     Anton               display headings
     Cabin               the Founder Field Note (editorial voice)
     Montserrat          everything else
     Libre Baskerville   PULL QUOTES ONLY
   @font-face is document-global, so these also serve the shared
   nav/footer from styles.css on this page.
   ============================================================ */

@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;
}
@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; 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-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@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;
}

.pow {
  /* --navy is Stuart's measured site dark, NOT #000033 — see
     [[reference_sow_navy_color]]. */
  --navy: #061426;
  --navy-deep: #04101d;
  --aqua: #00aeef;
  --aqua-soft: #7fd1f0;
  --orange: #f7931f;
  --paper: #f6f8fa;
  --sand: #efe8dc;
  --ink: #0d1b2a;
  --ink-soft: rgba(13, 27, 42, 0.74);
  --rule: rgba(13, 27, 42, 0.14);

  --sans: "Montserrat", Arial, sans-serif;
  --display: "Anton", Impact, sans-serif;
  --editorial: "Cabin", Georgia, serif;
  --quote: "Libre Baskerville", Georgia, serif;

  --measure: 68ch;
  --pad-x: clamp(20px, 5vw, 64px);

  font-family: var(--sans);
  color: var(--ink);
  background: #fff;
}

.pow .section-pad {
  padding-block: clamp(64px, 9vw, 128px);
}
.pow .pow-inner {
  width: min(100% - (var(--pad-x) * 2), 1180px);
  margin-inline: auto;
}

/* ---- shared editorial atoms -------------------------------------------- */
.pow-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: clamp(0.7rem, 0.62vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aqua-soft);
}
.pow-eyebrow span { opacity: 0.5; }

.pow-rule {
  width: 54px;
  height: 3px;
  background: var(--orange);
  border: 0;
  margin: 0 0 26px;
}

/* ============================================================
   01 · HERO
   Water-led, per the renderer: the photograph carries the right
   two-thirds and the type sits in a navy field on the left.

   The source photo is 1920x525 — a 3.66:1 letterbox. It cannot
   fill a tall hero on its own, so it is a LAYER pinned to the
   right rather than a background-cover on the whole section.
   That keeps the surface caustics at native scale instead of
   upscaling them into mush.
   ============================================================ */
.pow-hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: clip;             /* clip, not hidden — never block sticky */
  isolation: isolate;
}
/* IMAGE LEFT, TITLE RIGHT (Stuart, 2026-07-31: "flip the pow hero to be on the
   left and title on the right, since most pages are built title left-img
   right"). Deliberately the mirror of the site's usual hero so this article
   reads as its own thing rather than another variation of the same layout. */
.pow-hero__media {
  position: absolute;
  inset: 0 auto 0 0;
  width: 62%;
  z-index: 0;
}
.pow-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
/* Horizontal scrim: solid navy under the type, dissolving before the
   image's own detail begins. Ends at 78% so the caustics on the far
   right stay at full colour — the mistake on the services hero was a
   veil across the WHOLE frame, which kills hue, not just brightness. */
.pow-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 270deg — mirrored with the image. Solid navy under the type on the RIGHT,
     dissolving to nothing by 78% so the caustics on the far LEFT keep full
     colour. A veil across the whole frame kills hue, not just brightness —
     that was the services-hero lesson. */
  background:
    linear-gradient(270deg,
      var(--navy) 0%,
      var(--navy) 30%,
      rgba(6, 20, 38, 0.86) 44%,
      rgba(6, 20, 38, 0.45) 60%,
      rgba(6, 20, 38, 0.12) 72%,
      rgba(6, 20, 38, 0) 78%);
}
.pow-hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - (var(--pad-x) * 2), 1180px);
  margin-inline: auto;
  padding-block: clamp(72px, 11vw, 150px);
}
/* pushed to the right column; the TEXT stays left-aligned for readability —
   only the block moves. */
.pow-hero__copy {
  max-width: min(560px, 92%);
  margin-left: auto;
}

.pow-hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.4vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 22px;
  text-shadow: 0 2px 18px rgba(4, 16, 29, 0.5);
}
.pow-hero__lede {
  font-family: var(--quote);      /* the ONE serif use here: it reads as a
                                     standfirst, matching the renderer */
  font-style: italic;
  font-size: clamp(1.12rem, 1.5vw, 1.42rem);
  line-height: 1.45;
  color: var(--aqua-soft);
  margin: 0 0 22px;
  max-width: 30ch;
}
.pow-hero__body {
  font-size: clamp(0.98rem, 1.02vw, 1.06rem);
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  max-width: 52ch;
}
.pow-hero__body sup { font-size: 0.66em; color: var(--aqua-soft); }

.pow-hero__pull {
  margin: 34px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--orange);
  font-family: var(--quote);
  font-style: italic;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  max-width: 34ch;
}

/* Credit: full-page hero => 11.52px / 600, per the site standard.
   See [[reference_photo_credit_type_standard]]. Lower-RIGHT default. */
.pow-hero .photo-credit {
  position: absolute;
  right: clamp(14px, 2.2vw, 26px);
  bottom: 18px;
  z-index: 3;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(4, 16, 29, 0.7);
}

/* --- hero, tablet + phone -------------------------------------------------
   Below 900px the copy needs the full width, so the image stops being a
   right-hand panel and becomes a top band with the type beneath it. */
@media (max-width: 900px) {
  .pow-hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(180px, 34vw, 260px);
  }
  .pow-hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(6, 20, 38, 0.10) 0%,
        rgba(6, 20, 38, 0.30) 55%,
        rgba(6, 20, 38, 0.88) 88%,
        var(--navy) 100%);
    inset: 0 0 auto 0;
    height: clamp(180px, 34vw, 260px);
  }
  .pow-hero__inner { padding-block: clamp(34px, 7vw, 56px) clamp(52px, 9vw, 72px); }
  /* stacked here, so the right-column push from the desktop layout is undone */
  .pow-hero__copy { max-width: 100%; margin-left: 0; }
  .pow-hero__lede, .pow-hero__body, .pow-hero__pull { max-width: 100%; }
  .pow-hero .photo-credit {
    /* sits on the image band, not the navy field below it */
    bottom: auto;
    top: calc(clamp(180px, 34vw, 260px) - 30px);
  }
}