/* Home page */

/* ---------- Hero with the proof panel ---------- */
.home-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 72px; overflow: hidden; }
.home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 26, 20, .95) 0%, rgba(7, 26, 20, .8) 40%, rgba(7, 26, 20, .35) 72%, rgba(7, 26, 20, .6) 100%),
    linear-gradient(to bottom, rgba(7, 26, 20, .6), rgba(7, 26, 20, 0) 22%, rgba(7, 26, 20, 0) 70%, var(--canvas) 100%),
    url("../video/history-poster.jpg") 62% 50% / cover no-repeat;
}
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.home-hero__copy h1 { max-width: 12ch; }
.home-hero__copy .lede { margin-top: 26px; color: #D5E1DA; }
.home-hero__copy .btn-row { margin-top: 34px; }
@media (max-width: 1020px) {
  .home-hero__grid { grid-template-columns: 1fr; }
  .home-hero::before { background:
    linear-gradient(to bottom, rgba(7, 26, 20, .84), rgba(7, 26, 20, .66) 40%, rgba(7, 26, 20, .92) 75%, var(--canvas) 100%),
    url("../video/history-poster.jpg") 58% 40% / cover no-repeat; }
}
/* Phones: the first screen is the photo with the headline low on it, like the desktop; the figures follow below */
@media (max-width: 640px) {
  .home-hero { display: block; min-height: 0; padding: 0 0 40px; }
  .home-hero::before { bottom: auto; height: 100vh; height: 100svh; background:
    linear-gradient(to bottom, rgba(7, 26, 20, .72) 0%, rgba(7, 26, 20, .12) 20%, rgba(7, 26, 20, .18) 36%, rgba(7, 26, 20, .8) 56%, rgba(7, 26, 20, .95) 78%, var(--canvas) 100%),
    url("../video/history-poster.jpg") 46% 50% / cover no-repeat; }
  .home-hero__grid { gap: 8px; }
  .home-hero__copy { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 0 28px; text-shadow: var(--tshadow); }
  .home-hero__copy h1 { font-size: clamp(2.3rem, 11vw, 3.1rem); }
  .home-hero__copy .lede { margin-top: 14px; font-size: 1rem; line-height: 1.5; }
  .home-hero__copy .btn-row { margin-top: 20px; }
}

/* ---------- How do we know: press and hold ---------- */
.how__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.how__intro { position: sticky; top: 110px; }
.how__intro h2 { max-width: 16ch; }
.how__intro .lede { margin-top: 22px; }
.hold { margin-top: 34px; display: grid; gap: 12px; justify-items: start; }
.hold__btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 24px; overflow: hidden;
  background: transparent; border: 2px solid var(--accent); color: var(--text); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
  font-weight: 700; font-style: italic; font-stretch: 106%; font-size: 1.1rem;
}
.hold__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: scaleX(var(--hold, 0)); transform-origin: left; }
.hold__btn span { position: relative; mix-blend-mode: difference; color: #F2F5EF; }
.how.is-complete .hold__btn span { mix-blend-mode: normal; color: var(--canvas); }
.hold__skip { background: none; border: 0; padding: 0; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
.hold__skip:hover { color: var(--text); }

.layers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.layer { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); opacity: .32; transition: opacity .5s var(--ease-out); }
.layer.is-on { opacity: 1; }
.layer__n { font-style: italic; font-weight: 800; font-stretch: 115%; font-size: 2.2rem; line-height: 1; color: var(--text-3); transition: color .5s var(--ease-out); }
.layer.is-on .layer__n { color: var(--accent); }
.layer h3 { margin-bottom: 6px; }
.layer p { color: var(--text-2); }
.layer__more { margin-top: 12px !important; }
.layer--result { border-bottom: 2px solid var(--accent); }
.layer--result h3 { color: var(--text); }
@media (max-width: 900px) { .how__grid { grid-template-columns: 1fr; } .how__intro { position: static; } }

/* ---------- Network: a pinned, full-width map story ---------- */
.netstory { position: relative; height: 760vh; background: #081B14; }
.netstory__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.netstory__map { position: absolute; inset: 0; }
.netstory__map svg { width: 100%; height: 100%; display: block; }
.netmap-country { fill: #0F2E24; stroke: #1D4A3B; stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .6s var(--ease-out), opacity .6s var(--ease-out); }
.netmap-country.is-cf { cursor: pointer; outline: none; }
.netmap-country.is-cf:hover, .netmap-country.is-cf:focus-visible { stroke: var(--accent); stroke-width: 2; }
.netmap-country.is-dim { opacity: .45; }
.netmap-country.is-zero { fill: #0F2E24; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; }
.netmap-base { fill: none; stroke: rgba(242, 245, 239, .12); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.netmap-flow { fill: none; stroke: var(--accent); stroke-linecap: butt; vector-effect: non-scaling-stroke; transition: opacity .6s var(--ease-out), stroke-width .6s var(--ease-out); }
.netmap-flow.is-sea { stroke: #9DB8C9; }
.netmap-flow.is-dim { opacity: .14; }
.netmap-hub { fill: var(--text); font-weight: 700; font-style: italic; font-size: var(--hub-fs, 20px); paint-order: stroke; stroke: #081B14; stroke-width: var(--hub-sw, 5px); pointer-events: none; transition: opacity .6s var(--ease-out); }
.netmap-hub.is-rail { opacity: 0; }
.netstory[data-focus="rail"] .netmap-hub.is-rail { opacity: 1; }

/* Rail: a track with sleepers, and trains running both ways. Distinct from the dashed road flows and the sea lane. */
.netmap-rail, .netmap-ties, .netmap-train { fill: none; vector-effect: non-scaling-stroke; transition: opacity .6s var(--ease-out); }
.netmap-rail { stroke: rgba(242, 245, 239, .5); stroke-width: 2px; }
.netmap-ties { stroke: rgba(242, 245, 239, .5); stroke-width: 9px; stroke-dasharray: 1.5 8; }
.netmap-train { stroke: #F2F5EF; stroke-width: 5px; stroke-dasharray: 13 3 13 3 13 3 13 3 13 236; }
.netmap-train.is-back { stroke: rgba(242, 245, 239, .7); stroke-width: 3.5px; stroke-dasharray: 13 3 13 3 13 3 13 222; }
.netstory[data-focus="rail"] .netmap-rail, .netstory[data-focus="rail"] .netmap-ties { stroke: rgba(242, 245, 239, .8); }
.netmap-rails.is-dim { opacity: .18; }

/* Nodes where lines meet or end: small squares, the traffic centres filled in yellow */
.netmap-node { fill: #081B14; stroke: rgba(242, 245, 239, .9); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: opacity .6s var(--ease-out); }
.netmap-node.is-hub { fill: var(--accent); stroke: #081B14; }
.netmap-node.is-rail { fill: #F2F5EF; stroke: #081B14; }
.netmap-node.is-dim { opacity: .2; }
.netmap-node.is-off { display: none; }

.netstory__steps { position: absolute; inset: 0; pointer-events: none; }
.netstep { position: absolute; top: 50%; width: min(30vw, 440px); opacity: 0; transform: translateY(-50%); isolation: isolate; }
.netstep--left { left: max(var(--gutter), 4vw); }
.netstep--right { right: max(var(--gutter), 4vw); }
.netstep h2, .netstep h3 { font-size: clamp(1.8rem, 3vw, 2.9rem); line-height: 1.03; margin-bottom: 14px; }
.netstep p { color: var(--text-2); font-size: clamp(1rem, 1.2vw, 1.15rem); }
.netstep b { color: var(--text); font-weight: 700; }
.netstep h3 b, .netstep h2 b { color: var(--accent); }
/* Legibility: a soft shade from the caption's own edge of the screen, fading out into the map, never a box */
.netstep::before { content: ""; position: absolute; top: -70vh; bottom: -70vh; z-index: -1; pointer-events: none; }
.netstep--left::before { left: -50vw; right: -12vw; background: linear-gradient(90deg, rgba(8, 27, 20, .95) 0%, rgba(8, 27, 20, .88) 62%, rgba(8, 27, 20, 0) 100%); }
.netstep--right::before { right: -50vw; left: -12vw; background: linear-gradient(270deg, rgba(8, 27, 20, .95) 0%, rgba(8, 27, 20, .88) 62%, rgba(8, 27, 20, 0) 100%); }

/* The rail photo rises with the rail caption and sinks away with it */
.netphoto { --k: 0; position: absolute; right: max(var(--gutter), 4vw); bottom: 7vh; width: min(30vw, 480px); margin: 0; z-index: 1; pointer-events: none;
  opacity: min(1, calc(var(--k) * 2)); clip-path: inset(calc((1 - var(--k)) * 100%) 0 0 0); transform: translateY(calc((1 - var(--k)) * 48px)); }
.netphoto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transform: scale(calc(1.14 - .14 * var(--k))); transform-origin: 50% 100%; }

.netstory__ui { position: absolute; left: max(var(--gutter), 4vw); bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.segmented--dark { background: rgba(8, 27, 20, .85); border: 1px solid var(--line); }
.segmented--dark button { color: var(--text-2); }
.segmented--dark button:hover { color: var(--text); }
.segmented--dark button[aria-pressed="true"] { background: var(--accent); color: var(--canvas); box-shadow: none; }
.netstory__period { font-size: .875rem; color: var(--text-2); }
.nettip { position: absolute; z-index: 5; pointer-events: none; min-width: 200px; padding: 12px 14px; background: rgba(7, 26, 20, .95); border: 1px solid var(--line-strong); font-size: .875rem; color: var(--text-2); transform: translate(-50%, calc(-100% - 14px)); }
.nettip strong { display: block; color: var(--text); font-style: italic; font-weight: 800; font-size: 1.15rem; margin-bottom: 4px; }
.nettip dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 2px 14px; }
.nettip dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.netdata { padding-block: clamp(24px, 3vw, 40px); }
@media (max-width: 900px) {
  .netstory__ui { left: var(--gutter); right: calc(var(--gutter) + 124px); bottom: 14px; flex-direction: column; align-items: stretch; gap: 6px; }
  .netstory__ui .segmented--dark { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .netstory__ui .segmented--dark::-webkit-scrollbar { display: none; }
  .netstory__ui .segmented--dark button { flex: none; }
  .netstep { top: auto; bottom: 112px; left: var(--gutter); right: var(--gutter); width: auto; transform: none; }
  .netstep--left::before, .netstep--right::before { top: -150px; bottom: -120px; left: -50vw; right: -50vw; background: linear-gradient(0deg, rgba(8, 27, 20, .96) 0%, rgba(8, 27, 20, .9) 72%, rgba(8, 27, 20, 0) 100%); }
  .netphoto { top: 124px; bottom: auto; left: var(--gutter); right: auto; width: min(58vw, 320px); }
}

/* ---------- Why ---------- */
.why__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.why__photo { aspect-ratio: 3 / 2; position: sticky; top: 110px; }
.why__list { border-top: 1px solid var(--line); }
.why__item { padding: 28px 0; border-bottom: 1px solid var(--line); }
.why__item h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 10px; }
.why__item p { color: var(--text-2); max-width: 52ch; }
.why__strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-top: clamp(40px, 6vw, 72px); }
.why__strip .media { aspect-ratio: 3 / 2; }
@media (max-width: 860px) { .why__grid { grid-template-columns: 1fr; } .why__photo { position: static; aspect-ratio: 3 / 2; } .why__strip { grid-template-columns: 1fr; } }

/* ---------- Snapshot ---------- */
.snapshot__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; }
.snapshot .card { display: grid; gap: 18px; align-content: start; }
.snapshot .card .btn { justify-self: start; }
.fuelbar { display: flex; height: 52px; gap: 2px; }
.fuelbar span { display: flex; align-items: center; padding: 0 12px; font-weight: 800; font-style: italic; font-size: 1.25rem; color: var(--canvas); min-width: 0; }
.fuelbar__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .95rem; color: var(--text-2); }
.month-stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.month-stats dt { font-size: .9rem; color: var(--text-2); }
.month-stats dd { margin: 4px 0 0; font-style: italic; font-weight: 800; font-size: 1.7rem; line-height: 1; }
.month-stats dd small { font-size: .55em; color: var(--text-2); font-weight: 600; font-style: normal; margin-left: 3px; }
.month-chart svg { width: 100%; height: auto; }
.month-chart text { font-size: 12px; fill: var(--text-2); }
@media (max-width: 860px) { .snapshot__grid { grid-template-columns: 1fr; } .month-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Story teaser ---------- */
.story-teaser { position: relative; min-height: 78vh; display: flex; align-items: flex-end; padding: 120px 0 clamp(56px, 8vw, 110px); overflow: hidden; }
.story-teaser::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, var(--canvas-deep) 0%, rgba(7, 26, 20, .15) 30%, rgba(7, 26, 20, .3) 60%, rgba(7, 26, 20, .94) 100%),
              url("../video/history-static.jpg") 50% 55% / cover no-repeat;
}
.story-teaser__inner { display: grid; gap: 18px; justify-items: start; max-width: 780px; text-shadow: var(--tshadow); }
.story-teaser__inner .lede { color: var(--text); }

/* ---------- Latest ---------- */
.latest__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border-top: 2px solid var(--ink); }
.post-card { padding: 26px 26px 30px 0; display: grid; gap: 12px; align-content: start; border-bottom: 1px solid var(--ink-line); }
.post-card + .post-card { padding-left: 26px; border-left: 1px solid var(--ink-line); }
.post-card p { color: var(--ink-2); }
@media (max-width: 960px) { .post-card + .post-card { padding-left: 0; border-left: 0; } }

/* ---------- Closing ---------- */
.closing__inner { display: grid; gap: 18px; justify-items: start; max-width: 780px; }
.closing .btn-row { margin-top: 10px; }