/* ==========================================================================
   The Water Century — shared reading components
   Loaded by every part in the series. Keep page-specific styling out of here:
   if a rule only one part needs, it belongs in that part's own sheet.

   Depends on tokens each part already defines:
     --navy-900  --cream-50  --blue-300  --blue-600  --ink  --muted  --rule
   ========================================================================== */

/* --- reading progress ---------------------------------------------------
   A hairline, measured over the article only: on Part One the scrollytelling
   cover is not reading, so it must not count toward progress. */
.w2-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:transparent;pointer-events:none}
/* scaleX, not width: this repaints on every scroll frame, so it must not touch layout */
.w2-bar i{display:block;height:100%;width:100%;background:var(--blue-500,#2f80ed);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* --- contents -----------------------------------------------------------
   Collapsed by default so it costs nothing to ignore, and gives anyone who
   wants to skip ahead a way to do it. */
:is(#article, .wc-read) .w2-toc{margin:2rem 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.2rem 0}
:is(#article, .wc-read) .w2-toc summary{cursor:pointer;padding:.75rem 0;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-600)}
:is(#article, .wc-read) .w2-toc ol{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.45rem}
:is(#article, .wc-read) .w2-toc a{display:flex;gap:.7rem;text-decoration:none;color:var(--ink);font-size:.98rem}
:is(#article, .wc-read) .w2-toc a:hover{color:var(--blue-600)}
:is(#article, .wc-read) .w2-toc__n{color:var(--muted);font-variant-numeric:tabular-nums}

/* --- the skim path ------------------------------------------------------ */
:is(#article, .wc-read) .w2-hurry{
  margin:2.2rem 0 0;padding:.9rem 1.1rem;border:1px solid var(--rule);
  border-radius:2px;font-size:.95rem;color:var(--muted);background:rgba(255,255,255,.6);
}
:is(#article, .wc-read) .w2-hurry strong{color:var(--ink)}
:is(#article, .wc-read) .w2-hurry em{font-style:italic;color:var(--blue-600)}

/* --- "In short" ---------------------------------------------------------
   Three plain points per section, in a full-bleed navy band: the column keeps
   the text width, the box-shadow paints the colour out to both edges and
   clip-path lets it escape. Navy, not white — the page ground is cream and the
   figure panels are already white, so white reads as no break at all. */
:is(#article, .wc-read) .w2-short{
  background:var(--navy-900);color:var(--cream-50);
  box-shadow:0 0 0 100vmax var(--navy-900);clip-path:inset(0 -100vmax);
  margin:2.6rem 0;padding:2rem 0 2.1rem;
}
/* when the band directly follows a figure panel the two are flush — no cream
   sliver between full-bleed surfaces (the figure's 2.6rem bottom margin
   collapses against this negative top to zero) */
#article .vis + .w2-short{margin-top:-2.6rem}
/* the label: Part Two already has .wc-sub, Part One does not, so .w2-lab carries
   the same treatment for any page that lacks it */
:is(#article, .wc-read) .w2-lab{color:var(--blue-600);margin:0 0 .9rem}
/* inside the navy band the label has to lift off the dark ground instead */
:is(#article, .wc-read) .w2-short .wc-sub,
:is(#article, .wc-read) .w2-short .w2-lab{color:var(--blue-300);margin:0 0 .9rem}
:is(#article, .wc-read) .w2-lab::before{background:var(--blue-500)}
:is(#article, .wc-read) .w2-short .wc-sub::before,
:is(#article, .wc-read) .w2-short .w2-lab::before{background:var(--blue-300)}
:is(#article, .wc-read) .w2-lab{
  font:600 clamp(.69rem,.66rem + .12vw,.78rem)/1 'Inter',system-ui,sans-serif;
  letter-spacing:.26em;text-transform:uppercase;
}
:is(#article, .wc-read) .w2-lab::before{content:'';display:inline-block;width:1.4rem;height:2px;
  vertical-align:.22em;margin-right:.7rem}
:is(#article, .wc-read) .w2-short ol{margin:0;padding-left:1.5rem;display:grid;gap:.6rem}
:is(#article, .wc-read) .w2-short ol li::marker{color:var(--blue-300)}
:is(#article, .wc-read) .w2-short em{color:var(--cream-50)}
:is(#article, .wc-read) .w2-short strong.w2-hi{color:var(--blue-300)}

/* --- keyword highlight --------------------------------------------------
   Blue and upright. Blue-and-italic is Matt's own voice; this is emphasis
   inside reported copy, so it takes the colour and not the italic. */
:is(#article, .wc-read) strong.w2-hi{color:var(--blue-600);font-style:normal}