/* The Inquiry, Volume III — Cousteau.
 *
 * The page is open water. Everything you are meant to read sits on a slate,
 * because prose over a lit sea is unreadable and because a survey team writes
 * its findings on something it can hold. The two calibrations own the only
 * loud colours on the page: calypso red for nominal, teal for real. No country
 * is ever allowed either of them.
 */

:root {
  --surface:   #3FA9BF;
  --mid:       #17738C;
  --deep:      #0A4257;
  --floor:     #05283A;

  --slate:     #E9DFC6;
  --slate-2:   #F2EAD6;
  --slate-edge:#B9AA8A;
  --canvas:    #EFE7D3;

  --ink:       #2B2419;
  --ink-2:     #4A3F2C;
  --ink-mute:  #7A6C53;

  --calypso:   #C63A22;   /* nominal — the drifting unit */
  --teal:      #10697A;   /* real — the unit held still */
  --saucer:    #E8A712;   /* China, the contact being tracked */
  --brass:     #B08D3F;

  --column:    690px;
  --wide:      1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--canvas);
  background:
    /* light from the surface */
    linear-gradient(104deg, rgba(207,246,255,.16) 0 4%, transparent 4% 13%,
                            rgba(207,246,255,.10) 13% 16%, transparent 16% 29%,
                            rgba(207,246,255,.14) 29% 34%, transparent 34% 51%,
                            rgba(207,246,255,.09) 51% 55%, transparent 55% 72%,
                            rgba(207,246,255,.12) 72% 77%, transparent 77%),
    linear-gradient(180deg, var(--surface) 0%, var(--mid) 22%, var(--deep) 58%, var(--floor) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* Suspended particulate. Purely atmospheric, so it goes when motion is off. */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(232,251,255,.34), transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(232,251,255,.26), transparent),
    radial-gradient(1.8px 1.8px at 42% 61%, rgba(232,251,255,.22), transparent),
    radial-gradient(1.1px 1.1px at 88% 74%, rgba(232,251,255,.28), transparent),
    radial-gradient(1.4px 1.4px at 26% 88%, rgba(232,251,255,.20), transparent),
    radial-gradient(1.2px 1.2px at 63% 37%, rgba(232,251,255,.24), transparent);
  background-size: 620px 620px;
}

.wrap { position: relative; z-index: 1; max-width: var(--wide); margin: 0 auto; padding: 0 22px 110px; }

/* ---- type roles -------------------------------------------------------- */

.stamp {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---- dive-depth progress ---------------------------------------------- */

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; background: rgba(5,40,58,.35); }
.progress__bar { height: 100%; width: 0; background: var(--calypso); }

/* ---- masthead ---------------------------------------------------------- */

.masthead { padding: 40px 0 26px; }

.masthead__top {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 20px;
}

.masthead__name {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 21px; letter-spacing: .22em; text-transform: uppercase;
}

.vols, .lang { display: inline-flex; align-items: baseline; gap: 2px; }

.vols a, .lang a {
  position: relative;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(239,231,211,.62); text-decoration: none;
  padding: 10px 9px; margin: -4px 0;   /* padding, never margin — hit targets */
}
.vols a:hover, .lang a:hover { color: var(--canvas); }
.vols a.active, .lang a.active { color: var(--canvas); }
.vols a.active::after, .lang a.active::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 8px;
  height: 2px; background: var(--calypso);
}
.vols a:focus-visible, .lang a:focus-visible { outline: 2px solid var(--saucer); outline-offset: 2px; }
.vols__sep { opacity: .4; }

.masthead__strap {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(239,231,211,.3);
  font-family: "Barlow Condensed", sans-serif; font-weight: 500;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(239,231,211,.7);
}

/* ---- hero -------------------------------------------------------------- */

.hero { padding: 54px 0 60px; }

.hero__kicker {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--saucer); margin-bottom: 18px;
}

.hero__title {
  max-width: 14ch;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 10vw, 132px);
  line-height: .94; letter-spacing: -.005em;
  overflow-wrap: break-word;
  text-shadow: 0 10px 40px rgba(3,26,38,.5);
}
.hero__title em { font-style: normal; color: var(--saucer); }

.hero__deck {
  max-width: 60ch; margin-top: 26px; font-size: 20px; line-height: 1.6;
  color: rgba(239,231,211,.93);
}

.hero__meta {
  display: grid; gap: 1px; margin-top: 44px; max-width: 940px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: rgba(239,231,211,.22); border: 1px solid rgba(239,231,211,.22);
}
.hero__meta > div {
  background: rgba(5,40,58,.42); padding: 14px 16px;
  font-family: "Barlow Condensed", sans-serif; font-weight: 500;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(239,231,211,.6);
}
.hero__meta strong {
  display: block; margin-top: 5px;
  font-family: "IBM Plex Mono", monospace; font-weight: 500;
  font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--canvas);
}

/* ---- slates ------------------------------------------------------------ */

.slate {
  background: linear-gradient(180deg, var(--slate-2), var(--slate));
  border: 1px solid var(--slate-edge); border-radius: 5px;
  box-shadow: 0 22px 54px rgba(3,26,38,.42);
  color: var(--ink);
}

.volnav, .volnote { max-width: var(--column); margin: 0 auto; padding: 24px 28px; }
.volnav { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.volnav b, .volnote b {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--calypso); flex: none;
}
.volnav span { flex: 1 1 30ch; font-size: 16px; color: var(--ink-2); }
.volnote { margin-top: 56px; }
.volnote b { display: block; margin-bottom: 10px; }
.volnote p { font-size: 17px; color: var(--ink-2); }
.volnote p + p { margin-top: 12px; }
.volnav a, .volnote a { color: var(--calypso); text-underline-offset: 3px; }

/* ---- reveal ------------------------------------------------------------ */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  body::after { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { padding: 0 16px 76px; }
  .hero { padding: 36px 0 44px; }
  .hero__deck { font-size: 18px; }
  .volnav, .volnote { padding: 20px 20px; }
}