/* Homepage.
 *
 * One grid for the whole page: a narrow column of labels on the left, and a
 * single column of text on the right. The title, the body, the list of source
 * datasets and the footer all start at the same left edge, so the eye has one
 * line to follow down the page instead of four.
 */
:root {
  color-scheme: light;
  --ink: #10262f;            /* headings, and text that carries weight */
  --body: #354d57;           /* running text */
  --muted: #71858e;          /* labels, notes, anything secondary */
  --faint: #93a5ac;          /* planned, disabled, counters */
  --accent: #17596c;
  --line: #dbe4e7;
  --label-w: 190px;          /* the left column, as on the product pages */
  --gap: 38px;
  --measure: 40rem;          /* about 80 characters at 16px, which reads easily */
  --measure-small: 53rem;    /* small print may run a little wider */
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }

body.fh-home {
  margin: 0; background: #fff; color: var(--body);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
.fh-home [hidden] { display: none !important; }
.fh-home a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.fh-home a:hover { text-decoration: underline; }
.fh-home a:focus-visible, .fh-home button:focus-visible, .fh-home summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 5px;
}
.fh-home button { font: inherit; cursor: pointer; }
.gs-skip { position: absolute; top: 12px; left: 12px; z-index: 20; padding: 12px 18px; background: #fff; transform: translateY(-200%); }
.gs-skip:focus { transform: translateY(0); }

.fh-home-main, .fh-home-footer { width: 100%; max-width: 1188px; padding-inline: 56px; margin-inline: auto; }

/* ---- the grid ---------------------------------------------------------- */

.fh-row {
  display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr);
  gap: var(--gap); padding: 52px 0; border-top: 1px solid var(--line);
}
.fh-row:first-child { border-top: 0; }
.fh-label {
  margin: 7px 0 0; color: var(--muted);
  font-size: 13px; line-height: 1.5; font-weight: 400; letter-spacing: .005em;
}
.fh-col { min-width: 0; }

/* ---- opening ----------------------------------------------------------- */

.fh-intro { padding: 84px 0 64px; }
.fh-intro h1 {
  margin: 0 0 26px; color: var(--ink);
  font-size: clamp(31px, 3.3vw, 46px); line-height: 1.1; letter-spacing: -.038em; font-weight: 600;
}
.fh-lede {
  max-width: var(--measure); margin: 0 0 24px; color: var(--ink);
  font-size: 23.5px; line-height: 1.45; letter-spacing: -.018em; font-weight: 400;
}
.fh-lede b { font-weight: 600; }
.fh-body { max-width: var(--measure); margin: 0 0 14px; font-size: 15.5px; line-height: 1.8; }
.fh-body:last-child { margin-bottom: 0; }
.fh-body strong { color: var(--ink); font-weight: 600; }

/* ---- the source datasets ----------------------------------------------- */

.fh-list { margin: 30px 0 0; padding: 0; list-style: none; }
.fh-list li { padding: 22px 0; border-top: 1px solid #e8eeef; }
.fh-list li:last-child { padding-bottom: 0; }
.fh-state {
  display: block; margin-bottom: 3px; color: var(--faint);
  font-size: 12.5px; line-height: 1.5; letter-spacing: .01em;
}
/* The available collection is the only way into the data from this page, so
   it carries a little more weight than the two that are only announced. */
.fh-list li.is-now .fh-state { color: var(--accent); }
.fh-list li.is-now { padding-top: 24px; }
.fh-list li.is-now .fh-name { font-size: 19px; }
a.fh-name span { color: var(--accent); font-weight: 400; }
a.fh-name:hover { color: var(--accent); }
.fh-name {
  display: block; margin-bottom: 5px; color: var(--ink);
  font-size: 17px; line-height: 1.45; font-weight: 600; letter-spacing: -.018em;
}
a.fh-name { color: var(--ink); }
.fh-list li:not(.is-now) .fh-name { color: var(--faint); font-weight: 500; }
.fh-list li p { max-width: var(--measure-small); margin: 0; font-size: 14.5px; line-height: 1.75; }
.fh-list li:not(.is-now) p { color: var(--faint); }

/* ---- footer ------------------------------------------------------------ */

.fh-home-footer { padding-bottom: 56px; }
.fh-hiring { margin: 24px 0 0; padding: 20px 24px; border: 2px solid var(--accent); border-left-width: 8px; border-radius: 4px; background: #e6f0f3; color: var(--ink); }
.fh-hiring-title { margin: 0 0 8px; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; }
.fh-hiring-text { margin: 0; font-size: 17px; line-height: 1.7; }
.fh-hiring-text strong { color: var(--ink); font-weight: 600; }
.fh-home a.fh-hiring-cta, a.fh-hiring-cta { display: inline-block; margin-top: 16px; padding: 10px 18px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.fh-home a.fh-hiring-cta:hover, .fh-home a.fh-hiring-cta:focus-visible { filter: brightness(1.12); color: #fff; }
.fh-links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 14px; }
.fh-visits { padding-bottom: 0; }
.fh-visit-count { margin: 4px 0 0; color: var(--faint); font-size: 13px; line-height: 1.6; }
.fh-visit-count b { color: var(--muted); font-weight: 600; }
.fh-visit-details { margin-top: 8px; }
.fh-visit-details summary { color: var(--faint); font-size: 13px; cursor: pointer; }
.fh-visit-note { max-width: var(--measure-small); margin: 10px 0 16px; color: var(--faint); font-size: 13px; line-height: 1.7; }

/* the two small charts behind "how this is counted" */
.visits-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 4px; }
.hm-kicker { display: block; margin-bottom: 8px; color: var(--faint); font-size: 12px; line-height: 1.5; }
.bar-list { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.bar-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 2px 0; color: var(--muted); }
.bar-track { display: block; height: 6px; background: #eef3f4; }
.bar-fill { display: block; height: 6px; background: #bcd0d6; }
.bar-val { text-align: right; color: var(--faint); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.spark-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; flex: 1; height: 100%; }
.spark-bar i { display: block; width: 100%; background: #cfdde1; }
.spark-bar em { font-style: normal; color: var(--faint); font-size: 10px; }

/* the modal behind "Open on your phone", which lives in the rail */
.phone-qr { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: rgba(20, 40, 48, .5); }
.phone-qr-card { position: relative; max-width: 320px; padding: 26px 26px 20px; border-radius: 6px; background: #fff; text-align: center; }
.phone-qr-card h3 { margin: 0 0 8px; color: var(--ink); font-size: 17px; font-weight: 600; }
.phone-qr-card p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.phone-qr-url { margin: 12px 0 0 !important; color: var(--faint) !important; font-size: 13px !important; }
.phone-qr-close { position: absolute; top: 6px; right: 10px; border: 0; background: none; color: var(--faint); font-size: 22px; line-height: 1; }

/* ---- narrow screens ---------------------------------------------------- */

@media (max-width: 900px) {
  .fh-home-main, .fh-home-footer { max-width: none; padding-inline: 20px; }
  .fh-row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 30px 0; }
  .fh-intro { padding: 34px 0 30px; }
  .fh-intro h1 { font-size: clamp(30px, 8vw, 38px); }
  .fh-lede { font-size: 19px; }
  .fh-body { font-size: 15.5px; }
  .visits-detail { grid-template-columns: minmax(0, 1fr); }
}

/* A horizontal schematic, with the contribution boundary marked above. */
.fh-workflow-section { display: block; }
.fh-workflow-section > .fh-label { margin: 0 0 25px; }
.fh-workflow-figure { margin: 0; }
.fh-workflow-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 0 10px; }
.fh-workflow-scroll img, .fh-workflow-scroll .fh-workflow-svg { display: block; width: 100%; min-width: 800px; height: auto; }
.fh-workflow-svg text { cursor: text; }
.fh-workflow-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.fh-workflow-sources { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.fh-workflow-sources summary { width: fit-content; cursor: pointer; }
.fh-workflow-sources p { margin: 8px 0 0; }

.fh-workflow-hint { display: none; margin-top: 7px; color: var(--muted); font-size: 13px; }
@media (max-width: 840px), (min-width: 901px) and (max-width: 1164px) {
  .fh-workflow-hint { display: block; }
}

/* 2026-09-08 source-data notice */
.fh-source-note { margin: 12px 0 0; padding: 12px 16px; border-left: 4px solid var(--accent); background: #fff6d6; color: var(--ink); font-size: 15px; line-height: 1.65; }
.fh-source-note strong { font-weight: 700; }

/* Temporary site development notice, 2026-09-09. */
.fh-development-banner {
  margin: 0; padding: 28px 24px;
  background: #ffd94a; color: #171a1c;
  text-align: center; font-size: clamp(26px, 4vw, 54px);
  font-weight: 700; line-height: 1.15; letter-spacing: .035em;
  overflow-wrap: anywhere;
}

/* just for fun (2026-09-13): six drawing windows on the left of the opening, text on the right */
.fh-intro-fun { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 56px; align-items: start; }
.fh-fun { min-width: 0; }
.fh-fun .fh-label { margin-bottom: 10px; }
.fh-fun-lede { max-width: var(--measure-small); margin: 0 0 14px; font-size: 14.5px; line-height: 1.7; }
.fh-fun-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.fh-fun-grid li { min-width: 0; }
.fh-fun-item { margin: 0; }
.fh-fun-img { display: block; width: 100%; height: auto; aspect-ratio: 420 / 270; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.fh-fun-item figcaption { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.fh-fun-grid .is-empty { aspect-ratio: 420 / 270; border: 1px dashed var(--line); border-radius: 4px; }
.fh-intro-text .fh-label { margin-bottom: 18px; }
@media (max-width: 900px) {
  .fh-intro-fun { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .fh-fun { order: 2; }
  .fh-intro-text { order: 1; }
}

/* ---------------------------------------------------------------------------
   "Try it" on the home page (2026-09-22).

   The site claims every land pixel is a site with its own place in the network.
   Until now a reader had to take that on trust — the working maps were three
   levels down. This section puts the smallest version of the claim on the home
   page: click a pixel, the land draining through it comes back from one
   comparison. The map is the left two thirds, the answer the right third, and
   the four questions are listed under it as the way further in.
--------------------------------------------------------------------------- */
.fh-demo {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px;
  align-items: start; margin: 18px 0 0;
}
.fh-demo-map {
  height: 380px; border: 1px solid #dbe3e6; border-radius: 3px; background: #eef2f3;
}
.fh-demo-side { display: flex; flex-direction: column; gap: 10px; }
.fh-demo-answer { margin: 0; color: #22414d; font: 400 15px/1.55 var(--sans); }
.fh-demo-answer b { font-weight: 600; color: #17596c; }
.fh-demo-rule { display: block; margin-top: 4px; color: #6f8791; font-size: 13px; }
.fh-demo-hint { margin: 0; color: #7d8f96; font: 400 13px/1.55 var(--sans); }
.fh-demo-caption { margin: 0; color: #8a9aa1; font: 400 12.5px/1.6 var(--sans); }
.fh-demo code { font-size: .92em; }

.fh-demo-links {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.fh-demo-links a {
  display: block; padding: 7px 0; color: #17596c;
  font: 400 14px/1.5 var(--sans); text-decoration: none; border-bottom: 1px solid #e6ebed;
}
.fh-demo-links a:hover { color: #0e3f4e; }

@media (max-width: 900px) {
  .fh-demo { grid-template-columns: minmax(0, 1fr); }
  .fh-demo-map { height: 300px; }
  .fh-demo-links { grid-template-columns: minmax(0, 1fr); }
}

/* The pelicans are decoration, so they sit at the foot of the page instead of beside the headline:
   the opening screen is the sentence that says what FullHydro is (2026-09-22). */
.fh-fun-row .fh-fun { max-width: 780px; }
.fh-fun-row .fh-fun-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .fh-fun-row .fh-fun-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The intro used to share a row with the pelicans; with them at the foot it has the row to itself. */
.fh-intro-wide { max-width: 44rem; }
.fh-intro-wide .fh-body { max-width: 40rem; }

/* What is here: one line per part, and a sentence saying what it is. No lists of items — the rail and
   each part's own page already hold those (2026-09-22). */
.fh-parts { margin: 0; padding: 0; list-style: none; }
.fh-parts li { padding: 16px 0; border-top: 1px solid #e6ebed; }
.fh-parts li:first-child { padding-top: 0; border-top: 0; }
.fh-parts a { color: #17596c; text-decoration: none; font: 400 19px/1.4 var(--sans); }
.fh-parts a b { font-weight: 600; }
.fh-parts a:hover { color: #0e3f4e; }
.fh-parts p { margin: 6px 0 0; max-width: 42rem; color: #4a6672; font: 400 15px/1.6 var(--sans); }

/* The pelicans are either not here or properly big — small thumbnails at the foot were neither
   (Lulu 2026-09-22: "这个你要么不要，要么放大"). Two per row at the full width of the text column,
   so each drawing is about 560 px and readable as a drawing. */
.fh-fun-row .fh-fun { max-width: none; }
.fh-fun-row .fh-fun-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 28px; }
.fh-fun-row .fh-fun-img { border-radius: 6px; }
.fh-fun-row .fh-fun-item figcaption { margin-top: 9px; font-size: 13.5px; }
.fh-fun-row .fh-fun-lede { max-width: 46rem; font-size: 15px; }
@media (max-width: 700px) { .fh-fun-row .fh-fun-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.fh-parts-lede { margin: 0 0 22px; max-width: 42rem; }

/* Where FullHydro starts, back on the page (2026-09-22).

   It read as a mess before for two reasons, both fixed here. It was the one block on the page that
   did not use the label column, so its left edge sat 200 px left of every paragraph; it uses the same
   two columns as the rest now. And it was drawn at the full width of the content column, where the
   SVG's own 21 px labels came out larger than the page's own headings; capping its width brings its
   type back under the page's. */
.fh-workflow-section { display: grid; }
.fh-workflow-section > .fh-label { margin: 7px 0 0; }
.fh-workflow-figure { max-width: 820px; }
.fh-workflow-scroll img, .fh-workflow-scroll .fh-workflow-svg { min-width: 680px; }
@media (max-width: 900px) { .fh-workflow-figure { max-width: none; } }