/* ===================================================
   أعماق / Abyss: brand tokens
   The sounding line: a lead-weighted rope used to measure the sea.
   Brass marks every depth; blue is the only light in the deep.
   =================================================== */
:root {
  color-scheme: dark;

  /* Palette */
  --sea-glass: #0C4E68;      /* surface water */
  --ink: #040D1C;            /* abyssal water, blue-black (never neutral black) */
  --photophore: #52D6F4;     /* bioluminescent blue: interaction only */
  --brass: #E0BC74;          /* sounding line, depth figures */
  --foam: #E8F1F2;           /* text */
  --mist: #AFC6D0;           /* secondary text */
  --coral: #FF9A9A;          /* wrong answers */

  --on-photophore: #04101F;
  --hair: rgba(232, 241, 242, 0.14);
  --hair-brass: rgba(224, 188, 116, 0.38);
  --veil: rgba(232, 241, 242, 0.04);
  --glow: var(--photophore);

  /* Type */
  --font-display: 'Amiri', 'IBM Plex Sans Arabic', serif;
  --font-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-sounding: 'Spectral', Georgia, serif;   /* chart-style italic figures */

  /* Scale */
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
  --fs-hero: clamp(4.5rem, 2.5rem + 9vw, 10rem);

  /* Spacing (8pt) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;

  --header-h: 68px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen growth: the descent bars paying out */
  --dur-fast: 160ms;
  --dur: 260ms;

  --z-particles: 0;
  --z-content: 10;
  --z-gauge: 40;
  --z-header: 100;
  --z-skip: 1000;
}

:not(:lang(ar)) {
  --font-display: 'Spectral', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
}

/* ===================================================
   Base
   =================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--sea-glass);
  color: var(--foam);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
:not(:lang(ar)) body { line-height: 1.6; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}
:not(:lang(ar)) h1, :not(:lang(ar)) h2, :not(:lang(ar)) h3 { font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }   /* no single word stranded on a paragraph's last line */
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; }

.icon {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.icon--sm { width: 0.9rem; height: 0.9rem; display: inline-block; vertical-align: -0.1em; }
[dir="ltr"] .icon--dir { transform: scaleX(-1); }

/* Chart-style depth figures */
.sounding-num {
  font-family: var(--font-sounding);
  font-style: italic;
  font-weight: 500;
  color: var(--brass);
  font-variant-numeric: lining-nums tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--photophore);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: var(--z-skip);
  padding: 12px 20px;
  background: var(--photophore);
  color: var(--on-photophore);
  font-weight: 600;
  border-radius: 6px;
  transform: translateY(-150%);
  transition: transform var(--dur) var(--ease-out);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: min(1200px, 100% - 2 * var(--s-2));
  margin-inline: auto;
}
.container--narrow { width: min(760px, 100% - 2 * var(--s-2)); }
@media (min-width: 768px) {
  .container { width: min(1200px, 100% - 2 * var(--s-4)); }
  .container--narrow { width: min(760px, 100% - 2 * var(--s-4)); }
}

main { position: relative; z-index: var(--z-content); outline: none; }

/* ===================================================
   Buttons
   =================================================== */
.btn-primary,
.btn-ghost,
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, box-shadow var(--dur) ease, transform var(--dur-fast) ease;
}
.btn-primary {
  padding: 0 1.6rem;
  border-radius: 999px;
  background: var(--photophore);
  color: var(--on-photophore);
  border: 0;
  font-size: var(--fs-md);
}
.btn-primary:hover { box-shadow: 0 0 0 5px rgba(82, 214, 244, 0.16), 0 10px 24px -12px rgba(2, 6, 15, 0.8); }
.btn-primary:active { transform: scale(0.97); }

.btn-ghost {
  padding: 0 1.1rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--hair);
  color: var(--foam);
}
.btn-ghost:hover { border-color: var(--photophore); color: var(--photophore); }
.btn-ghost:active { transform: scale(0.97); }

.btn-icon {
  width: 48px; height: 48px; padding: 0;
  border-radius: 50%;
  background: transparent; border: 1px solid transparent;
}
.btn-icon:hover { border-color: var(--hair); }

.btn-primary:disabled,
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===================================================
   Marine snow (thickens with depth)
   =================================================== */
.particles {
  position: fixed; inset: 0;
  z-index: var(--z-particles);
  pointer-events: none;
  overflow: hidden;
}
.particles__layer {
  position: absolute; inset-inline: 0; top: 0;
  height: 200%;
  will-change: transform;
  opacity: var(--particle-opacity, 0.2);
  transition: opacity 600ms ease;
}
.particles__layer--far {
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(232, 241, 242, 0.7), transparent),
    radial-gradient(1px 1px at 90px 140px, rgba(232, 241, 242, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 170px 60px, rgba(232, 241, 242, 0.6), transparent),
    radial-gradient(1px 1px at 240px 200px, rgba(232, 241, 242, 0.4), transparent);
  background-size: 280px 260px;
}
.particles__layer--near {
  background-image:
    radial-gradient(2px 2px at 40px 60px, rgba(232, 241, 242, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 200px 180px, rgba(82, 214, 244, 0.7), transparent),
    radial-gradient(2px 2px at 320px 90px, rgba(232, 241, 242, 0.5), transparent);
  background-size: 420px 340px;
}

/* ===================================================
   Header
   =================================================== */
.site-header {
  position: fixed; inset-inline: 0; top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) ease, border-color var(--dur) ease;
}
.site-header.is-scrolled {
  background: rgba(4, 13, 28, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--hair);
}
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--s-3); }

.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 44px;
  margin: 0;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
:not(:lang(ar)) .brand { font-weight: 500; font-size: 1.5rem; }
.brand__mark { width: 32px; height: 32px; }
.mark-wave { fill: none; stroke: var(--photophore); stroke-width: 2; stroke-linecap: round; }
.mark-line { stroke: var(--brass); stroke-width: 1.6; }
.mark-lead { fill: var(--brass); }

.nav { margin-inline-start: auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.nav__list a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 0.85rem;
  text-decoration: none;
  color: var(--mist);
  transition: color var(--dur-fast) ease;
}
.nav__list a:hover { color: var(--foam); }
.nav__list a[aria-current] { color: var(--foam); }
.nav__list a[aria-current]::after {
  content: ""; position: absolute; inset-inline: 0.85rem; bottom: 8px;
  height: 1px; background: var(--brass);
}

.site-header__actions { display: flex; align-items: center; gap: 0.25rem; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 0.75rem;
  background: none; border: 0; cursor: pointer;
  color: var(--mist);
  transition: color var(--dur-fast) ease;
}
.lang-toggle:hover { color: var(--photophore); }
.menu-toggle { display: none; }

@media (max-width: 1099px) {
  .menu-toggle { display: inline-flex; }
  .site-header__actions { margin-inline-start: auto; }
  .nav {
    position: absolute; inset-inline: 0; top: var(--header-h);
    background: var(--ink);
    border-bottom: 1px solid var(--hair);
    padding: var(--s-1) var(--s-2) var(--s-2);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .nav.is-open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
  }
  .nav__list { flex-direction: column; }
  .nav__list a { width: 100%; min-height: 52px; font-size: var(--fs-md); border-bottom: 1px solid var(--hair); }
  .nav__list a[aria-current]::after { display: none; }
  .site-header.menu-open { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===================================================
   The sounding line (depth gauge)
   =================================================== */
.sounding {
  position: fixed;
  z-index: var(--z-gauge);
  top: calc(var(--header-h) + 28px);
  bottom: 36px;
  inset-inline-end: 32px;
  width: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}
.sounding.is-visible { opacity: 1; }
.sounding__line {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--hair-brass), var(--brass) 8%, var(--brass) 92%, var(--hair-brass));
}
/* tick sits on the line; the figure points inward, toward the content */
.sounding__mark {
  position: absolute; inset-inline-end: -4px;
  display: flex; align-items: center; gap: 6px;
  transform: translateY(-50%);
}
.sounding__mark::before { content: ""; order: 1; width: 9px; height: 1px; background: var(--brass); }
.sounding__mark span {
  font-family: var(--font-sounding);
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--brass);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
.sounding__lead {
  position: absolute; top: -4px; left: -10px;
  width: 20px; height: 26px;
  will-change: transform;
}
.sounding__lead svg, .hero__lead { width: 20px; height: 26px; overflow: visible; }
.sounding__lead path:first-child, .hero__lead path:first-child { stroke: var(--brass); stroke-width: 1.2; fill: none; }
.sounding__lead path:last-child, .hero__lead path:last-child { fill: var(--brass); }

.sounding__readout {
  position: absolute; top: 0;
  inset-inline-end: 22px;
  margin: 0;
  transform: translateY(var(--lead-y, 0px));
  display: grid; justify-items: end;
  text-align: end;
  white-space: nowrap;
  line-height: 1.2;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  background: rgba(4, 13, 28, 0.6);
}
.sounding__value {
  font-family: var(--font-sounding);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.sounding__value > span:first-child { direction: ltr; unicode-bidi: isolate; }
.sounding__zone { font-size: 0.75rem; color: var(--mist); }

/* Keep content clear of the line where page margins are narrow */
@media (min-width: 1024px) and (max-width: 1559px) {
  main .container { padding-inline-end: 150px; }
}

/* Narrow screens: the readout becomes a depth strip hanging from the header,
   like a dive computer's top line, so it never sits on top of content or controls */
@media (max-width: 1023px) {
  .sounding {
    top: var(--header-h); bottom: auto; inset-inline: 0; width: auto;
    transform: translateY(-100%);
    transition: opacity 200ms var(--ease-out), transform 250ms var(--ease-out);
  }
  .sounding.is-visible { transform: none; }
  .sounding__line { display: none; }
  .sounding__readout {
    position: static; transform: none;
    display: flex; align-items: baseline; gap: 0.6rem;
    padding: 0.3rem var(--s-2) 0.35rem;
    border-radius: 0;
    background: rgba(4, 13, 28, 0.97);   /* opaque enough that scrolling text never ghosts through the readout */
    border-bottom: 1px solid var(--hair-brass);
  }
  .sounding__value { font-size: 1.125rem; }
}

/* ===================================================
   Hero: the waterline and the first drop of the line
   =================================================== */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  padding-block: calc(var(--header-h) + var(--s-6)) var(--s-5);
  overflow: hidden;
  isolation: isolate;
}
.hero__light {
  position: absolute; inset: 0 -10% 30%;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(175, 228, 242, 0.28), transparent 70%),
    linear-gradient(100deg, transparent 34%, rgba(232, 241, 242, 0.05) 40%, transparent 46%),
    linear-gradient(78deg, transparent 56%, rgba(232, 241, 242, 0.045) 61%, transparent 66%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}
.hero__waterline {
  position: absolute; inset-inline: 0;
  top: calc(var(--header-h) + 18px);
  width: 100%; height: 24px;
}
.hero__waterline path { fill: none; stroke: rgba(175, 228, 242, 0.55); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: var(--s-4);
  align-items: stretch;
}
.hero__content {
  align-self: center;
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  max-width: 40rem;
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.1;
  /* Solid foam: the photograph and the falling line already carry the fading light */
  color: var(--foam);
  padding-block: 0.08em 0.12em;
}
:not(:lang(ar)) .hero__title { font-weight: 500; letter-spacing: -0.03em; }
.hero__lede { font-size: var(--fs-md); max-width: 34em; color: var(--foam); }

/* the rope hangs from the waterline itself */
.hero__sounding { position: relative; margin-block: calc(30px - var(--s-6)) var(--s-4); }
.hero__rope {
  position: absolute; top: 0; bottom: 30px;
  inset-inline-start: 50%;
  width: 1px;
  background: var(--brass);
  transform-origin: top;
}
.hero__marks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0 0 30px; }
.hero__marks li {
  position: absolute; top: var(--at);
  inset-inline-start: calc(50% - 5px);
  display: flex; align-items: center; gap: 8px;
  transform: translateY(-50%);
}
.hero__marks li::before { content: ""; width: 10px; height: 1px; background: var(--brass); }
.hero__marks span {
  font-family: var(--font-sounding);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.hero__lead {
  position: absolute; bottom: 4px;
  inset-inline-start: calc(50% - 10px);
}

/* The one orchestrated moment: the line drops when the page opens */
.js .hero__rope { animation: rope-drop 1.6s var(--ease-out) 0.2s both; }
.js .hero__lead { animation: lead-drop 1.6s var(--ease-out) 0.2s both; }
.js .hero__marks li { animation: mark-in 0.5s ease both; animation-delay: calc(0.4s + var(--n, 0) * 0.22s); }
.hero__marks li:nth-child(1) { --n: 0; }
.hero__marks li:nth-child(2) { --n: 1; }
.hero__marks li:nth-child(3) { --n: 2; }
.hero__marks li:nth-child(4) { --n: 3; }
.hero__marks li:nth-child(5) { --n: 4; }
@keyframes rope-drop { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lead-drop { from { transform: translateY(-60vh); } to { transform: none; } }
@keyframes mark-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 699px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 64px; gap: var(--s-2); }
  .hero__marks span { font-size: 0.75rem; }
  .hero__content { gap: var(--s-2); }
}

/* ===================================================
   Sections
   =================================================== */
.section { padding-block: var(--s-7); position: relative; }
@media (max-width: 767px) { .section { padding-block: var(--s-6); } }

.section-head { max-width: 680px; margin-block-end: var(--s-5); }
.section-head h2 { font-size: var(--fs-2xl); margin-block-end: var(--s-2); }
.section-head__intro { color: var(--mist); font-size: var(--fs-md); max-width: 36em; }

/* ===================================================
   Zones
   =================================================== */
.zone {
  position: relative;
  min-height: 90vh;
  display: grid; align-items: center;
  padding-block: var(--s-7) var(--s-6);
  overflow: hidden;
  isolation: isolate;
}
.zone::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 45% 55% at var(--tint-x, 15%) 55%, color-mix(in srgb, var(--zone-color) 9%, transparent), transparent 70%);
  pointer-events: none;
}
[dir="ltr"] .zone::before { --tint-x: 85%; }

/* Where each zone begins: a sounding mark across the page */
.zone__marker {
  position: absolute; top: 0; inset-inline: 0;
  display: flex; align-items: center; gap: var(--s-2);
  padding-inline: var(--s-2);
}
.zone__marker::before,
.zone__marker::after {
  content: ""; flex: 1; height: 1px;
  background: repeating-linear-gradient(to right, var(--hair-brass) 0 6px, transparent 6px 12px);
}
.zone__marker span {
  font-family: var(--font-sounding);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--brass);
  direction: ltr; unicode-bidi: isolate;
}

.zone__decor {
  position: absolute;
  z-index: -1;
  inset-inline-end: -4%;
  bottom: 8%;
  width: min(44vw, 540px);
  opacity: 0.07;
  pointer-events: none;
}
.zone__decor .creature-art { width: 100%; height: auto; }
[dir="rtl"] .zone__decor .creature-art { transform: scaleX(-1); }
@media (max-width: 899px) { .zone__decor { width: 80vw; opacity: 0.05; bottom: auto; top: 12%; } }

.zone--sunlight::after {
  content: "";
  position: absolute; inset: 0 0 40%;
  z-index: -1;
  background:
    linear-gradient(100deg, transparent 20%, rgba(255, 230, 160, 0.05) 26%, transparent 32%),
    linear-gradient(80deg, transparent 58%, rgba(255, 230, 160, 0.04) 63%, transparent 68%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  pointer-events: none;
}

.zone__grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .zone__grid { grid-template-columns: 0.95fr 1.05fr; gap: var(--s-6); align-items: center; }
}

.zone__depth {
  display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0.3em;   /* the range and its unit read as one sounding */
  font-family: var(--font-sounding);
  font-style: italic;
  font-weight: 500;
  /* capped by the viewport so enlarged text (200% zoom) cannot push the range off a narrow screen */
  font-size: min(clamp(2.1rem, 1.3rem + 2.8vw, 4rem), 11vw);
  line-height: 1;
  color: var(--brass);
  font-variant-numeric: lining-nums tabular-nums;
}
.zone__depth > span { direction: ltr; unicode-bidi: isolate; }
.zone__dash { width: 0.5em; height: 1px; background: currentColor; align-self: center; opacity: 0.7; }
.zone__depth small { font-size: 0.4em; }

.zone__name { font-size: var(--fs-2xl); margin-block: var(--s-3) 0.25rem; }
.zone__sci { color: var(--mist); font-size: var(--fs-sm); margin-block-end: var(--s-2); }
.zone__desc { font-size: var(--fs-md); max-width: 34em; }

/* Logbook row: three readings divided by hairlines, no boxes */
.zone__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--s-4);
  border-block: 1px solid var(--hair);
}
.zone__stat { padding-block: var(--s-2); padding-inline: 0 var(--s-2); display: grid; gap: 0.3rem; align-content: start; }
.zone__stat + .zone__stat { border-inline-start: 1px solid var(--hair); padding-inline-start: var(--s-2); }
.zone__stat dt { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); color: var(--mist); }
.zone__stat dt .icon { color: var(--zone-color); width: 1rem; height: 1rem; }
.zone__stat dd { margin: 0; font-weight: 600; }
@media (max-width: 479px) {
  .zone__stats { grid-template-columns: 1fr; }
  .zone__stat { padding-inline: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem var(--s-2); }
  .zone__stat + .zone__stat { border-inline-start: 0; border-block-start: 1px solid var(--hair); padding-inline-start: 0; }
  .zone__stat dd { text-align: end; }
}

.zone__fact {
  border-inline-start: 1px solid var(--zone-color);
  padding: 0.25rem var(--s-3);
  margin-block-end: var(--s-4);
}
.zone__fact strong {
  display: flex; align-items: center; gap: 0.4rem;
  /* zone hue lifted toward foam: the violet and coral zones fell below 4.5:1 on the sea */
  color: color-mix(in srgb, var(--zone-color) 60%, var(--foam));
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-block-end: 0.25rem;
}
.zone__fact strong .icon { width: 1rem; height: 1rem; }

.zone__residents h4 { font-size: var(--fs-sm); color: var(--mist); margin: 0 0 var(--s-1); font-weight: 500; }
.zone__residents ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.resident-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px;
  padding-inline: 0.4rem 1rem;
  background: var(--veil);
  border: 1px solid var(--hair);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease;
}
.resident-btn:hover { border-color: var(--zone-color); }
.resident-btn .creature-art { width: 44px; height: 32px; }

/* ===================================================
   Filters (shared by gallery + terrain)
   =================================================== */
.filters, .terrain__chips {
  display: flex; flex-wrap: wrap; gap: 0.25rem var(--s-3);
  margin-block-end: var(--s-5);
  border-bottom: 1px solid var(--hair);
}
.terrain__chips { margin-block-end: var(--s-4); }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px;
  padding: 0 0.15rem;
  background: none; border: 0;
  color: var(--mist);
  cursor: pointer;
  transition: color var(--dur-fast) ease, scale var(--dur-fast) var(--ease-out);
}
.chip:hover { color: var(--foam); }
.chip:active { scale: 0.97; }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zone-color, var(--foam)); }
.chip[aria-pressed="true"] { color: var(--foam); }
.chip[aria-pressed="true"]::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px;
  height: 2px; background: var(--brass);
}
.chip__num { font-family: var(--font-sounding); font-style: italic; color: var(--brass); }

/* ===================================================
   Specimens (creature gallery)
   =================================================== */
.specimens {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: var(--s-5) var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.specimens > li[hidden] { display: none; }

.specimen {
  width: 100%;
  display: grid;
  gap: var(--s-2);
  padding: 0;
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
}
.specimen__art {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  padding: var(--s-3);
  border-radius: 6px;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, color-mix(in srgb, var(--zone-color) 7%, transparent), transparent 75%);
  transition: background-color var(--dur) ease, scale var(--dur-fast) var(--ease-out);
}
/* a press settles the plate a hair, like a specimen card pushed into its tray */
.specimen:active .specimen__art, .resident:active .resident__frame { scale: 0.985; }
.specimen__art .creature-art { width: 100%; height: 100%; transition: filter var(--dur) ease; }
/* Answering the pointer: the specimen is lit like a photophore */
.specimen:hover .specimen__art,
.specimen:focus-visible .specimen__art { background-color: rgba(232, 241, 242, 0.03); }
.specimen:hover .creature-art,
.specimen:focus-visible .creature-art {
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--zone-color) 55%, transparent));
}
.specimen__label {
  display: grid; gap: 0.2rem;
  overflow-wrap: anywhere;   /* long single words (Latin binomials, German compounds) wrap instead of widening the card */
  padding-block-start: var(--s-2);
  border-block-start: 1px solid var(--hair-brass);
}
.specimen__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
:not(:lang(ar)) .specimen__name { font-weight: 500; }
.specimen__latin { font-family: var(--font-sounding); font-style: italic; color: var(--mist); font-size: var(--fs-sm); unicode-bidi: isolate; }
.specimen__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem var(--s-2); margin-block-start: 0.35rem; font-size: var(--fs-sm); }
.specimen__zone { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--mist); }
.specimen__zone::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--zone-color); }
.specimen__depth { font-family: var(--font-sounding); font-style: italic; color: var(--brass); }

@media (max-width: 599px) {
  .specimens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-2); }
  .specimen__art { padding: var(--s-1); }
  .specimen__name { font-size: var(--fs-md); }
  .specimen__latin { font-size: 0.8125rem; }
  .specimen__depth { display: none; }
}

/* Creature SVG details */
.creature-art .cr-line { fill: none; stroke: rgba(0, 0, 0, 0.35); stroke-width: 2; stroke-linecap: round; }
.creature-art .cr-line--light { stroke: rgba(255, 255, 255, 0.55); }
.creature-art .cr-line--thick { stroke-width: 3; stroke: currentColor; }
.creature-art .cr-tent { fill: none; stroke-width: 3; stroke-linecap: round; }
.creature-art .cr-glow { filter: url(#glow); }

/* ===================================================
   Modal
   =================================================== */
.modal {
  width: min(780px, 100% - 2rem);
  max-height: min(90dvh, 900px);
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: #071629;
  color: var(--foam);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8);
  overflow: auto;
}
.modal::backdrop { background: rgba(2, 6, 15, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* Opens and closes along the same path; transitions (not keyframes) so a quick close mid-open retargets.
   display/overlay ride along as discrete steps, so the closing frames still render in the top layer */
.modal, .modal::backdrop {
  opacity: 0;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out),
              display 250ms allow-discrete, overlay 250ms allow-discrete;
}
.modal { transform: scale(0.96); }   /* centred surface: origin stays at centre */
.modal[open], .modal[open]::backdrop { opacity: 1; }
.modal[open] { transform: none; }
@starting-style {
  .modal[open], .modal[open]::backdrop { opacity: 0; }
  .modal[open] { transform: scale(0.96); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal__inner { position: relative; display: grid; }
@media (min-width: 700px) { .modal__inner { grid-template-columns: 1fr 1.15fr; } }
.modal__close {
  position: absolute; top: 0.75rem; inset-inline-end: 0.75rem; z-index: 2;
  background: rgba(4, 13, 28, 0.7);
  border-color: var(--hair);
}
.modal__art {
  display: grid; place-items: center;
  padding: var(--s-4);
  min-height: 220px;
  background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--zone-color, var(--photophore)) 18%, transparent), transparent 70%), #030B18;
  animation: fade-in 220ms var(--ease-out);
}
.modal__art .creature-art { width: 100%; max-width: 320px; height: auto; }
.modal__body { padding: var(--s-4) var(--s-3) var(--s-3); display: grid; gap: var(--s-1); align-content: start; }
.modal__zone { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-sm); color: var(--mist); justify-self: start; }
.modal__zone::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--zone-color, var(--photophore)); }
.modal__title { font-size: var(--fs-xl); }
.modal__latin { font-family: var(--font-sounding); font-style: italic; color: var(--mist); unicode-bidi: isolate; }
.modal__desc { margin-block: var(--s-1); }
.modal__facts { display: grid; margin: 0; border-block-start: 1px solid var(--hair); }
.modal__facts div { display: grid; gap: 0.15rem; padding-block: 0.75rem; border-block-end: 1px solid var(--hair); }
.modal__facts dt { display: flex; align-items: center; gap: 0.4rem; color: var(--mist); font-size: var(--fs-sm); }
.modal__facts dt .icon { color: var(--brass); width: 1rem; height: 1rem; }
.modal__facts dd { margin: 0; }
.modal__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); margin-block-start: var(--s-2); }
.modal__pos { font-family: var(--font-sounding); font-style: italic; color: var(--mist); font-size: var(--fs-sm); }

/* ===================================================
   Terrain
   =================================================== */
.terrain__map { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--hair); }
.terrain__svg { width: 100%; height: auto; }
.terrain__vent circle {
  fill: rgba(200, 200, 200, 0.25);
  animation: smoke 4s ease-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.terrain__vent circle:nth-child(2) { animation-delay: -1s; }
.terrain__vent circle:nth-child(3) { animation-delay: -2s; }
.terrain__vent circle:nth-child(4) { animation-delay: -3s; }
@keyframes smoke {
  0% { opacity: 0.6; transform: translateY(8px) scale(0.6); }
  100% { opacity: 0; transform: translateY(-14px) scale(1.4); }
}

.hotspot {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 1.5px solid var(--brass);
  background: rgba(4, 13, 28, 0.78);
  color: var(--brass);
  font-family: var(--font-sounding);
  font-style: italic;
  font-size: 1rem;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, scale var(--dur-fast) var(--ease-out);
}
.hotspot:active { scale: 0.92; }
.hotspot:hover { background: rgba(224, 188, 116, 0.2); }
.hotspot[aria-pressed="true"] { background: var(--brass); color: var(--ink); }
/* the drawn disc stays small on phones; the touch target does not */
.hotspot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
@media (max-width: 599px) {
  .hotspot { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 0.85rem; }
}

.terrain__note { font-size: var(--fs-sm); color: var(--mist); margin-block: var(--s-1) var(--s-3); }

.terrain__panel { display: grid; gap: var(--s-1); max-width: 46rem; }
.terrain__panel h3 { font-size: var(--fs-xl); }
.terrain__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.terrain__panel-nav { display: flex; align-items: center; gap: 0.25rem; color: var(--mist); font-family: var(--font-sounding); font-style: italic; }
.terrain__panel-nav .btn-icon { border-color: var(--hair); }
.terrain__panel .tag { color: var(--brass); }
.terrain__panel-body { display: grid; gap: var(--s-1); animation: fade-in 220ms var(--ease-out); }

/* ===================================================
   Mysteries: logbook entries
   =================================================== */
.logbook { border-block-start: 1px solid var(--hair); }
.acc-item { border-block-end: 1px solid var(--hair); }
.acc-item h3 { font-size: inherit; }
.acc-trigger {
  width: 100%;
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 72px;
  padding: var(--s-2) 0;
  background: none; border: 0;
  text-align: start;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.35;
  transition: color var(--dur-fast) ease;
}
:not(:lang(ar)) .acc-trigger { font-weight: 500; }
.acc-trigger:hover { color: var(--photophore); }
.acc-trigger__label { flex: 1; }
.acc-trigger__chev { transition: transform var(--dur) var(--ease-out); color: var(--brass); }
.acc-trigger[aria-expanded="true"] .acc-trigger__chev { transform: rotate(180deg); }
.acc-panel { padding: 0 0 var(--s-3); color: var(--foam); max-width: 38em; }

/* ===================================================
   Scale: the ocean in one sentence
   =================================================== */
.scale__sentence {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
  line-height: 1.75;
  text-wrap: pretty;
}
:not(:lang(ar)) .scale__sentence { line-height: 1.45; }
.scale__sentence .sounding-num { font-size: 1.1em; }

/* ===================================================
   Quiz
   =================================================== */
.quiz__card {
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: rgba(232, 241, 242, 0.025);
  padding: var(--s-4) var(--s-3);
}
@media (min-width: 768px) { .quiz__card { padding: var(--s-5); } }
.quiz__progress { display: flex; align-items: center; gap: var(--s-2); margin-block-end: var(--s-3); font-size: var(--fs-sm); color: var(--mist); }
.quiz__bar { flex: 1; height: 1px; background: var(--hair); position: relative; }
.quiz__bar span { position: absolute; inset: -1px 0; background: var(--brass); transform-origin: left; transition: transform 500ms var(--ease-out); }
[dir="rtl"] .quiz__bar span { transform-origin: right; }
.quiz__q { font-size: var(--fs-xl); margin-block-end: var(--s-3); }
.quiz__options { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: var(--s-1); }
.quiz__opt {
  width: 100%;
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 56px;
  padding: 0.75rem var(--s-2);
  text-align: start;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.quiz__opt:hover:not(:disabled) { border-color: var(--photophore); }
.quiz__opt:disabled { cursor: default; }
.quiz__letter {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  font-family: var(--font-sounding); font-style: italic; font-size: 1rem;
  color: var(--brass);
  flex-shrink: 0;
}
.quiz__opt .icon { margin-inline-start: auto; }
.quiz__opt.is-correct { border-color: var(--photophore); background: rgba(82, 214, 244, 0.1); }
.quiz__opt.is-correct .quiz__letter { color: var(--photophore); }
.quiz__opt.is-wrong { border-color: var(--coral); background: rgba(255, 154, 154, 0.08); }
.quiz__opt.is-wrong .quiz__letter { color: var(--coral); }
.quiz__opt.is-dim { opacity: 0.5; }
.quiz__feedback { display: flex; align-items: center; gap: 0.5rem; min-height: 1.75em; margin-block-end: var(--s-2); font-weight: 600; }
.quiz__feedback.is-correct { color: var(--photophore); }
.quiz__feedback.is-wrong { color: var(--coral); }
.quiz__actions { display: flex; justify-content: flex-end; }

.quiz__result { text-align: center; display: grid; justify-items: center; gap: var(--s-2); }
.quiz__score {
  font-family: var(--font-sounding); font-style: italic; font-weight: 500;
  font-size: clamp(3.5rem, 2rem + 5vw, 5.5rem);
  color: var(--brass);
  line-height: 1;
  direction: ltr; unicode-bidi: isolate;
}
.quiz__result h3 { font-size: var(--fs-xl); }
.quiz__result p { color: var(--mist); max-width: 30em; }

/* ===================================================
   Footer
   =================================================== */
.site-footer {
  position: relative; z-index: var(--z-content);
  border-top: 1px solid var(--hair-brass);
  padding-block: var(--s-6) var(--s-7);
  background: rgba(2, 6, 15, 0.5);
}
.site-footer__inner { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1.5fr 1fr auto; align-items: start; } }
.site-footer__about { display: grid; gap: var(--s-2); max-width: 34em; }
.site-footer__mark { color: var(--foam); }
.site-footer__note { color: var(--mist); font-size: var(--fs-sm); }
.site-footer__title { font-size: var(--fs-lg); margin-block-end: var(--s-1); }
.site-footer__links { list-style: none; padding: 0; margin: 0; display: grid; }
.site-footer__links a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px;
  color: var(--mist);
  text-decoration: none;
  direction: ltr;
}
.site-footer__links a:hover { color: var(--photophore); text-decoration: underline; text-underline-offset: 4px; }
.back-top { justify-self: start; }

/* ===================================================
   Reduced motion
   =================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .terrain__vent { display: none; }
}

/* ===================================================
   Photography: specimens, residents, modal plate
   =================================================== */
.specimen__art { padding: 0; overflow: hidden; background: #030B18; border: 1px solid var(--hair); border-radius: 4px; }
.specimen__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.03);
  transition: transform 600ms var(--ease-out), filter var(--dur) ease;
}
.specimen:hover .specimen__art,
.specimen:focus-visible .specimen__art { border-color: var(--hair-brass); background-color: #030B18; }
.specimen:hover .specimen__photo,
.specimen:focus-visible .specimen__photo { transform: scale(1.04); filter: saturate(1) contrast(1.05); }
.specimen__art .creature-art { padding: var(--s-3); }

.resident-btn__photo {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hair-brass);
}
.resident-btn .creature-art { width: 36px; height: 36px; }

.modal__art { padding: 0; min-height: 260px; background: #030B18; align-items: stretch; }
.modal__figure { margin: 0; display: grid; grid-template-rows: 1fr auto; width: 100%; height: 100%; }
.modal__photo { width: 100%; height: 100%; min-height: 260px; max-height: 70dvh; object-fit: cover; }
.modal__credit {
  display: grid; gap: 0.15rem;
  padding: 0.6rem var(--s-2);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mist);
  background: #020812;
  border-block-start: 1px solid var(--hair);
}
.modal__credit a { color: var(--photophore); text-underline-offset: 3px; }
.modal__figure > .creature-art { padding: var(--s-4); max-width: 320px; margin: auto; }

/* ===================================================
   Descents: a timeline that is literally a descent
   =================================================== */
.descents__list {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid;
  gap: var(--s-5);
}
.descents__list::before {
  content: ""; position: absolute;
  inset-block: 0.6em 0;
  inset-inline-start: calc(7.5rem + var(--s-3) / 2);
  width: 1px;
  background: linear-gradient(to bottom, var(--brass), var(--hair-brass));
}
.descent {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
}
/* LTR figures inside an RTL grid: align with justify-self, which follows the page direction */
.descent__year { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; justify-self: end; }
.descent__body { position: relative; display: grid; gap: var(--s-1); max-width: 40em; padding-inline-start: var(--s-3); }
.descent__body::before {
  content: ""; position: absolute;
  inset-inline-start: calc(-1 * var(--s-3) / 2 - 4px);
  top: 0.55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--brass);
}
.descent__title { font-size: var(--fs-xl); }
.descent__gauge { grid-column: 2; display: grid; gap: 0.4rem; padding-inline-start: var(--s-3); margin-block-start: calc(var(--s-1) - var(--s-3)); }
.descent__bar { position: relative; height: 2px; background: var(--hair); max-width: 28rem; }
.descent__bar > span {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: calc(var(--reach) * 100%);
  background: var(--brass);
}
/* clip-path reveal from the surface side; negative insets keep the lead dot unclipped once drawn */
.js .descents__list:not(.is-drawn) .descent__bar > span { clip-path: inset(-6px 100% -6px -6px); }
.js[dir="rtl"] .descents__list:not(.is-drawn) .descent__bar > span { clip-path: inset(-6px -6px -6px 100%); }
.descent__bar > span {
  clip-path: inset(-6px -6px -6px -6px);
  transition: clip-path 900ms var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.descent__depth { font-size: var(--fs-sm); color: var(--mist); }
.descent__depth .sounding-num { font-size: 1.05rem; margin-inline-start: 0.35rem; }

@media (max-width: 599px) {
  .descents__list::before { inset-inline-start: 4px; }
  .descent { grid-template-columns: 1fr; gap: var(--s-1); padding-inline-start: var(--s-3); }
  .descent__year { justify-self: start; }
  .descent__body { padding-inline-start: 0; }
  .descent__body::before { display: none; }
  .descent__gauge { grid-column: auto; padding-inline-start: 0; margin-block-start: var(--s-1); }
}

/* Wide screens: the depth bars leave the text column and line up as one chart.
   Every bar starts at the same surface and is drawn to the same scale (the full track is
   Challenger Deep), so a century and a half of attempts reads as a single comparison */
@media (min-width: 1100px) {
  .descent {
    grid-template-columns: 7.5rem minmax(0, 32em) minmax(14rem, 1fr);
  }
  /* the year/body gap stays put so the timeline rule still threads the dots; the chart column takes its own margin */
  .descent__gauge { grid-column: 3; padding-inline-start: 0; margin-inline-start: var(--s-4); margin-block-start: 0; padding-block-start: 1.1rem; gap: 0.6rem; }
  .descent__bar { max-width: none; height: 3px; }
  .descent__bar > span::after {
    content: ""; position: absolute; inset-inline-end: -5px; top: 50%;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--brass);
    transform: translateY(-50%);
  }
  .descent__depth .sounding-num { font-size: 1.6rem; }
}

/* One light for every plate: a soft falloff unifies studio specimens and deep-water shots */
.specimen__art { position: relative; }
.specimen__art::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -50px 60px -40px rgba(2, 8, 18, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Arabic answer letters need an Arabic face; Spectral covers Latin only */
:lang(ar) .quiz__letter { font-family: var(--font-display); font-style: normal; font-size: 1.15rem; }

/* ===================================================
   Hero photograph: real light from the surface, tinted to the brand water
   =================================================== */
.hero { background-color: var(--sea-glass); }
.hero__photo {
  position: absolute; inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  mix-blend-mode: luminosity;      /* keep the light, take the colour from the sea-glass behind */
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 92%);
}
/* a quiet shade behind the text side keeps the copy readable over the bright surface */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to left, rgba(6, 34, 50, 0.55), transparent 60%);
  pointer-events: none;
}
[dir="ltr"] .hero::after { background: linear-gradient(to right, rgba(6, 34, 50, 0.55), transparent 60%); }

/* ===================================================
   Depth explorer
   =================================================== */
.explorer__panel {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block: 1px solid var(--hair-brass);
}
/* phone: figure, slider, details, landmarks — the slider stays next to the number it moves */
.explorer__panel { grid-template-areas: "depth" "control" "reading" "marks"; }
.explorer__depth { grid-area: depth; margin: 0; }
.explorer__control { grid-area: control; }
.explorer__reading { grid-area: reading; }
.explorer__marks { grid-area: marks; }
@media (min-width: 900px) {
  .explorer__panel {
    grid-template-columns: minmax(16rem, 0.8fr) 2fr;
    grid-template-areas: "depth reading" "control control" "marks marks";
    align-items: end;
  }
}
.explorer__depth {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: min(clamp(3.5rem, 2rem + 5vw, 6.5rem), 24vw);
  line-height: 1;
}
.explorer__panel > * { min-width: 0; }
.explorer__depth small { font-family: var(--font-sounding); font-style: italic; color: var(--brass); font-size: 0.35em; }
.explorer__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block-start: 1px solid var(--hair); }
.explorer__facts > div { padding: var(--s-2) var(--s-2) 0 0; display: grid; gap: 0.25rem; align-content: start; }
[dir="rtl"] .explorer__facts > div { padding: var(--s-2) 0 0 var(--s-2); }
.explorer__facts > div + div { border-inline-start: 1px solid var(--hair); padding-inline-start: var(--s-2); }
.explorer__facts dt { font-size: var(--fs-sm); color: var(--mist); }
.explorer__facts dd { margin: 0; font-weight: 600; display: grid; gap: 0.2rem; }
.explorer__facts dd .sounding-num { font-size: 1.35rem; }
.explorer__facts small { font-weight: 400; font-size: var(--fs-sm); color: var(--mist); line-height: 1.6; }
.explorer__zone { color: var(--foam); }
.explorer__zone::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--zone-color); display: inline-block; margin-inline-end: 0.4rem; }
@media (max-width: 767px) {
  .explorer__facts { grid-template-columns: 1fr; }
  .explorer__facts > div, [dir="rtl"] .explorer__facts > div { padding: var(--s-2) 0; }
  .explorer__facts > div + div { border-inline-start: 0; border-block-start: 1px solid var(--hair); padding-inline-start: 0; }
}

.explorer__label { display: block; font-size: var(--fs-sm); color: var(--mist); margin-block-end: var(--s-1); }
.explorer__track { position: relative; padding-block: 14px 18px; }
/* the water column itself is the track: light at the surface, ink at the floor */
.explorer__track::before {
  content: ""; position: absolute; inset-inline: 0; top: 50%;
  height: 8px; margin-top: -6px;
  border-radius: 4px;
  background: linear-gradient(to left, #3FA7C9, var(--sea-glass) 2%, #072438 12%, #051425 40%, var(--ink) 60%, #02060F);
}
[dir="ltr"] .explorer__track::before { background: linear-gradient(to right, #3FA7C9, var(--sea-glass) 2%, #072438 12%, #051425 40%, var(--ink) 60%, #02060F); }
.explorer__ticks { position: absolute; inset-inline: 0; top: 50%; height: 18px; margin-top: 6px; pointer-events: none; }
.explorer__tick { position: absolute; inset-inline-start: calc(var(--at) * 100%); width: 1px; height: 8px; background: var(--brass); opacity: 0.8; }

#explorer-range {
  position: relative; z-index: 1;
  width: 100%; height: 44px; margin: 0;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  touch-action: pan-y;
}
#explorer-range::-webkit-slider-runnable-track { height: 8px; background: transparent; }
#explorer-range::-moz-range-track { height: 8px; background: transparent; }
/* the thumb is the lead weight */
#explorer-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 30px; margin-top: -11px;
  border: 0;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cpath d='M11 0v9' stroke='%23E0BC74' stroke-width='1.5'/%3E%3Cpath d='M11 8 4 18a7 7 0 0 0 14 0z' fill='%23E0BC74'/%3E%3C/svg%3E");
}
#explorer-range::-moz-range-thumb {
  width: 22px; height: 30px; border: 0; border-radius: 0;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cpath d='M11 0v9' stroke='%23E0BC74' stroke-width='1.5'/%3E%3Cpath d='M11 8 4 18a7 7 0 0 0 14 0z' fill='%23E0BC74'/%3E%3C/svg%3E");
}
#explorer-range:focus-visible { outline: 2px solid var(--photophore); outline-offset: 4px; }

.explorer__marks { display: flex; flex-wrap: wrap; gap: 0.25rem var(--s-3); }
.explorer__marks .chip { min-height: 44px; max-width: 100%; text-align: start; }

/* Over the hero photograph the bar needs its own shade so the links stay legible */
.site-header:not(.is-scrolled) { background: linear-gradient(to bottom, rgba(4, 13, 28, 0.6), rgba(4, 13, 28, 0)); }
.site-header:not(.is-scrolled) .nav__list a,
.site-header:not(.is-scrolled) .lang-toggle { color: var(--foam); }
@media (max-width: 1099px) { .site-header:not(.is-scrolled) .nav__list a { color: var(--mist); } }

/* ===================================================
   Scripts beyond Latin and Arabic
   =================================================== */
:lang(zh) {
  --font-display: 'Noto Serif SC', 'Songti SC', serif;
  --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}
:lang(hi) {
  --font-display: 'Noto Serif Devanagari', 'Nirmala UI', serif;
  --font-body: 'Noto Sans Devanagari', 'Nirmala UI', system-ui, sans-serif;
}
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3,
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3 { font-weight: 700; letter-spacing: 0; line-height: 1.35; }
:lang(zh) body { line-height: 1.8; }
:lang(hi) body { line-height: 1.85; }
/* CJK and Devanagari never get italic sounding labels mixed into running text */
:lang(zh) .quiz__letter, :lang(hi) .quiz__letter { font-family: var(--font-sounding); }

/* ===================================================
   Language menu
   =================================================== */
.lang-menu { position: relative; }
.lang-menu__btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.85rem;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--foam);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.lang-menu__btn:hover,
.lang-menu__btn[aria-expanded="true"] { border-color: var(--hair-brass); color: var(--brass); }
.lang-menu__chev { transition: transform var(--dur) var(--ease-out); }
.lang-menu__btn[aria-expanded="true"] .lang-menu__chev { transform: rotate(180deg); }

.lang-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: var(--z-header);
  width: 360px;
  padding: var(--s-2);
  background: #061527;
  border: 1px solid var(--hair-brass);
  border-radius: 10px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.75);
}
.lang-menu__panel:not([hidden]) { animation: lang-in 180ms var(--ease-out); }
@keyframes lang-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lang-menu__title {
  margin: 0 0 var(--s-1);
  padding-inline: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--mist);
}
.lang-menu__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.lang-menu__item {
  position: relative;
  width: 100%;
  min-height: 56px;
  display: grid; align-content: center; gap: 0.1rem;
  padding: 0.45rem 0.75rem;
  padding-inline-end: 2rem;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: start;
  cursor: pointer;
  color: var(--foam);
  transition: background-color var(--dur-fast) ease;
}
.lang-menu__item:hover { background: var(--veil); }
.lang-menu__item:focus-visible { outline-offset: -2px; background: var(--veil); }
.lang-menu__native { font-size: var(--fs-base); font-weight: 600; line-height: 1.3; }
/* every name lines up with the reading direction of the page, whatever its own script */
.lang-menu__native { unicode-bidi: isolate; }
.lang-menu__local { font-size: 0.8125rem; color: var(--mist); line-height: 1.3; }
.lang-menu__item[aria-current="true"] { background: rgba(224, 188, 116, 0.08); }
.lang-menu__item[aria-current="true"] .lang-menu__native { color: var(--brass); }
.lang-menu__tick {
  position: absolute; inset-inline-end: 0.6rem; top: 50%;
  width: 1rem; height: 1rem; margin-top: -0.5rem;
  color: var(--brass);
}
.lang-menu__item.is-loading { opacity: 0.6; cursor: progress; }
.lang-menu__item.is-loading::after {
  content: ""; position: absolute; inset-inline-end: 0.7rem; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  border: 1.5px solid var(--hair-brass); border-top-color: var(--brass); border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 599px) {
  .lang-menu__btn { padding: 0 0.6rem; }
  .lang-menu__panel {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    inset-inline: var(--s-2);
    width: auto;
  }
}
/* em, not px: the breakpoint grows with the reader's text-size setting, so enlarged text drops the label before the header overflows */
@media (max-width: 22.4375em) { .lang-menu__current { display: none; } }

/* ===================================================
   Zone residents: photo tiles instead of pills
   =================================================== */
.zone__residents ul {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));   /* one row per zone, however many residents */
  gap: var(--s-2);
}
.resident {
  width: 100%;
  display: grid; gap: 0.5rem;
  padding: 0;
  background: none; border: 0;
  text-align: start;
  cursor: pointer;
}
.resident__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--hair);
  background: #030B18;
  transition: border-color var(--dur) ease, scale var(--dur-fast) var(--ease-out);
}
.resident__photo { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.resident__frame .creature-art { width: 100%; height: 100%; padding: var(--s-1); }
.resident__name { font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; color: var(--foam); }
.resident:hover .resident__frame,
.resident:focus-visible .resident__frame { border-color: var(--zone-color); }
.resident:hover .resident__photo,
.resident:focus-visible .resident__photo { transform: scale(1.05); }
@media (max-width: 479px) {
  .zone__residents ul { gap: var(--s-1); }
  .zone__residents ul[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resident__name { font-size: 0.8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  /* gentler, not zero: keep the fades that explain a state change, drop all travel and growth */
  .modal, .modal::backdrop, .sounding { transition-duration: 200ms !important; }
  .modal, .sounding { transform: none !important; }
  .descent__bar > span { clip-path: none !important; }
  .chip:active, .hotspot:active, .specimen:active .specimen__art, .resident:active .resident__frame { scale: none; }
  .resident:hover .resident__photo, .specimen:hover .specimen__photo { transform: none; }
}

.site-header__actions { position: relative; }
.lang-error {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  width: min(320px, 90vw);
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--foam);
  background: var(--ink);
  border: 1px solid var(--coral);
  border-radius: 8px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.7);
}
.lang-error[hidden] { display: none; }
.noscript {
  margin: 0 auto; padding: var(--s-3);
  max-width: 760px;
  border: 1px solid var(--hair-brass);
  border-radius: 8px;
  text-align: center;
}

/* Modal photo fills its column down to the credit line */
.modal__art { display: block; }
.modal__figure { display: flex; flex-direction: column; height: 100%; }
.modal__photo { flex: 1; height: auto; min-height: 260px; max-height: none; }
@media (max-width: 699px) { .modal__photo { max-height: 45dvh; } }

/* Calls to action never break across lines */
.btn-primary { white-space: nowrap; }

/* ===================================================
   Plates: credited photographs of places and phenomena
   =================================================== */
.plate { margin: 0; display: grid; gap: 0.4rem; }
.plate__img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--hair);
  background: #030B18;
}
.plate__credit { font-size: 0.75rem; line-height: 1.5; color: var(--mist); }
.plate__credit a { color: var(--photophore); text-underline-offset: 3px; display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }

/* Terrain: description beside the photograph of the real feature */
.terrain__panel { max-width: none; }
.terrain__panel-body.has-photo { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
@media (min-width: 900px) {
  .terrain__panel-body.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}
.terrain__text { display: grid; gap: var(--s-1); align-content: start; max-width: 40em; }

/* Mysteries: the photograph opens with the entry, text runs beside it on wide screens */
.acc-panel { display: grid; gap: var(--s-2); max-width: none; }
.acc-panel > p { max-width: 38em; }
@media (min-width: 768px) {
  .acc-panel:has(.plate) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: start; }
}
/* a closed entry stays closed: the grid display must not override [hidden] */
.acc-panel[hidden] { display: none; }