/* Design tokens, page basics, the fixed 3D stage and its overlays, section layout and type. */

/* Layout: a long scroll story. Opaque "page" sections (hero, intro, carousel, cards, credits) sit on top of a fixed
   WebGL stage; transparent "chapter" sections let the stage show through while the camera flies between keyframes.
   Each section commits to one of three looks — cream (day), dark (globe / night) or photo (interiors). */
/* ===== DESIGN TOKENS — change these to re-theme the whole page ===== */
:root {
  --cream: #fdf6ec;        /* background of the daytime 3D chapters (also set in JS as CREAM) */
  --paper: #ffffff;        /* background of the carousel, maps cards and credits */
  --dark: #202124;         /* background of the intro, globe and footer (also set in JS as DARK) */
  --ink: #202124;          /* main text colour on light backgrounds */
  --ink-soft: #5f6368;     /* secondary text on light backgrounds */
  --light: #e8eaed;        /* main text colour on dark backgrounds */
  --light-soft: #bdc1c6;   /* secondary text on dark backgrounds */
  --orange: #e37400;       /* accent: buttons, links, active carousel dot */
  --bs-primary: #e37400; --bs-primary-rgb: 227, 116, 0;   /* Bootstrap's primary = the same orange, so classes such as
                              border-primary, text-primary, al-border-primary-50 use it (the outline buttons) */
  --annot: #ef6a2e;        /* hand-drawn annotation and hotspot colour */
  --line-light: rgba(32, 33, 36, 0.14);    /* hairlines on light backgrounds */
  --line-dark: rgba(232, 234, 237, 0.22);  /* hairlines on dark backgrounds */
  --sans: "Jura", "Helvetica Neue", Arial, sans-serif;               /* headings + body (Google Fonts link above) */
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* small notes, fact labels */
  --hand: "Caveat", "Comic Sans MS", cursive;                         /* hand-drawn annotation labels */
  --arabic: "Aref Ruqaa", "Noto Naskh Arabic", "Geeza Pro", serif;    /* Arabic calligraphy title */
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* keep `el.hidden = true` working on elements that set their own display */
html { background: var(--dark); }
body {
  margin: 0; background: var(--dark); color: var(--ink); font-family: var(--sans); font-weight: 400;
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 20; background: var(--dark); }
a { color: inherit; }
button { font-family: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* Bootstrap's base styles ("Reboot", loaded before this file) mostly match this page; these undo the few that changed
   the design: smooth page scrolling (the story moves the page itself, and some jumps must be instant), heading sizes
   and line heights, bold <dt>, buttons taking the text's size and line height, and icons and images aligned to the
   middle of the line */
:root { scroll-behavior: auto; }
h1, h2, h3, h4, h5, h6 { font-size: revert; line-height: inherit; }
dt { font-weight: 400; }
button { font-size: revert; line-height: revert; }
img, svg { vertical-align: baseline; }
/* alfuix's slim scrollbars, in the page's colours rather than its Bootstrap blue and yellow */
::-webkit-scrollbar-track { background: rgba(127, 127, 127, 0.18); }
::-webkit-scrollbar-thumb { background: rgba(127, 127, 127, 0.7); }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }
.ab-wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* The fixed WebGL canvas (#stage) sits behind everything. #veil fades to black when the camera moves
   between outside and an interior. #annot is the SVG layer for hand-drawn notes, #labels holds globe labels. */
/* ---------- stage ---------- */
#stage { position: fixed; inset: 0; z-index: 0; background: var(--cream); }
#stage canvas { display: block; width: 100%; height: 100%; }
body:not(.ab-exploring) #stage { pointer-events: none; }
body.ab-exploring #stage canvas { cursor: grab; touch-action: none; }
#veil { position: fixed; inset: 0; z-index: 1; background: #050608; opacity: 0; pointer-events: none; }
#annot { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
#annot path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#annot > g { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }   /* keeps lines and labels readable on busy backgrounds */
#annot text { font-family: var(--hand); font-size: 30px; }
#labels { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.ab-glabel {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap;
  font: 600 13px/1 var(--sans); letter-spacing: 0.32em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  transition: opacity 0.3s;
}
.ab-glabel.ab-city { letter-spacing: 0.12em; font-size: 15px; }
.ab-glabel.ab-city::before { content: "✕"; display: block; text-align: center; font-size: 20px; letter-spacing: 0; margin-bottom: 4px; }
.ab-glabel.small { font-size: 11px; letter-spacing: 0.18em; }
.ab-glabel.ab-big { font-size: 15px; letter-spacing: 0.4em; }
.ab-glabel.ab-poi { transform-origin: 0 50%; letter-spacing: 0.14em; font-size: 13px; padding-left: 22px; }
.ab-glabel.ab-poi::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #ef6a2e; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(239,106,46,0.6); animation: ping 2.2s ease-out infinite; }

/* Chapter layout. Increase .ab-chapter min-height to make a chapter "last longer" while scrolling.
   .ab-the / .ab-big are the stacked Meroë-style headings ("THE" + big words). */
/* ---------- sections ---------- */
main, footer { position: relative; z-index: 4; }
.ab-page { position: relative; }
.ab-chapter { min-height: 145vh; display: flex; }
.ab-chapter.ab-layout-left { align-items: center; }
/* the last view: its card sits near the top and the section runs on below it, so the helicopter can land (see
   "a helicopter landing" in the JS) before the next section scrolls in */
#setting { min-height: 200vh; align-items: flex-start; padding-top: 58vh; }
.ab-chapter.ab-layout-center { align-items: flex-start; justify-content: center; text-align: center; padding-block: 9vh 0; min-height: 135vh; }
.ab-copy { width: min(470px, 100%); margin-left: clamp(0px, 9vw, 200px); display: grid; gap: 16px; }
.ab-layout-center .ab-copy { margin: 0 auto; width: min(600px, 100%); justify-items: center; }
.ab-theme-cream { color: var(--ink); }
.ab-theme-dark, .ab-theme-photo { color: var(--light); }
.ab-theme-photo .ab-copy, .ab-theme-dark .ab-copy { text-shadow: 0 1px 14px rgba(0,0,0,0.85), 0 0 3px rgba(0,0,0,0.7); }
.ab-theme-cream .ab-soft { color: var(--ink-soft); }
.ab-theme-dark .ab-soft, .ab-theme-photo .ab-soft { color: var(--light-soft); }

.ab-the { display: block; font-size: clamp(16px, 1.6vw, 22px); line-height: 1; letter-spacing: -0.01em; }
.ab-big { display: block; font-size: clamp(28px, 3.2vw, 46px); line-height: 0.95; font-weight: 400; text-transform: uppercase; letter-spacing: -0.02em; text-wrap: balance; }
h2.ab-stack { margin: 0; font-weight: 400; }
h3.ab-sub { margin: 0; font-size: 19px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em; }
.ab-copy p { margin: 0; max-width: 60ch; }
.lead { font-size: 19px; }   /* weight and line height: fw-normal lh-base in the markup (Bootstrap makes .lead light) */
.ab-note { font-family: var(--mono); font-size: 12.5px; }
.ab-note svg { width: 15px; height: 15px; }
.ab-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line-light); }
.ab-theme-dark .ab-facts, .ab-theme-photo .ab-facts { border-top-color: var(--line-dark); }
.ab-facts div { display: grid; min-width: 0; }
.ab-facts dt { order: 2; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.ab-facts dd { order: 1; margin: 0; font-size: 24px; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Outline buttons: built from Bootstrap and alfuix classes by frameButton() / toneButtons() in js/page-ui.js (corner
   brackets, clipped border with a bottom notch, a tab in the notch; white on dark, dark on light). Only what the
   classes can't do is here: where the frame sits in a grid, and a focus ring on the frame (the clip hides the
   button's own) */
.ab-btn-frame { justify-self: start; }
.ab-layout-center .ab-btn-frame, .ab-mcard .ab-btn-frame, .ab-moment-card .ab-btn-frame { justify-self: center; }
.ab-btn-frame:has(:focus-visible) { outline: 2px solid var(--orange); outline-offset: 4px; }