/* =====================================================================
   WorldNaturalDisasters.com — Design System v3 "Field Atlas" (2026-10-19)

   Loaded AFTER main.css and only while design_atlas() is true
   (`.env SITE_DESIGN=obsidian` switches back to the dark v2 design).

   The idea in one line, printed on the home page too:
     the SHAPE tells you what happened, the COLOUR tells you how serious.
   Every hazard has one pictogram (WND\Core\Icons) used on pins, list rows,
   tiles and filters. Colour is spent on severity and on nothing else; the
   brand colour is ink, and links are cobalt, which no severity uses.

   Light "paper" is the default; "night atlas" is the same system in the
   dark, chosen by the reader (header switch) or by their device.
   ===================================================================== */

/* ---------------------------------------------------------------
   TOKENS — the old names are kept so every page restyles at once
   --------------------------------------------------------------- */
:root.design-atlas {
  color-scheme: light;

  --bg: #F3EFE6;
  --surface-1: #FAF8F3;
  --surface-2: #FFFFFF;
  --surface-3: #F5F1E8;
  --glass: rgba(243, 239, 230, .88);

  --line: #E2DBCD;
  --line-strong: #CBC2AF;
  --line-bright: rgba(30, 63, 191, .38);

  --text: #15171B;
  --text-2: #464D59;
  --text-3: #5D6472;

  /* Links and focus. Cobalt: no severity is blue, so a link never reads as a level. */
  --signal: #1E3FBF;
  --signal-deep: #172F94;
  --signal-glow: rgba(30, 63, 191, .14);

  /* Severity: crimson, burnt orange, ochre, slate. Text-safe on paper. */
  --hz-extreme: #B3122B;
  --hz-severe: #C2410C;
  --hz-moderate: #9A5B05;
  --hz-minor: #4B5D73;
  --hz-moderate-fill: #E5A92C;
  --safe: #15803D;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --e-1: 0 1px 0 rgba(21, 23, 27, .04);
  --e-2: 0 1px 0 rgba(21, 23, 27, .04), 0 12px 28px -16px rgba(21, 23, 27, .28);
  --e-3: 0 2px 0 rgba(21, 23, 27, .04), 0 24px 56px -24px rgba(21, 23, 27, .38);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Names some views use that v2 never defined. */
  --dim: var(--text-2);
  --faint: var(--text-3);
  --accent: var(--signal);
  --ink-3: var(--text-3);
  --extreme: var(--hz-extreme);
  --severe: var(--hz-severe);
  --moderate: var(--hz-moderate);
  --hairline: var(--line);

  --ink: var(--text);
  --paper: var(--bg);

  /* Neutral level bars (warning levels, alert codes): ink, never a link colour. */
  --level: var(--text);

  /* "Nothing in force": calm teal-slate. Not green: the site never says "safe". */
  --clear: #2C6E68;
}

:root.design-atlas[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0F1114;
  --surface-1: #14171B;
  --surface-2: #1A1E24;
  --surface-3: #20252C;
  --glass: rgba(15, 17, 20, .86);

  --line: #2A2F37;
  --line-strong: #3B414B;
  --line-bright: rgba(143, 163, 255, .45);

  --text: #EEEAE1;
  --text-2: #B6BAC2;
  --text-3: #959BA6;

  --signal: #9DAEFF;
  --signal-deep: #B8C5FF;
  --signal-glow: rgba(157, 174, 255, .16);

  --hz-extreme: #FF6377;
  --hz-severe: #FF8F52;
  --hz-moderate: #F0C04E;
  --hz-minor: #A3B1C4;
  --hz-moderate-fill: #F0C04E;
  --safe: #4ADE80;
  --clear: #7CC7BD;

  --e-1: 0 1px 0 rgba(0, 0, 0, .3);
  --e-2: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 32px -16px rgba(0, 0, 0, .7);
  --e-3: 0 2px 0 rgba(0, 0, 0, .3), 0 26px 60px -24px rgba(0, 0, 0, .8);
}

/* The device asks for dark and the reader has not picked light. */
@media (prefers-color-scheme: dark) {
  :root.design-atlas:not([data-theme="light"]) {
    color-scheme: dark;
  
    --bg: #0F1114;
    --surface-1: #14171B;
    --surface-2: #1A1E24;
    --surface-3: #20252C;
    --glass: rgba(15, 17, 20, .86);
  
    --line: #2A2F37;
    --line-strong: #3B414B;
    --line-bright: rgba(143, 163, 255, .45);
  
    --text: #EEEAE1;
    --text-2: #B6BAC2;
    --text-3: #959BA6;
  
    --signal: #9DAEFF;
    --signal-deep: #B8C5FF;
    --signal-glow: rgba(157, 174, 255, .16);
  
    --hz-extreme: #FF6377;
    --hz-severe: #FF8F52;
    --hz-moderate: #F0C04E;
    --hz-minor: #A3B1C4;
    --hz-moderate-fill: #F0C04E;
    --safe: #4ADE80;
    --clear: #7CC7BD;
  
    --e-1: 0 1px 0 rgba(0, 0, 0, .3);
    --e-2: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 32px -16px rgba(0, 0, 0, .7);
    --e-3: 0 2px 0 rgba(0, 0, 0, .3), 0 26px 60px -24px rgba(0, 0, 0, .8);
  }
}

/* ---------------------------------------------------------------
   BASE
   --------------------------------------------------------------- */
.design-atlas body {
  font-feature-settings: "ss01", "cv11";
  line-height: 1.62;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
/* No coloured glow. A barely-there paper grain instead. */
.design-atlas body::before { display: none; }
.design-atlas body::after { opacity: .045; mix-blend-mode: multiply; }
.design-atlas[data-theme="dark"] body::after { opacity: .07; mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { .design-atlas:not([data-theme="light"]) body::after { opacity: .07; mix-blend-mode: screen; } }

/* :where() keeps these at element weight, so every component that sets its
   own link colour (cards, tiles, rows, buttons, nav) wins without !important. */
:where(.design-atlas) a { color: var(--signal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(.design-atlas) a:hover { color: var(--signal-deep); }
.design-atlas p a, .design-atlas li a, .design-atlas td a, .design-atlas .prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--signal) 35%, transparent); }
.design-atlas p a:hover, .design-atlas li a:hover, .design-atlas td a:hover { text-decoration-color: currentColor; }

.design-atlas h1, .design-atlas h2, .design-atlas h3, .design-atlas h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.12;
  font-optical-sizing: auto;
  color: var(--text);
}
.design-atlas h1 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.design-atlas h3, .design-atlas h4, .design-atlas .card-title { letter-spacing: -0.005em; }
.design-atlas .mono, .design-atlas .num { letter-spacing: 0; }

.design-atlas ::selection { background: var(--text); color: var(--bg); }
.design-atlas .skip-link { background: var(--text); color: var(--bg); }
.design-atlas :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ---------------------------------------------------------------
   APP BAR + HEADER
   --------------------------------------------------------------- */
.design-atlas .app-bar { background: var(--surface-1); border-bottom: 1px solid var(--line); }
.design-atlas .app-bar-icon { background: var(--surface-3); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-md); }
.design-atlas .app-bar-cta { background: var(--text); color: var(--bg); border-radius: var(--r-md); }
.design-atlas .app-bar-cta:hover { background: var(--text-2); color: var(--bg); }
.design-atlas .app-bar-close:hover { background: var(--surface-3); }

.design-atlas .site-header { background: var(--glass); border-bottom: 1px solid var(--line); }
.design-atlas .site-header.is-stuck { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .35); border-bottom-color: var(--line); }
.design-atlas .header-inner { min-height: 68px; gap: var(--s-4); }

.design-atlas .brand { gap: 10px; color: var(--text); }
.design-atlas .brand-mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--text); color: var(--bg); border: 0;
}
.design-atlas .brand-mark::after { display: none; }
.design-atlas .brand-mark .ico { width: 17px; height: 17px; stroke-width: 2; }
.design-atlas .brand-text {
  font-family: var(--font-display); font-weight: 700; font-size: 1.22rem;
  letter-spacing: -0.015em; white-space: nowrap;
}

.design-atlas .main-nav { margin-left: auto; }
.design-atlas .nav-menu a { color: var(--text-2); font-weight: 500; font-size: .94rem; padding: 9px 11px; }
.design-atlas .nav-menu a::after { background: var(--text); height: 1.5px; left: 11px; right: 11px; bottom: 4px; }
.design-atlas .nav-menu a:hover { color: var(--text); }
.design-atlas .nav-cta {
  background: var(--text) !important; color: var(--bg) !important;
  border-radius: var(--r-md); padding: 9px 15px !important; margin-left: 10px;
  box-shadow: none; display: inline-flex !important; align-items: center; gap: 7px;
}
.design-atlas .nav-cta:hover { transform: translateY(-1px); box-shadow: var(--e-2); color: var(--bg) !important; }
.design-atlas .nav-toggle { border-color: var(--line-strong); color: var(--text); border-radius: var(--r-md); }

.design-atlas .theme-toggle {
  order: 3; flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: transparent; color: var(--text); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.design-atlas .theme-toggle:hover { background: var(--surface-3); border-color: var(--text-3); }
.design-atlas .theme-toggle .ico { width: 18px; height: 18px; }
.design-atlas .theme-toggle .ico-sun { display: none; }
.design-atlas[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
.design-atlas[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  .design-atlas:not([data-theme="light"]) .theme-toggle .ico-sun { display: block; }
  .design-atlas:not([data-theme="light"]) .theme-toggle .ico-moon { display: none; }
}
.design-atlas .header-inner > .brand { order: 1; }
.design-atlas .header-inner > .main-nav { order: 2; }

@media (max-width: 960px) {
  .design-atlas .main-nav { margin-left: 0; order: 4; }
  .design-atlas .theme-toggle { margin-left: auto; }
  .design-atlas .nav-menu { background: var(--bg); border-bottom: 1px solid var(--line); top: 68px; box-shadow: var(--e-3); }
  .design-atlas .nav-menu a { font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .design-atlas .nav-cta { justify-content: center; margin: 14px 0 0; border-bottom: 0 !important; }
}
@media (max-width: 420px) {
  .design-atlas .brand-text { font-size: 1.04rem; }
  .design-atlas .brand-mark { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------
   BREADCRUMBS
   --------------------------------------------------------------- */
.design-atlas .breadcrumbs { font-size: .86rem; }
.design-atlas .breadcrumbs a { color: var(--text-2); text-decoration: none; }
.design-atlas .breadcrumbs a:hover { color: var(--text); text-decoration: underline; }

/* ---------------------------------------------------------------
   HERO (pages other than home that still use .hero)
   --------------------------------------------------------------- */
.design-atlas #particles { display: none; }
.design-atlas .kicker {
  color: var(--text-2); background: transparent; border: 0; padding: 0;
  border-radius: 0; letter-spacing: .12em;
}
.design-atlas .kicker .dot { background: var(--hz-extreme); box-shadow: none; }
.design-atlas .hero h1 .line-2 {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--text-2); font-style: italic; font-weight: 400;
}
.design-atlas .hero-sub { color: var(--text-2); }

/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */
.design-atlas .btn { border-radius: var(--r-md); font-weight: 600; letter-spacing: -0.005em; }
.design-atlas .btn-primary { background: var(--text); color: var(--bg); box-shadow: none; border-color: var(--text); }
.design-atlas .btn-primary::after { display: none; }
.design-atlas .btn-primary:hover { color: var(--bg); background: var(--text); box-shadow: var(--e-2); transform: translateY(-1px); }
.design-atlas .btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.design-atlas .btn-ghost:hover { background: var(--surface-3); border-color: var(--text-3); color: var(--text); }
.design-atlas .btn-danger { background: var(--hz-extreme); color: #fff; }

/* ---------------------------------------------------------------
   SEARCH + FORMS
   --------------------------------------------------------------- */
.design-atlas .hero-search input,
.design-atlas input[type="text"], .design-atlas input[type="email"], .design-atlas input[type="search"],
.design-atlas input[type="password"], .design-atlas input[type="number"], .design-atlas select, .design-atlas textarea {
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); border-radius: var(--r-md);
}
.design-atlas .hero-search input:focus, .design-atlas input:focus, .design-atlas select:focus, .design-atlas textarea:focus {
  border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-glow);
}
.design-atlas .search-results-dropdown { background: var(--surface-2); border-color: var(--line-strong); }
.design-atlas .search-results-dropdown a { color: var(--text); }
.design-atlas .search-results-dropdown a:hover { background: var(--surface-3); }
.design-atlas .checkbox-row input { accent-color: var(--text); }
.design-atlas .notice-ok { border-color: color-mix(in srgb, var(--safe) 35%, transparent); background: color-mix(in srgb, var(--safe) 7%, transparent); color: var(--safe); }
.design-atlas .notice-warn { border-color: color-mix(in srgb, var(--hz-moderate) 40%, transparent); background: color-mix(in srgb, var(--hz-moderate-fill) 12%, transparent); color: var(--hz-moderate); }

/* ---------------------------------------------------------------
   SURFACES
   --------------------------------------------------------------- */
.design-atlas .panel {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--e-1);
}
.design-atlas .panel::before { display: none; }
.design-atlas .glass { background: var(--surface-2); border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--e-2); }
.design-atlas .link-card, .design-atlas .country-card { color: var(--text); }
.design-atlas .link-card:hover, .design-atlas .country-card:hover { border-color: var(--line-strong); box-shadow: var(--e-2); color: var(--text); }
.design-atlas .link-card h3 { font-size: 1.12rem; }
.design-atlas .section-head h2 { font-size: clamp(1.55rem, 2.3vw, 2.15rem); }
.design-atlas .section-head p { color: var(--text-2); }
.design-atlas .eyebrow { color: var(--text-3); letter-spacing: .12em; }
.design-atlas .see-all { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.design-atlas .see-all:hover { color: var(--signal); text-decoration-color: currentColor; }
.design-atlas .country-flag { border-color: var(--line); border-radius: 3px; }
.design-atlas .tag { background: var(--surface-3); border-color: var(--line); color: var(--text-2); border-radius: var(--r-sm); }
.design-atlas a.tag { text-decoration: none; }
.design-atlas a.tag:hover { color: var(--text); border-color: var(--line-strong); }

/* stats */
.design-atlas .stat-tile .num { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; }
.design-atlas .stat-tile .label { letter-spacing: .08em; color: var(--text-3); }
.design-atlas .stat-tile.hot { border-color: color-mix(in srgb, var(--hz-extreme) 28%, var(--line)); }

/* ---------------------------------------------------------------
   SEVERITY — bars + word + colour, never colour alone
   --------------------------------------------------------------- */
.design-atlas .sev {
  font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .02em; text-transform: none;
  padding: 3px 9px 3px 7px; border-radius: var(--r-sm);
}
.design-atlas .sev-bars { height: 11px; gap: 2px; }
.design-atlas .sev-bars i { width: 3.5px; border-radius: 1px; }
.design-atlas .sev-bars i.off { opacity: 1; background: color-mix(in srgb, currentColor 22%, transparent); }
.design-atlas .sev-extreme { color: var(--hz-extreme); border-color: color-mix(in srgb, var(--hz-extreme) 32%, transparent); background: color-mix(in srgb, var(--hz-extreme) 8%, transparent); }
.design-atlas .sev-severe { color: var(--hz-severe); border-color: color-mix(in srgb, var(--hz-severe) 32%, transparent); background: color-mix(in srgb, var(--hz-severe) 8%, transparent); }
.design-atlas .sev-moderate { color: var(--hz-moderate); border-color: color-mix(in srgb, var(--hz-moderate-fill) 50%, transparent); background: color-mix(in srgb, var(--hz-moderate-fill) 13%, transparent); }
.design-atlas .sev-minor { color: var(--hz-minor); border-color: color-mix(in srgb, var(--hz-minor) 30%, transparent); background: color-mix(in srgb, var(--hz-minor) 8%, transparent); }
.design-atlas .status-badge { letter-spacing: .06em; }
.design-atlas .status-badge.active { color: var(--safe); }

/* ---------------------------------------------------------------
   ALERT FEED — the hazard glyph takes the event's severity colour
   --------------------------------------------------------------- */
.design-atlas .alert-item { color: var(--text); gap: 14px; }
.design-atlas .alert-item:hover { background: var(--surface-3); color: var(--text); }
.design-atlas .alert-item::before { display: none; }
.design-atlas .alert-icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--row-c, var(--text-3)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--row-c, var(--text-3)) 22%, transparent);
  color: var(--row-c, var(--text-2));
}
.design-atlas .alert-icon .ico { width: 21px; height: 21px; stroke-width: 1.7; }
.design-atlas .alert-item:has(.sev-extreme) { --row-c: var(--hz-extreme); }
.design-atlas .alert-item:has(.sev-severe) { --row-c: var(--hz-severe); }
.design-atlas .alert-item:has(.sev-moderate) { --row-c: var(--hz-moderate); }
.design-atlas .alert-item:has(.sev-minor) { --row-c: var(--hz-minor); }
.design-atlas .alert-title { font-weight: 600; letter-spacing: -0.005em; }
.design-atlas .alert-meta { color: var(--text-3); font-size: .8rem; }
.design-atlas .feed-head { border-bottom-color: var(--line); }
.design-atlas .feed-head h2 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: 0; }
.design-atlas .feed-foot { border-top-color: var(--line); }

/* ---------------------------------------------------------------
   MAP
   --------------------------------------------------------------- */
.design-atlas .map-shell { border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--e-2); }
.design-atlas #livemap, .design-atlas .sat-map, .design-atlas .tool-map, .design-atlas .globe-map,
.design-atlas .sat-pair img, .design-atlas .sat-card img { background: var(--surface-3); }
.design-atlas .sat-map, .design-atlas .tool-map, .design-atlas .globe-map { border-color: var(--line); border-radius: var(--r-lg); }
.design-atlas .sat-label { background: color-mix(in srgb, var(--surface-2) 90%, transparent); color: var(--text); border-color: var(--line); }

.design-atlas .chip {
  border-radius: var(--r-md); border-color: var(--line-strong); color: var(--text-2); background: var(--surface-2);
  font-weight: 500;
}
.design-atlas .chip .ico { width: 16px; height: 16px; }
.design-atlas .chip:hover { color: var(--text); border-color: var(--text-3); }
.design-atlas .chip[aria-pressed="true"] { color: var(--bg); background: var(--text); border-color: var(--text); }

/* Pins carry the hazard's pictogram; the ring colour is the severity. */
.design-atlas .wnd-marker {
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--surface-2) !important; color: var(--pin-c); border: 2px solid var(--pin-c);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}
.design-atlas .wnd-marker svg { width: 15px; height: 15px; stroke-width: 2; }
.design-atlas .wnd-marker.m-extreme { --pin-c: var(--hz-extreme); }
.design-atlas .wnd-marker.m-severe { --pin-c: var(--hz-severe); }
.design-atlas .wnd-marker.m-moderate { --pin-c: var(--hz-moderate); width: 24px; height: 24px; }
.design-atlas .wnd-marker.m-minor { --pin-c: var(--hz-minor); width: 22px; height: 22px; }
.design-atlas .wnd-marker.m-moderate svg, .design-atlas .wnd-marker.m-minor svg { width: 13px; height: 13px; }
.design-atlas .wnd-marker::after { border-color: var(--pin-c); }
.design-atlas .wnd-marker.m-severe::after { display: none; }
.design-atlas .shake-label span { background: color-mix(in srgb, var(--surface-2) 88%, transparent); color: var(--text); border: 1px solid var(--line); }

/* Leaflet + MapLibre chrome in both themes */
.design-atlas .leaflet-container { font-family: var(--font-body); background: var(--surface-3); }
.design-atlas .leaflet-popup-content-wrapper, .design-atlas .leaflet-popup-tip { background: var(--surface-2); color: var(--text); box-shadow: var(--e-3); }
.design-atlas .leaflet-popup-content-wrapper { border-radius: var(--r-lg); border: 1px solid var(--line); }
.design-atlas .leaflet-popup-content { font-size: .9rem; line-height: 1.5; }
.design-atlas .leaflet-popup-content .ico { width: 16px; height: 16px; vertical-align: -3px; }
.design-atlas .leaflet-bar a { background: var(--surface-2); color: var(--text); border-bottom-color: var(--line); }
.design-atlas .leaflet-bar a:hover { background: var(--surface-3); }
.design-atlas .leaflet-bar { border-color: var(--line-strong) !important; box-shadow: var(--e-1) !important; }
.design-atlas .leaflet-control-attribution { background: color-mix(in srgb, var(--surface-2) 82%, transparent) !important; color: var(--text-3); }
.design-atlas .leaflet-control-attribution a { color: var(--text-2); }
.design-atlas .marker-cluster-small, .design-atlas .marker-cluster-medium, .design-atlas .marker-cluster-large { background: color-mix(in srgb, var(--text) 14%, transparent); }
.design-atlas .marker-cluster-small div, .design-atlas .marker-cluster-medium div, .design-atlas .marker-cluster-large div { background: var(--text); color: var(--bg); font: 600 12px/30px var(--font-body); }
.design-atlas .maplibregl-popup-content { background: var(--surface-2); color: var(--text); border-radius: var(--r-lg); }

/* ---------------------------------------------------------------
   TABLES
   --------------------------------------------------------------- */
.design-atlas .table-wrap { background: var(--surface-2); border-color: var(--line); border-radius: var(--r-lg); }
.design-atlas table.data th {
  background: var(--surface-3); color: var(--text-3); letter-spacing: .07em;
  border-bottom: 1px solid var(--line-strong);
}
.design-atlas table.data th, .design-atlas table.data td { border-bottom-color: var(--line); }
.design-atlas table.data tbody tr:hover td { background: var(--surface-3); }

/* ---------------------------------------------------------------
   PROSE, FAQ, ARTICLES
   --------------------------------------------------------------- */
.design-atlas .prose { color: var(--text); font-size: 1.07rem; line-height: 1.75; }
.design-atlas .prose h2 { font-size: clamp(1.45rem, 2vw, 1.85rem); }
.design-atlas .prose li::marker { color: var(--text-3); }
.design-atlas .prose blockquote { border-left: 3px solid var(--text); color: var(--text-2); font-family: var(--font-display); font-size: 1.15em; }
.design-atlas .prose code { background: var(--surface-3); border: 1px solid var(--line); }
.design-atlas .prose pre { background: var(--surface-3); border-color: var(--line); }
.design-atlas .article-meta { border-bottom-color: var(--line); }

.design-atlas details.faq-item { background: var(--surface-2); border-color: var(--line); border-radius: var(--r-md); }
.design-atlas details.faq-item[open] { border-color: var(--line-strong); box-shadow: var(--e-1); }
.design-atlas details.faq-item summary::after { border-color: var(--text-2); }
.design-atlas details.faq-item summary:hover { color: var(--signal); }

/* ---------------------------------------------------------------
   STATES, PAGINATION
   --------------------------------------------------------------- */
.design-atlas .skeleton { background: var(--surface-3); }
.design-atlas .skeleton::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-2) 70%, transparent), transparent); }
.design-atlas .empty-state .glyph { background: var(--surface-3); border-color: var(--line); color: var(--text-2); }
.design-atlas .pagination a, .design-atlas .pagination span { border-color: var(--line-strong); color: var(--text-2); background: var(--surface-2); text-decoration: none; }
.design-atlas .pagination a:hover { border-color: var(--text-3); color: var(--text); }
.design-atlas .pagination [aria-current] { background: var(--text); color: var(--bg); border-color: var(--text); }
.design-atlas .demo-banner { border-color: color-mix(in srgb, var(--hz-moderate) 50%, transparent); color: var(--hz-moderate); }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.design-atlas .site-footer { background: var(--surface-1); border-top: 1px solid var(--line-strong); }
.design-atlas .site-footer::before { display: none; }
.design-atlas .footer-col h2 { color: var(--text-3); font-family: var(--font-mono); letter-spacing: .12em; }
.design-atlas .footer-col a { color: var(--text-2); text-decoration: none; }
.design-atlas .footer-col a:hover { color: var(--text); text-decoration: underline; }
.design-atlas .footer-about p { color: var(--text-2); }
.design-atlas .footer-disclaimer {
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  border-radius: var(--r-md);
}
.design-atlas .footer-bottom { border-top-color: var(--line); }
.design-atlas .footer-sources span { color: var(--text-3); }

/* ---------------------------------------------------------------
   ADS, CONSENT, ADMIN, MISC
   --------------------------------------------------------------- */
.design-atlas .ad-slot { background: var(--surface-1); border-color: var(--line); }
.design-atlas .consent { background: var(--surface-2); border-color: var(--line-strong); backdrop-filter: none; -webkit-backdrop-filter: none; }
.design-atlas .consent p { color: var(--text-2); }
.design-atlas .admin-nav a:hover { background: var(--surface-3); }
.design-atlas .admin-nav a.active { background: var(--signal-glow); color: var(--signal); }
.design-atlas .rte-wrap { background: var(--surface-2); }
.design-atlas .rte-toolbar { background: var(--surface-3); }
.design-atlas .rte-btn { background: var(--surface-2); color: var(--text); }
.design-atlas .rte-btn:hover { background: var(--signal-glow); }
.design-atlas .replay-bar { background: var(--text-2); }
.design-atlas .app-shots img { border-color: var(--line); }

/* Scroll reveal: same mechanism as v2, gentler travel. */
.design-atlas.js-reveal [data-reveal] { transform: translateY(10px); }
.design-atlas.js-reveal [data-reveal].revealed { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* =====================================================================
   HOME PAGE (views/pages/home_atlas.php)
   ===================================================================== */

/* The bulletin: what is happening, in one sentence, from the live rows. */
.atlas-bulletin { padding: clamp(36px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); }
.atlas-bulletin .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; }
.atlas-live {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 .74rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hz-extreme);
}
.atlas-live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--hz-extreme); }
.atlas-live i::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--hz-extreme); opacity: 0; }
.atlas-stamp { font: 500 .74rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.atlas-headline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.7rem); line-height: 1.07; letter-spacing: -0.02em;
  margin: 0; max-width: 23ch; text-wrap: balance;
}
.atlas-headline em { font-style: italic; font-weight: 400; }
.atlas-headline .mark { background: linear-gradient(transparent 64%, color-mix(in srgb, var(--hz-extreme) 13%, transparent) 64%); }
.atlas-sub { margin: 18px 0 0; max-width: 64ch; color: var(--text-2); font-size: clamp(1rem, 1.3vw, 1.14rem); }
.atlas-bulletin .hero-search { margin-top: 24px; max-width: 560px; }
/* main.css's later input[type=search] rule resets the padding the icon needs. */
.design-atlas .hero-search input { padding-left: 46px; min-height: 50px; }
.atlas-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* "How to read this site" */
.atlas-legend {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 28px; align-items: center;
  margin-top: 28px; padding: 14px 18px;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.atlas-legend strong { display: block; font-weight: 600; }
.atlas-legend span.how { display: block; font-size: .88rem; color: var(--text-2); }
.atlas-scale { display: flex; flex-wrap: wrap; gap: 8px 10px; }
@media (max-width: 760px) { .atlas-legend { grid-template-columns: 1fr; } }

/* Hazard rail: one tile per hazard, the worst level in force on its edge. */
.atlas-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.hz-tile {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px;
  min-height: 166px; padding: 16px 16px 14px 18px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--text); text-decoration: none; overflow: hidden; box-shadow: var(--e-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s var(--ease);
}
.hz-tile:hover { transform: translateY(-3px); box-shadow: var(--e-2); border-color: var(--line-strong); color: var(--text); }
.hz-tile[data-worst="4"] { --tile-c: var(--hz-extreme); }
.hz-tile[data-worst="3"] { --tile-c: var(--hz-severe); }
.hz-tile[data-worst="2"] { --tile-c: var(--hz-moderate); }
.hz-tile[data-worst="1"] { --tile-c: var(--hz-minor); }
/* The pictogram itself takes the worst level's colour: shape = what, colour = how serious. */
.hz-glyph { width: 38px; height: 38px; color: var(--tile-c, var(--text)); display: block; }
.hz-glyph .ico { width: 100%; height: 100%; stroke-width: 1.45; overflow: visible; }
.hz-name { display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.25; }
.hz-count { display: block; font: 600 1.85rem/1 var(--font-display); letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.hz-count small { font: 400 .8rem var(--font-body); color: var(--text-3); margin-left: 6px; letter-spacing: 0; }
.hz-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-3); }
.hz-foot .sev { padding: 2px 7px 2px 6px; font-size: .74rem; }
.hz-tile.is-quiet { box-shadow: none; background: var(--surface-1); }
.hz-tile.is-quiet .hz-glyph { color: var(--text-3); }

/* Each pictogram acts its hazard out — once you point at it, and barely. */
@media (prefers-reduced-motion: no-preference) {
  .atlas-live i::after { animation: atlas-ping 2s var(--ease-out) infinite; }
  .design-atlas .wnd-marker.m-extreme::after { animation: atlas-ping 2.2s var(--ease-out) infinite; }
  .hz-tile:hover .hz-glyph .ico, .hz-tile:focus-visible .hz-glyph .ico { animation: var(--hz-anim, none); transform-origin: 50% 60%; }
  .hz-tile[data-hz="earthquake"] { --hz-anim: atlas-shake .5s steps(3) infinite; }
  .hz-tile[data-hz="flood"], .hz-tile[data-hz="storm-surge"] { --hz-anim: atlas-bob 1.6s ease-in-out infinite; }
  .hz-tile[data-hz="tsunami"] { --hz-anim: atlas-surge 1.8s var(--ease) infinite; }
  .hz-tile[data-hz="wildfire"] { --hz-anim: atlas-flicker 1s ease-in-out infinite; }
  .hz-tile[data-hz="hurricane"] { --hz-anim: atlas-spin 3s linear infinite; }
  .hz-tile[data-hz="tornado"] { --hz-anim: atlas-sway 1.2s ease-in-out infinite; }
  .hz-tile[data-hz="volcano"], .hz-tile[data-hz="heatwave"], .hz-tile[data-hz="drought"] { --hz-anim: atlas-breathe 1.8s ease-in-out infinite; }
  .hz-tile[data-hz="heavy-rain"], .hz-tile[data-hz="storm"], .hz-tile[data-hz="extreme-weather"] { --hz-anim: atlas-drop 1.4s ease-in-out infinite; }
  .hz-tile[data-hz="coldwave"] { --hz-anim: atlas-spin 9s linear infinite; }
  .hz-tile[data-hz="landslide"], .hz-tile[data-hz="avalanche"] { --hz-anim: atlas-slide 1.8s var(--ease) infinite; }
}
@keyframes atlas-ping { 0% { opacity: .85; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes atlas-shake { 0% { transform: translateX(-1px); } 50% { transform: translateX(1.2px); } 100% { transform: translateX(-.4px); } }
@keyframes atlas-bob { 50% { transform: translateY(1.5px); } }
@keyframes atlas-surge { 50% { transform: translate(-2px, -1px); } }
@keyframes atlas-flicker { 50% { transform: scaleY(1.07) scaleX(.96); } }
@keyframes atlas-spin { to { transform: rotate(360deg); } }
@keyframes atlas-sway { 50% { transform: skewX(-6deg); } }
@keyframes atlas-breathe { 50% { transform: scale(1.06); } }
@keyframes atlas-drop { 50% { transform: translateY(1.5px); } }
@keyframes atlas-slide { 50% { transform: translate(1.5px, 1px); } }

/* Map beside the most serious events */
.atlas-map-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.atlas-map-grid .map-filters { padding-top: 0; }
.atlas-feed { padding: 0; overflow: hidden; }
.atlas-feed .feed-scroll { max-height: 600px; }
@media (max-width: 1020px) { .atlas-map-grid { grid-template-columns: 1fr; } }

/* Numbers: editorial row with hairlines, not boxes */
.atlas-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.atlas-num { padding: 20px 20px 18px 0; }
.atlas-num + .atlas-num { padding-left: 20px; border-left: 1px solid var(--line); }
.atlas-num b { display: block; font: 600 clamp(1.9rem, 3.2vw, 2.8rem)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.atlas-num.hot b { color: var(--hz-extreme); }
.atlas-num span { display: block; margin-top: 8px; color: var(--text-2); font-size: .9rem; }
.atlas-year { margin: 16px 0 0; color: var(--text-2); }
@media (max-width: 640px) {
  .atlas-numbers { grid-template-columns: 1fr 1fr; }
  .atlas-num, .atlas-num + .atlas-num { padding: 16px 12px 14px 0; border-left: 0; }
  .atlas-num:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .atlas-num:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Tools by region: an index, the way a good atlas has one */
.atlas-regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.atlas-region { padding: 18px 20px 6px 0; }
.atlas-region + .atlas-region { padding-left: 20px; border-left: 1px solid var(--line); }
.atlas-region h3 { font-size: 1.35rem; margin: 0 0 2px; }
.atlas-region p { margin: 0 0 10px; font-size: .84rem; color: var(--text-3); }
.atlas-region ul { list-style: none; margin: 0; padding: 0; }
.atlas-region li { border-top: 1px solid var(--line); }
.atlas-region li a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; color: var(--text); text-decoration: none; font-weight: 500; font-size: .95rem; }
.atlas-region li a:hover { color: var(--signal); }
.atlas-region li a span { color: var(--text-3); font: 400 .74rem/1.9 var(--font-mono); white-space: nowrap; }
@media (max-width: 1000px) {
  .atlas-regions { grid-template-columns: 1fr 1fr; }
  .atlas-region:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .atlas-regions { grid-template-columns: 1fr; }
  .atlas-region, .atlas-region + .atlas-region { padding-left: 0; border-left: 0; }
}

/* Small screens */
@media (max-width: 560px) {
  .atlas-rail { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hz-tile { min-height: 140px; padding: 12px 12px 12px 14px; gap: 8px; }
  .hz-glyph { width: 32px; height: 32px; }
  .hz-name { font-size: .94rem; }
  .hz-count { font-size: 1.5rem; }
  .hz-foot > span:first-child { display: none; }
}

/* Map filter chips: one swipeable row on phones instead of five wrapped rows. */
@media (max-width: 640px) {
  .design-atlas .map-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 14px; scroll-snap-type: x proximity; }
  .design-atlas .map-filters::-webkit-scrollbar { display: none; }
  .design-atlas .map-filters .chip { flex: none; scroll-snap-align: start; }
}

/* Print stays black on white whatever the theme */
@media print {
  .design-atlas .theme-toggle { display: none !important; }
  .design-atlas body { background: #fff; color: #111; }
}

/* Reduced motion: nothing moves, nothing pulses. */
@media (prefers-reduced-motion: reduce) {
  .atlas-live i::after, .design-atlas .wnd-marker::after { animation: none; display: none; }
  .hz-tile:hover { transform: none; }
}

/* Inner-page titles: Fraunces carries more weight than Space Grotesk did at
   the same size, so the v2 scale (up to 4.25rem) reads as shouting. */
.design-atlas h1 { font-size: clamp(2.05rem, 2.6vw + 1rem, 3.35rem); }
.design-atlas h2 { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.15rem); }

/* ---------------------------------------------------------------
   MAP OVERLAYS (2026-10-19)
   v2 drew the neutral map overlays (smoke, Canadian and UK fire points,
   ShakeMap lines, EMS outlines, replay and near-me dots, the EFFIS shading)
   in near-white for its dark basemap; on the paper basemap they vanished.
   Now they are drawn in the theme's ink:
   - the map scripts read --text / --text-2 / --signal / --surface-* with
     getComputedStyle while <html> has design-atlas, and restyle their layers
     on the `wnd:theme` event; without the class they keep the v2 colours;
   - the legend swatches in the views read the --ov-* tokens below, each
     written with its v2 colour as the var() fallback, so SITE_DESIGN=obsidian
     (no atlas.css, no class) renders exactly as before;
   - the EFFIS image is a white PNG of rising opacity made on the server, so
     on paper it is inverted to near-ink by a filter (same alphas, so the
     classes mean the same), and left white at night.
   Severity still uses the --hz-* tokens and nothing here does.
   --------------------------------------------------------------- */
:root.design-atlas {
  --ov-ink: var(--text);
  --ov-ink-18: color-mix(in srgb, var(--text) 18%, transparent);
  --ov-ink-35: color-mix(in srgb, var(--text) 35%, transparent);
  --ov-ink-38: color-mix(in srgb, var(--text) 38%, transparent);
  --ov-ink-62: color-mix(in srgb, var(--text) 62%, transparent);
  --ov-ink-70: color-mix(in srgb, var(--text) 70%, transparent);
  --ov-ink-80: color-mix(in srgb, var(--text) 80%, transparent);
  --ov-ink-85: color-mix(in srgb, var(--text) 85%, transparent);
  --ov-ink-90: color-mix(in srgb, var(--text) 90%, transparent);

  /* The EFFIS shading: #141414 is what invert(.92) makes of its white. */
  --ov-shade: #141414;
  --ov-shade-35: color-mix(in srgb, var(--ov-shade) 35%, transparent);
  --ov-shade-50: color-mix(in srgb, var(--ov-shade) 50%, transparent);
  --ov-shade-60: color-mix(in srgb, var(--ov-shade) 60%, transparent);
  --ov-shade-65: color-mix(in srgb, var(--ov-shade) 65%, transparent);
  --ov-shade-88: color-mix(in srgb, var(--ov-shade) 88%, transparent);

  /* The second, neutral bar series on /disaster-history (the first is
     --signal): half way between ink and paper, 3:1 on the page, and lighter
     than cobalt so the two series differ in lightness as well as hue. */
  --ov-series-b: #878786;
  /* The empty part of the share bars on /europe-wildfire-danger. */
  --ov-track: var(--line-strong);
  /* The "Key action" panel on the safety guides (was a v2 cyan). */
  --key-panel-line: var(--line-bright);
}
:root.design-atlas[data-theme="dark"] {
  --ov-shade: #ffffff;
  --ov-series-b: #81807E;
}
@media (prefers-color-scheme: dark) {
  :root.design-atlas:not([data-theme="light"]) {
    --ov-shade: #ffffff;
    --ov-series-b: #81807E;
  }
}
.design-atlas .ov-shade-img { filter: invert(.92); }
.design-atlas[data-theme="dark"] .ov-shade-img { filter: none; }
@media (prefers-color-scheme: dark) {
  .design-atlas:not([data-theme="light"]) .ov-shade-img { filter: none; }
}

/* =====================================================================
   DESIGN REVIEW ROUND 2 (gstack design-review, 2026-10-19)
   ===================================================================== */

/* 1. The section you are in is marked in the nav (trunk test). */
.design-atlas .nav-menu a[aria-current="page"] { color: var(--text); font-weight: 600; }
.design-atlas .nav-menu a[aria-current="page"]::after { transform: scaleX(1); }
.design-atlas .nav-menu a { white-space: nowrap; }
.design-atlas .nav-cta { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1300px) {
  .design-atlas .nav-menu a { padding: 9px 8px; font-size: .9rem; }
  .design-atlas .nav-menu a::after { left: 8px; right: 8px; }
}
/* Ten sections do not fit beside the name below 1100px: the menu button takes
   over earlier than v2's 960px (same rules as main.css's mobile menu). */
@media (min-width: 961px) and (max-width: 1100px) {
  .design-atlas .nav-toggle { display: block; }
  .design-atlas .main-nav { margin-left: 0; order: 4; }
  .design-atlas .theme-toggle { margin-left: auto; }
  .design-atlas .nav-menu {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: var(--s-2) var(--s-5) var(--s-5); box-shadow: var(--e-3);
  }
  .design-atlas .nav-menu.open { display: flex; }
  .design-atlas .nav-menu a { padding: 13px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .design-atlas .nav-menu a::after { display: none; }
  .design-atlas .nav-cta { justify-content: center; margin: 14px 0 0; border-bottom: 0 !important; }
}
@media (max-width: 960px) {
  .design-atlas .nav-menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--text); padding-left: 12px; }
}

/* 3. All clear: a quiet, explicit "nothing in force" state. */
.design-atlas .state-clear { border-color: color-mix(in srgb, var(--clear) 35%, var(--line)); background: color-mix(in srgb, var(--clear) 5%, var(--surface-2)); }
.design-atlas .state-clear-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; border-radius: 50%; color: var(--clear); border: 1.5px solid currentColor; }
.design-atlas .state-clear-mark .ico { width: 13px; height: 13px; stroke-width: 2.4; }
.design-atlas .state-clear-inline { display: inline-flex; align-items: center; gap: 5px; color: var(--clear); font-weight: 600; }
.design-atlas .state-clear-inline .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.hz-tile.is-quiet .hz-glyph { color: var(--text-3); }

/* 5. Map legend: icon = what, ring colour = how serious. */
.design-atlas .map-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 10px; padding: 9px 12px; font-size: .84rem; color: var(--text-2);
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md);
}
.design-atlas .map-legend-part { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.design-atlas .map-legend-pin {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-2); border: 2px solid var(--pin-c); color: var(--pin-c);
}
.design-atlas .map-legend-pin .ico { width: 13px; height: 13px; stroke-width: 2; }
.design-atlas .map-legend-pin.m-extreme { --pin-c: var(--hz-extreme); }
.design-atlas .map-legend-pin.m-severe { --pin-c: var(--hz-severe); }
.design-atlas .map-legend-pin.m-moderate { --pin-c: var(--hz-moderate); }
.design-atlas .map-legend-pin.m-minor { --pin-c: var(--hz-minor); }
.design-atlas .map-legend .sev { font-size: .72rem; padding: 2px 7px 2px 6px; }

/* 6. Less stacked on a phone's first screen: the app bar steps aside while the
   cookie question is open, and is one slim line otherwise. */
@media (max-width: 620px) {
  .design-atlas body:has(#consent-banner:not([hidden])) .app-bar { display: none; }
  .design-atlas .app-bar-inner { padding: 6px 12px; }
  .design-atlas .app-bar-icon { display: none; }
  .design-atlas .consent { padding: 16px; }
  .design-atlas .consent p { font-size: .84rem; margin-bottom: 12px; }
}

/* 7. Every control in the site's own type, never the browser's Arial. */
.design-atlas button, .design-atlas input, .design-atlas select, .design-atlas textarea, .design-atlas optgroup { font-family: inherit; }

/* 8. Touch targets: 44px wherever a finger is the pointer. */
@media (pointer: coarse) {
  .design-atlas .see-all { min-height: 44px; display: inline-flex; align-items: center; }
  .design-atlas .theme-toggle, .design-atlas .app-bar-close, .design-atlas .app-bar-cta { min-width: 44px; min-height: 44px; }
  .design-atlas .brand { min-height: 44px; }
  .design-atlas .breadcrumbs a { display: inline-block; padding: 10px 0; }
  .design-atlas .atlas-region li a { padding: 12px 0; }
}

/* 9. Font fallbacks sized to the web fonts, so text does not jump when they
   arrive. Measured 2026-10-19 on the live site: Fraunces 600 is 0.909 x Georgia
   Bold, Fraunces 400 1.017 x Georgia, Instrument Sans 400 1.007 x Arial and 600
   0.971 x Arial Bold; JetBrains Mono matches Courier New. */
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'); font-weight: 300 500; size-adjust: 101.7%; }
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia Bold'), local('Georgia-Bold'); font-weight: 600 800; size-adjust: 90.9%; }
@font-face { font-family: 'Instrument Sans Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 300 500; size-adjust: 100.7%; }
@font-face { font-family: 'Instrument Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 800; size-adjust: 97.1%; }
:root.design-atlas {
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --font-body: 'Instrument Sans', 'Instrument Sans Fallback', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
}