/* ============================================================================
   THE ARABS IN CUBA — styles.css
   ----------------------------------------------------------------------------
    1. Design tokens (:root)          — edit colours/fonts/spacing here
    2. Base & typography
    3. Fixed nav + hamburger overlay  (breakpoint 780px)
    4. Language system (.en / .es)    — 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 (CSS-drawn)
   12. Credits & footer
   13. Scroll reveal
   14. Responsive (≤780px)
   ========================================================================== */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --bg: #0a0a0a;
  --bg-raised: #121110;
  --text: #e9e3d7;
  --text-dim: #a79d8c;
  --accent: #c8a96e;               /* warm gold — matches original */
  --accent-deep: #8a6f3e;
  --line: rgba(200, 169, 110, 0.28);

  /* immersive panel — sits over full-bleed imagery */
  --panel-bg: rgba(8, 8, 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;
  --font-ar-display: 'Amiri', 'Noto Naskh Arabic', serif;
  --font-ar-body: 'Noto Naskh Arabic', 'Amiri', serif;

  --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); }

img { max-width: 100%; display: block; }

.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.6rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  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: 2.2rem;
  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.7rem;
  color: var(--text);
}
.nav-overlay a:hover { color: var(--accent); }
.nav-overlay .lang-toggle { margin-top: 1rem; }

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

/* inline runs inside a sentence/heading; tspan = the SVG map labels */
span.en, tspan.en { display: inline; }
span.es, tspan.es, span.ar, tspan.ar { display: none; }
html[data-lang="es"] span.es, html[data-lang="es"] tspan.es { display: inline; }
html[data-lang="es"] span.en, html[data-lang="es"] tspan.en,
html[data-lang="es"] span.ar, html[data-lang="es"] tspan.ar { display: none; }
html[data-lang="ar"] span.ar, html[data-lang="ar"] tspan.ar { display: inline; }
html[data-lang="ar"] span.en, html[data-lang="ar"] tspan.en,
html[data-lang="ar"] span.es, html[data-lang="ar"] tspan.es { display: none; }

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

/* ============================================================
   5. COVER — editorial masthead: bottom-anchored, left-aligned,
   eyebrow above an accent-italic title (Galicians treatment)
   ============================================================ */
.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;
  /* keeps the mosaic Cuba clear of the left-anchored masthead text */
  object-position: 72% 38%;
  z-index: 0;
}
html[data-lang="ar"] .cover-bg { object-position: 28% 38%; }
.cover-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(10,10,10,0.9) 18%, rgba(10,10,10,0.15) 75%),
    linear-gradient(to top, rgba(10,10,10,0.85) 8%, transparent 55%);
}
html[data-lang="ar"] .cover-scrim {
  background:
    linear-gradient(to left, rgba(10,10,10,0.9) 18%, rgba(10,10,10,0.15) 75%),
    linear-gradient(to top, rgba(10,10,10,0.85) 8%, transparent 55%);
}
.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 the tile artwork
   ============================================================ */
.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;
}
.divider-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.chapter-divider::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.55) 50%, rgba(10,10,10,0.95) 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(200, 169, 110, 0.22);
  user-select: none;
}
.chapter-info {
  border-left: 1px solid var(--line);
  padding-left: 1.8rem;
}
html[data-lang="ar"] .chapter-info {
  border-left: 0;
  padding-left: 0;
  border-right: 1px solid var(--line);
  padding-right: 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 — 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; }

.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.
   ============================================================ */
.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 — the outgoing image is never simultaneously
   half-transparent with the incoming one, which is what caused the dark
   "flash" through to the black backdrop mid-transition. */
.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; }

/* ------------------------------------------------------------
   DYNAMIC MAP SCENES — CURRENTLY UNUSED.
   The maps reverted to static images pending proper historical
   boundary data; maps.js / map-data.js are still in /site and
   these rules are kept so re-enabling is a one-line change.
   (built by maps.js from map-data.js)
   The scene root's data-frame attribute — stamped by scripts.js
   as panels scroll — decides which .m-state group is visible.
   ------------------------------------------------------------ */
.map-scene { background: #06080b; }

.map-water {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.water-mirror .map-water { transform: scaleX(-1); }

/* narrow screens: show the whole landscape composition instead of a crop
   (paired with preserveAspectRatio="meet", set in maps.js) */
.map-letterbox .map-water { object-fit: contain; }

.map-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

.map-svg .m-state {
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.sticky-scene[data-frame="0"] .m-state[data-state="0"],
.sticky-scene[data-frame="1"] .m-state[data-state="1"],
.sticky-scene[data-frame="2"] .m-state[data-state="2"],
.sticky-scene[data-frame="3"] .m-state[data-state="3"],
.sticky-scene[data-frame="4"] .m-state[data-state="4"],
.sticky-scene:not([data-frame]) .m-state[data-state="0"] {
  opacity: 1;
  pointer-events: auto;
}

/* map typography — sizes are in the 1920×1242 viewBox space */
.map-label {
  font-family: var(--font-body);
  font-size: 32px;
  fill: rgba(222, 220, 214, 0.55);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 4px;
  text-anchor: middle;
}
.map-label.bright { fill: #f2efe8; font-size: 34px; }
.map-label.small { font-size: 28px; }
.map-label.sea {
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0.2em;
  fill: rgba(222, 220, 214, 0.45);
}
.map-label.route {
  fill: rgba(255, 255, 255, 0.85);
  font-style: italic;
  font-size: 30px;
}
.map-label.city-major { font-size: 36px; text-anchor: end; }
.map-label.city-minor {
  font-size: 24px;
  text-anchor: start;
  fill: rgba(222, 220, 214, 0.65);
}

.map-year {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 600;
  fill: #ffffff;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 6px;
}
.map-legend {
  font-family: var(--font-body);
  font-size: 27px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 4px;
}

.map-route {
  fill: none;
  stroke: #ffffff;
  stroke-dasharray: 38 26;
  opacity: 0.92;
}

.map-city {
  fill: #ffffff;
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 2;
  cursor: pointer;
  transition: r 0.2s;
}

/* the district spotlight — softened so the cut reads as light falling off
   rather than a hard vector edge */
.map-spotlight { filter: blur(9px); }

/* non-interactive density markers (Havana businesses) */
.map-marker {
  fill: rgba(255, 255, 255, 0.92);
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 1.5;
}

.map-fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

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

/* 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 centred 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. This holds the background pinned
   until that text has travelled all the way to the top. */
.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; }

/* an image sitting inside a panel (e.g. the immigrants chart) */
.panel-inner img { margin-top: 1rem; }

/* ============================================================
   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); }

.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%);
}

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

/* ============================================================
   10. DATA TABLES
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.6;
}
.data-table caption {
  caption-side: top;
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.7rem;
}
.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;
}
.data-table td {
  padding: 0.4rem 0.8rem 0.4rem 0;
  border-bottom: 1px solid rgba(200,169,110,0.12);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; }

/* Arabic-script CELLS get the serif face for legible harakat/letterforms.
   Scoped to td so the column HEADING ("Arabic" / "Árabe") keeps the mono
   face shared by every other header. */
.data-table td.arabic {
  direction: rtl;
  text-align: right;
  font-family: 'Noto Naskh Arabic', 'Amiri', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.9;
}
/* header above the Arabic column — mono like its siblings, just right-aligned */
.data-table th.col-ar { text-align: right; }
.table-note {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* ============================================================
   11. CHARTS — drawn in CSS so they stay crisp and themable
   ============================================================ */
.bar-chart { margin: 1.4rem 0 0; }
.bar-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 3rem;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.bar-label { color: var(--text); }
.bar-track { background: rgba(200,169,110,0.1); height: 12px; }
.bar-fill {
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.visible .bar-fill { width: var(--pct); }
.bar-value { text-align: right; color: var(--text-dim); }

/* ============================================================
   12. CREDITS & FOOTER
   ============================================================ */
.credits { background: #000; padding: 3.5rem 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; }

/* 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(200,169,110,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);
}
.site-footer {
  background: #000;
  text-align: center;
  padding: 2.5rem var(--pad-x) 3rem;
  border-top: 1px solid rgba(200, 169, 110, 0.12);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

/* ---- series block: this site and its companion, galiciansincuba.com ---- */
.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; }

/* ============================================================
   12b. ARABIC (RTL) OVERRIDES
   html[dir] is flipped by scripts.js; these rules handle what
   direction alone can't: fonts, letter-spacing (which breaks
   Arabic letter joining and MUST be zeroed), and the accent
   borders that need to move to the other side.
   ============================================================ */
/* Arabic needs more optical size than Latin at the same nominal point size —
   Naskh letterforms carry their detail below the cap height, so 1rem Latin
   reads noticeably larger than 1rem Arabic. Everything Arabic is scaled up
   and given extra leading for the ascenders and dots. */
html[data-lang="ar"] body {
  font-family: var(--font-ar-body);
  font-size: 1.28rem;
  line-height: 2.15;
}
html[data-lang="ar"] .panel-inner { font-size: 1.16rem; line-height: 2; }
html[data-lang="ar"] .quote { font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.75; }
html[data-lang="ar"] .cover-subtitle { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
html[data-lang="ar"] .data-table { font-size: 0.95rem; }
html[data-lang="ar"] .bar-row { font-size: 0.92rem; }
html[data-lang="ar"] figcaption,
html[data-lang="ar"] .caption { font-size: 0.9rem; line-height: 1.95; }
html[data-lang="ar"] .credit-what { font-size: 0.86rem; }
html[data-lang="ar"] .credit-who { font-size: 1.35rem; }
html[data-lang="ar"] .chapter-label { font-size: 0.86rem; }
html[data-lang="ar"] html[data-lang="ar"] .nav-links a { font-size: 0.86rem; }
html[data-lang="ar"] .nav-title { font-size: 1.45rem; }
html[data-lang="ar"] .table-note { font-size: 0.9rem; }
html[data-lang="ar"] .site-footer { font-size: 0.88rem; }
html[data-lang="ar"] .lang-toggle button { font-size: 0.72rem; }
html[data-lang="ar"] .scroll-hint { font-size: 0.78rem; }
html[data-lang="ar"] .map-tooltip { font-size: 0.86rem; }
html[data-lang="ar"] h1,
html[data-lang="ar"] h2,
html[data-lang="ar"] h3,
html[data-lang="ar"] .quote,
html[data-lang="ar"] .nav-title,
html[data-lang="ar"] .cover-subtitle,
html[data-lang="ar"] .credit-who {
  font-family: var(--font-ar-display);
}

/* mono-styled chrome: Arabic glyphs come from Naskh, and tracking is
   removed so the letters connect correctly */
html[data-lang="ar"] .eyebrow,
html[data-lang="ar"] .chapter-label,
html[data-lang="ar"] .cover-eyebrow,
html[data-lang="ar"] .nav-links a,
html[data-lang="ar"] .scroll-hint,
html[data-lang="ar"] .quote-attr,
html[data-lang="ar"] figcaption,
html[data-lang="ar"] .caption,
html[data-lang="ar"] .credit-what,
html[data-lang="ar"] .table-note,
html[data-lang="ar"] .data-table,
html[data-lang="ar"] .bar-row,
html[data-lang="ar"] .site-footer,
html[data-lang="ar"] .map-tooltip {
  font-family: var(--font-ar-body);
  letter-spacing: 0;
}

/* accent borders swap sides */
html[data-lang="ar"] .quote {
  border-left: 0; padding-left: 0;
  border-right: 2px solid var(--accent); padding-right: 1.7rem;
}
html[data-lang="ar"] blockquote.inline-quote {
  border-left: 0; padding-left: 0;
  border-right: 2px solid var(--accent-deep); padding-right: 1.4rem;
}
html[data-lang="ar"] .panel-inner {
  border-left: 1px solid var(--panel-border);
  border-right: 2px solid var(--accent);
}
html[data-lang="ar"] .nav-links { margin-left: 0; margin-right: auto; }
html[data-lang="ar"] .data-table th,
html[data-lang="ar"] .data-table td { padding: 0.42rem 0 0.42rem 0.8rem; }
html[data-lang="ar"] .data-table caption { text-align: right; }

/* the SVG maps stay LTR internally; only their label glyphs change face */
html[data-lang="ar"] .map-svg { direction: ltr; }
html[data-lang="ar"] .map-label,
html[data-lang="ar"] .map-legend { font-family: var(--font-ar-body); }

/* ============================================================
   13. 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-cue { animation: none; }
  .sticky-bg .frames img { transition: none; }
}

/* ============================================================
   14. 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; }

  .data-table { font-size: 0.68rem; }
  .bar-row { grid-template-columns: 6.5rem 1fr 2.6rem; font-size: 0.66rem; }

  /* tables scroll horizontally rather than breaking the layout */
  .table-scroll { overflow-x: auto; }
}