/* ============================================================
   OCEAN GREENS — explainer / article pages
   Loads AFTER styles.css. Reuses its tokens, .nav, .btn,
   .reveal, .eyebrow and counter behaviour; adds a magazine-style
   reading layout wrapped in the brand's underwater language.
   ============================================================ */

/* ---------- READING HERO ---------- */
.rhero{
  position:relative;overflow:hidden;
  background:#02161c;
  padding:clamp(120px,16vw,180px) clamp(20px,5vw,64px) clamp(96px,12vw,150px);
}
.rhero__media{
  position:absolute;inset:0;z-index:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:saturate(1.05);
}
.rhero__depth{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(2,22,28,.86) 0%,rgba(2,22,28,.62) 42%,rgba(2,22,28,.2) 72%,rgba(2,22,28,0) 100%),
    linear-gradient(180deg,rgba(2,22,28,.4) 0%,transparent 30%,rgba(2,22,28,.96) 100%);
}
.rhero__rays{
  position:absolute;inset:-20% 0 0;z-index:1;pointer-events:none;
  background:
    linear-gradient(78deg,transparent 42%,#bdfff03d 49%,transparent 56%),
    linear-gradient(92deg,transparent 60%,#bdfff02e 66%,transparent 72%),
    linear-gradient(70deg,transparent 20%,#bdfff033 26%,transparent 33%);
  mix-blend-mode:screen;animation:rays 14s ease-in-out infinite alternate;transform-origin:top;
}
.rhero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.rhero__inner{position:relative;z-index:5;max-width:880px;margin-inline:auto}

.crumbs{
  font-family:var(--font-d);font-size:.8rem;letter-spacing:.04em;
  color:#9fc4bd;margin-bottom:26px;
}
.crumbs a{color:var(--aqua)}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.45;margin:0 9px}

.rhero h1{
  font-size:clamp(2.4rem,6vw,4.4rem);font-weight:800;color:#fff;
  max-width:18ch;margin-bottom:24px;
}
.rhero h1 .accent{
  background:linear-gradient(100deg,var(--lime),var(--aqua));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rhero__lead{
  font-size:clamp(1.08rem,1.8vw,1.34rem);color:#c4dbd6;max-width:56ch;line-height:1.6;
}

/* ---------- READER SURFACE ---------- */
.reader{
  position:relative;z-index:6;
  background:var(--paper);
  border-radius:36px 36px 0 0;
  margin-top:clamp(-72px,-7vw,-48px);
  padding:clamp(48px,7vw,88px) clamp(20px,5vw,64px) clamp(40px,6vw,72px);
}
.reader__wrap{max-width:720px;margin-inline:auto}
.reader__wrap .eyebrow{margin-bottom:18px}

.lede{
  font-family:var(--font-d);font-weight:500;
  font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.4;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:1.2em;
}

.prose{color:#21413c}
.prose > *{margin-bottom:1.15em}
.prose h2{
  font-family:var(--font-d);font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.1;
  margin-top:1.7em;margin-bottom:.5em;
}
.prose h3{
  font-family:var(--font-d);font-weight:700;color:var(--ink);
  font-size:clamp(1.2rem,2.3vw,1.45rem);margin-top:1.4em;margin-bottom:.3em;
}
.prose p,.prose li{font-size:1.08rem;line-height:1.75;color:#21413c}
.prose strong{color:var(--ink);font-weight:600}
.prose em{color:var(--kelp-dark);font-style:italic}
.prose a{color:var(--kelp-dark);font-weight:500;text-decoration:underline;text-decoration-color:#34a96a55;text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--kelp)}
.prose ul.bullets{display:grid;gap:.6em;margin:.4em 0 .4em}
.prose ul.bullets li{position:relative;padding-left:1.7em;font-size:1.08rem;line-height:1.65}
.prose ul.bullets li::before{
  content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;
  background:var(--kelp);box-shadow:0 0 0 4px #34a96a1f;
}

/* ---------- KPI BAND ---------- */
.kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin:2.2em 0;padding:clamp(24px,3vw,32px) 0;
  border-block:1px solid var(--line);
}
.kpi__num{
  font-family:var(--font-d);font-weight:800;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2rem,4.4vw,3.1rem);color:var(--kelp-dark);
}
.kpi__num.lime{color:var(--kelp)}
.kpi__label{margin-top:10px;font-size:.92rem;line-height:1.45;color:var(--ink-soft)}
@media (max-width:620px){.kpis{grid-template-columns:1fr;gap:22px}}

/* ---------- FACTS CALLOUT ---------- */
.facts{
  background:linear-gradient(165deg,#0a3a3f,#052a33);color:var(--paper);
  border-radius:var(--radius);padding:clamp(24px,3.5vw,34px);margin:2em 0;
}
.facts__tag{
  font-family:var(--font-d);font-weight:600;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);margin-bottom:18px;display:block;
}
.facts dl{display:grid;gap:18px}
.facts dt{font-family:var(--font-d);font-weight:700;font-size:1.18rem;color:#fff;margin-bottom:3px}
.facts dd{color:#bcd4cd;font-size:.98rem;line-height:1.55}

/* ---------- FIGURE ---------- */
.figure{margin:2.2em 0}
.figure__img{
  border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;
  background-size:cover;background-position:center;
  box-shadow:0 40px 80px -44px #04303a66;
}
.figure figcaption{
  margin-top:12px;font-size:.9rem;color:var(--ink-soft);
  padding-left:16px;border-left:3px solid var(--sand);
}

/* ---------- ASIDE / NOTE ---------- */
.aside{
  background:#e7efe6;border:1px solid var(--line);border-radius:var(--radius-s);
  padding:20px 22px;font-size:.98rem;color:var(--ink-soft);line-height:1.6;
}
.aside strong{color:var(--kelp-dark)}

/* ---------- FAQ ---------- */
.faq{margin-top:2.4em}
.faq h2{
  font-family:var(--font-d);font-weight:700;color:var(--ink);
  font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.3em;
}
.faq details{
  border-bottom:1px solid var(--line);padding:18px 0;
}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;
  font-family:var(--font-d);font-weight:600;font-size:1.12rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";color:var(--kelp);font-size:1.5rem;line-height:1;transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:#21413c;line-height:1.7}

/* ---------- CTA BAND ---------- */
.rcta{position:relative;overflow:hidden;background:var(--abyss);
  padding:clamp(56px,9vw,110px) clamp(20px,5vw,64px)}
.rcta__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.rcta__inner{position:relative;z-index:2;max-width:720px;margin-inline:auto;text-align:center}
.rcta .eyebrow{color:var(--lime);justify-content:center}
.rcta h2{font-family:var(--font-d);font-weight:800;color:#fff;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.05;margin-bottom:18px}
.rcta p{color:#c4dbd6;font-size:1.1rem;line-height:1.6;max-width:52ch;margin:0 auto 30px}
.rcta__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- RELATED ---------- */
.related{background:var(--deep);padding:clamp(48px,7vw,84px) clamp(20px,5vw,64px)}
.related__wrap{max-width:920px;margin-inline:auto}
.related .eyebrow{color:var(--aqua);margin-bottom:24px}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related__card{
  display:flex;flex-direction:column;gap:8px;
  background:#0a3a3f66;border:1px solid #ffffff14;border-radius:var(--radius-s);
  padding:22px 22px 26px;transition:transform .35s var(--ease),border-color .35s,background .35s;
}
.related__card:hover{transform:translateY(-4px);border-color:#5fe8d04d;background:#0a3a3fcc}
.related__card span{font-family:var(--font-d);font-weight:600;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime)}
.related__card strong{font-family:var(--font-d);font-weight:700;font-size:1.12rem;color:#fff;line-height:1.2}
.related__card em{font-style:normal;color:#9fbcb6;font-size:.92rem;line-height:1.5}
@media (max-width:760px){.related__grid{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
.rfoot{background:var(--abyss);color:#85a39c;
  padding:40px clamp(20px,5vw,64px);text-align:center;border-top:1px solid #ffffff10}
.rfoot a{color:var(--aqua)}
.rfoot__note{display:block;max-width:640px;margin:12px auto 0;font-size:.82rem;opacity:.7;line-height:1.5}