/* Newspaper graphics desk, not BI dashboard. One serif for prose, one sans for map labels and UI. The three mechanism colours carry all semantic weight; nothing else on the page is coloured. */ :root { --serif: Georgia, "Times New Roman", "Noto Serif SC", "Songti SC", "SimSun", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; /* dark is the default; the Theme row in the Filter card (or ?theme=light) sets data-theme="light" on — the page does not follow the OS */ --bg: #191a1c; --ink: #e6e4de; --ink-soft: #a5a29a; --rule: #3a3b3e; --land: #33353a; --land-stroke: #4a4c52; /* categorical trio validated against #191a1c (CVD + lightness band) */ --c-detachment: #d64550; --c-glof: #b68c09; --c-wave: #4489cc; color-scheme: dark; } :root[data-theme="light"] { --bg: #faf9f6; --ink: #1a1a1a; --ink-soft: #555; --rule: #d8d5cd; --land: #d4d2ca; --land-stroke: #b8b5ab; --c-detachment: #c93a39; --c-glof: #c47d0e; --c-wave: #2a76c2; color-scheme: light; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; } .skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: 0.5rem 1rem; z-index: 10; } .skip:focus { left: 0; } /* text only a screen reader needs, e.g. a table header the sighted column makes obvious */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------ layout */ .prose, .masthead-inner, .mech-grid, .map-head, .list-wrap { margin: 0 auto; padding: 0 1rem; } .prose { max-width: 34rem; } /* ~68ch of serif */ .masthead-inner, .mech-grid, .map-head, .list-wrap { max-width: 62rem; } section { margin: 3rem 0; } h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; } h2 { font-size: 1.6rem; margin: 0 0 1rem; } h3 { font-size: 1.15rem; margin: 0 0 0.5rem; } a { color: inherit; text-decoration-color: var(--ink-soft); text-underline-offset: 2px; } main a { overflow-wrap: anywhere; } /* long URLs must not widen a 360px page */ /* ------------------------------------------------ masthead */ .masthead { border-bottom: 3px double var(--rule); padding: 2rem 0 1.25rem; } .masthead h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0; } .masthead .subtitle { color: var(--ink-soft); margin: 0.5rem 0 1rem; max-width: 42rem; } .masthead nav { font-family: var(--sans); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; } .masthead nav a { text-decoration: none; } .masthead nav a:hover { text-decoration: underline; } .lang-switch { margin-left: auto; } /* ------------------------------------------------ opening */ .provocation { font-size: 1.5rem; font-style: italic; margin: 0 0 1rem; } /* ------------------------------------------------ mechanisms */ .mech { border-top: 4px solid; padding-top: 0.75rem; } .mech--detachment { border-color: var(--c-detachment); } .mech--glof { border-color: var(--c-glof); } .mech--wave { border-color: var(--c-wave); } .mech h3 { display: flex; align-items: center; gap: 0.5rem; } .mech .glyph { flex: none; } .mech dl { margin: 0; font-size: 0.95rem; } .mech dt { font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: 0.7rem; } .mech dd { margin: 0.15rem 0 0; } .mech-zh { font-family: var(--sans); font-weight: 400; color: var(--ink-soft); font-size: 0.9rem; } /* ------------------------------------------------ map */ .caveat { border-left: 3px solid var(--rule); padding-left: 0.9rem; color: var(--ink-soft); font-size: 0.95rem; } /* about story */ .kicker { font-family: var(--sans); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0 0 0.4rem; } /* list rows: swatch · name · soft detail, hairlines (About, Watchlist, Sources) */ .rows { list-style: none; margin: 0.5rem 0 0; padding: 0; font-family: var(--sans); font-size: 0.85rem; } .rows > li, .rows .row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; } .rows > li:last-child, .rows .row:last-child { border-bottom: 1px solid var(--rule); } .rows .row-name { flex: none; width: 11rem; font-weight: 600; } .rows .row:hover .row-name, .rows .row:focus-visible .row-name { text-decoration: underline; } .rows .row-sub { flex: 1; min-width: 0; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.35; } .rows .glyph, .rows .swatch { flex: none; } .rows-label { margin: 1.25rem 0 0; font-family: var(--sans); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } .rows-label .count, .panel-counter, h3 .count { margin-left: 0.5rem; color: var(--ink); font-variant-numeric: tabular-nums; } /* figure tables under the charts */ .figures { width: 100%; border-collapse: collapse; margin: 0.75rem 0 0; font-family: var(--sans); font-size: 0.8rem; } .figures:empty { display: none; } .figures th, .figures td { text-align: right; padding: 0.35rem 0 0.35rem 0.75rem; border-bottom: 1px solid var(--rule); white-space: nowrap; } .figures th { font-weight: 400; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } .figures td { font-variant-numeric: tabular-nums; color: var(--ink); } .figures th:first-child, .figures td:first-child { text-align: left; padding-left: 0; width: 40%; } .figures .swatch { width: 14px; height: 14px; display: inline; vertical-align: -2px; margin-right: 0.3rem; } .legend-rows { grid-template-columns: 9.5rem minmax(0, 1fr); margin: 0.75rem 0 1rem; } .legend-rows dt { display: flex; align-items: center; gap: 0.4rem; } h2.provocation { font-weight: 400; } html.js .story-section h2.provocation { font-size: 1.6rem; } .about-lead { color: var(--ink-soft); } /* the opening clip: the port camera, muted, under the headline */ .opening-video { margin: 1rem 0 1.5rem; } .opening-clip { display: block; width: 100%; aspect-ratio: 960 / 491; height: auto; background: #000; object-fit: cover; border-radius: 2px; } html.js .opening-clip { cursor: pointer; } .opening-video figcaption p { margin: 0.5rem 0 0; font-family: var(--sans); font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); } .opening-video .credit { font-size: 0.72rem; } .about-mechs { max-width: 62rem; margin: 1rem auto; padding: 0 1rem; } .about-mechs .row { min-height: 44px; } .mech-what { font-size: 1.05rem; } .mech-more summary { list-style: none; margin-top: 1rem; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); cursor: pointer; } .mech-more summary::-webkit-details-marker { display: none; } .mech-more summary::after { content: "+"; color: var(--ink-soft); font-size: 1rem; line-height: 1; } .mech-more[open] summary::after { content: "−"; } .mech-more[open] summary { border-bottom-color: transparent; } .mech-more dl { margin: 0.25rem 0 1rem; font-size: 0.95rem; } .mech-more dt { font-family: var(--sans); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0.9rem 0 0.2rem; } .mech-more dd { margin: 0; } .about-go-wrap { display: none; } html.js .about-go-wrap { display: block; margin-top: 1.5rem; } html.js .story-section .about-mechs { padding: 0; max-width: 38rem; margin: 1rem auto; } /* illustrations (assets/illus/*.svg, inlined by build_page.py) */ .illus { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0.5rem auto 1rem; color: var(--ink); } .illus text { font-family: var(--sans); font-size: 9px; fill: var(--ink-soft); } /* the Method drawings move only where motion carries the idea; still under reduced motion */ .illus .ill-travel { opacity: 0; animation: illus-travel 4s cubic-bezier(0.45, 0, 0.2, 1) infinite; } .illus .ill-drop { animation: illus-drop 4.5s cubic-bezier(0.5, 0, 1, 0.7) infinite; } .illus .ill-pulse { transform-box: fill-box; transform-origin: center; animation: illus-pulse 3s ease-out infinite; } .illus .ill-draw { stroke-dasharray: 1; animation: illus-draw 5s ease-in-out infinite; } @keyframes illus-travel { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 62% { offset-distance: 100%; opacity: 1; } 72%, 100% { offset-distance: 100%; opacity: 0; } } @keyframes illus-drop { 0% { transform: translateY(-50px); opacity: 0; } 10% { opacity: 1; } 38%, 100% { transform: translateY(0); opacity: 1; } } @keyframes illus-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(3.2); opacity: 0; } } @keyframes illus-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 50%, 84% { stroke-dashoffset: 0; opacity: 1; } 94% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .illus .ill-travel, .illus .ill-drop, .illus .ill-pulse, .illus .ill-draw { animation: none; } .illus .ill-travel, .illus .ill-pulse { opacity: 0; } .illus .ill-draw { stroke-dasharray: none; } } /* map cards: one grid (label | control), chips, segmented control, select. The stats card uses the table variant (label | figure). */ .card-grid { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.55rem; align-items: center; margin: 0; font-family: var(--sans); font-size: 0.8rem; } .card-grid--table { grid-template-columns: minmax(0, 1fr) auto; } .card-grid .row-label, .card-grid dt { grid-column: 1; margin: 0; color: var(--ink-soft); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; } .card-grid dd { margin: 0; min-width: 0; } .card-grid .figure { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.95rem; line-height: 1.2; color: var(--ink); } .stat-bar { grid-column: 1 / -1; display: flex; gap: 1px; height: 4px; margin-top: -0.15rem; } .stat-bar .seg { flex: 0 0 auto; min-width: 2px; } .stat-bar .seg--detachment { background: var(--c-detachment); } .stat-bar .seg--glof { background: var(--c-glof); } .stat-bar .seg--wave { background: var(--c-wave); } .stat-bar .seg.off { opacity: 0.3; } .stat-split { grid-column: 1 / -1; margin-top: -0.25rem; font-size: 0.68rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .stat-split .off { opacity: 0.45; } .stat-split .sq { display: inline-block; width: 7px; height: 7px; margin-right: 0.3rem; } .stat-split .sq--detachment { background: var(--c-detachment); } .stat-split .sq--glof { background: var(--c-glof); } .stat-split .sq--wave { background: var(--c-wave); } .chips { display: flex; gap: 0.35rem; min-width: 0; } .chip { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 30px; min-width: 0; padding: 0.15rem 0.35rem; border: 1px solid var(--rule); border-radius: 2px; background: none; color: var(--ink-soft); font: inherit; font-family: var(--sans); font-size: 0.74rem; line-height: 1.2; white-space: nowrap; cursor: pointer; } .chip[aria-pressed="true"], .chip:has(input:checked) { border-color: var(--ink); color: var(--ink); } .chip .swatch { flex: none; } .chip--detachment[aria-pressed="false"] .swatch path { fill: none; stroke: var(--c-detachment); stroke-width: 2; } .chip--glof[aria-pressed="false"] .swatch path { fill: none; stroke: var(--c-glof); stroke-width: 2; } .chip--wave[aria-pressed="false"] .swatch path { fill: none; stroke: var(--c-wave); stroke-width: 2; } .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .chip .tick { flex: none; width: 8px; height: 8px; border: 1px solid currentColor; } .chip:has(input:checked) .tick { background: currentColor; } .chip:focus-visible, .chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; } .segmented { display: flex; border: 1px solid var(--rule); border-radius: 2px; } .segmented label { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 30px; padding: 0.2rem 0.4rem; font-size: 0.74rem; color: var(--ink-soft); cursor: pointer; } .segmented label + label { border-left: 1px solid var(--rule); } .segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .segmented label:has(input:checked) { background: var(--ink); color: var(--bg); } .segmented label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; } .segmented label:has(input:disabled) { opacity: 0.5; cursor: default; } .select-wrap { position: relative; display: block; min-width: 0; } .select-wrap select { width: 100%; appearance: none; -webkit-appearance: none; min-height: 30px; padding: 0.25rem 1.6rem 0.25rem 0.5rem; border: 1px solid var(--rule); border-radius: 2px; background: none; color: var(--ink); font: inherit; font-family: var(--sans); font-size: 0.78rem; cursor: pointer; } .select-wrap::after { content: ""; position: absolute; right: 0.65rem; top: 50%; width: 6px; height: 6px; border-right: 1px solid var(--ink-soft); border-bottom: 1px solid var(--ink-soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; } /* ------------------------------------------------ dashboard */ .map-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 82vh; background: var(--land); overflow: hidden; touch-action: none; } .map-stage .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .map-stage .poster[hidden] { display: none; } .map-notice { margin-top: 0.75rem; } .map-cards { display: none; } /* only the overlay layout shows them */ .detail[hidden] { display: none; } .globe-hint { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-soft); text-align: center; margin: 0.5rem 0 0; } .globe-hint[hidden] { display: none; } .impact-note { font-size: 0.78rem; color: var(--ink-soft); border-left: 3px solid var(--rule); padding-left: 0.6rem; margin: 0; } .map-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: -0.15rem 0 0; font-size: 0.68rem; color: var(--ink-soft); } .map-legend .item { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; } /* ------------------------------------------------ detail panel */ .detail { position: relative; z-index: 3; width: 100%; max-height: 26rem; overflow-y: auto; background: var(--bg); border: 1px solid var(--rule); box-shadow: none; padding: 0 1rem 1rem; font-size: 0.92rem; font-family: var(--serif); } .detail-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 34px; margin: 0 -1rem 0.6rem; padding: 0 0.5rem 0 1rem; border-bottom: 1px solid var(--rule); background: var(--bg); font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); } .detail h3 { margin: 0 0 0.2rem; } .detail .place { color: var(--ink-soft); margin: 0 0 0.6rem; } .detail dl { margin: 0.6rem 0; } .detail dt { font-family: var(--sans); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: 0.55rem; } .detail dd { margin: 0.1rem 0 0; } .detail .close { font-family: var(--sans); font-size: 1.2rem; line-height: 1; background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 0.25rem 0.5rem; min-width: 34px; min-height: 34px; } .detail .preprint-note { font-size: 0.82rem; color: var(--ink-soft); border-left: 3px solid var(--rule); padding-left: 0.6rem; } .detail .srcs { font-size: 0.82rem; } /* ------------------------------------------------ watchlist list (no-JS equivalent) */ .site-list { list-style: none; padding: 0; margin: 0.75rem 0; } .site-list > li { border-top: 1px solid var(--rule); padding: 0.75rem 0; font-size: 0.95rem; } .site-list .site-name { font-weight: 700; } .site-list .site-place, .site-list .site-meta { color: var(--ink-soft); font-size: 0.88rem; } .site-list .mech-tag { font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid; border-radius: 2px; padding: 0.05rem 0.35rem; margin-left: 0.5rem; vertical-align: 2px; } /* watchlist as a list (JS mode): one row per site, the full entry stays for no-JS */ .watchlist-note { color: var(--ink-soft); font-size: 0.9rem; } html.js .watchlist-note { font-family: var(--sans); font-size: 0.8rem; } html.js .wl-full[hidden] { display: none; } html.js .site-list[hidden] { display: none; } html.js .site-list > li { border: none; padding: 0; margin: 0; } html.js .wl-groups .site-list { margin: 0.25rem 0 0; } html.js .wl-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; align-items: start; width: 100%; min-height: 44px; padding: 0.5rem 0; font: inherit; font-family: var(--sans); font-size: 0.85rem; text-align: left; background: none; border: none; border-top: 1px solid var(--rule); color: inherit; cursor: pointer; } html.js .site-list > li:last-child .wl-row { border-bottom: 1px solid var(--rule); } html.js .wl-row:hover .wl-name, html.js .wl-row:focus-visible .wl-name { text-decoration: underline; } html.js .wl-row .swatch { grid-row: 1 / span 3; margin-top: 0.2rem; } html.js .wl-row .wl-name { font-weight: 600; min-width: 0; } html.js .wl-row .wl-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: 0.74rem; } html.js .wl-row .wl-facts { margin-top: 0.15rem; font-size: 0.74rem; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } html.js .wl-row .wl-facts:empty { display: none; } html.js .watchlist-card .rows-label { margin-top: 0.85rem; } html.js .watchlist-card .rows-label:first-child { margin-top: 0; } html.js .wl-total { margin: 0 0 0.35rem; font-family: var(--sans); font-size: 0.74rem; color: var(--ink-soft); } html.js .wl-total b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } html.js .panel-head .panel-counter { margin-left: auto; } html.js .panel-head .panel-counter + .panel-close { margin-left: 0; } .mech-tag--detachment { color: var(--c-detachment); border-color: var(--c-detachment); } .mech-tag--glof { color: var(--c-glof); border-color: var(--c-glof); } .mech-tag--wave { color: var(--c-wave); border-color: var(--c-wave); } /* ------------------------------------------------ timeline */ .timeline-figure { margin: 1.5rem auto 0; max-width: 62rem; padding: 0 1rem; } html.js .story-section .timeline-figure { max-width: none; padding: 0; margin-top: 1rem; } .timeline-figure > svg { width: 100%; height: auto; display: block; font-family: var(--sans); } .timeline-figure .axis text { font-size: 0.7rem; fill: var(--ink-soft); } .timeline-figure .axis line, .timeline-figure .axis path { stroke: var(--rule); } .timeline-caption { font-size: 0.85rem; color: var(--ink-soft); font-family: var(--sans); } /* ------------------------------------------------ method, sources */ /* the worked example under each Method step */ .method-step .example { font-family: var(--sans); font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); margin: 0.75rem 0 0; padding-left: 0.85rem; border-left: 2px solid var(--rule); } /* the head names the panel; these headings stay for the document and for focus */ html.js #method h2, html.js #sources h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #panel-sources h3 { margin: 1.75rem 0 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 0.66rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } .bib, .upstream-credits { list-style: none; padding: 0; margin: 0; font-family: var(--sans); font-size: 0.8rem; line-height: 1.4; } .bib li, .upstream-credits li { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); } .bib li > a, .upstream-credits li > a:first-child { min-width: 0; } .bib .kind { margin-left: auto; flex: none; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } .upstream-credits li.upstream { display: block; } .upstream-title { font-family: var(--serif); font-size: 0.95rem; font-weight: 700; } .upstream .card-grid { margin: 0.45rem 0 0.35rem; max-width: 24rem; grid-template-columns: 7rem minmax(0, 1fr); } .upstream .card-grid .figure { font-size: 0.8rem; overflow-wrap: anywhere; } .upstream-status { margin: 0; font-size: 0.76rem; color: var(--ink-soft); } #panel-sources .prose > p { font-size: 0.92rem; } /* ------------------------------------------------ footer */ footer { border-top: 3px double var(--rule); margin-top: 3rem; padding: 1.25rem 0 2.5rem; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); } footer .masthead-inner p { margin: 0.3rem 0; } /* ------------------------------------------------ overlay layout (engine booted: html.js) */ html.js body { overflow: hidden; } html.js main { margin: 0; } html.js .doc-only, html.js .doc-nav, html.js .masthead .subtitle, html.js footer, html.js #map-section .map-head { display: none; } html.js .masthead { position: fixed; top: 0.5rem; left: 4.25rem; z-index: 20; border: none; padding: 0.35rem 0.7rem; background: var(--bg); background: color-mix(in srgb, var(--bg) 85%, transparent); border-radius: 2px; } html.js .masthead h1 { font-size: 1.1rem; } html.js .masthead-inner { padding: 0; } html.js #map-section { margin: 0; } html.js .map-stage { position: fixed; inset: 0; aspect-ratio: auto; max-height: none; z-index: 0; background: var(--bg); } html.js .map-stage .poster { z-index: 0; } /* rail */ .rail { display: none; } html.js .rail { display: flex; flex-direction: column; gap: 0.25rem; position: fixed; left: 0; top: 0; bottom: 0; width: 3.5rem; z-index: 30; background: var(--bg); border-right: 1px solid var(--rule); padding: 0.75rem 0.3rem; font-family: var(--sans); } html.js .rail-btn { writing-mode: vertical-rl; text-orientation: mixed; background: none; border: 1px solid transparent; border-radius: 2px; color: var(--ink); font: inherit; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 0.7rem 0.4rem; min-width: 2.6rem; cursor: pointer; } html.js .rail-btn:hover { border-color: var(--rule); } html.js .rail-btn[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } /* the in-place language switch: a short dip while the texts swap */ body { transition: opacity 140ms ease; } html.relang body { opacity: 0.35; } @media (prefers-reduced-motion: reduce) { body { transition: none; } } /* panels */ html.js .panel { display: none; } html.js .panel.open { display: block; position: fixed; top: 0; bottom: 0; left: 3.5rem; width: min(26.25rem, calc(100vw - 3.5rem)); z-index: 25; overflow-y: auto; background: var(--bg); border-right: 1px solid var(--rule); box-shadow: 8px 0 24px -12px rgba(0, 0, 0, 0.35); padding: 0 0 2rem; } .panel-head { display: none; } html.js .panel-head { position: sticky; top: 0; z-index: 1; background: var(--bg); margin: 0 0 1rem; } html.js .panel-close { margin-left: auto; } /* the head already names the watchlist panel; its heading stays for focus and readers */ html.js #panel-watchlist h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html.js .panel section { margin: 0 0 2rem; } html.js .panel .prose, html.js .panel .map-head, html.js .panel .list-wrap, html.js .panel .timeline-figure { max-width: none; padding: 0 1.25rem; } html.js .panel h2 { font-size: 1.3rem; } html.js .panel h2:focus { outline: none; } /* search: one field under the title; results as a list in the card style */ .search { display: none; } html.js .search { display: block; position: fixed; top: 3.25rem; left: 4.25rem; z-index: 18; width: 20rem; max-width: calc(100vw - 5rem); font-family: var(--sans); } html.js .search-open { display: none; } html.js .search-field { display: flex; align-items: center; gap: 0.45rem; min-height: 34px; padding: 0 0.6rem; background: var(--bg); background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--rule); color: var(--ink-soft); } html.js .search-field:focus-within { border-color: var(--ink); color: var(--ink); } html.js .search-glyph { flex: none; } html.js .search input { flex: 1; min-width: 0; padding: 0.3rem 0; font: inherit; font-family: var(--sans); font-size: 0.8rem; color: var(--ink); background: none; border: none; outline: none; } html.js .search input::placeholder { color: var(--ink-soft); } html.js .search input::-webkit-search-decoration, html.js .search input::-webkit-search-cancel-button { -webkit-appearance: none; } html.js .search-list { list-style: none; margin: 0.35rem 0 0; padding: 0.25rem 0; max-height: min(50vh, 26rem); overflow-y: auto; background: var(--bg); border: 1px solid var(--rule); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4); } html.js .search-list[hidden] { display: none; } html.js .search-group { padding: 0.45rem 0.75rem 0.15rem; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } html.js .search-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; cursor: pointer; font-size: 0.8rem; color: var(--ink); } html.js .search-row .swatch { flex: none; width: 14px; height: 14px; } html.js .search-row .sr-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.js .search-row .sr-sub { margin-left: auto; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } html.js .search-row:hover, html.js .search-row.active { background: color-mix(in srgb, var(--ink) 10%, transparent); } html.js .search-none { padding: 0.45rem 0.75rem; font-size: 0.78rem; color: var(--ink-soft); } /* map cards: Stats and Filter, top right. One anatomy: the head is the toggle (title left, − / + right, hairline under), the body is a grid. */ html.js .map-cards { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 15; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; width: 22rem; max-width: calc(100vw - 1.5rem); max-height: calc(100vh - 1.5rem); font-family: var(--sans); } html.js .map-cards[hidden] { display: none; } html.js .map-card { display: flex; flex-direction: column; width: 100%; min-height: 0; background: var(--bg); background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--rule); padding: 0 0.75rem 0.75rem; } /* three cards in one column: Statistics and Filter keep their size, Watchlist takes what is left and scrolls its body under a fixed head; with the detail card open the column stays in the top half so the two never overlap */ html.js .stats-card, html.js .filter-card { flex: none; } html.js .filter-card { overflow-y: auto; } html.js .watchlist-card { flex: 1 1 auto; min-height: 9rem; overflow: hidden; } html.js .watchlist-card .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } html.js .map-card.collapsed { flex: none; min-height: 0; } html.js body:has(.detail:not([hidden])) .map-cards { max-height: calc(50vh - 2rem); } html.js body:has(.detail:not([hidden])) .filter-card { flex: 0 1 auto; min-height: 6rem; } html.js body:has(.detail:not([hidden])) .watchlist-card { flex: 1 1 auto; } html.js .card-head { position: relative; display: flex; flex: none; margin: 0 -0.75rem 0.65rem; padding: 0 0.75rem; border-bottom: 1px solid var(--rule); } html.js .card-toggle { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 34px; padding: 0.35rem 0; background: none; border: none; color: var(--ink); font: inherit; font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; text-align: left; cursor: pointer; } html.js .card-glyph { width: 1rem; text-align: right; font-size: 1rem; line-height: 1; color: var(--ink-soft); } html.js .card-glyph::before { content: "−"; } html.js .card-toggle[aria-expanded="false"] .card-glyph::before { content: "+"; } html.js .card-reset { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); background: none; border: none; border-bottom: 1px solid currentColor; padding: 0; color: var(--ink-soft); font: inherit; font-family: var(--sans); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } html.js .card-reset[hidden] { display: none; } html.js .map-card.collapsed { width: 100%; padding: 0 0.75rem; } html.js .map-card.collapsed .card-head { margin: 0; padding: 0; border-bottom: none; } html.js .map-card.collapsed .card-body, html.js .map-card.collapsed .card-reset { display: none; } html.js .card-body { display: flex; flex-direction: column; gap: 0.6rem; } .tiles-note { font-weight: 700; } /* the hint sits above MapLibre's attribution rather than beside it: the attribution grows rightward from 3.5rem and with the terrain basemap it reaches past the centre, so a hint on the same line is written over */ html.js .globe-hint { position: fixed; left: 50%; bottom: 2.9rem; transform: translateX(-50%); z-index: 14; margin: 0; font-size: 0.72rem; color: var(--ink-soft); pointer-events: none; white-space: nowrap; } /* detail card */ html.js .detail { position: fixed; right: 0.75rem; bottom: 0.75rem; width: 24rem; max-width: calc(100vw - 1.5rem); max-height: min(50vh, 32rem); z-index: 16; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4); } /* intro mechanisms grid (Task 3 reuses inside About's story section) */ .intro-mechs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1rem 0; } .intro-mech { display: flex; flex-direction: column; gap: 0.3rem; text-align: left; background: none; border: 1px solid var(--rule); border-top: 3px solid var(--rule); border-radius: 2px; padding: 0.6rem 0.7rem; color: inherit; font: inherit; font-family: var(--sans); font-size: 0.82rem; line-height: 1.4; cursor: pointer; } .intro-mech--detachment { border-top-color: var(--c-detachment); } .intro-mech--glof { border-top-color: var(--c-glof); } .intro-mech--wave { border-top-color: var(--c-wave); } .intro-mech .swatch { vertical-align: -2px; } .intro-go { font: inherit; font-family: var(--sans); background: var(--ink); color: var(--bg); border: none; border-radius: 2px; padding: 0.6rem 1.1rem; cursor: pointer; min-height: 40px; } /* watchlist markers (MapLibre Marker elements, Task 8) */ .watch-marker { background: none; border: none; padding: 0; line-height: 0; cursor: pointer; } .watch-marker path { fill: var(--bg); fill-opacity: 0.55; stroke-width: 2; } .watch-marker:hover path, .watch-marker:focus-visible path { stroke-width: 3; fill-opacity: 1; } .watch-marker:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .watch-marker.maplibregl-marker-covered { visibility: hidden; } .wm--detachment { stroke: var(--c-detachment); } .wm--glof { stroke: var(--c-glof); } .wm--wave { stroke: var(--c-wave); } /* MapLibre chrome: keep the attribution clear of the rail and the sheets */ html.js .maplibregl-ctrl-bottom-left { left: 3.5rem; } html.js .maplibregl-ctrl-attrib { font-family: var(--sans); font-size: 0.7rem; } /* ≤ 720px: rail becomes a bottom bar; panels, controls and detail become sheets */ @media (max-width: 720px) { html.js .rail { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 3.25rem; flex-direction: row; justify-content: space-around; align-items: stretch; border-right: none; border-top: 1px solid var(--rule); padding: 0.25rem; } html.js .rail-btn { writing-mode: horizontal-tb; font-size: 0.6rem; letter-spacing: 0.01em; padding: 0.4rem 0.12rem; min-width: 0; flex: 1; } html.js .masthead { left: 0.5rem; } html.js .panel.open { left: 0; right: 0; top: auto; bottom: 3.25rem; width: auto; height: 60vh; border-right: none; border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.35); } /* row 1: the title. Row 2: four buttons that always fit — the search button at the left (fixed, 44 px), then the three card heads sharing the rest equally. The heads stay where they are; a card's body drops in below the row as a full-width sheet (the card box itself dissolves). */ html.js .map-cards { top: 3.1rem; right: 0.5rem; left: calc(0.5rem + 44px + 0.4rem); width: auto; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 0.4rem; } html.js .map-card, html.js .map-card.collapsed { display: contents; } html.js .map-card .card-head { order: 0; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; background: var(--bg); background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--rule); } html.js .card-head:has(.card-toggle[aria-expanded="true"]) { background: var(--ink); border-color: var(--ink); } html.js .card-head:has(.card-toggle[aria-expanded="true"]) .card-toggle, html.js .card-head:has(.card-toggle[aria-expanded="true"]) .card-reset { color: var(--bg); } html.js .card-toggle { min-height: 44px; min-width: 0; padding: 0 0.3rem; justify-content: center; font-size: 0.62rem; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.js .card-toggle > span:first-child { overflow: hidden; text-overflow: ellipsis; } html.js .card-glyph { display: none; } html.js .card-reset { position: static; transform: none; margin-right: 0.3rem; font-size: 0.55rem; } html.js .map-card .card-body { order: 1; flex: 0 0 calc(100% + 44px + 0.4rem); margin-left: calc(-44px - 0.4rem); box-sizing: border-box; min-height: 0; max-height: 55vh; overflow-y: auto; padding: 0.65rem 0.75rem 0.75rem; background: var(--bg); background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--rule); } html.js body:has(.detail:not([hidden])) .map-cards { max-height: none; } html.js .globe-hint { display: none; } /* the search: closed, a 44 px button at the left of row 2; open, the whole row */ html.js .search { top: 3.1rem; left: 0.5rem; right: 0.5rem; width: auto; max-width: none; } html.js .search:not(.open) { right: auto; width: 44px; } html.js .search-open { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--bg); background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--rule); color: var(--ink); cursor: pointer; } html.js .search:not(.open) .search-field, html.js .search:not(.open) .search-list { display: none; } html.js .search.open .search-open { display: none; } html.js body:has(.search.open) .map-cards { visibility: hidden; } html.js .chips { flex-wrap: wrap; } html.js .detail { left: 0; right: 0; bottom: 3.25rem; width: auto; max-width: none; max-height: 60vh; border-left: none; border-right: none; padding-bottom: max(1rem, env(safe-area-inset-bottom)); } html.js .maplibregl-ctrl-bottom-left { left: 0; bottom: 3.25rem; } .intro-mechs { grid-template-columns: 1fr; } } @media (max-width: 360px) { html.js .card-toggle { font-size: 0.56rem; letter-spacing: 0.02em; padding: 0 0.2rem; } } /* reach lines: endpoint labels and scenario marks (MapLibre Marker elements) */ .path-end, .path-mark { font: 0.72rem/1.2 var(--sans); color: var(--ink); background: var(--bg); padding: 0.12rem 0.4rem; border-radius: 2px; border-left: 3px solid var(--ink-soft); white-space: nowrap; pointer-events: none; } .path-mark { font-style: italic; color: var(--ink-soft); border-left-style: dotted; } .path-end--detachment, .path-mark--detachment { border-color: var(--c-detachment); } .path-end--glof, .path-mark--glof { border-color: var(--c-glof); } .path-end--wave, .path-mark--wave { border-color: var(--c-wave); } .path-end.maplibregl-marker-covered, .path-mark.maplibregl-marker-covered { visibility: hidden; } /* a phone is too narrow for a one-line scenario label beside its point */ @media (max-width: 720px) { .path-mark { white-space: normal; max-width: 45vw; } } /* detail card: reach list and scenario table */ .detail .reach { list-style: none; margin: 0; padding: 0; } .detail .reach li { margin: 0.15rem 0; } .detail .reach-link { background: none; border: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline dotted; cursor: pointer; text-align: left; } .detail .reach-link:hover, .detail .reach-link:focus-visible { text-decoration-style: solid; } .detail .srcs-inline, .detail .srcs-inline a { font-size: 0.78rem; color: var(--ink-soft); } .detail table.scenarios { border-collapse: collapse; font-size: 0.82rem; width: 100%; margin: 0.2rem 0; } .detail table.scenarios th, .detail table.scenarios td { text-align: left; vertical-align: top; padding: 0.15rem 0.4rem 0.15rem 0; border-bottom: 1px solid var(--rule); font-weight: normal; } .detail table.scenarios thead th { color: var(--ink-soft); } .site-list .site-basis { color: var(--ink-soft); font-size: 0.9em; } .site-list .site-reach { font-style: italic; } .site-list .site-scenario { font-size: 0.9em; } /* story overlays: About, Timeline, Method (js/story.js). Desktop: a large centred window over a backdrop; phones: full screen above the rail. */ html.js .panel[data-story].open { display: flex; flex-direction: column; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(58rem, 100vw - 5rem); height: min(44rem, 100vh - 3rem); padding: 0; overflow: hidden; z-index: 45; border: 1px solid var(--rule); box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.5); } html.js .story-backdrop { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, 0.45); } html.js .story-backdrop[hidden] { display: none; } html.js .story-head, html.js .panel-head { display: flex; align-items: center; gap: 0.75rem; flex: none; height: 3rem; padding: 0 0.25rem 0 1.25rem; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); } html.js .story-counter { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-soft); } html.js .story-close, html.js .panel-close { font: inherit; font-size: 1.5rem; line-height: 1; background: none; border: none; color: var(--ink-soft); width: 44px; height: 44px; cursor: pointer; } html.js .story-track { flex: 1 1 auto; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; } html.js .story-track::-webkit-scrollbar { display: none; } html.js .story-section { flex: 0 0 100%; width: 100%; box-sizing: border-box; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; padding: 1.5rem 1.75rem 2rem; } html.js .story-section .prose { max-width: 38rem; padding: 0; } html.js .story-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex: none; height: 3rem; padding: 0 0.5rem; border-top: 1px solid var(--rule); } html.js .story-prev, html.js .story-next { font: inherit; font-family: var(--sans); font-size: 0.78rem; background: none; border: 1px solid var(--rule); border-radius: 2px; color: inherit; min-width: 44px; min-height: 44px; padding: 0 0.8rem; cursor: pointer; } html.js .story-prev:disabled, html.js .story-next:disabled { opacity: 0.35; cursor: default; } html.js .story-dots { display: flex; gap: 0.25rem; } html.js .story-dot { width: 28px; height: 44px; background: none; border: none; padding: 0; cursor: pointer; } html.js .story-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; margin: 0 auto; border: 1px solid var(--ink-soft); } html.js .story-dot[aria-current="true"]::before { background: var(--ink); border-color: var(--ink); } @media (max-width: 720px) { html.js .panel[data-story].open { left: 0; right: 0; top: 0; bottom: 3.25rem; transform: none; width: auto; height: auto; border: none; box-shadow: none; } html.js .story-backdrop { display: none; } html.js .story-section { padding: 1rem 1.1rem 1.5rem; } .rows > li, .rows .row { flex-wrap: wrap; } .rows .row-name { width: auto; } .rows .row-sub { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { html.js .story-track { scroll-behavior: auto; } } /* short screens (a phone held sideways): sheets and open cards take half */ @media (max-width: 720px) and (max-height: 500px) { html.js .panel.open:not([data-story]) { height: 50vh; } html.js .detail { max-height: 50vh; } html.js .map-card:not(.collapsed) { max-height: 50vh; } }