@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500&family=Poppins:wght@500&display=swap');

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:    #0b1622;
      --deep:    #0e1d2c;
      --land:    #16304a;
      --border:  #1a3d5c;
      --arc:     #2563a8;
      --gold:    #c9902a;
      --gold-lt: #efc05a;
      --cream:   #ede5d4;
      --muted:   #7a8fa8;
      --grid:    #142840;
      --route-in:  #e2574c;   /* refugee arrival routes */
      --route-out: #4cc1bf;   /* onward-into-Europe routes */
      --route-blue: #4b8fe2;  /* central-Med crossing + Athens onward */
    }

    html, body {
      width: 100%; height: 100%;
      background: var(--navy);
      color: var(--cream);
      font-family: 'Inter', sans-serif;
      overflow: hidden;
    }

    #scene {
      position: fixed;
      inset: 0;
    }

    /* ── HEADER ── */
    header {
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 20;
      padding: 28px 40px 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      pointer-events: none;
    }
    .wordmark-link {
      display: block;          /* keep the scenes dropdown on its own line below the logo */
      width: fit-content;      /* but hug the logo so only it is clickable */
      pointer-events: auto;    /* header itself is pointer-events:none */
    }
    .wordmark-logo {
      display: block;
      height: 26px;
      width: auto;
      opacity: 0;
      animation: riseIn 1s 0.3s ease both;
    }
    .tagline {
      font-size: 0.62rem;
      font-weight: 300;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 8px;
      padding-left: 6px;   /* align "Global" under the "S" in the logo wordmark */
      opacity: 0;
      animation: riseIn 1s 0.55s ease both;
    }

    /* Nudge the header below the WordPress admin bar for logged-in users */
    body.admin-bar header { padding-top: 60px; }
    @media screen and (max-width: 782px) {
      body.admin-bar header { padding-top: 74px; }
    }

    /* ── STATE SELECTOR (dropdown by the tagline) ── */
    .state-selector {
      position: relative;
      display: inline-block;
      pointer-events: auto;   /* header itself is pointer-events:none */
    }
    .state-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
    }
    .state-toggle .tagline { margin-top: 8px; opacity: 1; animation: none; }
    .state-caret {
      width: 0; height: 0;
      margin-top: 9px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--muted);
      transition: transform 0.2s ease, border-top-color 0.2s ease;
    }
    .state-toggle:hover .state-caret { border-top-color: var(--gold-lt); }
    .state-selector.open .state-caret { transform: rotate(180deg); }

    .state-menu {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      min-width: 230px;
      list-style: none;
      background: rgba(10, 20, 32, 0.96);
      border: 1px solid var(--gold);
      border-radius: 6px;
      padding: 6px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(3px);
      display: none;
      z-index: 40;
    }
    .state-selector.open .state-menu { display: block; }
    .state-menu li {
      font-size: 0.62rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 9px 12px 9px 22px;
      border-radius: 4px;
      cursor: pointer;
      white-space: nowrap;
      position: relative;
    }
    .state-menu li:hover { background: rgba(255, 255, 255, 0.05); color: var(--cream); }
    .state-menu li[aria-selected="true"] { color: var(--gold-lt); }
    .state-menu li[aria-selected="true"]::before {
      content: '';
      position: absolute;
      left: 9px; top: 50%;
      width: 5px; height: 5px;
      margin-top: -2.5px;
      border-radius: 50%;
      background: var(--gold);
    }

    /* ── MAP ── */
    #map-wrap {
      position: absolute;
      inset: 0;
    }
    #map-svg { width: 100%; height: 100%; cursor: grab; }
    #map-svg:active { cursor: grabbing; }

    /* Borders/graticule stay crisp at any zoom. NB: do NOT apply this to the
       arcs — their draw-on animation relies on stroke-dasharray matching the
       path's geometric length, which non-scaling-stroke would break. */
    .graticule, .country { vector-effect: non-scaling-stroke; }

    .sphere   { fill: var(--deep); }
    .graticule { fill: none; stroke: var(--grid); stroke-width: 0.45; }
    .country  {
      fill: var(--land);
      stroke: var(--border);
      stroke-width: 0.35;
      transition: fill 0.25s ease, stroke 0.25s ease;
    }
    /* Countries lit up when a hub is hovered/clicked */
    .country.is-highlight {
      fill: #2b5a86;
      stroke: var(--gold-lt);
      stroke-width: 1.4;
      cursor: pointer;
    }
    /* The country whose callout is currently open */
    .country.is-selected {
      fill: #3a78ad;
      stroke-width: 1.9;
    }

    /* Invisible, generous hover/click target around each hub marker */
    .hub-hit { fill: transparent; pointer-events: all; cursor: pointer; }

    /* Hub → country connectors and country labels (shown on highlight) */
    .link-line {
      fill: none;
      stroke: var(--gold-lt);
      stroke-width: 1;
      stroke-dasharray: 2 2.5;
      vector-effect: non-scaling-stroke;
      pointer-events: none;
    }
    .link-dot { fill: var(--gold-lt); pointer-events: none; }
    .geo-label {
      font-family: 'Inter', sans-serif;
      font-size: 8.5px;
      font-weight: 500;
      fill: var(--cream);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      dominant-baseline: middle;
      pointer-events: none;
      /* dark halo so the name stays legible over any terrain */
      paint-order: stroke;
      stroke: rgba(10,20,32,0.92);
      stroke-width: 3px;
      stroke-linejoin: round;
    }

    /* Arcs */
    .arc-track {
      fill: none;
      stroke: var(--arc);
      stroke-width: 0.8;
      opacity: 0.2;
    }
    .arc-live {
      fill: none;
      stroke: var(--gold-lt);
      stroke-width: 1.3;
      stroke-linecap: round;
    }

    /* Refugee-crisis route arrows — filled tapered ribbons (wide → point) */
    .route-feeder, .route-cross, .route-out, .route-blue { stroke: none; }
    .route-feeder, .route-cross { fill: var(--route-in); }
    .route-out                  { fill: var(--route-out); }
    .route-blue                 { fill: var(--route-blue); }

    .entry-dot     { fill: var(--cream); }
    .transit-ring  { fill: none; stroke: var(--route-in); stroke-width: 1.4; }
    .entry-label   { fill: var(--cream); }
    .transit-label { fill: var(--cream); }
    .country-label { fill: var(--cream); font-size: 7px; font-weight: 400; opacity: 0.82; }

    /* Italy discipleship scene — dotted spokes + dots */
    .spoke {
      fill: none;
      stroke: var(--gold-lt);
      stroke-width: 1.2;
      stroke-linecap: round;
      stroke-dasharray: 1.5 3.5;
      vector-effect: non-scaling-stroke;
    }
    .spoke-dot { fill: var(--gold-lt); }
    .node-dot  { fill: var(--gold-lt); }
    .city-dot  { fill: var(--gold-lt); }
    .city-label { fill: var(--cream); font-size: 8px; font-weight: 500; }

    /* Apostolic Band — solid Italy→country arc, dotted "walking" route + dots */
    .apostolic-arc {
      fill: none;
      stroke: var(--gold-lt);
      stroke-width: 1.4;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }
    .walk {
      fill: none;
      stroke: var(--gold-lt);
      stroke-width: 1;
      stroke-linecap: round;
      stroke-dasharray: 0.5 3.5;   /* fine "footstep" dots */
      vector-effect: non-scaling-stroke;
    }
    .walk-dot { fill: var(--gold-lt); }

    /* Hub markers */
    .hub-glow  { fill: var(--gold-lt); }
    .hub-dot   { fill: var(--gold-lt); }
    .hub-ring  { fill: none; stroke: var(--gold-lt); stroke-width: 0.9; }

    /* Label cards */
    .hub-card  { }
    .card-bg   { fill: rgba(10,20,32,0.88); stroke: var(--gold); stroke-width: 0.6; }
    .card-stem { stroke: var(--gold); stroke-width: 0.7; opacity: 0.55; }
    .card-city {
      font-family: 'Inter', sans-serif;
      font-size: 8.5px; font-weight: 500;
      fill: var(--cream);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .card-region {
      font-family: 'Inter', sans-serif;
      font-size: 6.5px; font-weight: 300;
      fill: var(--gold);
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    /* ── COUNTRY CALLOUT ── */
    .callout {
      position: absolute;
      top: 0; left: 0;
      z-index: 30;
      width: 252px;
      max-width: calc(100vw - 28px);
      padding: 16px 18px 18px;
      background: rgba(10, 20, 32, 0.94);
      border: 1px solid var(--gold);
      border-radius: 6px;
      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(3px);
      color: var(--cream);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.2s ease, transform 0.2s ease;
      pointer-events: none;   /* closed */
    }
    .callout.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

    .callout-close {
      position: absolute;
      top: 8px; right: 10px;
      background: none; border: none; cursor: pointer;
      color: var(--muted);
      font-size: 1.1rem; line-height: 1;
      padding: 2px 4px;
    }
    .callout-close:hover { color: var(--cream); }

    .callout-title {
      display: inline-block;
      font-family: 'Inter', sans-serif;
      font-size: 0.95rem; font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold-lt);
      text-decoration: none;
      padding-right: 18px;   /* clear the close button */
      border-bottom: 1px solid transparent;
    }
    .callout-title:hover { border-bottom-color: var(--gold-lt); }

    .callout-stats {
      display: flex;
      gap: 22px;
      margin: 14px 0 4px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .callout-stat { display: flex; flex-direction: column; }
    .callout-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.7rem; font-weight: 600; line-height: 1;
      color: var(--gold);
    }
    .callout-stat-label {
      font-size: 0.55rem; font-weight: 400;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--muted);
      margin-top: 5px;
    }

    .callout-subhead {
      font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--muted);
      margin: 12px 0 8px;
    }
    .callout-projects ul { list-style: none; }
    .callout-projects li { margin: 0 0 6px; }
    .callout-projects li::before {
      content: '–';
      color: var(--gold);
      margin-right: 8px;
    }
    .callout-link {
      font-size: 0.82rem;
      color: var(--cream);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color 0.15s ease, border-color 0.15s ease;
    }
    .callout-link:hover { color: var(--gold-lt); border-bottom-color: var(--gold-lt); }

    /* ── ROUTE LEGEND (refugee state only) ── */
    .map-legend {
      position: absolute;
      left: 40px; bottom: 30px;
      z-index: 25;
      padding: 12px 16px;
      background: rgba(10, 20, 32, 0.88);
      border: 1px solid var(--border);
      border-radius: 6px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .map-legend.is-visible { opacity: 1; transform: translateY(0); }
    .legend-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--cream);
    }
    .legend-row + .legend-row { margin-top: 8px; }
    .legend-swatch { width: 22px; height: 0; border-top: 2px solid; }
    .swatch-in  { border-color: var(--route-in); }
    .swatch-out { border-color: var(--route-out); }


    /* ── WORKER-SCENE TOGGLE (left, vertically centered) ── */
    .worker-toggle {
      position: absolute;
      left: 40px; top: 50%;
      transform: translateY(-50%);
      z-index: 26;
      display: none;
      flex-direction: column;
      background: rgba(10, 20, 32, 0.9);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    }
    .worker-toggle.is-visible { display: flex; }
    .wt-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--muted);
      font-family: 'Inter', sans-serif;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 13px 20px;
      text-align: left;
      white-space: nowrap;
      transition: color 0.2s ease, background 0.2s ease;
    }
    .wt-btn + .wt-btn { border-top: 1px solid var(--border); }
    .wt-btn:hover { color: var(--cream); }
    .wt-btn.active { color: var(--navy); background: var(--gold); }

    /* ── ZOOM CONTROL (all scenes — lower-right) ── */
    .zoom-control {
      position: absolute;
      right: 40px; bottom: 30px;
      z-index: 26;
      display: flex;
      flex-direction: column;
    }
    .zoom-btn {
      width: 38px; height: 38px;
      background: rgba(10, 20, 32, 0.88);
      border: 1px solid var(--border);
      color: var(--cream);
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    }
    .zoom-btn:first-child { border-radius: 6px 6px 0 0; }
    .zoom-btn:last-child  { border-radius: 0 0 6px 6px; border-top: none; }
    .zoom-btn:hover { color: var(--gold-lt); border-color: var(--gold); background: rgba(201, 144, 42, 0.18); }

    /* ── SCENE PANEL (explainer text / image lightbox) — anchored top-right ── */
    .scene-info {
      position: absolute;
      top: 86px; right: 40px;   /* sits below the header actions row; clears the close button from Donate */
      z-index: 28;
      width: 320px;
      max-width: calc(100vw - 80px);
      padding: 16px 18px;
      background: rgba(14, 29, 44, 0.5);   /* 50% so the map shows through */
      border: 1px solid var(--border);
      border-radius: 10px;
      backdrop-filter: blur(3px);
      color: var(--cream);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    /* Visible only while open AND not dismissed (the X hides it, the Info button shows it). */
    body.info-open .scene-info.is-open { opacity: 1; pointer-events: auto; }
    /* The workers "To Italy" view is busy on the right — center that text panel. */
    .scene-info.is-center { right: auto; left: 50%; transform: translateX(-50%); }
    body.admin-bar .scene-info { top: 110px; }

    /* Image lightbox: shares the same top-right corner, grows down/left toward
       centre, so switching from text feels like the box expanding. The PANEL is
       capped so its bottom always stays ≥10px above the viewport (86px top offset
       + 10px gap), and it's a flex column so the image shrinks to fill whatever
       space the title/caption/nav leave — the lightbox bottom is always visible. */
    .scene-info.is-image {
      width: auto;
      max-width: min(70vw, 900px);
      max-height: calc(100vh - 96px);
      display: flex;
      flex-direction: column;
      align-items: flex-start;   /* left-align; don't stretch children */
    }
    body.admin-bar .scene-info.is-image { max-height: calc(100vh - 120px); }
    .scene-info.is-image .scene-info-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-height: 0;             /* allow the image to shrink below its natural height */
      width: 100%;
    }
    /* Keep the Next/Prev nav full-width so it stays pinned to the right. */
    .scene-info.is-image .scene-info-nav { align-self: stretch; }
    .si-image {
      display: block;
      max-width: min(68vw, 860px);
      max-height: 100%;
      min-height: 0;
      width: auto; height: auto;   /* keep the real aspect ratio while shrinking to fit */
      border-radius: 4px;
    }

    /* Nav row pinned to the box's top-right so it stays put across modes. */
    .scene-info-nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin: 0 0 12px;
    }
    .si-counter { font-size: 0.58rem; letter-spacing: 0.18em; color: var(--muted); }
    .si-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--cream);
      cursor: pointer;
      width: 26px; height: 26px;
      border-radius: 50%;
      font-size: 1rem; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.2s ease, color 0.2s ease;
    }
    .si-btn:hover { border-color: var(--gold); color: var(--gold-lt); }
    /* Close (X) — circular button sticking out of the panel's top-right corner.
       Shown for text and image; dismisses the panel and reveals the Info button. */
    .si-close {
      position: absolute;
      top: -14px; right: -14px;
      z-index: 2;
      display: flex; align-items: center; justify-content: center;
      width: 30px; height: 30px;
      border-radius: 50%;
      background: rgba(14, 29, 44, 0.95);
      border: 1px solid var(--border);
      color: var(--cream);
      font-size: 1.3rem; line-height: 1;
      cursor: pointer;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    }
    .si-close:hover { border-color: var(--gold); color: var(--gold-lt); background: rgba(201, 144, 42, 0.2); }

    /* Consistent typography for explainer body + image caption. */
    .scene-info-title {
      font-family: 'Inter', sans-serif;
      font-size: 0.95rem; font-weight: 500;
      letter-spacing: 0.03em;
      color: var(--gold-lt);
      margin: 0 0 8px;
    }
    .scene-info-content,
    .si-caption {
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem; font-weight: 300;
      line-height: 1.55;
      color: var(--cream);
      text-align: left;
    }
    .si-caption { margin: 0 0 12px; }   /* caption sits above the image */
    .scene-info-content p, .si-caption p { margin: 0 0 0.6em; }
    .scene-info-content p:last-child, .si-caption p:last-child { margin-bottom: 0; }
    .scene-info-content a, .si-caption a { color: var(--gold-lt); text-decoration: underline; }
    .scene-info-content a:hover, .si-caption a:hover { color: var(--cream); }

    /* ── HEADER ACTIONS — language flag + Donate, with the Info button at the right.
       The row is always visible (flag/Donate); only the Info button toggles. The
       fixed height keeps the row's centre aligned with the logo whether or not the
       Info button is showing. ── */
    .map-actions {
      position: absolute;
      top: 22px; right: 30px;   /* row centre aligns with the logo; right edge with the explainer box */
      z-index: 30;
      display: flex;
      align-items: center;
      gap: 10px;                /* 10px between each element in the row */
      height: 38px;
      pointer-events: auto;
    }
    body.admin-bar .map-actions { top: 54px; }

    /* Shared sizing for the two action buttons (matches the theme's .btn-sm box). */
    .ma-donate, .ma-flag {
      display: inline-flex; align-items: center; justify-content: center;
      box-sizing: border-box;
      height: 36px; padding: 0 0.725rem;
      border-radius: 0.325rem;
      text-decoration: none; white-space: nowrap;
    }

    /* Donate — matches the site's modified Bootstrap .btn-primary.btn-sm
       (Poppins 500, the inset highlight + drop shadow, and the same hover). */
    .ma-donate {
      font-family: 'Poppins', sans-serif;
      font-size: 0.875rem; font-weight: 500; line-height: 1.6;
      color: #fff; background-color: #532fff; border: 1px solid #532fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(15, 19, 33, 0.075);
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .ma-donate:hover { color: #fff; background-color: #4728d9; border-color: #4226cc; }

    /* When the Info button is hidden (explainer open, or a scene with no panels),
       keep 10px to the right of Donate so the row's right edge stays aligned with
       the explainer box. */
    body.info-open .ma-donate,
    body:not(.has-info) .ma-donate { margin-right: 10px; }

    /* Flag toggle — mirrors .btn-sm.btn-outline-light */
    .ma-flag {
      font-size: 1rem;
      background: transparent; border: 1px solid #f8f9fa;
      transition: background-color 0.15s ease;
    }
    .ma-flag:hover { background-color: rgba(248, 249, 250, 0.15); }
    .ma-flag .fi { display: block; border-radius: 2px; }

    /* ── INFO BUTTON — sits at the right of the actions row when the panel is dismissed.
       Pulses white → gold to draw the eye while the explainer/lightbox is closed. ── */
    .info-toggle { display: none; }
    body.has-info:not(.info-open) .info-toggle {
      display: flex;
      align-items: center; justify-content: center;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: rgba(14, 29, 44, 0.9);
      border: 1px solid var(--border);
      color: var(--cream);
      cursor: pointer;
      transition: border-color 0.2s ease, color 0.2s ease;
      animation: infoPulse 2.4s ease-in-out infinite;
    }
    @keyframes infoPulse {
      0%, 100% { color: var(--cream);   border-color: var(--border); box-shadow: 0 0 0 0 rgba(239, 192, 90, 0); }
      50%      { color: var(--gold-lt); border-color: var(--gold);   box-shadow: 0 0 0 5px rgba(239, 192, 90, 0.18); }
    }
    /* Hover settles on gold and stops the pulse. */
    body.has-info:not(.info-open) .info-toggle:hover {
      animation: none;
      border-color: var(--gold); color: var(--gold-lt);
    }
    @media (prefers-reduced-motion: reduce) {
      body.has-info:not(.info-open) .info-toggle { animation: none; }
    }
    .info-toggle svg { width: 20px; height: 20px; }

    /* ── MOBILE: panel centred; info button tucked in the corner ── */
    @media (max-width: 768px) {
      .scene-info { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: min(88vw, 360px); }
      body.admin-bar .scene-info { top: 50%; }
      .scene-info.is-center { left: 50%; transform: translate(-50%, -50%); }
      .scene-info.is-image { width: auto; max-width: 92vw; }
      .si-image { max-width: 86vw; max-height: 62vh; }
      /* Match the rest of the site's mobile logo gutter (~12px container padding)
         so the logo and scenes dropdown sit at the same left offset and stop
         crowding the header action bar. */
      header { padding-left: 12px; padding-right: 12px; }
      /* Drop the scenes dropdown onto its own row clearly below the action bar
         (flag/Donate/Info) so long scene names can't tuck under those buttons. */
      .state-selector { margin-top: 14px; }
      /* Keep the flag + Donate (and Info) pinned top-right, aligned with the logo,
         even while the lightbox/explainer is centred in the viewport. */
      .map-actions { top: 22px; right: 16px; }
      body.admin-bar .map-actions { top: 68px; }
    }

    /* ── FOOTER ── */
    footer {
      position: absolute;
      bottom: 20px;
      left: 0; right: 0;
      text-align: center;
      z-index: 20;
      pointer-events: none;
      opacity: 0;
      animation: riseIn 1s 3.6s ease both;
    }
    /* Translucent dark-blue panel behind the scripture */
    .scripture {
      display: inline-block;
      max-width: calc(100vw - 40px);
      padding: 14px 32px 16px;
      background: rgba(14, 29, 44, 0.5);
      border-radius: 12px;
    }
    footer p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.95rem;
      color: var(--muted);
      letter-spacing: 0.07em;
      line-height: 1.5;
      max-width: 720px;
      margin: 0 auto;
      padding: 0;
    }
    footer cite {
      display: block;
      font-style: normal;
      font-size: 0.58rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-top: 5px;
    }

    @keyframes riseIn {
      from { opacity: 0; transform: translateY(7px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      * { animation-duration: 0.01ms !important; }
    }