/*
 * Shared by /sobre (Spanish) and /pro (Ukrainian). Plain CSS, no build step: these pages are
 * static files in web/public/, so they ship with the app but cost the bundle nothing and load
 * before any JavaScript runs.
 *
 * Same palette and type as the app, on purpose. Somebody arriving here and then opening the map
 * should not feel handed to a different product.
 */
@font-face {
  font-family: "IBM Plex Sans Variable"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "IBM Plex Sans Variable"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("/fonts/ibm-plex-sans-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

:root {
  --ink: #e7ebf0; --ink-soft: #c3cad4; --muted: #8a94a3; --faint: #6d7888; --dim: #566070;
  --night: #07090d; --glass: rgba(13, 18, 25, 0.66); --hairline: rgba(255, 255, 255, 0.08);
  --cyan: #4dc9e6; --gold: #e9bc62; --mint: #6fd19d; --clay: #ee9a7a; --flame: #f06a55;
  --font: "IBM Plex Sans Variable", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--night); color: var(--ink); font-family: var(--font);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  /* Two soft lights, sky above and water below: the bands the product is built on. */
  background-image:
    radial-gradient(900px 500px at 15% -5%, rgba(233, 188, 98, 0.07), transparent 70%),
    radial-gradient(1100px 700px at 85% 15%, rgba(77, 201, 230, 0.09), transparent 70%),
    /* A graticule. This is a map product, so the texture is meridians and parallels rather
       than decoration that could belong to anything. 120 px grid, barely visible. */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.028'%3E%3Cpath d='M0 .5H120M.5 0V120'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { width: min(1080px, 100% - 40px); margin-inline: auto; }
.prose { max-width: 70ch; }

/* --- top bar --- */
.top { display: flex; align-items: center; gap: 16px; padding-block: 22px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand svg { width: 26px; height: 26px; display: block; view-transition-name: brand-mark; }
.brand b { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 18px;
  border: 1px solid var(--hairline); color: var(--ink-soft); text-decoration: none; font-size: 13.5px;
  background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: color 150ms ease, border-color 150ms ease;
}
.pill:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.18); }
.pill[aria-current="true"] { color: var(--night); background: var(--ink); border-color: transparent; }
.pill--go { color: var(--night); background: var(--cyan); border-color: transparent; font-weight: 600; }
.pill--go:hover { color: var(--night); background: #6fd8f0; }

/* --- hero --- */
/*
 * The hero is the site core, the same mark the map plants when you click a point: four bands,
 * a ring at ground level, a dashed tail into the subsurface. It is the one picture that says
 * what this does, and it belongs to this product and nothing else.
 */
.hero { padding-block: 56px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 48px; align-items: center; }
.hero__text { min-width: 0; }

.core { margin: 0; position: relative; height: 430px; display: flex; justify-content: center; }
.core__rail { position: relative; width: 8px; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 34px rgba(77, 201, 230, 0.22); }
.core__rail i { display: block; background: var(--c); }
.core__rail i:nth-child(1) { flex: 1.15; } .core__rail i:nth-child(2) { flex: 0.5; }
.core__rail i:nth-child(3) { flex: 0.75; } .core__rail i:nth-child(4) { flex: 1.6; }
/* Ground level: the ring sits exactly where surface ends and soil begins. */
.core__ring { position: absolute; left: 50%; top: 43.4%; width: 34px; height: 13px; margin-left: -17px; border-radius: 50%; border: 1.5px solid var(--cyan); box-shadow: 0 0 16px rgba(77, 201, 230, 0.85); }
.core__tail { position: absolute; left: 50%; bottom: -34px; height: 34px; border-left: 2px dashed rgba(77, 201, 230, 0.5); }
.core__marks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.core__marks li { position: absolute; left: 50%; margin-left: 26px; white-space: nowrap; }
.core__marks li::before { content: ""; position: absolute; left: -24px; top: 11px; width: 18px; border-top: 1px solid var(--c); opacity: 0.55; }
.core__marks b { display: block; font-size: 15px; font-weight: 600; color: var(--c); }
.core__marks span { font-size: 12px; color: var(--faint); font-family: var(--mono); }
.core__marks li:nth-child(1) { top: 11%; } .core__marks li:nth-child(2) { top: 37%; }
.core__marks li:nth-child(3) { top: 52%; } .core__marks li:nth-child(4) { top: 76%; }
.hero__text h1 {
  margin: 0 0 18px; font-size: clamp(32px, 5.2vw, 56px); line-height: 1.08;
  letter-spacing: -0.025em; font-weight: 600; max-width: 18ch;
}
.hero__text p { margin: 0 0 14px; font-size: clamp(16.5px, 2vw, 20px); color: var(--ink-soft); max-width: 60ch; }
.hero__text .lede-small { font-size: 15.5px; color: var(--muted); max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* --- sections --- */
section { padding-block: 44px; }
h2 {
  margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); line-height: 1.2;
  letter-spacing: -0.02em; font-weight: 600;
}
.sub { margin: 0 0 26px; color: var(--muted); max-width: 66ch; font-size: 15.5px; }
.card {
  background: var(--glass); border: 1px solid var(--hairline); border-radius: 22px; padding: 22px;
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
}

/* --- the live check --- */
.check form { display: flex; flex-wrap: wrap; gap: 10px; }
.check input {
  flex: 1 1 280px; min-width: 0; height: 52px; padding: 0 18px; border-radius: 26px;
  border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.04); color: var(--ink);
  font-family: var(--mono); font-size: 16px; /* 16px or iOS zooms the page on focus */
}
.check input::placeholder { color: var(--dim); font-family: var(--font); }
.check input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.check button {
  height: 52px; padding: 0 26px; border-radius: 26px; border: 0; cursor: pointer;
  background: var(--cyan); color: var(--night); font-family: var(--font); font-size: 15px; font-weight: 600;
}
.check button:disabled { opacity: 0.5; cursor: progress; }
.check .examples { margin-top: 12px; font-size: 13.5px; color: var(--faint); }
.check .examples button {
  height: auto; padding: 0; background: none; border: 0; color: var(--cyan);
  font-family: var(--mono); font-size: 13.5px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
/*
 * One card, three states, never a different size. Every box has a fixed height and long text
 * truncates instead of wrapping, so filling in an answer cannot push anything below it.
 */
.result { margin-top: 18px; }
.result .card { transition: border-color 300ms ease; }
.result h3, .result .where, .result .note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result .where { height: 21px; }
.result .note { height: 22px; }
.fact { height: 112px; overflow: hidden; }
.fact dd { line-height: 1.35; transition: color 300ms ease, opacity 300ms ease; }
.fact dd small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.is-idle .fact dd { color: var(--dim); }
.is-idle h3 { color: var(--muted); }
.is-loading .fact dd { opacity: 0.35; animation: breathe 1.2s ease-in-out infinite; }
.is-done { border-color: rgba(77, 201, 230, 0.22); }
@keyframes breathe { 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .is-loading .fact dd { animation: none; } }
.result[hidden] { display: none; }
.result h3 { margin: 0 0 2px; font-size: 19px; font-weight: 600; }
.result .where { margin: 0 0 16px; color: var(--muted); font-family: var(--mono); font-size: 13px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--hairline); border-radius: 14px; overflow: hidden; }
.fact { background: #0b1016; padding: 13px 15px; }
.fact dt { margin: 0 0 3px; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.fact dd { margin: 0; font-size: 16px; font-weight: 500; }
.fact dd small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.ok { color: var(--mint); } .warn { color: var(--gold); } .bad { color: var(--flame); }
.result .note { margin: 14px 0 0; font-size: 13.5px; color: var(--faint); }

/* --- the two-parcel comparison --- */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.versus .card h3 { margin: 0 0 2px; font-size: 20px; font-weight: 600; }
.versus .card .place { margin: 0 0 18px; font-size: 13px; color: var(--muted); font-family: var(--mono); }
.rows { margin: 0; }
.rows div { display: flex; gap: 12px; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--hairline); }
.rows div:first-child { border-top: 0; }
.rows dt { color: var(--muted); font-size: 14px; }
.rows dd { margin: 0; text-align: right; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.punch { margin-top: 16px; font-size: 16.5px; line-height: 1.55; }
.punch strong { color: var(--cyan); font-weight: 600; }

/* --- the data manifest --- */
/* Scrolling this section is descending through the core: one continuous rail down the left,
   changing colour band by band, with each depth hung off it. */
.manifest { max-width: 840px; }
.band { position: relative; padding-left: 30px; }
.band::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: var(--c); opacity: 0.5; }
.band:first-of-type::before { top: 22px; border-radius: 1px 1px 0 0; }
.band:last-of-type::before { bottom: auto; height: 22px; border-radius: 0 0 1px 1px; }
.band > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px;
  padding: 14px 18px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--glass);
}
.band > summary:hover { border-color: rgba(255, 255, 255, 0.16); }
/* The dot sits on the rail, not beside the words. */
.band > summary .dot { position: absolute; left: 0; margin-top: 0; box-shadow: 0 0 10px var(--c); }
.band > summary .depth { margin-left: auto; color: var(--faint); font-size: 12.5px; font-family: var(--mono); }
.band > summary::-webkit-details-marker { display: none; }
.band > summary b { font-size: 16.5px; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 4px; flex: none; background: var(--c); }
.band table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14.5px; }
.band th { text-align: left; font-weight: 500; color: var(--faint); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 14px; }
.band td { padding: 11px 14px; border-top: 1px solid var(--hairline); vertical-align: top; }
.band td:first-child { font-weight: 500; }
.band td.src { color: var(--muted); font-size: 13.5px; }
.band td.num { font-family: var(--mono); font-size: 13px; color: var(--cyan); white-space: nowrap; }

/* --- plain lists --- */
.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.who .card p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14.5px; }
.who .card b { font-size: 16px; }
.limits li { margin-bottom: 10px; color: var(--ink-soft); }
.limits li b { color: var(--ink); font-weight: 500; }

footer { padding-block: 40px 60px; color: var(--faint); font-size: 14px; border-top: 1px solid var(--hairline); margin-top: 30px; }
footer a { color: var(--ink-soft); }
footer p { margin: 0 0 8px; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .core { height: 300px; margin-top: 8px; }
  .core__marks li { margin-left: 22px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .band { padding-left: 22px; }
  .versus { grid-template-columns: 1fr; }
  .hero { padding-block: 32px 26px; }
  section { padding-block: 32px; }
  .top { flex-wrap: wrap; gap: 10px; }
  .top nav { width: 100%; margin-left: 0; }
}

/*
 * The core that travels with the page.
 *
 * Desktop: a second column, the core pinned in it while the page scrolls past. One variable,
 * --depth (0 at the top of the page, 1 at the bottom), places the ring; everything above the ring
 * is lit, everything below is dimmed. Reading the page is drilling the core.
 * Phones: the big core stays in the hero, and this one shrinks to a hairline rail at the edge.
 */
.page { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 56px; }
.page__main { min-width: 0; }
.page__core { position: relative; }
.core--pinned { position: sticky; top: 14vh; height: 72vh; margin: 0; }
.core--pinned .core__ring { top: calc(var(--depth, 0) * 100%); margin-top: -6.5px; transition: top 120ms linear; }
.core--pinned .core__rail { position: relative; }
.core--pinned .core__rail::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  top: calc(var(--depth, 0) * 100%); background: rgba(7, 9, 13, 0.62); transition: top 120ms linear;
}
.core--pinned .core__marks li { opacity: 0.38; transition: opacity 300ms ease; }
.core--pinned .core__marks li.is-here { opacity: 1; }
.core--pinned .core__marks li.is-past { opacity: 0.7; }

/* On wide screens the pinned core is the hero picture, so the hero's own copy steps aside. */
@media (min-width: 1101px) {
  .hero { grid-template-columns: 1fr; }
  .hero > .core { display: none; }
}
@media (max-width: 1100px) {
  .page { display: block; }
  .page__core { position: fixed; left: 7px; top: 18vh; height: 64vh; width: 4px; z-index: 5; pointer-events: none; }
  .core--pinned { position: static; height: 100%; }
  .core--pinned .core__rail { width: 3px; }
  .core--pinned .core__marks, .core--pinned .core__tail { display: none; }
  .core--pinned .core__ring { width: 13px; height: 6px; margin-left: -6.5px; margin-top: -3px; border-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .core--pinned .core__ring, .core--pinned .core__rail::after { transition: none; }
}

/*
 * Language: the app's segmented control, not two loose buttons. Switching is a page load, so the
 * sliding comes from cross-document view transitions — the highlight carries the same
 * view-transition-name on both pages and the browser animates it from one slot to the other.
 * Browsers without support simply navigate.
 */
@view-transition { navigation: auto; }
.lang {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: 22px;
  background: var(--glass); border: 1px solid var(--hairline);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.lang a {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 16px;
  color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em;
  transition: color 150ms ease;
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, 0.1); view-transition-name: lang-thumb; }
::view-transition-group(lang-thumb) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
::view-transition-group(brand-mark) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/*
 * The result as rows, not tiles: label left, value right, hairlines between, two columns of five.
 * Ten items in two columns can never leave an empty slot, and each row has a fixed height so
 * filling in an answer still moves nothing.
 */
.result .facts {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px;
  background: none; border-radius: 0; overflow: visible; margin: 0;
}
.result .fact {
  height: 62px; padding: 0; background: none; border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden;
}
.result .fact dt {
  margin: 0; flex: none; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted);
}
.result .fact dd {
  margin: 0; min-width: 0; text-align: right; font-size: 15px; font-weight: 500; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.result .fact dd small { font-size: 12px; color: var(--faint); font-weight: 400; margin-top: 1px; }
@media (max-width: 760px) {
  .result .facts { grid-template-columns: 1fr; }
}
/* An empty sub-line takes no room, so a lone value centres on its label like the rest. */
.result .fact dd small:empty { display: none; }
.result .note a, .who a, footer a { color: var(--cyan); text-decoration: none; }
.result .note a:hover { text-decoration: underline; text-underline-offset: 3px; }

/*
 * Fewer containers. The page carried boxes inside boxes — glass card, card in it, rounded
 * summaries, a card per audience — which is the generic look. Structure now comes from type,
 * hairlines and space. Only things you touch keep a shape: the input, the buttons, the controls.
 */
.check > .card, .result .card, .versus .card, .who .card {
  background: none; border: 0; border-radius: 0; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.result { margin-top: 30px; }
.result .card.is-done { border: 0; }
.result h3 { font-size: 22px; letter-spacing: -0.01em; }

.versus { gap: 0; }
.versus .card:first-child { padding-right: 44px; }
.versus .card:last-child { padding-left: 44px; border-left: 1px solid var(--hairline); }
.versus .card h3 { font-size: 24px; letter-spacing: -0.015em; }

.who { gap: 36px; }
.who .card { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 18px; }

.band > summary {
  background: none; border: 0; border-radius: 0; padding: 16px 0;
  border-bottom: 1px solid var(--hairline); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.band > summary:hover { border-color: rgba(255, 255, 255, 0.2); }
.band > summary b { font-size: 20px; letter-spacing: -0.01em; }
.band > summary .dot { width: 7px; height: 7px; }
.band table { margin-top: 2px; }
.band th, .band td { padding-left: 0; }

@media (max-width: 760px) {
  .versus .card:first-child { padding-right: 0; padding-bottom: 28px; }
  .versus .card:last-child { padding-left: 0; padding-top: 28px; border-left: 0; border-top: 1px solid var(--hairline); }
  .who { gap: 24px; }
}

/*
 * The hero backdrop: the app's own map, with all 139,593 wells lit, rendered once and shipped as
 * a 200 KB picture instead of loading a live map engine. It drifts slowly; cores drop onto real
 * places in turn, riding the same transform so each stays on its town.
 */
.hero-map {
  position: absolute; inset: 0 0 auto 0; height: min(1100px, 120vh); overflow: hidden;
  z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
/* Legibility: night on the side where the words are, the map clear where they are not. */
.hero-map::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 9, 13, 0.94) 0%, rgba(7, 9, 13, 0.82) 38%, rgba(7, 9, 13, 0.25) 75%, rgba(7, 9, 13, 0.35) 100%);
}
.hero-map__stage {
  position: absolute; top: 2%; right: -8%; width: max(92%, 1100px); aspect-ratio: 2200 / 1440;
  animation: drift 70s ease-in-out infinite alternate;
}
.hero-map__stage img { display: block; width: 100%; height: 100%; opacity: 0.85; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3.5%, 2%, 0) scale(1.07); }
}
.hero-map__drops { position: absolute; inset: 0; }

/* One dropped core: a short four-band beam standing on a ring, with the place and its fact. */
.drop { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity 500ms ease; }
.drop.is-on { opacity: 1; }
.drop__beam {
  position: absolute; left: -2px; bottom: 3px; width: 4px; height: 54px; border-radius: 2px; overflow: hidden;
  background: linear-gradient(#E9BC62 0 29%, #6FD19D 29% 41%, #EE9A7A 41% 60%, #4DC9E6 60% 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 18px rgba(77, 201, 230, 0.55);
  transform: scaleY(0); transform-origin: bottom; transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.drop.is-on .drop__beam { transform: scaleY(1); }
.drop__ring {
  position: absolute; left: -9px; top: -4px; width: 18px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--cyan); box-shadow: 0 0 12px rgba(77, 201, 230, 0.9);
}
.drop__label {
  position: absolute; left: 14px; bottom: 26px; white-space: nowrap;
  padding: 7px 11px 8px; border-radius: 10px; background: rgba(7, 9, 13, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: translateY(6px); transition: transform 500ms 180ms ease;
}
.drop.is-on .drop__label { transform: none; }
.drop__label b { display: block; font-size: 13.5px; font-weight: 600; }
.drop__label span { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.drop__label .flag { color: var(--gold); }
.drop__label .flag.bad { color: var(--flame); }
.drop__label .flag.ok { color: var(--mint); }

/* Everything else sits above the backdrop. */
.wrap { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .hero-map { height: 92vh; }
  .hero-map::after { background: linear-gradient(180deg, rgba(7, 9, 13, 0.55) 0%, rgba(7, 9, 13, 0.9) 60%); }
  .hero-map__stage { right: -55%; width: 1000px; top: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-map__stage { animation: none; }
  .drop, .drop__beam, .drop__label { transition: none; }
}

/* Spain on the right half, sized so even the westernmost point lands clear of the words, and
   the picture's edges feathered so it dissolves into the page rather than ending in a line. */
@media (min-width: 761px) {
  .hero-map__stage { top: 50px; right: -6vw; width: 62vw; }
}
.hero-map__stage {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                      linear-gradient(to bottom, transparent, #000 9%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                      linear-gradient(to bottom, transparent, #000 9%, #000 90%, transparent);
          mask-composite: intersect;
}
.hero-map::after {
  background: linear-gradient(90deg, rgba(7, 9, 13, 0.9) 0%, rgba(7, 9, 13, 0.7) 40%, rgba(7, 9, 13, 0.1) 70%, rgba(7, 9, 13, 0.15) 100%);
}
/* The hero belongs to the map; the drilling core takes over once you scroll past it. */
.core--pinned { opacity: 0; transition: opacity 500ms ease; }
.core--pinned.is-shown { opacity: 1; }

/*
 * Seventy years in one scroll. The track is tall; the frame inside it pins to the screen while
 * the track scrolls past, and that scroll becomes --p (0 → 1). 1956 lies underneath; today is
 * clipped to the left of the line, so the line sweeping right reveals what the land became.
 * On desktop the photo spans the aside column too — the drilling core steps aside meanwhile.
 */
.time { padding-block: 20px; }
.time__track { height: 260vh; }
.time__frame { position: sticky; top: 8vh; }
.time__eyebrow { margin: 0 0 6px; font-family: var(--mono); font-size: 12.5px; color: var(--gold); letter-spacing: 0.02em; }
.time__view {
  position: relative; margin-top: 18px; height: min(66vh, 640px); border-radius: 18px; overflow: hidden;
  background: #111; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
@media (min-width: 1101px) { .time__view { width: calc(100% + 296px); } }
.time__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.time__now { clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0); }
.time__line {
  position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0) * 100%); width: 2px; margin-left: -1px;
  background: var(--cyan); box-shadow: 0 0 18px rgba(77, 201, 230, 0.9), 0 0 3px #fff;
}
.time__year {
  position: absolute; top: 18px; padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  font-family: var(--mono); font-size: 13px; font-weight: 500; background: rgba(7, 9, 13, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.time__year--now { right: 12px; color: var(--cyan); }
.time__year--then { left: 12px; color: var(--ink-soft); }
.time__hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; padding: 6px 12px;
  border-radius: 999px; background: rgba(7, 9, 13, 0.7); color: var(--ink-soft); font-size: 13px;
  transition: opacity 300ms ease;
}
.time.is-moving .time__hint { opacity: 0; }
.time__caption { margin: 18px 0 0; max-width: 70ch; color: var(--ink-soft); font-size: 15px; }
body.in-time .core--pinned { opacity: 0; }

@media (max-width: 760px) {
  .time__track { height: 240vh; }
  .time__frame { top: 6vh; }
  .time__view { height: 54vh; border-radius: 14px; }
  .time__caption { font-size: 14px; }
}

/*
 * The rainfall probe: a ring that follows the cursor over the hero map and reads the real
 * 1991–2020 rainfall underneath it, coloured with the rainfall layer's own palette.
 */
.probe { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity 180ms ease; }
.probe.is-on { opacity: 1; }
.probe__ring {
  position: absolute; left: -11px; top: -5px; width: 22px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--c, var(--cyan)); box-shadow: 0 0 14px var(--c, var(--cyan));
}
.probe__label {
  position: absolute; left: 18px; top: -38px; padding: 7px 11px 8px; border-radius: 10px; white-space: nowrap;
  background: rgba(7, 9, 13, 0.82); border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.probe__label b { display: block; font-family: var(--mono); font-size: 19px; font-weight: 500; color: var(--c, var(--ink)); font-variant-numeric: tabular-nums; }
.probe__label span { display: block; font-size: 11.5px; color: var(--muted); }
.hero-map.is-probing .drop { opacity: 0.18 !important; }

/* Near the right edge the label sits on the other side of the ring rather than off the screen. */
.probe.is-flipped .probe__label { left: auto; right: 18px; }

/*
 * The comparison as one table: label once, two plots side by side, every row shared — the eye
 * reads across, which is the whole point of a side-by-side.
 *
 * Colour rules, everywhere on the page:
 *   - values are neutral. The page reports; it does not grade.
 *   - a real problem gets a flag: a small triangle (shape, so it survives colour-blindness) and a
 *     one-line reason underneath, always visible — hover does not exist on a phone.
 *   - there is no "good" colour. No flag is the good state.
 *   - the four band colours mean depth and only depth: the core, the manifest rail.
 */
.vs-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.vs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vs thead th { text-align: left; vertical-align: bottom; padding: 0 18px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.vs thead th b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.vs thead th span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 12px; color: var(--faint); font-weight: 400; }
.vs tbody th { text-align: left; font-weight: 400; font-size: 14px; color: var(--muted); padding: 15px 18px 15px 0; width: 30%; vertical-align: top; }
.vs td { padding: 14px 18px; font-size: 15.5px; color: var(--ink); vertical-align: top; }
.vs td + td, .vs thead th + th { border-left: 1px solid var(--hairline); }
.vs tbody tr { border-top: 1px solid var(--hairline); }
.vs tbody tr:first-child { border-top: 0; }
/* Where the two plots decisively differ: a quiet band across the whole row. Neutral, not red —
   it says "compare here"; the flag says which side is the problem. */
.vs tr.key { background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)); }

.flag { position: relative; display: inline-block; padding-left: 16px; }
.flag > i {
  position: absolute; left: 0; top: 0.42em; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--flame);
  filter: drop-shadow(0 0 5px rgba(240, 106, 85, 0.6));
}
.flag[data-why]::after { content: attr(data-why); display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 760px) {
  .vs thead th { padding: 0 10px 12px; }
  .vs thead th b { font-size: 17px; }
  .vs tbody th { width: 34%; font-size: 13px; padding-right: 10px; }
  .vs td { padding: 12px 10px; font-size: 14px; }
}

/* The live check and the dropped cores follow the same rules: neutral values, flags for problems. */
.result .fact dd.ok, .result .fact dd.warn { color: var(--ink); }
.result .fact dd.bad { color: var(--ink); }
.result .fact dd.bad::before {
  content: ""; display: inline-block; margin-right: 8px; vertical-align: 1px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--flame);
}
.drop__label .flag { padding-left: 0; color: var(--ink-soft); }
.drop__label .flag.bad::before {
  content: ""; display: inline-block; margin-right: 6px; vertical-align: 0; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--flame);
}
.drop__label .flag.ok, .drop__label .flag.bad { color: var(--ink-soft); }
.time__eyebrow { color: var(--muted); }

/* Phones: a three-column table is too tight. Each label rises to its own line in small caps and
   the two values share the full width beneath it — half each, instead of a third. */
@media (max-width: 760px) {
  .vs, .vs thead, .vs tbody { display: block; }
  .vs thead tr, .vs tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .vs thead td { display: none; }
  .vs thead th { padding: 0 12px 12px 0; }
  .vs thead th + th { padding-left: 12px; }
  .vs thead th b { font-size: 17px; }
  .vs thead th span { font-size: 11px; }
  .vs tbody th {
    grid-column: 1 / -1; width: auto; padding: 12px 0 3px;
    font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint);
  }
  .vs td { padding: 3px 12px 13px 0; font-size: 14.5px; }
  .vs td + td { padding-left: 12px; }
  .vs tr.key { background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); }
}

/* The ask: where a pitch says what it wants from the reader. One sentence, one address. */
.ask { margin-top: 20px; padding-top: 44px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.ask h2 { font-size: clamp(26px, 3.4vw, 36px); }
.ask p { margin: 0 0 24px; max-width: 58ch; font-size: 17px; color: var(--ink-soft); }
.ask .pill { height: 46px; padding: 0 22px; font-family: var(--mono); font-size: 14.5px; }

/*
 * Examples to try. Desktop: an inline list, dots drawn by CSS between items. Phones: tappable
 * chips in one row that scrolls sideways, fading at the edge to say there is more — a name is
 * never broken across lines, and every target is big enough for a thumb.
 */
.examples { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--faint); }
.examples__chips { display: flex; flex-wrap: wrap; align-items: baseline; }
.examples__chips button + button::before { content: "·"; margin: 0 7px; color: var(--faint); text-decoration: none; display: inline-block; }

@media (max-width: 760px) {
  .check form { flex-wrap: nowrap; gap: 8px; }
  .check input { flex: 1 1 auto; height: 50px; padding: 0 16px; }
  .check form button { flex: none; height: 50px; padding: 0 18px; }
  .examples { flex-direction: column; align-items: stretch; gap: 8px; }
  .examples__chips {
    flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .examples__chips::-webkit-scrollbar { display: none; }
  .check .examples__chips button {
    flex: none; height: 38px; padding: 0 14px; border-radius: 19px; white-space: nowrap;
    border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.04);
    color: var(--ink-soft); text-decoration: none; font-family: var(--font); font-size: 13.5px;
  }
  .check .examples__chips button + button::before { content: none; }
}

/*
 * Phones and tablets: one core, not two. The big static one in the hero steps aside; the rail at
 * the edge is the one that tracks your reading, and when you cross into a new band it says which —
 * a tag beside the ring that fades in for a moment and out again.
 */
@media (max-width: 1100px) {
  .hero > .core { display: none; }
  .core__tag {
    position: absolute; left: 14px; top: calc(var(--depth, 0) * 100%); transform: translateY(-50%);
    padding: 5px 10px 6px; border-radius: 9px; white-space: nowrap; pointer-events: none;
    background: rgba(7, 9, 13, 0.85); border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; transition: opacity 280ms ease, top 120ms linear;
  }
  .core__tag.is-on { opacity: 1; }
  .core__tag b { display: block; font-size: 13px; font-weight: 600; color: var(--c); }
  .core__tag span { display: block; font-family: var(--mono); font-size: 11px; color: var(--faint); }
}
@media (min-width: 1101px) { .core__tag { display: none; } }

/* Phones: the submit button shrinks to a round arrow so the field gets the width, and the hint
   inside the field is a size smaller. The field's own text stays at 16 px — below that, iOS
   zooms the whole page in when you tap it. */
.btn-arrow { display: none; }
@media (max-width: 760px) {
  .check form button { width: 50px; padding: 0; border-radius: 25px; }
  .check form .btn-text { display: none; }
  .check form .btn-arrow { display: inline; font-size: 20px; line-height: 1; }
  .check input::placeholder { font-size: 14px; }
}
/* One line, not two: it passes over the page for a moment, so it should take as little as it can. */
@media (max-width: 1100px) {
  .core__tag { padding: 4px 9px; border-radius: 999px; }
  .core__tag b, .core__tag span { display: inline; }
  .core__tag b { font-size: 12px; }
  .core__tag span { font-size: 10.5px; margin-left: 6px; }
}

/*
 * Phones: the map leaves the background and gets its own window below the buttons, so the
 * dropped cores land on the map instead of under the headline, and the words sit on clean dark.
 * It is the same element as on desktop, moved by landing.js — one map, one set of cores.
 */
@media (max-width: 760px) {
  .hero-slot { margin-top: 28px; }
  .hero-map.is-window {
    position: relative; inset: auto; height: 320px; border-radius: 18px; overflow: hidden; z-index: auto;
    -webkit-mask-image: none; mask-image: none; background: #07090d;
    box-shadow: 0 0 0 1px var(--hairline), 0 24px 60px rgba(0, 0, 0, 0.45);
  }
  .hero-map.is-window::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(7, 9, 13, 0.6) 100%); }
  .hero-map.is-window .hero-map__stage {
    top: 50%; left: 50%; right: auto; width: 680px; transform: translate(-47%, -50%);
    animation: drift-window 70s ease-in-out infinite alternate;
  }
  @keyframes drift-window {
    from { transform: translate(-47%, -50%) scale(1); }
    to   { transform: translate(-51%, -48%) scale(1.06); }
  }
}
/* A label that would run past the right edge sits on the other side of its core; one too close
   to the top sits below its point instead of above. */
.drop--flip .drop__label { left: auto; right: 14px; }
.drop--below .drop__label { bottom: auto; top: 16px; }
@media (prefers-reduced-motion: reduce) { .hero-map.is-window .hero-map__stage { animation: none; } }

/* The last band's rail stops at its dot only while the band is closed, so the core visibly ends;
   opened, it runs the length of its table like the other three. */
.band:last-of-type[open]::before { bottom: 0; height: auto; }

/*
 * The report on phones: two columns of compact cells, label in small caps above its value — a spec
 * sheet rather than ten long rows with a label at one edge and its value at the other. Five rows
 * instead of ten. Every cell keeps a fixed height, so the answer still arrives without moving
 * anything: a long value wraps to two lines at most, and the sub-line gives way if it must.
 */
@media (max-width: 760px) {
  .result .facts { grid-template-columns: 1fr 1fr; column-gap: 0; }
  .result .fact {
    height: 76px; padding: 11px 12px 0 0; display: block; overflow: hidden;
  }
  .result .fact:nth-child(even) { padding: 11px 0 0 14px; border-left: 1px solid var(--hairline); }
  .result .fact dt {
    font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .result .fact dd {
    text-align: left; font-size: 14.5px; line-height: 1.3; white-space: normal;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .result .fact dd small { display: block; font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* The rail starts at the first dot and ends at the last one: dots sit at the vertical centre of
   their heading, 32 px into the band (measured, at desktop and phone widths alike). */
.band:first-of-type::before { top: 32px; }
.band:last-of-type:not([open])::before { bottom: auto; height: 32px; }
.band:first-of-type:last-of-type:not([open])::before { height: 0; }

/* Focus: nothing after a mouse click, a quiet cyan ring for keyboard users. */
.band > summary:focus { outline: none; }
.band > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 8px; }

/*
 * The comparison, tightened. Content width so a label sits near its value; every row aligned on
 * the first line of text, so a label never floats above a two-line cell; a plain header with one
 * rule across the whole table; no grey slabs — the triangles and reasons carry the warning; and a
 * last row that states the verdict, so the reader does not have to count.
 */
.vs-wrap { max-width: 820px; }
.vs thead tr { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.vs thead th { border-bottom: 0; }
.vs thead th span { font-family: var(--font); letter-spacing: 0; color: var(--muted); }
.vs tr.key { background: none; }
.vs .count { display: inline-flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.vs .count--some { color: var(--ink); }
.vs .count:not(.count--some) { color: var(--muted); }
.vs .count i {
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 11px solid var(--flame); filter: drop-shadow(0 0 6px rgba(240, 106, 85, 0.55));
}
.vs tfoot tr { border-top: 1px solid rgba(255, 255, 255, 0.16); }

@media (min-width: 761px) {
  .vs { table-layout: fixed; }
  .vs thead td, .vs tbody th, .vs tfoot th { width: 30%; }
  .vs thead th { padding: 0 22px 16px; }
  .vs thead th b { font-size: 21px; }
  .vs thead th span { font-size: 13px; margin-top: 4px; }
  .vs tbody th, .vs tbody td, .vs tfoot th, .vs tfoot td { vertical-align: baseline; }
  .vs tbody th { padding: 13px 22px 13px 0; font-size: 14px; line-height: 1.45; }
  .vs tbody td { padding: 13px 22px; font-size: 16px; line-height: 1.45; }
  .vs tfoot th { padding: 18px 22px 4px 0; font-size: 14px; font-weight: 500; color: var(--ink-soft); text-align: left; }
  .vs tfoot td { padding: 16px 22px 4px; }
  .vs .flag[data-why]::after { margin-top: 1px; font-size: 12.5px; }
}
@media (max-width: 760px) {
  .vs tfoot { display: block; }
  .vs tfoot tr { display: grid; grid-template-columns: 1fr 1fr; }
  .vs tfoot th {
    grid-column: 1 / -1; padding: 14px 0 3px; text-align: left;
    font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint);
  }
  .vs tfoot td { padding: 3px 12px 6px 0; }
  .vs tfoot td + td { padding-left: 12px; }
  .vs .count { font-size: 19px; }
}
/* A flagged value must be a block: an inline-block aligns to its last line (the reason), which
   dragged the row's label down to the bottom. As a block it aligns on its first line, like the rest. */
.vs .flag { display: block; }
.vs tfoot th, .vs tfoot td { vertical-align: middle; }