/*
Theme Name: SLS Catalog
Theme URI: https://adrenaline-education.com/
Author: Sejal Learning Systems
Description: Course catalog theme — Theme > Specialization > Course, driven by the `catalog` taxonomy. Four templates cover the whole site: home, term archive (theme), term archive (specialization) and single course.
Version: 2.0.0
License: GPL-2.0-or-later
Text Domain: sls-catalog
*/

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN DIRECTION — "momentum"

   The brand story is source -> transformation -> destination, so the design
   carries forward motion. Energy comes from CONTRAST and PACE, not from noise:
   one saturated accent, a deep band that the page opens against, and section
   rhythm that alternates instead of repeating.

   The first version failed on three counts, all visible in a screenshot:
   the hero left half the fold empty, every section shared one rhythm, and the
   proof (266 courses) was whispered in small grey type. Each is addressed below
   and noted where it is fixed.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* one accent, two ranges: solid on light, luminous on dark */
  --green:#00843D;
  --green-dark:#026B32;
  --green-soft:#E9F4ED;
  --green-line:#C3E0CE;
  --green-bright:#2FD06E;      /* only ever on the dark band */
  --green-pale:#8FF3BC;

  /* the deep band the site opens against */
  --deep:#06231A;
  --deep-2:#0B3A26;

  --ink:#0C1A13;
  --body:#3A4741;
  --muted:#6C7A73;

  --paper:#FFFFFF;
  --surface:#F6F9F7;
  --line:#E2E8E4;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --shadow:0 1px 2px rgba(12,26,19,.04),0 10px 30px -12px rgba(12,26,19,.14);
  --shadow-lg:0 2px 4px rgba(12,26,19,.05),0 26px 60px -20px rgba(12,26,19,.28);
  --radius:14px;
  --radius-lg:20px;
  --wrap:1220px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:5px}

/* wider type scale: the old one moved 56 -> 38 -> 17 and read flat. */
h1,h2,h3{font-family:var(--serif);color:var(--ink);margin:0 0 .5em;font-weight:600;
  letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,70px);line-height:1.02}
h2{font-size:clamp(28px,4vw,44px);line-height:1.12}
h3{font-size:clamp(19px,2.1vw,24px);line-height:1.26;letter-spacing:-.012em}
p{margin:0 0 1.15em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap--narrow{max-width:840px}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--green);margin:0 0 14px}
.lead{font-size:clamp(18px,1.9vw,21px);line-height:1.55;color:var(--ink);max-width:64ch}
.muted{color:var(--muted)}

/* PACE — sections alternate weight instead of repeating one padding value */
.section{padding:88px 0}
.section--tight{padding:52px 0}
.section--surface{background:var(--surface);border-block:1px solid var(--line)}
.section--deep{background:var(--deep);color:#BFD8CA}
.section--deep h2,.section--deep h3{color:#fff}
.section--deep .lead{color:#CFE6D8}
.section--deep .eyebrow{color:var(--green-bright)}
.section--deep .muted{color:#9FBCAB}
/* The notify card has to survive on both grounds — it appears on paper on the
   course pages and on the deep band at the foot of the home page. */
.section--deep .notify{background:rgba(255,255,255,.05);border-color:rgba(143,243,188,.22)}
.section--deep .notify h3{color:#fff}
.section--deep .notify p{color:#BFD8CA}
.section--deep .notify input[type=email]{background:rgba(255,255,255,.07);
  border-color:rgba(143,243,188,.28);color:#fff}
.section--deep .notify input[type=email]::placeholder{color:#7FA292}
.section--deep .notify input[type=email]:focus{border-color:var(--green-bright);
  box-shadow:0 0 0 4px rgba(47,208,110,.18)}
.section--deep .btn--primary{background:var(--green-bright);color:var(--deep)}
.section--deep .btn--primary:hover{background:var(--green-pale);color:var(--deep)}

/* ── header ─────────────────────────────────────────────────────────────────
   The nav used to list all six subjects and wrapped onto a second line, which
   read as a broken layout. Subjects now live one click away in the catalog. */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;gap:18px;height:72px}
/* The wordmark is hyphenated, not dotted: "Adrenaline-Education" IS the domain,
   so the logo reads as the address you type. */
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:22px;
  font-weight:600;color:var(--ink);letter-spacing:-.03em;white-space:nowrap}
.brand:hover{color:var(--ink)}
.brand .logo{color:var(--green);flex:none}
.brand .dash{color:var(--green)}
/* The footer's other headings are tracked-out uppercase labels. Applying that to
   the brand pushed the hyphen apart into "ADRENALINE - EDUCATION", which reads as
   a separator rather than part of the name — so the brand keeps its own setting
   here and looks the same as it does in the header. */
.site-footer .foot__brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);
  font-size:20px;font-weight:600;letter-spacing:-.03em;text-transform:none;color:#fff}
.site-footer .foot__brand .logo{color:var(--green-bright);flex:none}
.site-footer .foot__brand .dash{color:var(--green-bright)}
.nav{display:flex;gap:8px;margin-left:auto;align-items:center}
.nav a{white-space:nowrap}
.nav a{font-size:15px;color:var(--body);font-weight:500;padding:9px 14px;border-radius:9px;
  transition:background .15s var(--ease),color .15s var(--ease)}
.nav a:hover{background:var(--surface);color:var(--ink)}
.nav .nav__cta{background:var(--green);color:#fff}
.nav .nav__cta:hover{background:var(--green-dark);color:#fff}

/* ── HERO, dark band ────────────────────────────────────────────────────────
   Fixes the two worst problems at once: the fold now has presence, and the
   empty right half carries the story device. */
/* BACKDROP — a green-duotoned macro of stacked page edges, sitting under the
   whole dark band. Legibility is won by the SCRIM, not by destroying the photo:
   the scrim is near-opaque on the left where the headline and lead sit, and
   opens up across the right where there is only the story device. An earlier
   attempt crushed the image everywhere instead, which killed the photography
   and still left the type doing the work. Verified with
   scripts/verify_hero_contrast.py, which samples the real rendered page. */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 520px at 78% 12%,rgba(47,208,110,.16),transparent 60%),
  linear-gradient(96deg,rgba(6,35,26,.97) 0%,rgba(6,35,26,.93) 30%,
    rgba(6,35,26,.60) 60%,rgba(6,35,26,.68) 100%),
  url(img/hero-backdrop.jpg) center/cover no-repeat,
  linear-gradient(158deg,var(--deep-2) 0%,var(--deep) 58%,#04180F 100%);
  color:#CFE6D8;padding:84px 0 0}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,243,188,.35),transparent)}
.hero .eyebrow{color:var(--green-bright)}
.hero .muted{color:#9FBCAB}
.hero h1{color:#fff}
.hero .lead{color:#CFE6D8;max-width:42ch}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:40px;align-items:center}
.hero__viz{display:flex;justify-content:center}
.heroviz{width:100%;max-width:520px;height:auto}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}

/* PROOF, promoted. It was 34px grey below the CTA; it is now the band that
   closes the hero, because it is the most persuasive thing on the page. */
.statbar{margin-top:56px;border-top:1px solid rgba(143,243,188,.18);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.statbar div{padding:26px 0 34px}
.statbar .n{font-family:var(--serif);font-size:clamp(38px,4.4vw,54px);line-height:1;
  color:#fff;display:block;letter-spacing:-.03em}
.statbar .l{font-family:var(--sans);font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-pale);margin-top:10px;display:block;opacity:.85}

/* interior pages get the same band, quieter */
.hero--page{padding:44px 0 58px;background:
  linear-gradient(96deg,rgba(6,35,26,.96) 0%,rgba(6,35,26,.93) 36%,
    rgba(6,35,26,.68) 68%,rgba(6,35,26,.74) 100%),
  url(img/hero-backdrop.jpg) center 34%/cover no-repeat,
  linear-gradient(158deg,var(--deep-2) 0%,var(--deep) 58%,#04180F 100%)}
.hero__mark{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:340px;height:340px;color:var(--green-bright);opacity:.10;pointer-events:none}
.hero__mark .glyph{width:100%;height:100%}
@media (max-width:1100px){.hero__mark{display:none}}
.hero--page h1{font-size:clamp(34px,4.6vw,54px)}
.hero--page .lead{max-width:60ch}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;
  padding:0 30px;border-radius:11px;font-family:var(--sans);font-size:16.5px;font-weight:600;
  border:1px solid transparent;cursor:pointer;
  transition:transform .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease)}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primary{background:var(--green);color:#fff;box-shadow:0 8px 20px -8px rgba(0,132,61,.6)}
.btn--primary:hover{background:#059447;color:#fff;box-shadow:0 14px 28px -10px rgba(0,132,61,.7)}
.hero .btn--primary{background:var(--green-bright);color:#04180F;
  box-shadow:0 10px 26px -8px rgba(47,208,110,.5)}
.hero .btn--primary:hover{background:#4ce088;color:#04180F}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--surface)}
.hero .btn--ghost{color:#DCEFE4;border-color:rgba(143,243,188,.35)}
.hero .btn--ghost:hover{background:rgba(143,243,188,.1);color:#fff}

/* ── availability pill ─────────────────────────────────────────────────── */
.card>.pill,.hero .pill{align-self:flex-start}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12px;
  font-weight:600;letter-spacing:.05em;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:var(--paper)}
.pill--live{color:var(--green-dark);border-color:var(--green-line);background:var(--green-soft)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill--live::before{background:var(--green);box-shadow:0 0 0 3px rgba(0,132,61,.16)}
.hero .pill{background:rgba(255,255,255,.08);border-color:rgba(143,243,188,.3);color:#BFD8CA}
.hero .pill--live{background:rgba(47,208,110,.16);border-color:rgba(47,208,110,.5);color:var(--green-pale)}

/* ── cards, with presence ──────────────────────────────────────────────── */
.grid{display:grid;gap:26px}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fill,minmax(430px,1fr))}
.card{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:28px;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--green-line)}
.card:hover::before{transform:scaleX(1)}
.card h3{margin:12px 0 8px}
.card h3 a{color:var(--ink)}
.card:hover h3 a{color:var(--green-dark)}
.card p{font-size:15.5px;margin-bottom:16px;color:var(--body)}
.card .meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;
  color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.card .go{margin-left:auto;font-weight:600;color:var(--green)}
.card:hover .go{color:var(--green-dark)}

/* subject cards carry a geometric mark so six tiles are not six identical ones */
.card--theme{background:linear-gradient(168deg,var(--green-soft) 0%,var(--paper) 52%)}
/* Raw book titles run long ("Inside Cyber How AI, 5G, IoT, and Quantum
   Computing Will Transform Privacy and Our Security"), and one of them sets the
   height of every card in its row. Clamping caps the row; the full title is on
   the course page. */
.card h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card--theme h3{min-height:2.4em;-webkit-line-clamp:2}
.card--theme .glyph{width:52px;height:52px;color:var(--green);opacity:.9}
.card--theme:hover .glyph{opacity:1}

/* ── the three-participant story ───────────────────────────────────────── */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;
  margin-top:8px}
.flow__step{position:relative;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px 30px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.flow__step:hover{border-color:var(--green-line);box-shadow:var(--shadow);transform:translateY(-3px)}
.flow__n{position:absolute;top:-17px;left:28px;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;background:var(--green);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:15px}
.flow__step .eyebrow{color:var(--green-dark)}
.flow__step h3{margin:2px 0 10px;font-size:25px;color:var(--ink)}
.flow__claim{font-family:var(--sans);font-weight:600;color:var(--green-dark);font-size:16px;
  line-height:1.35;margin:0 0 12px}
.flow__detail{font-size:15.5px;color:var(--body);margin:0}

/* ── provenance strip ──────────────────────────────────────────────────── */
.prov{border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;
  background:var(--surface)}
.prov__intro{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.prov__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.prov__list li{display:flex;flex-direction:column;gap:3px;padding-left:16px;
  border-left:3px solid var(--green-line)}
.prov__label{font-family:var(--sans);font-size:12px;color:var(--muted);letter-spacing:.04em}
.prov__name{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:600;line-height:1.2}
.prov__note{font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.45}

/* ── specialization path ───────────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:0}
.steps li{counter-increment:s;position:relative;padding:26px 26px 26px 78px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.steps li:hover{transform:translateX(4px);border-color:var(--green-line);box-shadow:var(--shadow)}
.steps li::before{content:counter(s);position:absolute;left:24px;top:26px;width:34px;height:34px;
  border-radius:10px;background:var(--green);color:#fff;font-size:15px;font-weight:700;
  display:grid;place-items:center;font-family:var(--sans)}
/* the connector that makes a list read as a path */
.steps li:not(:last-child)::after{content:"";position:absolute;left:41px;top:60px;bottom:-14px;
  width:2px;background:linear-gradient(var(--green-line),transparent)}
.steps h3{margin:0 0 6px;font-size:20px}
.steps .meta{font-size:13.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;
  align-items:center}

/* ── "what we did to the books" ────────────────────────────────────────── */
.build{margin:48px 0 0;padding:30px 32px;border-radius:var(--radius);
  background:linear-gradient(140deg,var(--green-soft),var(--paper));
  border:1px solid var(--green-line)}
.build h2{margin:0 0 10px}

/* ── course provenance ─────────────────────────────────────────────────── */
.source{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;
  margin:0 0 40px;padding:30px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius)}
.source__half p{font-size:15.5px;margin:0 0 10px}
.source__isbn{font-family:var(--sans);font-size:13px;color:var(--muted);margin:0}
.source__isbn span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3px 9px;
  margin-left:6px}

/* ── syllabus: a 22-item bullet list was the heaviest thing on the page ── */
.syllabus{margin:0 0 40px}
.syllabus ul{list-style:none;margin:0;padding:0;
  columns:2;column-gap:34px}
.syllabus li{break-inside:avoid;position:relative;padding:7px 0 7px 22px;font-size:15.5px;
  border-bottom:1px solid var(--line)}
.syllabus li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:7px;
  border-radius:2px;background:var(--green-line);transform:rotate(45deg)}
@media (max-width:760px){.syllabus ul{columns:1}}

/* ── notify ────────────────────────────────────────────────────────────── */
.notify{background:linear-gradient(150deg,var(--green-soft),var(--paper));
  border:1px solid var(--green-line);border-radius:var(--radius);padding:28px}
.notify h3{margin:0 0 8px;font-size:22px}
.notify p{font-size:15px;color:var(--body);margin-bottom:18px}
.notify form{display:flex;gap:10px;flex-wrap:wrap}
.notify input[type=email]{flex:1 1 240px;height:54px;padding:0 16px;border:1px solid var(--line);
  border-radius:11px;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper)}
.notify input[type=email]:focus{border-color:var(--green);outline:none;
  box-shadow:0 0 0 4px rgba(0,132,61,.14)}
.notify .ok{background:var(--green);border-radius:11px;padding:16px 18px;font-size:15.5px;
  font-weight:600;color:#fff}

/* The closing blocks used to be three boxes at three different widths, which
   left a ragged right edge down the page. They now share one grid. */
.closers{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:26px;align-items:start;margin-top:44px}
/* Theme pages have no notify form, so the grid would leave a dead column. */
.closers:has(> :only-child){grid-template-columns:minmax(0,820px)}
@media (max-width:900px){.closers{grid-template-columns:1fr}}

/* ── breadcrumbs / filters ─────────────────────────────────────────────── */
.crumbs{font-size:13.5px;color:rgba(207,230,216,.75);margin:0 0 22px;display:flex;gap:9px;
  flex-wrap:wrap}
.crumbs a{color:rgba(207,230,216,.75)}
.crumbs a:hover{color:var(--green-pale)}
.crumbs--light{color:var(--muted)}
.crumbs--light a{color:var(--muted)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 32px}
.chip{display:inline-flex;align-items:center;height:40px;padding:0 17px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);font-size:14.5px;color:var(--body);
  font-weight:500;transition:all .16s var(--ease)}
.chip:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-1px)}
.chip[aria-current="true"]{background:var(--green);border-color:var(--green);color:#fff}
.searchform{display:flex;gap:8px;margin-left:auto}
.searchform input[type=search]{height:40px;padding:0 16px;border:1px solid var(--line);
  border-radius:999px;font-size:14.5px;min-width:240px;font-family:var(--sans)}
.searchform input[type=search]:focus{border-color:var(--green);outline:none}

.prose{max-width:68ch}
.prose h2{margin-top:1.5em;font-size:clamp(24px,2.6vw,30px)}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.4em}
.empty{padding:64px 24px;text-align:center;color:var(--muted);background:var(--surface);
  border:1px dashed var(--line);border-radius:var(--radius)}

/* ── footer ────────────────────────────────────────────────────────────── */
.site-footer{background:var(--deep);color:#A9C6B6;padding:64px 0 40px;margin-top:0;font-size:15px}
.site-footer a{color:#DCEFE4}
.site-footer a:hover{color:var(--green-pale)}
.site-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.site-footer h4{font-family:var(--sans);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-pale);margin:0 0 14px;opacity:.85}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.powered{margin-top:44px;padding-top:24px;border-top:1px solid rgba(143,243,188,.15);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#8FA697;font-size:13.5px}

/* ── motion, kept understated ──────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);animation:rise .7s var(--ease) forwards}
  .rise:nth-child(2){animation-delay:.07s}
  .rise:nth-child(3){animation-delay:.14s}
  @keyframes rise{to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:12px}
  .hero__viz{max-width:300px;margin:8px auto 0}
  .hero .lead{max-width:none}
  .site-footer .cols{grid-template-columns:1fr}
  .section{padding:60px 0}
  .hero{padding-top:56px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  .nav a{padding:8px 10px;font-size:14px}
  .statbar div{padding:20px 0 24px}
}

/* ── narrow phones ─────────────────────────────────────────────────────────
   At 390px the brand plus three nav items wrapped onto a second line, which
   read as a broken header. Browsing is the one action worth keeping, so it
   takes the button and the other two links stand down. */
/* The scrim runs left-to-right because the desktop hero puts its text in the
   left column. On a phone the hero is one column and the text spans the full
   width, so that gradient hands its lightest end to the headline: measured, the
   home eyebrow fell to 4.9:1, clearing AA but with no margin worth trusting.
   Narrow screens get a uniform scrim instead. */
@media (max-width:760px){
  .hero{background:
    radial-gradient(700px 420px at 70% 8%,rgba(47,208,110,.14),transparent 60%),
    linear-gradient(180deg,rgba(6,35,26,.93) 0%,rgba(6,35,26,.90) 100%),
    url(img/hero-backdrop.jpg) center/cover no-repeat,
    linear-gradient(158deg,var(--deep-2) 0%,var(--deep) 58%,#04180F 100%)}
  .hero--page{background:
    linear-gradient(180deg,rgba(6,35,26,.93) 0%,rgba(6,35,26,.90) 100%),
    url(img/hero-backdrop.jpg) center 34%/cover no-repeat,
    linear-gradient(158deg,var(--deep-2) 0%,var(--deep) 58%,#04180F 100%)}
}

@media (max-width:640px){
  .brand{font-size:19px;gap:8px}
  .brand .logo{width:25px;height:25px}
  .site-header .bar{height:62px;gap:10px}
  .nav__subjects,.nav__cta{display:none}
  .nav .nav__browse{background:var(--green);color:#fff;padding:9px 15px}
  .nav .nav__browse:hover{background:var(--green-dark);color:#fff}
}