/* Cousteau, applied to the long-form volumes.
 *
 * Volumes I and II were built as paper: a cream page, Fraunces, hairline rules.
 * This loads AFTER their own <style> block and re-grounds them without touching
 * their markup. The page becomes open water; the article becomes one continuous
 * survey sheet floating on it. Their figures are hand-authored SVG with literal
 * hex fills, so those are remapped in the HTML itself, not here.
 */

:root {
  /* The article surface is now slate, not paper. */
  --paper:        #E9DFC6;
  --paper-2:      #F2EAD6;
  --ink:          #2B2419;
  --ink-2:        #4A3F2C;
  --muted:        #7A6C53;
  --rule:         #B9AA8A;

  --crimson:      #C63A22;   /* calypso */
  --crimson-deep: #96442F;
  --gold:         #C9772B;
  --navy:         #2A6379;
  --moss:         #3F7A5E;

  /* new, for the water the sheet floats on */
  --surface:      #3FA9BF;
  --mid:          #17738C;
  --deep:         #0A4257;
  --floor:        #05283A;
  --canvas:       #EFE7D3;
  --teal:         #10697A;
  --saucer:       #E8A712;
  --brass:        #B08D3F;
}

/* ---- the sea ----------------------------------------------------------- */

body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-variation-settings: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: var(--canvas);
  background-color: var(--deep);
  background-image:
    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;
}

.progress { background: rgba(5,40,58,.35); }
.progress__bar { background: var(--crimson); }

/* ---- masthead and hero sit on the water -------------------------------- */

.masthead, .hero { color: var(--canvas); }
.masthead__name {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; font-style: normal;
}
.masthead__strap, .masthead__top > span { color: rgba(239,231,211,.72); }
.masthead { border-color: rgba(239,231,211,.3); }
.masthead__strap {
  font-family: "Barlow Condensed", sans-serif; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; border-top-color: rgba(239,231,211,.3);
}

.vols a, .lang a {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(239,231,211,.62);
}
.vols a.active, .lang a.active { color: var(--canvas); }
.vols a.active::after, .lang a.active::after { background: var(--crimson); }
.vols a:focus-visible, .lang a:focus-visible { outline: 2px solid var(--saucer); outline-offset: 2px; }

.hero__kicker {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--saucer);
}
.hero__title {
  font-family: "Archivo Black", sans-serif;
  font-variation-settings: normal; font-weight: 400;
  /* Archivo Black sets much wider than Fraunces, so the floor of the original
     clamp overflowed narrow screens. Re-tuned for this face. */
  font-size: clamp(34px, 9.2vw, 118px);
  letter-spacing: -.005em; line-height: .94;
  color: var(--canvas);
  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 {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-variation-settings: normal; font-weight: 400; font-style: normal;
  font-size: clamp(19px, 2.1vw, 23px); line-height: 1.55;
  color: rgba(239,231,211,.93);
}
/* Volumes I and II lay the meta out as a flex row, not the grid Volume III
   uses. Recolour only; do not touch the layout. */
.hero__meta {
  border-top-color: rgba(239,231,211,.3);
  color: rgba(239,231,211,.62);
  font-family: "Barlow Condensed", sans-serif; font-weight: 500;
  font-size: 12px; letter-spacing: .18em;
}
.hero__meta strong {
  font-family: "IBM Plex Mono", monospace; font-weight: 500;
  font-size: 14px; color: var(--canvas);
}

/* ---- the article is one continuous survey sheet ------------------------
   Everything after the masthead and hero is one sheet. Some sections carry
   .col themselves and are only 680px wide, so the measure is held with
   horizontal padding rather than width — otherwise the sheet steps in and out
   down the length of the page. */

.wrap > *:not(.masthead):not(.hero) {
  background: var(--paper);
  color: var(--ink);
  max-width: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 34px 34px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-radius: 0;
}

.wrap > .col:not(.masthead):not(.hero),
.wrap > .nextvol:not(.masthead):not(.hero),
.wrap > .volnav:not(.masthead):not(.hero),
.wrap > aside.hearing:not(.masthead):not(.hero) {
  padding-left: max(18px, calc((100% - var(--column)) / 2));
  padding-right: max(18px, calc((100% - var(--column)) / 2));
}

/* These carried 60–100px top margins, which showed as water between sheets.
   Keep the breathing room, but as padding inside the sheet. */
.wrap > .reframe-divider,
.wrap > .coda,
.wrap > .nextcard,
.wrap > .share,
.wrap > .sources,
.wrap > footer {
  margin-top: 0;
  padding-top: 72px;
}

/* Cap and foot the sheet, and float it on the water. */
.wrap > :nth-child(3) {
  border-top: 1px solid var(--rule);
  border-radius: 5px 5px 0 0;
  padding-top: 48px;
  box-shadow: 0 -14px 40px rgba(3,26,38,.26);
}
.wrap > :last-child {
  border-bottom: 1px solid var(--rule);
  border-radius: 0 0 5px 5px;
  padding-bottom: 52px;
  box-shadow: 0 22px 54px rgba(3,26,38,.42);
}

.col { max-width: var(--column); margin: 0 auto; }
.wrap > .col > * { max-width: none; }

/* ---- article typography ------------------------------------------------ */

.wrap > section:not(.hero) p,
.wrap > section:not(.hero) li { font-family: "IBM Plex Sans", system-ui, sans-serif; font-variation-settings: normal; }

.section-marker {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--crimson);
}

h2.section-title, .section-title {
  font-family: "Barlow Condensed", sans-serif;
  font-variation-settings: normal; font-weight: 600;
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.02; letter-spacing: .005em; text-transform: uppercase;
  color: var(--ink);
}
.section-title em { font-style: normal; color: var(--crimson); }

.dropcap::first-letter {
  font-family: "Archivo Black", sans-serif;
  font-variation-settings: normal; font-weight: 400;
  color: var(--crimson);
}

blockquote, .pull, .pullquote {
  font-family: "Barlow Condensed", sans-serif; font-weight: 500;
  font-style: normal; letter-spacing: .01em;
}

strong, b { font-weight: 600; }
em, i { font-style: italic; }

a { color: var(--crimson); }

figcaption { font-family: "IBM Plex Sans", sans-serif; color: var(--muted); }
figcaption b, figure figcaption b {
  font-family: "Barlow Condensed", sans-serif; font-variation-settings: normal;
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--crimson);
}

.chart-title, .chart-subtitle, .chart-axis, .chart-axis-label, .chart-data-label {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
}
.chart-data-label { font-family: "IBM Plex Mono", monospace; font-weight: 500; }

/* ---- next-volume pointers --------------------------------------------- */

.nextcard, .nextvol { border-color: var(--rule); }
.nextcard__kicker, .nextvol__label {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--crimson);
}
.nextcard__title, .nextvol__title {
  font-family: "Archivo Black", sans-serif;
  font-variation-settings: normal; font-weight: 400; color: var(--ink);
}
.nextcard__cta { background: var(--crimson); color: var(--canvas);
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; }

/* ---- the hearing player, re-grounded ---------------------------------- */

.hearing__head b, .hearing__now {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.hearing__time, .hearing__total { font-family: "IBM Plex Mono", monospace; }
.hearing__play {
  background: linear-gradient(140deg, #E4C877, var(--brass) 45%, #6E5722);
  border-color: #6E5722;
}
.hearing__fill { background: var(--crimson); }
.hearing__thumb { background: var(--brass); border: 2px solid #6E5722; }

/* ---- sources and share ------------------------------------------------- */

.sources li, .sources p { font-size: 15px; color: var(--ink-2); }
.share, .sources { color: var(--ink); }

@media (max-width: 640px) {
  .wrap > *:not(.masthead):not(.hero) { padding-left: 18px; padding-right: 18px; }
  body { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ---- the last of Fraunces ---------------------------------------------
   Enumerated from the two volumes' own <style> blocks rather than guessed, so
   nothing is left half-converted. Display and stamped labels go to Barlow
   Condensed, figures and readouts to IBM Plex Mono, prose to IBM Plex Sans. */

h3,
.pull,
.reframe-divider__symbol,
.reframe-divider__text,
.coda__line,
.regime__title,
.player__id,
.player__name,
.phase__name,
.hearing__meta,
.hearing__now,
.hearing__cast {
  font-family: "Barlow Condensed", sans-serif;
  font-variation-settings: normal;
  font-weight: 600;
  font-style: normal;
}

h3 { letter-spacing: .04em; text-transform: uppercase; }

.pull {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.22;
  letter-spacing: .01em;
  color: var(--ink);
}

.coda__line { letter-spacing: .01em; }

.reframe-divider__symbol, .reframe-divider__text { letter-spacing: .18em; text-transform: uppercase; }

.regime__title, .player__id, .player__name, .phase__name { letter-spacing: .1em; text-transform: uppercase; }

ul.editorial li strong,
.share__card-text,
.share__active-quote {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-variation-settings: normal;
  font-weight: 600;
  font-style: normal;
}
.share__active-quote { font-weight: 450; }

.stat__value,
.chart-data-label,
.hearing__time,
.hearing__total {
  font-family: "IBM Plex Mono", monospace;
  font-variation-settings: normal;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* The chapter list in the player is set in the display face on the paper
   volumes; it reads better here as a stamped list. */
.hearing__ch {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  letter-spacing: .04em;
}