/* AF Legacy: Water 101 (/water).
 * A scroll story in 3D: a pinned stage draws tap water as points of light that rebuild themselves into each idea
 * (the drop, the molecules, the pH scale, the filter, the plates, the two streams, five glasses, the ORP dial,
 * Face's copper mug) while the words scroll past. The stage only exists when <html> has "w3d"; without it the
 * same chapters read as a plain article. Shares the site's tokens, type, header, buttons and footer (site.css).
 */

.water-page { background: var(--paper); }
.nav-list a[aria-current="page"] { color: var(--copper-ink); }
.foot-links a[aria-current="page"] { color: var(--bone); }
@media (min-width: 900px) {
  .nav-list a[aria-current="page"] { color: inherit; opacity: 1; box-shadow: inset 0 -1px 0 var(--copper); }
}

/* reading progress, under the header */
.w-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; display: none; pointer-events: none; }
.w3d .w-progress { display: block; }
.w-progress i { display: block; height: 100%; background: var(--copper); transform-origin: 0 50%; transform: scaleX(0); }

/* ------------------------------------------------------------------ the article (always readable) */
.w-story { position: relative; }
.w-stage { display: none; }
.w-ch { padding: 36px var(--gutter); }
.w-hero { padding-top: calc(var(--head-h) + 56px); }
.w-card { max-width: 36rem; }
.w-card-wide { max-width: 40rem; }
.w-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(56px, 13vw, 124px);
  line-height: 0.88;
  letter-spacing: -0.004em;
  max-width: 8ch;
  text-wrap: balance;
}
.w-title + .lede { margin-top: 22px; }
.w-h {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 7.4vw, 66px);
  line-height: 0.94;
  text-wrap: balance;
}
.w-h + p { margin-top: 16px; }
.w-card p { color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.w-card p + p { margin-top: 12px; }
.w-card .lede { color: var(--ink-2); }
.w-hint { display: none; }
.w-updated { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.w-answers { position: relative; z-index: 1; }
.w-note { font-size: 15px; }
.w-waters { margin: 18px 0 16px; display: grid; gap: 0; }
.w-waters > div { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--rule); }
.w-waters > div:last-child { border-bottom: 1px solid var(--rule); }
.w-waters dt { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.w-waters dd { margin: 0 0 0 22px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.w-waters b { color: var(--ink); font-weight: 600; }
/* the same five colours as the glasses on the stage */
.sw { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.sw-sk { background: #22468a; }
.sw-k { background: #2a8597; }
.sw-n { background: #9fb4b3; }
.sw-b { background: #d79a56; }
.sw-sa { background: #b5442b; }

/* ------------------------------------------------------------------ the 3D story */
.w3d .w-stage {
  display: block;
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  overflow: hidden;
  background:
    radial-gradient(80% 55% at 82% 6%, rgba(253, 226, 188, 0.6), rgba(253, 226, 188, 0) 62%),
    radial-gradient(70% 50% at 10% 100%, rgba(196, 222, 222, 0.55), rgba(196, 222, 222, 0) 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.w-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: opacity 0.22s; }
.w-stage.is-swapping .w-canvas, .w-stage.is-swapping .w-labels { opacity: 0; }
.w-labels { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.22s; }
.w-label {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  font: 600 13px/1.2 var(--text);
  color: var(--ink);
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 0 8px var(--paper), 0 0 3px var(--paper), 0 0 1px var(--paper);
  will-change: transform, opacity;
}
.w-label small { display: block; margin-top: 1px; font-weight: 400; font-size: 12px; color: var(--ink-2); }
.w-label.is-big { font-size: 15px; }
.w-label.is-num { font: 700 20px/1 var(--display); }
@media (min-width: 900px) { .w-label { font-size: 14px; } .w-label.is-num { font-size: 24px; } }
@media (max-width: 599px) { .w-label.is-five small { display: none; } .w-label.is-five { font-size: 12px; } }

.w3d .w-ch { position: relative; z-index: 1; display: flex; padding-top: 0; padding-bottom: 0; }
.w3d .w-hint { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: 15px; color: var(--ink-2); }
.w3d .w-hint::before { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--copper), rgba(184, 105, 58, 0)); }

/* wide screens: the words on the left, the scene on the right */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .w3d .w-ch { min-height: 140vh; align-items: center; }
  .w3d .w-hero { min-height: 100vh; padding-top: var(--head-h); }
  .w3d .w-card { width: min(36rem, 40vw); }
  .w3d .w-card-wide { width: min(40rem, 42vw); }
  .w3d .w-title { font-size: clamp(52px, min(9vw, 18vh), 124px); max-width: 9ch; }
}
/* short screens (a phone on its side): headings sized to the height, glass names left to the list */
@media (max-height: 520px) {
  .w3d .w-h { font-size: clamp(34px, 10vh, 54px); }
  .w-label.is-five small { display: none; }
}
/* phones and tall screens: the scene on top, the words come up from below on a pane of glass */
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  /* each card starts under the scene and is followed by a fixed gap, so a tall card never covers the next scene */
  .w3d .w-ch { align-items: flex-start; padding-top: 62vh; padding-top: 62svh; padding-bottom: 30vh; padding-bottom: 30svh; }
  .w3d .w-hero { min-height: 100vh; min-height: 100svh; align-items: flex-end; padding-top: 0; padding-bottom: 8svh; }
  .w3d .w-ch:not(.w-hero) .w-card {
    width: 100%;
    padding: 22px 20px 24px;
    background: rgba(250, 252, 251, 0.9);
    box-shadow: 0 22px 50px -30px rgba(22, 18, 15, 0.4), 0 0 0 1px rgba(22, 18, 15, 0.06);
    border-radius: 3px;
  }
  @supports (backdrop-filter: blur(8px)) {
    .w3d .w-ch:not(.w-hero) .w-card { background: rgba(250, 252, 251, 0.78); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); }
  }
  .w3d .w-title { font-size: clamp(54px, 15vw, 96px); }
}

/* ------------------------------------------------------------------ see it made */
.w-cta { position: relative; z-index: 1; padding: clamp(64px, 10vw, 120px) 0; }
.w-cta-grid { display: grid; gap: 48px; }
.w-cta .cta-row { margin-top: 28px; }
.w-sources { align-self: end; font-size: 15px; color: var(--ink-2); }
.w-sources h3 { font: 600 15px/1.3 var(--text); color: var(--ink); }
.w-sources ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.w-sources a { color: var(--copper-ink); font-weight: 600; text-underline-offset: 4px; }
@media (min-width: 900px) { .w-cta-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 80px; } }

/* ------------------------------------------------------------------ filming mode (?render): only the stage */
.w-render body { background: transparent; }
.w-render .site-head, .w-render .skip, .w-render .w-ch, .w-render .w-cta, .w-render .site-foot, .w-render .w-labels { display: none !important; }
.w-render .w-stage { position: fixed; inset: 0; height: 100vh; margin: 0; background: none; }
.w-render .w-canvas { transition: none; }