/* ============================================================================
   THE GALICIANS IN CUBA — styles.css
   ----------------------------------------------------------------------------
   Sibling stylesheet to arabsincuba.com: same structure, same typography,
   different accent. Change --accent in the tokens block to restyle the green
   everywhere.

    1. Design tokens (:root)          — edit colours/fonts/spacing here
    2. Base & typography
    3. Fixed nav + hamburger overlay  (breakpoint 780px)
    4. Language system (.en / .gl)    — must stay display:block, NOT inline
    5. Cover
    6. Chapter dividers
    7. Prose column
    8. STICKY SCENES                  — pinned background, cross-fading frames,
                                        panels scrolling over the top
    9. Figures, galleries, captions
   10. Data tables
   11. Charts (canvas) & the escolas map
   12. Stat grid & pull quotes
   13. Credits & footer
   14. Scroll reveal
   15. Responsive (≤780px)
   ========================================================================== */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --bg: #0a0a0a;
  --bg-raised: #101210;
  --text: #e7e9e3;
  --text-dim: #9aa79f;
  --accent: #6fae95;               /* Atlantic green — the Galician counterpart
                                      to the Arabs site's warm gold */
  --accent-deep: #47705f;
  --line: rgba(111, 174, 149, 0.28);

  /* immersive panel — sits over full-bleed imagery */
  --panel-bg: rgba(8, 9, 8, 0.72);
  --panel-border: rgba(255, 255, 255, 0.07);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Libre Baskerville', Georgia, serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --nav-height: 60px;
  --measure: 40rem;                /* prose column width */
  --pad-x: clamp(1.25rem, 5vw, 3rem);
}

/* ============================================================
   2. BASE & TYPOGRAPHY
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

/* Every <img> in index.html carries width/height attributes so the browser can
   reserve the correct box before the bytes arrive. height:auto keeps them
   responsive; anything that genuinely needs a fixed height (.gallery img,
   .cover-bg, .divider-bg, .frames img) overrides this with a more specific
   rule. Without the reserved box a slow image renders as nothing at all
   rather than as an empty space, which is what made the heaviest figure look
   broken on phones. */
img { max-width: 100%; height: auto; display: block; }

em { font-style: italic; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}

.rule {
  width: 52px; height: 1px;
  background: var(--accent);
  border: 0;
  margin: 2.4rem 0;
  opacity: 0.65;
}

/* ============================================================
   3. FIXED NAV
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--nav-height);
  padding: 0 var(--pad-x);
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
}
.nav-title:hover { color: var(--accent); }

/* margin-left:auto pushes links + toggle right */
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--accent); border-bottom-color: var(--accent); }

.lang-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.15rem;
  flex-shrink: 0;
}
.lang-toggle button {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  background: none;
  border: 0;
  color: var(--text-dim);
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.lang-toggle button.active { background: var(--accent); color: #0a0a0a; }
.lang-toggle button:not(.active):hover { color: var(--text); }

.hamburger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 28px; height: 20px;
  position: relative;
  margin-left: auto;
  z-index: 320;
}
.hamburger span {
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: var(--text);
  transition: transform 0.3s, opacity 0.3s, top 0.3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }
.hamburger.open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 10, 10, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.9rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.nav-overlay.open { opacity: 1; visibility: visible; }
.nav-overlay a {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text);
}
.nav-overlay a:hover { color: var(--accent); }
.nav-overlay .lang-toggle { margin-top: 1rem; }

/* ============================================================
   4. LANGUAGE SYSTEM — EN / GL
   display:block is required — inline collapses vertical margins.
   Block elements, inline spans and tables each need their own
   display value, so each pair is declared per state.
   ============================================================ */
.en { display: block; }
.gl { display: none; }
html[data-lang="gl"] .gl { display: block; }
html[data-lang="gl"] .en { display: none; }

/* inline runs inside a sentence, heading, caption or <cite> */
span.en { display: inline; }
span.gl { display: none; }
html[data-lang="gl"] span.gl { display: inline; }
html[data-lang="gl"] span.en { display: none; }

li.en { display: list-item; }
li.gl { display: none; }
html[data-lang="gl"] li.gl { display: list-item; }
html[data-lang="gl"] li.en { display: none; }

table.en { display: table; }
table.gl { display: none; }
html[data-lang="gl"] table.gl { display: table; }
html[data-lang="gl"] table.en { display: none; }

/* ============================================================
   5. COVER — editorial masthead: bottom-anchored, left-aligned,
   eyebrow above an accent-italic title
   ============================================================ */
.cover {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: var(--nav-height) 0 9vh;
  overflow: hidden;
}
.cover-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* holds the Centro Gallego's tower clear of the left-anchored masthead */
  object-position: 62% 42%;
  z-index: 0;
}
/* The cover photograph is a sunlit white building, so the masthead needs a
   heavier scrim than a dark image would: a strong left wash for the title
   block, a bottom wash, and a light overall veil to pull the sky down. */
.cover-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(8,10,9,0.94) 12%, rgba(8,10,9,0.55) 52%, rgba(8,10,9,0.2) 85%),
    linear-gradient(to top, rgba(8,10,9,0.92) 4%, rgba(8,10,9,0.25) 45%, transparent 70%),
    rgba(8,10,9,0.22);
}
.cover-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad-x);
  max-width: 46rem;
}
.cover .eyebrow { margin-bottom: 1.2rem; }
.cover h1 {
  font-size: clamp(3rem, 7.5vw, 5.8rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
}
.cover h1 em {
  font-style: italic;
  color: var(--accent);
}
.cover-subtitle {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-style: italic;
  color: var(--text-dim);
}
.scroll-hint {
  position: absolute;
  bottom: 2rem; right: var(--pad-x);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.scroll-hint::after {
  content: '';
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollline 2s ease-in-out infinite;
}
@keyframes scrollline {
  0%, 100% { opacity: 0.3; transform: scaleY(0.5) translateY(-8px); }
  50%      { opacity: 1;   transform: scaleY(1)   translateY(0); }
}

/* ============================================================
   6. CHAPTER DIVIDERS — numeral + left-bordered label block
   over a dimmed band of archival imagery
   ============================================================ */
.chapter-divider {
  position: relative;
  min-height: 0;                       /* sized by its own padding, not the viewport */
  display: flex;
  align-items: center;
  padding: 4.5rem var(--pad-x);
  overflow: hidden;
}
/* Two levers control how bright a chapter divider reads: the image's own
   opacity, and the darkness of the gradient laid over it. Both were lifted
   about 10% on 2026-07-25 — raise opacity or lower the gradient's mid stop
   to go brighter still, but keep the h2 legible over the busiest plate
   (Chapter III, the stacked A Coruña quay photographs). */
.divider-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.33;
}
.chapter-divider::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(10,10,10,0.93) 0%, rgba(10,10,10,0.50) 50%, rgba(10,10,10,0.93) 100%);
}
.divider-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  max-width: 58rem;
}
.chapter-num {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1;
  color: rgba(111, 174, 149, 0.24);
  user-select: none;
}
.chapter-info {
  border-left: 1px solid var(--line);
  padding-left: 1.8rem;
}
.chapter-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.chapter-divider h2 {
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  font-weight: 500;
  text-shadow: 0 2px 22px rgba(0,0,0,0.85);
}

/* ============================================================
   7. PROSE COLUMN
   Everything in a prose section — text, figures, tables, charts —
   shares this one column so nothing staggers left/right.
   ============================================================ */
.prose {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 5rem var(--pad-x);
}
.prose > * + * { margin-top: 1.55rem; }
.prose h3 {
  font-size: 1.9rem;
  color: var(--accent);
  margin-top: 3rem;
}
.prose h3:first-child { margin-top: 0; }

/* Two .prose sections in a row would stack 5rem of bottom padding on 5rem of
   top padding: ~160px of blank column. That is right before a chapter divider
   but wrong between two paragraphs of continuous prose, where it reads as a
   mistake. Collapse the pair into a single deliberate gap, sized by what
   actually follows: a paragraph's worth when the prose just runs on, more when
   a new subsection opens with an <h3>. */
.prose + .prose { padding-top: 0; }
.prose:has(+ .prose) { padding-bottom: 0; }
.prose + .prose > *:first-child { margin-top: 2.4rem; }
.prose + .prose > h3:first-child { margin-top: 4.5rem; }

.prose ul {
  list-style: none;
  margin-top: 1.3rem;
}
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.95rem;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.85em;
  width: 8px; height: 1px;
  background: var(--accent);
}

/* PRIMER — the "What Galicia is" aside in the introduction. Set apart from the
   surrounding prose by hairlines and a slightly raised ground, so a reader who
   already knows the place can skip it and one who does not cannot miss it. */
.primer {
  margin: 3rem 0;
  padding: 2rem 1.9rem 1.8rem;
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.8;
}
.primer > * + * { margin-top: 1.1rem; }
.primer-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.primer-note {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(111, 174, 149, 0.18);
  color: var(--text);
}
.primer-note em { font-style: italic; color: var(--accent); }

.quote {
  padding-left: 1.7rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.1vw, 2rem);
  font-style: italic;
  line-height: 1.42;
}
.quote-attr {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}
blockquote.inline-quote {
  padding-left: 1.4rem;
  border-left: 2px solid var(--accent-deep);
  font-style: italic;
}
blockquote.inline-quote p + p { margin-top: 0.9rem; }

/* ============================================================
   8. STICKY SCENES
   ----------------------------------------------------------------
   Markup:
     <section class="sticky-scene">
       <div class="sticky-bg">
         <div class="frames">
           <img class="is-active" src="…">   ← frame 0
           <img src="…">                     ← frame 1
         </div>
       </div>
       <div class="sticky-panels">
         <div class="sticky-panel panel-left" data-frame="0">…</div>
         <div class="sticky-panel panel-left" data-frame="1">…</div>
       </div>
     </section>

   The background pins for the whole section while the panels scroll
   over it; scripts.js swaps .is-active so frames cross-fade in place
   instead of the images stacking vertically. Every .sticky-panel must
   be a direct child of .sticky-panels — panels outside it do not
   participate and break the pin.
   ============================================================ */
.sticky-scene { position: relative; }

.sticky-bg {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.sticky-bg .frames { position: absolute; inset: 0; }

/* Frames stack in DOM order, so a later frame paints over an earlier one.
   scripts.js keeps every frame up to the current one opaque and fades the
   new frame in on top of them, so the outgoing image is never simultaneously
   half-transparent with the incoming one. */
.sticky-bg .frames img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.sticky-bg .frames img.is-active { opacity: 1; }

/* "Fit to size" scenes — tall artwork (newspaper pages, documents) shown
   whole against the backdrop instead of cropped to fill. */
.sticky-bg .frames.fit img { object-fit: contain; }

/* caption pinned to the scene, bottom-right */
.scene-caption {
  position: absolute;
  bottom: 1rem; right: 1.4rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  max-width: 60%;
  text-align: right;
}

/* Panels pulled up over the pinned background.
   The trailing 50vh is runway: panel text sits centered in its 100vh block, so
   without it the section would release — and the page scroll on — while the
   last panel's text was still mid-screen. */
.sticky-panels {
  position: relative;
  margin-top: -100vh;
  padding-bottom: 50vh;
}

.sticky-panel {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--nav-height) var(--pad-x) 0;
}
.sticky-panel.panel-left   { justify-content: flex-start; }
.sticky-panel.panel-center { justify-content: center; }
.sticky-panel.panel-right  { justify-content: flex-end; }

.panel-inner {
  max-width: 27rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-left: 2px solid var(--accent);
  padding: 1.5rem 1.7rem;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-size: 0.94rem;
  line-height: 1.8;
}
.panel-inner p + p { margin-top: 0.85rem; }
.panel-inner.wide { max-width: 34rem; }

/* ============================================================
   9. FIGURES, GALLERIES, CAPTIONS
   ============================================================ */

/* figure inside the prose column — full column width, no offset */
.figure { margin: 2.6rem 0; }
.figure img { width: 100%; }
figcaption {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-align: center;
}

/* full-bleed figure — escapes the prose column edge to edge */
.figure-bleed {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.figure-bleed img { width: 100%; max-height: 100vh; object-fit: cover; }
.figure-bleed figcaption { padding: 0 var(--pad-x); }

/* documents and portraits shown whole rather than cropped */
.figure-bleed.contain img { object-fit: contain; background: #000; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3px;
  margin: 2.6rem 0 0.7rem;
}
.gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.3s, transform 0.5s;
}
.gallery img:hover { opacity: 0.9; transform: scale(1.02); }

/* gallery that spans wider than the prose column */
.gallery-wide {
  position: relative;
  left: 50%;
  width: min(100vw, 76rem);
  transform: translateX(-50%);
}

/* Documents and portraits of very different proportions shown side by side,
   whole rather than cropped. align-items:center stops a short wide item
   (a cigar band) from hanging off the top of a tall one (a portrait). */
.gallery.portraits {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.4rem;
  align-items: center;
}
.gallery.portraits img { object-fit: contain; height: auto; }

.caption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--text-dim);
  text-align: center;
}

/* ============================================================
   10. DATA TABLES
   ============================================================ */
.table-wrap { margin: 2.8rem 0; }
.table-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.table-scroll { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.6;
}
.data-table th {
  text-align: left;
  font-weight: 700;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-deep);
  padding: 0.45rem 0.8rem 0.45rem 0;
  vertical-align: bottom;
}
.data-table td {
  padding: 0.4rem 0.8rem 0.4rem 0;
  border-bottom: 1px solid rgba(111,174,149,0.12);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; }
.data-table td.td-null { color: var(--text-dim); }

/* the row the surrounding prose is actually talking about */
.data-table tr.emphasis td {
  color: var(--accent);
  background: rgba(111,174,149,0.06);
}

.table-source,
.table-note {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.75;
  color: var(--text-dim);
}

/* ============================================================
   11. CHARTS (canvas-drawn) & THE ESCOLAS MAP
   ============================================================ */
.chart-wrap { margin: 2.8rem 0; }
.chart-container { position: relative; }
.chart-container canvas { width: 100%; display: block; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.legend-item-chart { display: flex; align-items: center; gap: 0.5rem; }
.legend-swatch-chart { width: 14px; height: 2px; display: block; flex-shrink: 0; }
.legend-swatch-chart.galiza   { background: var(--accent); }
.legend-swatch-chart.canarias { background: var(--text-dim); }

.chart-tooltip {
  position: fixed;
  z-index: 400;
  background: rgba(8, 9, 8, 0.92);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.65rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}

/* the judicial-district choropleth, injected by map-escolas.js */
#escolas-map-svg svg { width: 100%; height: auto; display: block; }

/* ============================================================
   12. STAT GRID & PULL QUOTES
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2.5rem;
  margin: 3.2rem 0;
  padding: 2.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-cell { text-align: center; }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  line-height: 1;
  color: var(--accent);
}
.stat-label {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* a quote given its own full-width breath between sections */
.pull-quote {
  max-width: 46rem;
  margin: 5rem auto;
  padding: 0 var(--pad-x);
  text-align: center;
}
.pull-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.15rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--text);
}
.pull-quote cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================
   13. CREDITS & FOOTER
   ============================================================ */
.credits { background: #000; padding: 4rem var(--pad-x) 3rem; }
.credits-inner { max-width: var(--measure); margin: 0 auto; }
.credits-inner > * + * { margin-top: 1rem; }
.credits-inner p { font-size: 0.95rem; line-height: 1.7; }
.credits h2 { font-size: 1.8rem; color: var(--accent); margin-bottom: 1.4rem; }
.credits h3 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2.8rem;
}

.dedication {
  margin-top: 2.8rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(111,174,149,0.16);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--text-dim);
  text-align: center;
}

.source-list {
  list-style: none;
  margin-top: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.7;
}
.source-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(111,174,149,0.1);
  color: var(--text-dim);
}
.source-list li:last-child { border-bottom: 0; }
.source-list .author { color: var(--text); }

/* Two columns on wide screens so the credit list doesn't run long. */
.credit-list {
  list-style: none;
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 2.5rem;
}
.credit-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(111,174,149,0.1);
}
.credit-what {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-dim);
}
.credit-who {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
}

/* ---- footer, including the two-site series block ---- */
.site-footer {
  background: #000;
  padding: 2.5rem var(--pad-x) 3rem;
  border-top: 1px solid rgba(111,174,149,0.12);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-align: center;
}
.series {
  max-width: 46rem;
  margin: 0 auto 2.2rem;
}
.series-label {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.series-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 2.2rem;
}
.series-links a,
.series-links span.current {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
/* the site you are on is simply set bold — no label needed */
.series-links span.current { color: var(--text); font-weight: 600; }

/* ============================================================
   14. SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint::after { animation: none; }
  .sticky-bg .frames img { transition: none; }
}

/* ============================================================
   15. RESPONSIVE — 780px
   ============================================================ */
@media (max-width: 780px) {
  .nav-links { display: none; }
  .site-nav .lang-toggle { display: none; }
  .hamburger { display: block; }

  .prose { padding: 3.5rem var(--pad-x); }

  /* panels sit at the bottom of the frame on small screens */
  .sticky-panel,
  .sticky-panel.panel-center,
  .sticky-panel.panel-right { justify-content: center; align-items: flex-end; padding-bottom: 8vh; }
  .panel-inner, .panel-inner.wide { max-width: none; width: 100%; font-size: 0.88rem; }

  .gallery-wide { width: 100vw; }
  .quote { font-size: 1.3rem; }
  .pull-quote { margin: 3.5rem auto; }

  .data-table { font-size: 0.68rem; }
  .stat-grid { gap: 2rem; }
}