/* FullHydro readability layer, 2026-09-05.
   Loaded last; nothing in the earlier stylesheets is edited.

   Four changes, nothing else. No grid is restructured.
     1. Line length.  Running text was up to 130 characters per line.
     2. Type.         16px/1.8 in mid grey; tighter, larger, darker.
     3. Clickable.    The dataset row and the three tiers are now links.
     4. One signal.   Underline means link; the bar means "you are here".

   focused.css sets .wrap{max-width:none} and max-width:none on the prose
   blocks under body.geo-site.fr-page, so rules here carry .fr-page.

   Careful: .hm-footer-cols, .hm-hero-body and .fr-overview-layout are
   themselves .wrap, which is centred — giving them a max-width re-centres
   them and breaks their left edge. Cap their children instead. */

:root {
  --fh-measure: 46rem;                    /* ~68 characters at 17px Inter */
  --fh-page: 68rem;
  --fh-label: 190px;                      /* the existing home/footer label column */
  --fh-label-gap: 38px;
  --fh-rule: #dde6e9;
}

/* ---------- 1. Line length -------------------------------------------- */

body.geo-site.fr-page .wrap { max-width: var(--fh-page); margin-inline: auto; }

/* Prose gets a measure. */
body.geo-site.fr-page .hm-lede,
body.geo-site.fr-page .hm-card p,
body.geo-site.fr-page .hm-body p,
body.geo-site.fr-page .ov-lede,
body.geo-site.fr-page .ov-body p,
body.geo-site.fr-page .ov-tier p,
body.geo-site.fr-page .ov-standfirst,
body.geo-site.fr-page .section-intro,
body.geo-site.fr-page .gs-method .data-lede,
body.geo-site.fr-page .ov-map-caption,
body.geo-site.fr-page.doc-page .sh-body p,
body.geo-site.fr-page.doc-page .data-top .data-lede { max-width: var(--fh-measure); }

/* Blocks that draw a rule end where their own text ends, so no line runs
   300px past the paragraph it belongs to. */
body.geo-site.fr-page .ov-section,
body.geo-site.fr-page .ov-tier,
body.geo-site.fr-page .ov-cta-section { max-width: var(--fh-measure); }
body.geo-site.fr-page .hm-section-head,
body.geo-site.fr-page .hm-cards,
body.geo-site.fr-page .hm-footer-cols > div {
  max-width: calc(var(--fh-label) + var(--fh-label-gap) + var(--fh-measure));
}
body.geo-site.fr-page.doc-page .split-head,
body.geo-site.fr-page.doc-page .table-shell,
body.geo-site.fr-page.doc-page .table-scroll {
  max-width: calc(var(--fh-label) + var(--fh-label-gap) + var(--fh-measure));
}

/* Figures and the fact table keep their own width. */
body.geo-site.fr-page .ov-table,
body.geo-site.fr-page .ov-facts,
body.geo-site.fr-page .video-frame,
body.geo-site.fr-page .ov-map,
body.geo-site.fr-page .ov-mapblock { max-width: none; }

/* ---------- 2. Type --------------------------------------------------- */

body.geo-site.fr-page { font-size: 17px; line-height: 1.62; color: #21404c; }

body.geo-site.fr-page .hm-lede,
body.geo-site.fr-page .ov-lede,
body.geo-site.fr-page .ov-standfirst { font-size: 18px; line-height: 1.6; color: #33525f; }

body.geo-site.fr-page .hm-card p,
body.geo-site.fr-page .ov-body p,
body.geo-site.fr-page .ov-tier p,
body.geo-site.fr-page .gs-method .data-lede,
body.geo-site.fr-page.doc-page .sh-body p,
body.geo-site.fr-page.doc-page .data-top .data-lede { font-size: 17px; line-height: 1.62; color: #33525f; }

body.geo-site.fr-page .ov-body p,
body.geo-site.fr-page .ov-tier p { margin: 0 0 18px; }
body.geo-site.fr-page .hm-body p { font-size: 15px; line-height: 1.65; color: #56717b; }
body.geo-site.fr-page .section-intro { font-size: 15.5px; line-height: 1.62; }

/* Headlines: -0.045em tracking made large type hard to scan. */
body.geo-site.fr-page .hm-hero h1 { letter-spacing: -.022em; line-height: 1.12; }
body.geo-site.fr-page .ov-hero h1 { letter-spacing: -.022em; }
body.geo-site.fr-page .gs-title h1 { letter-spacing: -.018em; }
body.geo-site.fr-page .ov-label h2 { letter-spacing: -.018em; }
body.geo-site.fr-page .ov-tier h3,
body.geo-site.fr-page .hm-card b { letter-spacing: -.018em; }

/* Small labels were the faintest thing on the page; the tier label was the
   only one in a monospace face. */
body.geo-site.fr-page .hm-kicker,
body.geo-site.fr-page .ov-kicker,
body.geo-site.fr-page .eyebrow,
body.geo-site.fr-page .gs-page-kicker,
body.geo-site.fr-page .ov-facts dt { color: #647f89; }
body.geo-site.fr-page .ov-tier h3 .gs-tier-label {
  color: #7b9199; font: 400 13px/1.5 var(--sans);
  letter-spacing: .02em; text-transform: none; margin-right: 12px;
}
body.geo-site.fr-page .ov-facts dd { color: #33525f; line-height: 1.6; }

/* Asides had a left bar on the overview and none on the doc pages. */
body.geo-site.fr-page .aside,
body.geo-site.fr-page .ov-body p.aside,
body.geo-site.fr-page .ov-cta-section .aside {
  padding-left: 0; border-left: 0;
  max-width: var(--fh-measure); color: #56717b; font-size: 15px; line-height: 1.65;
}

/* The development notice was the loudest thing above the headline. */
body.geo-site.fr-page .dev-banner {
  background: #f5f8f9; border-bottom: 1px solid var(--fh-rule);
  color: #5a747e; font-size: 13px; line-height: 1.6;
}
body.geo-site.fr-page .dev-banner .gs-notice-title { color: #35525f; font-weight: 500; }

/* ---------- 3. Things that can be clicked ----------------------------- */
/* Only the name is the link, and it carries an underline. No whole-row link
   and no separate "open this" line, so each row offers one thing to click
   rather than two ways to reach the same page. */

body.geo-site.fr-page a.fh-name {
  color: inherit; text-decoration: underline;
  text-decoration-color: #a9c2ca; text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
body.geo-site.fr-page a.fh-name:hover { color: #19627a; text-decoration-color: currentColor; }
body.geo-site.fr-page .ov-tier h3 a.fh-name { color: #19627a; }

/* "Coming next" must not look the same as a row you can open. */
body.geo-site.fr-page .hm-card.is-soon { opacity: .7; }
body.geo-site.fr-page .hm-card.is-soon .hm-state { border: 0; padding: 0; }

/* ---------- 4. One signal, one meaning -------------------------------- */
/* The rail marked the current page with a bar and the current sub-view with
   an underline, while body links also use an underline. Underline is a link. */

body.geo-site.fr-page .gs-rail .gs-subnav {
  position: relative; margin-left: 34px; padding-left: 14px;
}
/* A faint track down the whole group says the two views are a pair; the dark
   segment says which one you are on. Two dark bars would say nothing. */
body.geo-site.fr-page .gs-rail .gs-subnav::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 2px; background: #e2e9ec;
}
body.geo-site.fr-page .gs-rail .gs-subnav button { position: relative; padding: 6px 10px 6px 0; cursor: pointer; }
body.geo-site.fr-page .gs-rail .gs-subnav button.is-on { color: #17596c; font-weight: 500; text-decoration: none; }
body.geo-site.fr-page .gs-rail .gs-subnav button.is-on::before {
  content: ''; position: absolute; inset: 4px auto 4px -14px; width: 2px; background: #237286;
}
body.geo-site.fr-page .gs-rail .gs-subnav button:hover {
  color: #17596c; text-decoration: none; background: #f0f4f5; border-radius: 2px;
}

/* The rail is three groups, not six loose items.
     Overview                     — the product's front page
     1 2 3  the three tools       — the same 1 2 3 as Tier 1/2/3 on the
                                    overview page; before this the rail said
                                    2 3 4 for the same three pages
     tiles, downloads             — how to get the data
   Only the three tools are numbered, so a number means the same thing in
   the rail and on the page it leads to. */

body.geo-site.fr-page .gs-rail .steps .wrap { counter-reset: fh-step; }
body.geo-site.fr-page .gs-rail .step { padding-left: 34px; }
body.geo-site.fr-page .gs-rail .step[href='/merit-90m/fullbasin/drain/'],
body.geo-site.fr-page .gs-rail .step[href='/merit-90m/fullbasin/upstream/'],
body.geo-site.fr-page .gs-rail .step[href='/merit-90m/fullbasin/attributes/'] { counter-increment: fh-step; }
body.geo-site.fr-page .gs-rail .step[href='/merit-90m/fullbasin/drain/'] .fr-nav-text::before,
body.geo-site.fr-page .gs-rail .step[href='/merit-90m/fullbasin/upstream/'] .fr-nav-text::before,
body.geo-site.fr-page .gs-rail .step[href='/merit-90m/fullbasin/attributes/'] .fr-nav-text::before {
  content: counter(fh-step); position: absolute; left: 14px; top: 10px;
  color: #93a8af; font-variant-numeric: tabular-nums;
}
body.geo-site.fr-page .gs-rail .step.is-here .fr-nav-text::before { color: #237286; }

/* Each group gets a heading, so the rail says what the three numbered items
   are for and what the last two are for. "Explore the data" / "Get the data"
   are the plain pair used on dataset sites; "supplementary" would be wrong
   here, since the downloads are the product itself, not extra material. */
body.geo-site.fr-page .fr-nav-item:has(.step[href='/merit-90m/fullbasin/drain/']),
body.geo-site.fr-page .fr-nav-item:has(.step[href='/merit-90m/fullbasin/regions/']) {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fh-rule);
}
body.geo-site.fr-page .fr-nav-item:has(.step[href='/merit-90m/fullbasin/drain/'])::before,
body.geo-site.fr-page .fr-nav-item:has(.step[href='/merit-90m/fullbasin/regions/'])::before {
  display: block; margin: 0 0 8px 34px;
  color: #7b9199; font: 400 12px/1.5 var(--sans); letter-spacing: .02em;
}
body.geo-site.fr-page .fr-nav-item:has(.step[href='/merit-90m/fullbasin/drain/'])::before {
  content: 'Explore the data';
}
body.geo-site.fr-page .fr-nav-item:has(.step[href='/merit-90m/fullbasin/regions/'])::before {
  content: 'Get the data';
}

/* Regions: "Clear" was pushed to the far right of a full-width toolbar. */
body.geo-site.fr-page #clearBtn { margin-left: 4px; }
body.geo-site.fr-page .fr-toolbar { gap: 18px; }

/* ---------- 5. Narrower screens --------------------------------------- */

@media (max-width: 900px) {
  :root { --fh-measure: none; }
  body.geo-site.fr-page .wrap { max-width: none; }
  body.geo-site.fr-page .ov-section,
  body.geo-site.fr-page .ov-tier,
  body.geo-site.fr-page .ov-cta-section,
  body.geo-site.fr-page .hm-section-head,
  body.geo-site.fr-page .hm-cards,
  body.geo-site.fr-page .hm-footer-cols > div,
  body.geo-site.fr-page.doc-page .split-head,
  body.geo-site.fr-page.doc-page .table-shell,
  body.geo-site.fr-page.doc-page .table-scroll { max-width: none; }
  body.geo-site.fr-page .gs-rail .step { padding-left: 12px; }
  body.geo-site.fr-page .gs-rail .step .fr-nav-text::before { display: none; }
  body.geo-site.fr-page .gs-rail .gs-subnav { margin-left: 12px; }
}

@media (max-width: 650px) {
  body.geo-site.fr-page { font-size: 16px; }
  body.geo-site.fr-page .hm-lede, body.geo-site.fr-page .ov-lede { font-size: 17px; }
}

/* ---------- 6. Two things the width cap knocked out of line ----------- */

/* Map pages: the map lives in .data-main > .wrap, which focused.css leaves
   full width. Capping the title's .wrap moved the heading 28px right of the
   map below it. Leave these pages' widths alone; the prose measure above
   already does the work. */
body.geo-site.fr-page.gs-work .wrap { max-width: none; }

/* The footer rule was the only line still running the full page width. */
body.geo-site.fr-page .hm-footer { position: relative; border-top: 0; }
body.geo-site.fr-page .hm-footer::before {
  content: ''; position: absolute; top: 0; height: 1px;
  left: calc(50% - min(100% - 88px, var(--fh-page)) / 2);
  width: min(calc(100% - 88px), calc(var(--fh-label) + var(--fh-label-gap) + var(--fh-measure)));
  background: var(--fh-rule);
}

/* On the home page "Download from Zenodo" and "Open FullBasin" were the same
   weight and colour, so nothing said which one a first visitor should use.
   The download stays available, one step quieter. */

/* The two view explanations ran the full page width — 1140px lines under a
   700px paragraph — and read as two broken sentences above one map. The map
   caption belongs to the map; the "unavailable" line is a note. */
body.geo-site.fr-page .gs-availability {
  display: block; max-width: var(--fh-measure); margin: 0 0 18px;
  color: #63808b; font-size: 15px; line-height: 1.65;
}
body.geo-site.fr-page .gs-availability strong { color: #4e6a76; font-weight: 500; }
body.geo-site.fr-page .gs-availability .fr-availability-state { margin: 0 8px 0 6px; }
body.geo-site.fr-page .gs-availability em { display: block; margin-top: 2px; font-style: normal; }
body.geo-site.fr-page .gs-map-context {
  display: block; margin: 0 0 10px; color: #56717b; font-size: 15px; line-height: 1.6;
}
body.geo-site.fr-page .gs-map-context em { font-style: normal; }

/* ---------- 7. Use the width, and give each page one thing to click --- */

/* The class names say the original design was two columns — .hm-hero-title
   beside .hm-hero-side, .gs-title beside .gs-method — and a later stylesheet
   flattened both to one column. Restored: the top strip runs the full width
   and is only a few lines tall, so the map or the content starts higher and
   the screen is not half empty. */

@media (min-width: 1000px) {
  body.geo-site.fr-page.gs-work .data-top > .wrap {
    display: grid; align-items: start;
    /* The intro runs to the right edge. The title column is fixed, so the
       paragraph takes whatever is left; the page is capped at 92rem, which
       is what bounds how long a line can get. */
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    column-gap: 3.5rem;
  }
  body.geo-site.fr-page.gs-work .gs-method .data-lede { max-width: none; }
  body.geo-site.fr-page.gs-work .data-top > .wrap > .gs-title { padding-bottom: 0; }
  body.geo-site.fr-page.gs-work .data-top > .wrap > .gs-method { padding-top: 6px; }

  /* the collection hero is now on the site grid; see the block at the end */
}

/* One filled button per page: the single thing that page wants you to do.
   Everything else stays a plain link. */
body.geo-site.fr-page .ov-cta .ov-btn {
  min-height: 42px; padding: 10px 18px; border-radius: 2px;
  color: #fff !important; background: #245a6b; text-decoration: none;
}
body.geo-site.fr-page .ov-cta .ov-btn:hover { background: #194a5b; color: #fff !important; }
body.geo-site.fr-page .ov-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 0; background: none; }
body.geo-site.fr-page .ov-cta span { max-width: 30rem; }

/* ---------- 8. Reading sections use the same 964px block as the home page */
/* The small section label was stacked on top of the prose, so the block was
   only as wide as the measure and the right half of the screen sat empty.
   The label moves into the left margin — same 190/38 columns the home page
   and the footer already use — and the block becomes 964px without making
   a single line any longer. */

@media (min-width: 1000px) {
  body.geo-site.fr-page .ov-main .ov-section {
    display: grid; align-items: start; justify-content: start;
    grid-template-columns: var(--fh-label) minmax(0, var(--fh-measure));
    column-gap: var(--fh-label-gap);
    max-width: calc(var(--fh-label) + var(--fh-label-gap) + var(--fh-measure));
  }
  body.geo-site.fr-page .ov-main .ov-section > .ov-label { display: contents; }
  body.geo-site.fr-page .ov-main .ov-label > .ov-kicker { grid-column: 1; grid-row: 1; }
  body.geo-site.fr-page .ov-main .ov-label > h2 { grid-column: 2; grid-row: 1; margin: 0 0 16px; }
  body.geo-site.fr-page .ov-main .ov-section > .ov-body,
  body.geo-site.fr-page .ov-main .ov-section > .ov-tiers { grid-column: 2; grid-row: 2; min-width: 0; }
  body.geo-site.fr-page .ov-main .ov-section:not(:has(.ov-label h2)) > .ov-body { grid-row: 1; }


  /* The rule under each section now spans the whole block. */
  body.geo-site.fr-page .ov-main .ov-section {
    max-width: calc(var(--fh-label) + var(--fh-label-gap) + var(--fh-measure));
  }
}

/* The top block sat outside that label column, so the hero prose started at
   the page edge while every section below started 228px in — two left edges
   for running text on one page. The fact table goes to its minimum width to
   make room, and the hero uses the same columns. */
@media (min-width: 1000px) {
  body.geo-site.fr-page .fr-overview-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  body.geo-site.fr-page .ov-hero-grid,
  body.geo-site.fr-page #idea {
    display: grid; align-items: start;
    grid-template-columns: var(--fh-label) minmax(0, 1fr);
    gap: 0 var(--fh-label-gap);
  }
  body.geo-site.fr-page .ov-hero-main { display: contents; }
  body.geo-site.fr-page .ov-hero-main > .ov-kicker { grid-column: 1; grid-row: 1; }
  body.geo-site.fr-page .ov-hero h1 { grid-column: 2; grid-row: 1; margin: 0 0 16px; }
  body.geo-site.fr-page .ov-hero .ov-lede { grid-column: 2; grid-row: 2; }
  body.geo-site.fr-page .ov-hero .ov-actions { grid-column: 2; grid-row: 3; margin-top: 18px; }
  body.geo-site.fr-page #idea > .ov-label { display: contents; }
  body.geo-site.fr-page #idea .ov-kicker { grid-column: 1; grid-row: 1; }
  body.geo-site.fr-page #idea > .ov-body { grid-column: 2; grid-row: 1; min-width: 0; }
}

/* ---------- 9. The map panel: air between the groups ------------------ */
/* It carries the layer controls, the query box and a long method note in one
   400px column. Not restructured — just given room, and one hairline between
   groups so the eye can tell where each one starts. */

body.geo-site.fr-page .map-controls .fd-group { margin: 0 0 26px; }
body.geo-site.fr-page .map-controls .fd-group:last-of-type { margin-bottom: 0; }
body.geo-site.fr-page .map-controls .fd-label,
body.geo-site.fr-page .panel-label { margin-bottom: 10px; }
body.geo-site.fr-page .map-controls label { margin-bottom: 6px; }
body.geo-site.fr-page .map-controls .mode-opt span b { margin-bottom: 2px; }

body.geo-site.fr-page .map-panel.is-block { margin-top: 26px; padding-top: 22px; }
body.geo-site.fr-page .selection-summary,
body.geo-site.fr-page .mode-note,
body.geo-site.fr-page .map-note,
body.geo-site.fr-page .fr-results .section-intro { font-size: 14.5px; line-height: 1.65; }
body.geo-site.fr-page .mode-note,
body.geo-site.fr-page .fr-panel-explanation { margin-top: 20px; }
body.geo-site.fr-page .map-formula { margin: 10px 0; line-height: 1.7; }
body.geo-site.fr-page .panel-actions { margin-top: 16px; gap: 16px; }

/* Downloads: an inherited row-gap left 70px between a heading and its text. */
body.geo-site.fr-page.doc-page .split-head { row-gap: 0; }

/* ---------- 10. Downloads ---------------------------------------------- */
/* This page has two section labels — "Releases" and "This page" — so the
   190px label column stood empty down 2400px of page and split the prose
   into two left edges. The labels go back above their heading and the page
   uses the full 964px block. */

body.geo-site.fr-page.doc-page .split-head,
body.geo-site.fr-page.doc-page .sh-head,
body.geo-site.fr-page.doc-page .sh-body { display: block; }
body.geo-site.fr-page.doc-page .split-head,
body.geo-site.fr-page.doc-page .sh-body p,
body.geo-site.fr-page.doc-page .data-top .data-lede,
body.geo-site.fr-page.doc-page .table-shell,
body.geo-site.fr-page.doc-page .table-scroll,
body.geo-site.fr-page.doc-page .hosting-note {
  max-width: calc(var(--fh-label) + var(--fh-label-gap) + var(--fh-measure));
}
body.geo-site.fr-page.doc-page .sh-head { margin: 0 0 14px; }
body.geo-site.fr-page.doc-page .sh-head h2 { margin: 4px 0 0; }

/* One rule per section, not two, and no 160px hole between them. */
body.geo-site.fr-page.doc-page .data-section { padding: 34px 0 0; border-top: 1px solid var(--fh-rule); border-bottom: 0; }
body.geo-site.fr-page.doc-page .data-section:first-of-type { border-top: 0; }

/* The file lists were the smallest type on the site at 14px. */
body.geo-site.fr-page.doc-page .dl-line { padding: 15px 0; gap: 30px; }
body.geo-site.fr-page.doc-page .dl-line > a { font-size: 15px; }
body.geo-site.fr-page.doc-page .dl-line > span { font-size: 15px; line-height: 1.65; color: #55707c; }
body.geo-site.fr-page.doc-page .hosting-note { font-size: 15px; line-height: 1.65; }
body.geo-site.fr-page.doc-page .sub-h { font-size: 18px; margin: 32px 0 8px; }
body.geo-site.fr-page .ov-table th,
body.geo-site.fr-page.doc-page table td,
body.geo-site.fr-page.doc-page table th { font-size: 15px; }

/* ---------- 11. The panel is as tall as the map ----------------------- */
/* The right panel ran well past the bottom of the map, so the two columns
   ended at different heights and the page looked lopsided. It now stops at
   the map's height and scrolls inside; nothing is cut, it is just not all
   laid out at once. --fr-map-height is set on .fr-workspace by focused.css. */

@media (min-width: 1000px) {
  body.geo-site.fr-page .fr-workspace > .fr-results,
  body.geo-site.fr-page .fr-workspace .map-side {
    position: relative;
    max-height: var(--fr-map-height);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 16px;
    scrollbar-width: thin;
    scrollbar-color: #c4d2d7 transparent;
  }
  body.geo-site.fr-page .fr-workspace > .fr-results::-webkit-scrollbar,
  body.geo-site.fr-page .fr-workspace .map-side::-webkit-scrollbar { width: 8px; }
  body.geo-site.fr-page .fr-workspace > .fr-results::-webkit-scrollbar-thumb,
  body.geo-site.fr-page .fr-workspace .map-side::-webkit-scrollbar-thumb {
    background: #c8d5da; border-radius: 4px;
  }

  /* No fade at the bottom: on the pages whose panel is shorter than the map
     it would have greyed out the last line for no reason, and the panel
     stopping level with the map already says there is more below. */
}

/* ---------- 12. Wide screens, and the two notes above the map --------- */

/* Map pages were uncapped, so past about 1500px the content kept stretching
   and the top strip left a hole on the right. Capped and centred: the
   leftover shows as an even margin on both sides instead. */
body.geo-site.fr-page.gs-work .wrap,
body.geo-site.fr-page.gs-work .data-main > .wrap {
  max-width: 92rem; margin-inline: auto;
}

/* "Global map (unavailable)" and the map caption sat at two different
   indents between the title and the map. Both now line up with the map's
   left edge and read as one small block above it. */
body.geo-site.fr-page .gs-availability,
body.geo-site.fr-page .gs-map-context { margin-left: 0; max-width: var(--fh-measure); }
body.geo-site.fr-page .gs-availability { margin-bottom: 14px; }
body.geo-site.fr-page .gs-map-context { margin-bottom: 10px; }
body.geo-site.fr-page .fr-toolbar { margin-left: 0; }

/* ---------- 13. The two notes around the map -------------------------- */
/* They were both above the map in two different shapes, and the note about
   the view you cannot use sat above — and read louder than — the caption of
   the map you are looking at. The caption goes directly above its map; the
   unavailable note becomes a footnote under it. Same shape for both: a small
   label line, then the text. */

/* The notice says why "Global map" in the sidebar cannot be opened, so it
   has to sit above the map — under an 800px map nobody looking for it would
   ever reach it. It is an amber band and the caption is small grey text, so
   the two no longer need separating by position. */

body.geo-site.fr-page .gs-map-context,
body.geo-site.fr-page .gs-availability { max-width: var(--fh-measure); }
body.geo-site.fr-page .gs-map-context strong,
body.geo-site.fr-page .gs-availability strong {
  display: block; margin: 0 0 3px;
  color: #4e6a76; font: 500 14px/1.5 var(--sans);
}
body.geo-site.fr-page .gs-availability .fr-availability-state {
  display: inline; margin-left: 6px; color: #7b9199; font-weight: 400;
}
body.geo-site.fr-page .gs-map-context em,
body.geo-site.fr-page .gs-availability em {
  display: block; margin: 0; font-style: normal;
  color: #56717b; font-size: 15px; line-height: 1.6;
}

/* ---------- 14. A measure is for paragraphs, not for notes ------------ */
/* Capping every piece of text at 46rem made one- and two-line notes stop in
   the middle of the row for no reason. The measure now applies only to
   running prose; notes, captions and panel text fill the row they sit in. */

body.geo-site.fr-page .gs-map-context,
body.geo-site.fr-page .gs-availability,
body.geo-site.fr-page .section-intro,
body.geo-site.fr-page .ov-map-caption,
body.geo-site.fr-page .hosting-note,
body.geo-site.fr-page .selection-summary,
body.geo-site.fr-page .mode-note,
body.geo-site.fr-page .map-note,
body.geo-site.fr-page .fr-results .section-intro,
body.geo-site.fr-page.doc-page .dl-line > span { max-width: none; }

/* The map caption belongs to the map, so it ends where the map ends. */
body.geo-site.fr-page .data-main > .wrap > .gs-map-context {
  max-width: calc(100% - var(--fr-side, 0px));
}

/* "Global map (unavailable)" is a notice: it runs the full row, and it says
   so before you read it. */
body.geo-site.fr-page .gs-availability {
  display: block; max-width: none;
  margin: 0 0 20px; padding: 14px 18px;
  border: 0; border-left: 3px solid #d3a13f;
  background: #fdf8ef; border-radius: 2px;
}
body.geo-site.fr-page .gs-availability strong {
  display: inline; margin: 0; color: #7a5410; font: 600 14px/1.6 var(--sans);
}
body.geo-site.fr-page .gs-availability strong::before {
  content: '!'; display: inline-block; width: 17px; height: 17px; margin-right: 9px;
  border-radius: 50%; background: #d3a13f; color: #fff;
  font: 700 12px/17px var(--sans); text-align: center; vertical-align: 1px;
}
body.geo-site.fr-page .gs-availability .fr-availability-state { color: #93712e; }
body.geo-site.fr-page .gs-availability em {
  display: block; margin-top: 5px; max-width: none;
  color: #6a5227; font-size: 15px; line-height: 1.6;
}

/* focused.css:333 sets padding/border/background on
   body.geo-site.fr-page.gs-work .gs-availability.fr-availability-notice,
   which outranks a plain .gs-availability rule. Same selector here. */
body.geo-site.fr-page.gs-work .gs-availability.fr-availability-notice {
  display: block; max-width: none;
  margin: 0 0 20px; padding: 15px 20px;
  border: 0; border-left: 3px solid #d3a13f;
  border-radius: 2px; background: #fdf8ef;
  color: #6a5227; font-size: 15px; line-height: 1.6;
}
body.geo-site.fr-page.gs-work .gs-availability.fr-availability-notice strong {
  display: inline; margin: 0; color: #7a5410; font: 600 14px/1.6 var(--sans);
}
body.geo-site.fr-page.gs-work .gs-availability.fr-availability-notice strong::before {
  content: '!'; display: inline-block; width: 17px; height: 17px; margin-right: 9px;
  border-radius: 50%; background: #d3a13f; color: #fff;
  font: 700 12px/17px var(--sans); text-align: center; vertical-align: 1px;
}
body.geo-site.fr-page.gs-work .gs-availability.fr-availability-notice .fr-availability-state {
  margin: 0 0 0 6px; color: #93712e; font: inherit; font-weight: 400;
}
body.geo-site.fr-page.gs-work .gs-availability.fr-availability-notice em {
  display: block; margin-top: 5px; max-width: none;
  color: #6a5227; font: inherit; font-style: normal;
}


/* Source collection identity, shared by home and all product pages. */
body.geo-site.fr-page .fh-collection-nav {
  display: block; margin: 0 12px 18px; color: #17596c;
  font: 500 .875rem/1.5 var(--sans); text-decoration: none;
}
body.geo-site.fr-page .fh-collection-nav:hover { text-decoration: underline; }
body.geo-site.fr-page .fh-collection-context {
  margin: 6px 0 14px; color: #33525f; font: 400 1rem/1.5 var(--sans);
}
body.geo-site.fr-page .fh-collection-context a { color: inherit; }
body.geo-site.fr-page .fh-collection-heading {
  font: 500 1.125rem/1.5 var(--sans); letter-spacing: 0; text-transform: none;
}
body.geo-site.fr-page .fh-source-credit {
  max-width: var(--fh-measure); margin: 8px 0 0; color: #33525f;
  font: 400 .9375rem/1.6 var(--sans);
}

/* Collection context and secondary footer (2026-09-06) — appended. */
/* Footer credit and counter are secondary; keep them out of the reading line. */
body.geo-site.fr-page .hm-footer #people .hm-body,
body.geo-site.fr-page .hm-footer #people .hm-body p { font-size: .8125rem; line-height: 1.6; color: #5d7079; }
body.geo-site.fr-page .fh-collection-siblings {
  margin: 14px 0 0; color: #5d7079; font: 400 .875rem/1.65 var(--sans);
}

/* The collection page ends by saying who supplies what: the source data on
   one side, what we compute on the other, and the tile lookup that only
   works because both sit on the same grid. */
body.geo-site.fr-page .fh-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 48px; }
body.geo-site.fr-page .fh-split-col h3 {
  margin: 0 0 10px; color: #183b48; font: 600 .9375rem/1.5 var(--sans); letter-spacing: 0;
}
body.geo-site.fr-page .fh-split-col p { max-width: none; margin: 0 0 12px; color: #46616d; font: 400 .9375rem/1.7 var(--sans); }
body.geo-site.fr-page .fh-split-col p:last-child { margin-bottom: 0; }
body.geo-site.fr-page .fh-split-go { margin-top: 16px !important; }
body.geo-site.fr-page .fh-split-go a { font-weight: 500; }
@media (max-width: 800px) {
  body.geo-site.fr-page .fh-split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* -------------------------------------------------------------------------
   The collection page on the same grid as the home page (2026-09-07).

   Before this, the page had three left edges: the title at one, the lede far
   to the right at another, and the product descriptions at a third. Now it is
   the same two columns as everywhere else - a label on the left, and every
   piece of running text starting at one line on the right.
   ------------------------------------------------------------------------- */
body.geo-site.fr-page .hm-hero-body {
  display: grid; grid-template-columns: var(--fh-label) minmax(0, 1fr);
  gap: 0 var(--fh-label-gap); align-items: start; padding: 56px 0 44px;
}
body.geo-site.fr-page .hm-hero-title,
body.geo-site.fr-page .hm-hero-side { display: contents; }
body.geo-site.fr-page .hm-hero .hm-kicker {
  grid-column: 1; grid-row: 1; margin: 10px 0 0; color: #5c757f;
  font: 400 .8125rem/1.5 var(--sans); letter-spacing: 0; text-transform: none;
}
body.geo-site.fr-page .hm-hero h1 {
  grid-column: 2; grid-row: 1; max-width: none; margin: 0 0 20px;
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1.14; letter-spacing: -.035em;
}
body.geo-site.fr-page .hm-hero .hm-lede {
  grid-column: 2; grid-row: 2; max-width: var(--fh-measure); margin: 0 0 12px;
  font-size: 17px; line-height: 1.75;
}
body.geo-site.fr-page .hm-hero .fh-collection-siblings {
  grid-column: 2; grid-row: 3; max-width: var(--fh-measure); margin: 0;
}

/* the product list, and the split at the foot of the page, share that grid */
body.geo-site.fr-page .gs-product-copy {
  grid-template-columns: var(--fh-label) minmax(0, 1fr); gap: 6px var(--fh-label-gap);
}
body.geo-site.fr-page #source-data > .wrap {
  display: grid; grid-template-columns: var(--fh-label) minmax(0, 1fr);
  gap: 0 var(--fh-label-gap); align-items: start;
}
body.geo-site.fr-page #source-data .hm-section-head {
  grid-column: 1; margin: 0; padding-top: 22px; border-top: 0;
}
body.geo-site.fr-page #source-data .fh-split { grid-column: 2; }
body.geo-site.fr-page #source-data .hm-section-head .hm-kicker {
  color: #183b48; font: 600 .9375rem/1.5 var(--sans); letter-spacing: -.01em; text-transform: none;
}
@media (max-width: 900px) {
  body.geo-site.fr-page .hm-hero-body,
  body.geo-site.fr-page #source-data > .wrap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body.geo-site.fr-page .hm-hero-title, body.geo-site.fr-page .hm-hero-side { display: block; }
}
/* One page width across the site, so the two columns do not shift by a few
   pixels when you move between the home page and a collection. */
body.geo-site.fr-page .wrap { width: 100%; max-width: 1188px; padding-inline: 56px; margin-inline: auto; }

/* Section labels on the collection page read like the ones on the home page,
   and the rule above a section spans the text, not the whole page. */
body.geo-site.fr-page .hm-section-head { border-top: 0; padding-top: 0; margin-bottom: 0; }
body.geo-site.fr-page .hm-section-head .hm-kicker {
  margin: 0; color: #183b48; font: 600 .9375rem/1.5 var(--sans);
  letter-spacing: -.01em; text-transform: none;
}
body.geo-site.fr-page #datasets > .wrap {
  display: grid; grid-template-columns: var(--fh-label) minmax(0, 1fr);
  gap: 0 var(--fh-label-gap); align-items: start;
  padding-top: 34px; border-top: 1px solid var(--fh-rule, #dce5e8);
}
body.geo-site.fr-page #datasets .hm-section-head { grid-column: 1; grid-row: 1; }
body.geo-site.fr-page #datasets .hm-cards { grid-column: 2; grid-row: 1; }
body.geo-site.fr-page #datasets .hm-card:first-child { padding-top: 0; }
body.geo-site.fr-page #datasets .gs-product-copy { grid-template-columns: minmax(0, 1fr); gap: 4px; }
body.geo-site.fr-page #datasets .hm-card b,
body.geo-site.fr-page #datasets .hm-state,
body.geo-site.fr-page #datasets .hm-card p { grid-column: 1; grid-row: auto; max-width: var(--fh-measure); }
body.geo-site.fr-page #datasets .hm-card b { font-size: 20px; margin-bottom: 4px; }
body.geo-site.fr-page #source-data > .wrap { padding-top: 34px; border-top: 1px solid var(--fh-rule, #dce5e8); }
@media (max-width: 900px) {
  body.geo-site.fr-page #datasets > .wrap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
/* the last product already has the section rule under it */
body.geo-site.fr-page #datasets .hm-cards > :last-child { border-bottom: 0; padding-bottom: 0; }
body.geo-site.fr-page #datasets > .wrap { padding-bottom: 34px; }
body.geo-site.fr-page .hm-products { padding: 0; }
/* one rule per section, drawn by the wrap, so no empty band appears above it */
body.geo-site.fr-page .hm-section { border-top: 0; padding-top: 0; }
/* section labels read like the ones on the home page: a signpost, not a heading */
body.geo-site.fr-page .hm-section-head .hm-kicker,
body.geo-site.fr-page .hm-hero .hm-kicker {
  color: #71858e; font: 400 .8125rem/1.5 var(--sans); letter-spacing: .005em;
}
body.geo-site.fr-page .hm-hero h1 { color: #10262f; font-weight: 600; }
body.geo-site.fr-page .hm-lede { color: #354d57; max-width: 40rem; }
body.geo-site.fr-page .hm-card p { color: #354d57; max-width: 40rem; }
body.geo-site.fr-page #datasets .hm-card b { color: #10262f; }
body.geo-site.fr-page .fh-split-col h3 { color: #10262f; }
body.geo-site.fr-page .fh-split-col p { color: #354d57; }
body.geo-site.fr-page #source-data .hm-section-head .hm-kicker {
  color: #71858e; font: 400 .8125rem/1.5 var(--sans); letter-spacing: .005em; text-transform: none;
}