/* cvce.css — the stylesheet shared by the three root pages of the CVCE:
 * CVCE.html (landing: hero + entry-point slideshow), atlas_plates.html and
 * module_browser.html. Split out of CVCE.html on 2026-09-16 when the sections
 * below the hero became pages of their own. The navbar is styled by cvce-nav.css,
 * which the four tool pages share. Deployed to the site root by scripts/deploy/deploy_pages.sh. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #060d08;
  --surface:  #0b1a0d;
  --surface2: #0f2312;
  --border:   rgba(255,255,255,.07);
  --border-hi:rgba(255,255,255,.14);
  --text:     #dde8dd;
  --muted:    #7a9b7d;
  --accent:   #3cb54a;
  --accent2:  #C17A2E;
  --font:     'Archivo', -apple-system, "Segoe UI", sans-serif;

  /* Tech palette */
  --solar:        #eab308;
  --nuclear:      #0ea5e9;
  --batteries:    #f59e0b;
  --transmission: #06b6d4;
  --wind:         #3b82f6;
  --biofuel:      #84cc16;
  --electrolyzers:#a855f7;
  --geothermal:   #ef4444;
  --heatpumps:    #f97316;
  --magnets:      #ec4899;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.6;
  min-height: 100vh; overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 50% at 8% 6%,  rgba(60,181,74,.07)  0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 90% 80%, rgba(193,122,46,.06) 0%, transparent 55%),
    radial-gradient(ellipse 35% 35% at 55% 38%, rgba(60,181,74,.03) 0%, transparent 50%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.013) 1px, transparent 1px);
  background-size: 64px 64px;
}

.wrap { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 28px; }

/* ── HEADER ── */
header { padding: 64px 0 48px; border-bottom: 1px solid var(--border); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--accent); }
.eyebrow-badge {
  background: rgba(60,181,74,.12); border: 1px solid rgba(60,181,74,.3);
  border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 800; letter-spacing: .12em;
}
header h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.08; color: #fff; margin-bottom: 12px;
}
header h1 span { background: linear-gradient(135deg, var(--accent) 0%, #a8f5b1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.header-sub { font-size: 15px; color: var(--muted); max-width: 580px; line-height: 1.7; margin-bottom: 28px; }
.stats-row { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 28px; }
.stat-item { display: flex; flex-direction: column; gap: 2px; }
.stat-val { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; }
.stat-lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.stat-item.orange .stat-val { color: var(--accent2); }

/* ── SECTION ── */
section { padding: 52px 0 0; }
section:last-of-type { padding-bottom: 88px; }
.section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 24px; display: flex; align-items: center; gap: 12px;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.rp-sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.25); margin-bottom: 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── ENTRY POINTS ── */
/* Six equal columns-of-two: every entry point gets identical width, identical
   card treatment and an identical badge colour. Equal standing is the whole
   point of this grid — resist making any one of them visually dominant. */
.entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.entry-grid .flagship-card { height: 100%; }
.entry-grid .a-desc { font-size: 11.5px; }
.entry-updated { font-size: 11px; color: var(--muted); margin-top: 4px; letter-spacing: .02em; }
.entry-stat {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--accent2); text-transform: uppercase;
}

/* ── ENTRY-POINT THUMBNAILS ── */
/* One still of the thing each card opens, so the reader recognises the door
   instead of reading a paragraph to find it. Captured from the REAL pages by
   scripts/dev/capture_entry_thumbs.js — re-run it when a module's look changes,
   or these quietly become pictures of a site that no longer exists.

   The aspect box is fixed at 16:10 and every capture is clipped to 16:10, so the
   seven cards line up whatever their source page's shape. Do not set a height
   here: the ratio is what keeps the grid even when one card's text runs long. */
.a-thumb {
  display: block; position: relative;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: #0a1218;                      /* the shade the dark modules load on,
                                               so a slow image is not a white flash */
  border-bottom: 1px solid var(--border);
}
.a-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; opacity: .94; transition: opacity .25s, transform .25s;
}
/* A tint toward the card ground, so seven screenshots read as one grid rather
   than seven competing pictures. It lifts on hover, which is also the cue that
   the whole card is the target.
   ⚠️ Keep this NEUTRAL, not green. Five of the seven modules render dark and two
   render light (the Data Explorer table and the Quarto PC page); a green tint
   that flatters the dark five turns the light two olive, which reads as a
   degraded image rather than a light page. A plain darkening works on both. */
.a-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,18,24,.08) 0%, rgba(10,18,24,.42) 100%);
  transition: opacity .25s;
}
.flagship-card:hover .a-thumb img { opacity: 1; transform: scale(1.02); }
.flagship-card:hover .a-thumb::after { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  .a-thumb img { transition: opacity .25s; }
  .flagship-card:hover .a-thumb img { transform: none; }
}

/* ── ATLAS CARDS ── */
.atlas-2col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }
/* Three columns, one per way in: World, Country, Technology. Replaced the
   2-column grid plus a full-width tech strip on 2026-08-05, once every
   technology had a single integrated atlas to point at. The tech strip used to
   carry one link per country per technology — 29 links — because there was no
   one place to send a reader who wanted "Solar". Now there is. */
.atlas-3col { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; align-items: stretch; }
.atlas-3col > * { height: 100%; }
/* Tech rows mirror the country rows deliberately: the two columns answer the
   same question from opposite sides, so they should read the same way. */
.tech-list { display: flex; flex-direction: column; }
.tech-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 20px;
  border-bottom: 1px solid var(--border); text-decoration: none; transition: background .15s;
}
.tech-row:last-child { border-bottom: none; }
.tech-row:hover { background: rgba(255,255,255,.05); }
.tr-name { font-size: 13px; font-weight: 700; color: var(--tc); min-width: 96px; }
.tr-dots { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tr-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--tc); opacity: .85; }
.tr-arrow { font-size: 12px; font-weight: 800; color: var(--accent); }
.tech-row:hover .tr-arrow { transform: translateX(2px); }
.atlas-card, .flagship-card {
  background: var(--surface); border: 1px solid var(--border-hi);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: border-color .2s, transform .2s;
}
.atlas-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); }
.flagship-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); }
.a-header { padding: 20px 20px 14px; border-bottom: 1px solid var(--border); }
.a-badge {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; background: rgba(193,122,46,.12); color: var(--accent2);
  border: 1px solid rgba(193,122,46,.3); border-radius: 3px; padding: 2px 7px; margin-bottom: 10px;
}
.a-badge.green { background: rgba(60,181,74,.12); color: var(--accent); border-color: rgba(60,181,74,.3); }
.a-badge.wip { background: rgba(239,68,68,.10); color: #f87171; border-color: rgba(239,68,68,.3); }
.a-title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 6px; }
.a-desc { font-size: 12px; color: var(--muted); line-height: 1.65; }
.a-body { padding: 14px 20px; flex: 1; }
.a-sub { font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.a-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; }
.a-link {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--accent); text-decoration: none; padding: 6px 14px;
  border: 1px solid rgba(60,181,74,.3); border-radius: 5px; background: rgba(60,181,74,.08);
  transition: background .15s, border-color .15s;
}
.a-link:hover { background: rgba(60,181,74,.16); border-color: var(--accent); }
.a-link.orange { color: var(--accent2); border-color: rgba(193,122,46,.3); background: rgba(193,122,46,.08); }
.a-link.orange:hover { background: rgba(193,122,46,.16); border-color: var(--accent2); }

/* ── CASE CHIPS (Global Atlas) ── */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.case-chip {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; padding: 7px 10px; text-decoration: none;
  transition: all .15s;
}
.case-chip:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.chip-tech { font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.chip-country { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.65); }

/* compact one-line chips for the Global Atlas case grid */
/* auto-fill, not repeat(4, 1fr): four fixed columns are narrower than a chip like
   "Transmission Vietnam", so chips overflowed the card and were clipped at its edge
   (and reached 532px at a 400px viewport). Fixed 2026-09-16. */
.cases-grid.compact { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 5px; }
.cases-grid.compact .case-chip { flex-direction: row; align-items: baseline; gap: 5px; padding: 5px 8px; border-radius: 5px; }
.cases-grid.compact .chip-tech { font-size: 10px; font-weight: 800; }
.cases-grid.compact .chip-country { font-size: 10px; }

/* ── COUNTRY ATLAS LIST (compact, right column) ── */
.country-list { display: flex; flex-direction: column; }
.country-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.country-row:last-child { border-bottom: none; }
.country-row:hover { background: rgba(255,255,255,.05); }
.cr-name { font-size: 13px; font-weight: 700; color: #fff; min-width: 92px; }
.cr-techs { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cr-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cr-arrow { font-size: 12px; font-weight: 800; color: var(--accent); }
.country-row:hover .cr-arrow { transform: translateX(2px); }

/* ── PC / TOOL CARDS ── */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; }
.t-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px 18px; text-decoration: none;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, transform .15s;
}
.t-card:hover { border-color: var(--border-hi); transform: translateY(-1px); }
.t-icon { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.t-title { font-size: 13px; font-weight: 700; color: #fff; }
.t-sub { font-size: 11px; color: var(--muted); line-height: 1.5; }
/* Date stamp on a tool card. The PC grid is ordered newest-first, so the date
   is not decoration — it is what makes the ordering legible and checkable.
   The date is the document's CREATION date (first git add of its .qmd source),
   not its last render, so cards do not reshuffle on a re-render. */
.t-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.t-date { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.28);
          font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-new  { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
          color: var(--bg); background: var(--accent); border-radius: 3px; padding: 1px 5px; }

/* ── FOOTER ── */
.footer {
  position: relative; z-index: 1; margin-top: 60px;
  border-top: 1px solid var(--border); padding: 24px 28px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted);
}
.footer-links { display: flex; gap: 16px; }
.footer-links a { color: var(--muted); text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: var(--text); }

/* ── Browser grid ── */
#br-grid a:hover { transform: scale(1.03); }

@media (max-width: 980px) {
  .entry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .entry-grid { grid-template-columns: 1fr; }
  .atlas-2col { grid-template-columns: 1fr; }
  .atlas-3col { grid-template-columns: 1fr; }
  .kit-grid   { grid-template-columns: 1fr; }
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
  #br-grid    { grid-template-columns: 90px repeat(4,1fr); font-size:9px; }
}
/* ── Tech-level atlas rows (compacted 2026-08-05) ─────────────────────────
   One row per technology instead of one chip per country per technology. The
   --tc custom property carries the tech colour down to the chips so each row
   needs a single colour declaration rather than an inline style per link. */

/* ══ LANDING PAGE: navbar + hero/slideshow (2026-09-16 plan, Tasks 2 and 3) ══
   Appended rather than woven into the rules above, so the card and section
   styles the rest of the page still uses are untouched.
   The navbar's own rules live in cvce-nav.css (2026-09-17), shared with the four tools. */

/* ── HERO LEFT + SLIDESHOW RIGHT ── */
header { padding: 56px 0 44px; border-bottom: 1px solid var(--border); }
.hero-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
/* 2026-09-17: a bigger thumbnail. The hero widens past the 1100px column and gives the slideshow
   the larger share; the h1's two lines still fit the narrower left column at 1440px. */
#entry.hero-wrap { max-width: 1360px; grid-template-columns: 5fr 7fr; gap: 52px; }
.hero-left, .hero-right { min-width: 0; }
/* The h1 keeps its <br>, so the second line must fit a half-width column. */
.hero-left h1 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); }
.hero-left .header-sub { margin-bottom: 24px; }

#slideshow { position: relative; }
/* Hide nothing until the script has run, so with JavaScript off all seven entry
   points stack and remain reachable instead of six of them vanishing. */
.slide { display: block; }
/* Crossfade (2026-09-17): every slide sits in the same grid cell, so the box keeps the height of
   the tallest and nothing below it jumps; the inactive ones are transparent and unfocusable. */
#slideshow.is-js .slides { display: grid; }
#slideshow.is-js .slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
#slideshow.is-js .slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .7s ease, visibility 0s linear 0s;
}
#slideshow:not(.is-js) .s-controls { display: none; }

.s-thumb {
  display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: #0a1218; border: 1px solid var(--border); border-radius: 10px;
}
.s-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; opacity: .94; transition: opacity .25s, transform .25s;
}
/* Neutral tint, for the reason the old entry-card grid gives: five modules render
   dark and two light, so a green tint flatters the five and degrades the two. */
.s-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,18,24,.08) 0%, rgba(10,18,24,.42) 100%);
  transition: opacity .25s;
}
.s-thumb:hover img { opacity: 1; transform: scale(1.02); }
.s-thumb:hover::after { opacity: .35; }
.s-body { padding: 16px 2px 0; }
.s-title { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.2; margin: 8px 0 8px; }
.s-desc { font-size: 12.5px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }
.s-meta { border-top: 1px solid var(--border); padding-top: 10px; margin-bottom: 12px; }
.s-action {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent);
  text-decoration: none; line-height: 1.5; border-bottom: 1px solid rgba(60,181,74,.35); padding-bottom: 2px;
}
.s-action:hover { border-bottom-color: var(--accent); }
.s-arrow { font-weight: 700; }

.s-controls { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.s-nav {
  all: unset; cursor: pointer; width: 28px; height: 28px; border: 1px solid var(--border-hi);
  border-radius: 50%; text-align: center; line-height: 26px; color: var(--text); font-size: 15px;
}
.s-nav:hover, .s-nav:focus-visible { background: rgba(255,255,255,.06); outline: 1px solid var(--accent); }
.s-dots { display: flex; gap: 6px; }
.s-dot { all: unset; cursor: pointer; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
.s-dot:hover { background: rgba(255,255,255,.45); }
.s-dot.is-active { background: var(--accent); }
.s-count { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-left: auto; }

@media (max-width: 980px) {
  .hero-wrap, #entry.hero-wrap { grid-template-columns: 1fr; gap: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  #slideshow.is-js .slide, #slideshow.is-js .slide.is-active { transition: none; }
  .s-thumb img, .s-thumb::after { transition: none; }
  .s-thumb:hover img { transform: none; }
}
@media print {
  #slideshow.is-js .slides { display: block; }
  #slideshow.is-js .slide { display: block; opacity: 1; visibility: visible; }
  .s-controls { display: none; }
}

/* ── Entry-point pages: the section is the page, so it needs no top rule ── */
body.entry-page section { padding-bottom: 88px; }