/* TorWatch — values mirror DESIGN.md */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #04060f;
  --bg-photo: #020410;
  --surface: #0b0f1f;
  --surface-2: #11152a;
  --note: #140d18;
  --line: #1b2033;
  --line-strong: #5a6178;
  --text: #e9ebf3;
  --text-body: #c6cad8;
  --text-muted: #a3a9bd;
  --text-faint: #8c93a9;
  --signal: #ff6a5c;
  --signal-soft: #ff8a7e;
  --action: #d23a2e;
  --action-hover: #b9302a;
  --on-action: #ffffff;

  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --step-hero: clamp(2.25rem, 1.35rem + 3.6vw, 4.25rem);
  --step-h1: clamp(2rem, 1.45rem + 2.6vw, 3.4rem);
  --step-h1-trust: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  --step-h2: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  --step-h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --step-table: 0.9375rem;
  --step-small: 0.8125rem;

  --measure: 70ch;
  --col-article: 48rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --wrap: min(100% - 2 * var(--gutter), 76rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  --r-s: 3px;
  --r-m: 10px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s-6);
  scrollbar-color: #2a3047 var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.7;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

::selection { background: rgb(255 106 92 / 0.32); color: var(--text); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  text-wrap: balance;
  margin: 0;
}
p, li, dd { text-wrap: pretty; }

a { color: var(--text); }

a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--signal-soft);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 0.08em 0.36em;
  overflow-wrap: anywhere;
}

strong { color: var(--text); font-weight: 600; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-3);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  min-height: 44px;
  background: var(--action);
  color: var(--on-action);
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-s);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; outline-color: var(--text); }

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--bg-photo);
  border-bottom: 1px solid var(--line);
}

.header-bar {
  width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "brand menu cta" "nav nav nav";
  align-items: center;
  column-gap: var(--s-3);
  padding-block: var(--s-2);
}

.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  justify-self: start;
}
.brand-mark {
  flex: none;
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.brand:hover .brand-word { color: #ffffff; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Primary nav: hub link + toggle + panel per topic. Without nav.js every
   panel opens on hover or focus; with it, panels follow aria-expanded. */

.site-nav { grid-area: nav; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-1);
  margin-inline: calc(-1 * var(--s-3));
}
.nav-item { position: relative; display: flex; align-items: center; flex-wrap: wrap; }

.nav-top,
.nav-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 450;
  font-size: 0.9375rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--r-s);
}
.nav-top { padding: 0 var(--s-1) 0 var(--s-3); }
.nav-toggle {
  gap: var(--s-2);
  min-width: 32px;
  padding: 0 var(--s-2);
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle--label { padding-inline: var(--s-3) var(--s-2); }
.nav-toggle::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  margin-top: -0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"]::after { margin-top: 0.2em; transform: rotate(-135deg); }
.nav-toggle:focus-visible {
  outline: 2px solid var(--signal-soft);
  outline-offset: 3px;
}
.nav-top:hover,
.nav-toggle:hover,
.nav-item[data-open] > .nav-top,
.nav-item[data-open] > .nav-toggle { color: var(--text); }
.nav-item[data-current] > .nav-top,
.nav-item[data-current] > .nav-toggle--label {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.55em;
}

.nav-panel {
  display: none;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
}
.site-nav:not(.is-enhanced) .nav-item:is(:hover, :focus-within) > .nav-panel,
.site-nav.is-enhanced .nav-item[data-open] > .nav-panel { display: grid; }

.nav-group { min-width: 0; }
.nav-group-head {
  margin: var(--s-2) var(--s-3) var(--s-1);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.nav-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-1) var(--s-3);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--text-body);
  text-decoration: none;
  border-radius: var(--r-s);
}
.nav-panel a:hover { color: var(--text); background: var(--surface-2); }
.nav-panel a:active { background: var(--line); }
.nav-panel a[aria-current="page"] { color: var(--signal); }

.menu-toggle {
  grid-area: menu;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-3);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  color: var(--text);
  font: 500 0.9375rem/1.2 var(--font-display);
  cursor: pointer;
}
.menu-toggle:hover { background: var(--surface); }
.menu-toggle:focus-visible { outline: 2px solid var(--signal-soft); outline-offset: 3px; }
.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
  display: block;
  width: 0.95rem;
  height: 1.5px;
  background: currentColor;
}
.menu-toggle-icon { position: relative; }
.menu-toggle-icon::before,
.menu-toggle-icon::after { content: ""; position: absolute; left: 0; }
.menu-toggle-icon::before { top: -0.3rem; }
.menu-toggle-icon::after { top: 0.3rem; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { top: 0; transform: rotate(-45deg); }

/* Below desktop width the enhanced nav is a full-width accordion under the bar. */
@media (max-width: 67.99rem) {
  .site-nav.is-enhanced { display: none; }
  .header-bar[data-nav-open] .site-nav.is-enhanced {
    display: block;
    padding-block: var(--s-2) var(--s-4);
    border-top: 1px solid var(--line);
    margin-top: var(--s-2);
  }
  .site-nav.is-enhanced .nav-menu { display: block; margin: 0; }
  .site-nav.is-enhanced .nav-item {
    display: grid;
    grid-template-columns: 1fr 44px;
    border-bottom: 1px solid var(--line);
  }
  .site-nav.is-enhanced .nav-top { font-size: 1.0625rem; padding-left: 0; color: var(--text); }
  .site-nav.is-enhanced .nav-toggle--label {
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-inline: 0 1.1rem;
    font-size: 1.0625rem;
    color: var(--text);
  }
  .site-nav.is-enhanced .nav-panel {
    grid-column: 1 / -1;
    margin-bottom: var(--s-3);
    background: transparent;
    border: 0;
    padding: 0;
  }
  .site-nav.is-enhanced .nav-panel a { padding-left: var(--s-4); }
  .site-nav.is-enhanced .nav-group-head { margin-left: var(--s-4); }
  .site-nav:not(.is-enhanced) .nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    min-width: 15rem;
  }
}

@media (max-width: 26rem) {
  .search-toggle > span:last-child,
  .menu-toggle > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .search-toggle, .menu-toggle { padding: 0 var(--s-3); }
}

@media (min-width: 68rem) {
  .menu-toggle { display: none; }
  .nav-panel {
    position: absolute;
    top: calc(100% + var(--s-2));
    left: 0;
    z-index: 5;
    grid-auto-flow: column;
    grid-auto-columns: minmax(12.5rem, max-content);
  }
  .nav-panel::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--s-2) - 1px) 0 auto;
    height: var(--s-2);
  }
  /* Wide menus (4+ groups, e.g. Dark web): wrap into rows of 3 instead of
     one long row that overflows the viewport. */
  .nav-panel:has(> .nav-group:nth-child(4)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(12.5rem, 14rem));
    gap: var(--s-3) var(--s-5);
    max-width: calc(100vw - 2 * var(--s-4));
  }
  .nav-item:nth-last-child(-n + 2) > .nav-panel { left: auto; right: 0; }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  background: var(--action);
  color: var(--on-action);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--r-s);
  border: 1px solid var(--action);
}
.button:hover { background: var(--action-hover); border-color: var(--action-hover); }
.button:active { background: var(--action-hover); transform: translateY(1px); }
.button:focus-visible { outline-color: var(--text); }
.button::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.6em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.search-toggle {
  grid-area: cta;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--text);
  font: 500 0.9375rem/1.2 var(--font-display);
  cursor: pointer;
}
.search-toggle:hover { border-color: var(--text-muted); background: var(--surface-2); }
.search-toggle:active { transform: translateY(1px); }
.search-toggle:focus-visible,
.search-close:focus-visible,
.site-search input:focus-visible {
  outline: 2px solid var(--signal-soft);
  outline-offset: 3px;
}
.search-toggle-icon {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  border: 1.7px solid currentColor;
  border-radius: 50%;
}
.search-toggle-icon::after {
  content: "";
  position: absolute;
  width: 0.42rem;
  border-top: 1.7px solid currentColor;
  right: -0.32rem;
  bottom: -0.16rem;
  transform: rotate(45deg);
}

@media (max-width: 22rem) {
  .search-toggle { padding: 0 var(--s-3); font-size: 0.875rem; }
  .brand-word { letter-spacing: 0.14em; }
}

@media (min-width: 40rem) {
  .header-bar { min-height: 4.25rem; }
}

@media (min-width: 68rem) {
  .site-header { position: sticky; top: 0; }
  html { scroll-padding-top: 6rem; }
  .header-bar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav cta";
    column-gap: var(--s-5);
    padding-block: 0;
  }
  .nav-menu { justify-content: center; margin-inline: 0; }
}

/* ---------- Site search ---------- */

.site-search {
  width: min(42rem, calc(100% - 2 * var(--gutter)));
  max-height: min(42rem, calc(100dvh - 2 * var(--gutter)));
  margin: max(var(--gutter), 8vh) auto auto;
  padding: 0;
  overflow: hidden;
  color: var(--text-body);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 0.65);
}
.site-search::backdrop {
  background: rgb(2 4 16 / 0.82);
  backdrop-filter: blur(4px);
}
.search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.site-search label {
  grid-column: 1 / -1;
  color: var(--text);
  font: 600 0.8125rem/1.2 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-search input {
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.3 var(--font-body);
}
.site-search input::placeholder { color: var(--text-faint); }
.search-close {
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}
.search-close:hover { background: var(--surface-2); }
.search-status {
  margin: 0;
  padding: var(--s-4) var(--s-5) var(--s-2);
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.search-results {
  max-height: min(29rem, 62dvh);
  margin: 0;
  padding: var(--s-2) var(--s-4) var(--s-4);
  overflow-y: auto;
  list-style: none;
}
.search-result a {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-s);
  text-decoration: none;
}
.search-result a:hover,
.search-result a:focus-visible { background: var(--surface-2); }
.search-result-title {
  display: block;
  color: var(--text);
  font: 600 1rem/1.35 var(--font-display);
}
.search-result-description {
  display: block;
  margin-top: var(--s-1);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.search-result-path {
  display: block;
  margin-top: var(--s-1);
  color: var(--signal-soft);
  font: 0.75rem/1.3 var(--font-mono);
}

/* ---------- Hero photograph ---------- */

main { position: relative; display: block; isolation: isolate; }

.hero-media {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: clamp(34rem, 58vw, 50rem);
  overflow: hidden;
  background: var(--bg-photo);
  pointer-events: none;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
.hero-media--hub { height: clamp(24rem, 42vw, 36rem); }
.hero-media--hub img { opacity: 0.85; object-position: 50% 70%; }
.hero-media--strip { height: clamp(18rem, 30vw, 26rem); }
.hero-media--strip img { opacity: 0.55; object-position: 50% 90%; }

@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: hero-settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  @keyframes hero-settle {
    from { transform: scale(1.06); opacity: 0.4; }
  }
  .hero-media--strip img { animation-name: hero-settle-strip; }
  @keyframes hero-settle-strip {
    from { transform: scale(1.04); opacity: 0.2; }
  }
  @view-transition { navigation: auto; }
}

/* ---------- Eyebrow, breadcrumb, dateline ---------- */

.eyebrow,
nav[aria-label="Breadcrumb"] ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before,
nav[aria-label="Breadcrumb"] ol::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--signal);
}
nav[aria-label="Breadcrumb"] li + li::before {
  content: "/";
  margin-right: var(--s-3);
  color: var(--line-strong);
}
nav[aria-label="Breadcrumb"] a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  text-decoration: none;
}
nav[aria-label="Breadcrumb"] a:hover { color: var(--text); }
nav[aria-label="Breadcrumb"] [aria-current="page"] { color: var(--signal); }

.dateline {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-small);
  font-weight: 450;
  letter-spacing: 0.02em;
  color: var(--text-faint);
}
.dateline a { color: var(--text-muted); text-underline-offset: 0.25em; text-decoration-color: var(--line-strong); }
.dateline a:hover { color: var(--text); text-decoration-color: var(--signal); }
.dateline time { color: var(--text-muted); }
.dateline-sep { margin-inline: 0.4em; color: var(--line-strong); }
.dateline .jump {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: var(--s-4);
  padding: 0 var(--s-1);
}
.dateline .jump::after { content: " ↓"; white-space: pre; }

/* ---------- Shared article typography ---------- */

article { color: var(--text-body); }

article h1 {
  font-size: var(--step-h1);
  font-weight: 380;
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: var(--text-muted);
  max-inline-size: 22ch;
  margin-bottom: var(--s-6);
}
article h1::first-line { color: var(--text); }

article > h1 + p {
  font-size: var(--step-lead);
  line-height: 1.6;
  color: var(--text);
}

article p,
article li,
article dd,
article blockquote { max-inline-size: var(--measure); }

article p { margin: 0 0 var(--s-5); }

article > section {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
article h2 {
  font-size: var(--step-h2);
  font-weight: 450;
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin-bottom: var(--s-5);
  max-inline-size: 30ch;
}
article h3 {
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: var(--s-6) 0 var(--s-3);
}

/* Citation links: visible, quiet enough to read through */
article a {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-color: rgb(255 106 92 / 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
article a:hover {
  color: var(--signal-soft);
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
}
article a:active { color: var(--signal); }

/* Lists */
article ul {
  margin: 0 0 var(--s-5);
  padding-left: 1.25rem;
  list-style: square;
}
article ul > li { margin-bottom: var(--s-3); padding-left: var(--s-1); }
article ul > li::marker { color: var(--signal); }

/* Numbered procedures */
article ol {
  counter-reset: step;
  list-style: none;
  margin: var(--s-5) 0 var(--s-6);
  padding: 0;
}
article ol > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--s-5) 3.25rem;
  min-height: 2.25rem;
}
article ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
}
article ol > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.125rem - 0.5px);
  top: 2.6rem;
  bottom: 0.4rem;
  width: 1px;
  background: var(--line);
}

/* Definition lists: pairs */
article dl { margin: var(--s-5) 0 var(--s-6); }
article dt {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
article dt:first-child { border-top: 0; padding-top: 0; }
article dd {
  margin: var(--s-2) 0 var(--s-4);
  color: var(--text-body);
}
@media (min-width: 48rem) {
  .doc-article dl,
  .hub-article dl,
  .trust-article dl,
  .news-article dl {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
    column-gap: var(--s-6);
  }
  .doc-article dt, .hub-article dt, .trust-article dt, .news-article dt {
    grid-column: 1;
    padding-block: var(--s-4);
  }
  .doc-article dd, .hub-article dd, .trust-article dd, .news-article dd {
    grid-column: 2;
    margin: 0;
    padding-block: var(--s-4);
    border-top: 1px solid var(--line);
  }
  .doc-article dt:first-child + dd,
  .hub-article dt:first-child + dd,
  .trust-article dt:first-child + dd,
  .news-article dt:first-child + dd { border-top: 0; }
}
/* A dl whose terms are links is a route list */
article dl:has(> dt > a) dt > a {
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}
article dl:has(> dt > a) dt > a::after {
  content: "→";
  color: var(--signal);
  font-weight: 400;
}
article dl:has(> dt > a) dt > a:hover { color: var(--signal-soft); text-decoration: underline; text-decoration-color: var(--signal); }

/* Takeaway box and note callout */
article aside:has(> h2) {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-5) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--signal);
  border-radius: 0 0 var(--r-m) var(--r-m);
}
article aside:has(> h2) h2 {
  font-size: var(--step-h3);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: var(--s-4);
}
article aside:has(> h2) > :last-child { margin-bottom: var(--s-3); }

article aside[role="note"] {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-5);
  background: var(--note);
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  max-inline-size: calc(var(--measure) + 4rem);
}
article aside[role="note"] > :last-child { margin-bottom: 0; }
article aside[role="note"] strong { color: #ffffff; }

/* Quotations */
article blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  border-left: 1px solid var(--signal);
  font-family: var(--font-display);
  font-weight: 350;
  font-size: var(--step-lead);
  line-height: 1.5;
  color: var(--text);
}
article blockquote p { margin-bottom: var(--s-3); }
article blockquote > :last-child { margin-bottom: 0; }

/* Figures and inline SVG diagrams */
article figure {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
article figure svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--text-muted);
  font-family: var(--font-display);
}
article figure svg text { fill: var(--text); }
article figure svg [stroke="#222"] { stroke: var(--text-muted); }
article figure svg g[fill="currentColor"] > rect { fill: var(--signal); }
article figure img { width: 100%; border-radius: var(--r-s); }
article figcaption {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--text-muted);
  max-inline-size: var(--measure);
}

/* Screenshots: compact, captioned, never wider than the text.
   .shot is a block figure; .shot--side floats beside the paragraph that follows it. */
article figure.shot {
  margin: var(--s-5) 0;
  padding: var(--s-3);
  max-inline-size: 34rem;
}
article figure.shot--wide { max-inline-size: 40rem; }
article figure.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
article figure.shot figcaption {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  font-size: var(--step-small);
  line-height: 1.5;
}
article figure.shot--xs { --shot-w: 14rem; }
article figure.shot--s { --shot-w: 17rem; }
article figure.shot--m { --shot-w: 21rem; }
@media (min-width: 48rem) {
  article figure.shot--side {
    float: right;
    clear: right;
    inline-size: var(--shot-w, 18rem);
    margin: var(--s-1) 0 var(--s-4) var(--s-5);
  }
  article section:has(> .shot--side) { display: flow-root; }
}

/* Tables as data grids */
article table {
  width: 100%;
  margin: var(--s-6) 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--step-table);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
article caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
article caption::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  background: var(--signal);
  vertical-align: 0.05em;
}
article th,
article td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
article tbody tr:last-child > * { border-bottom: 0; }
article thead th {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
}
article thead th:first-child { border-top-left-radius: var(--r-m); }
article thead th:last-child { border-top-right-radius: var(--r-m); }
article tbody th {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text);
}
article tbody tr:hover > * { background: rgb(17 21 42 / 0.7); }
article td p, article th p { margin: 0; }
article table code { word-break: break-all; }

/* Narrow screens: a table with links scrolls sideways (its links keep the
   scroller keyboard-reachable); a table without links shrinks to fit. */
@media (max-width: 47.99rem) {
  article table:not(:has(a)) { font-size: 0.875rem; }
  article table:not(:has(a)) th,
  article table:not(:has(a)) td {
    padding: var(--s-2) var(--s-2);
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  article table:not(:has(a)) thead th { letter-spacing: 0.04em; font-size: 0.6875rem; }

  article table:has(a) {
    display: block;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background:
      linear-gradient(to right, var(--surface) 30%, rgb(11 15 31 / 0)) left / 2rem 100% no-repeat local,
      linear-gradient(to left, var(--surface) 30%, rgb(11 15 31 / 0)) right / 2rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgb(255 106 92 / 0.28), transparent) left / 0.6rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgb(255 106 92 / 0.28), transparent) right / 0.6rem 100% no-repeat scroll,
      var(--surface);
  }
  article table:has(a) caption { display: block; padding: var(--s-3) var(--s-4) 0; position: sticky; left: 0; }
  article table:has(a) th,
  article table:has(a) td { padding: var(--s-3); min-width: 9.5rem; }
  article table:has(a):not(:has(thead th:nth-child(3))) th,
  article table:has(a):not(:has(thead th:nth-child(3))) td { min-width: 0; }
}

/* Ranked comparison: anchor list, logo tiles, one-line spec per entry */
article ol.market-jump { columns: 2 17rem; column-gap: var(--s-6); }
article ol.market-jump > li { break-inside: avoid; padding-bottom: var(--s-3); }
article ol.market-jump > li::after { content: none; }
article img.market-logo {
  width: 64px;
  height: 64px;
  flex: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
article table img.market-logo {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: var(--s-2);
  vertical-align: middle;
  border-radius: var(--r-s);
}
article table th[scope="row"] { white-space: nowrap; }
article .market-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-7) 0 var(--s-4);
}
article .market-head h3 { margin: 0; }
article dl.market-spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  font-size: var(--step-small);
  line-height: 1.5;
}
article dl.market-spec > div { display: flex; gap: var(--s-2); }
article dl.market-spec dt,
article dl.market-spec dd {
  margin: 0;
  padding: 0;
  border: 0;
}
article dl.market-spec dt {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
article dl.market-spec dd { color: var(--text); }

/* ---------- Page heads and grids (hub, article) ---------- */

.page-head {
  width: var(--wrap);
  margin-inline: auto;
  padding-top: clamp(3rem, 8vw, 6.5rem);
  display: grid;
  gap: var(--s-2);
}
.page-hub .page-head { padding-top: clamp(4rem, 11vw, 9rem); }

.page-grid {
  width: var(--wrap);
  margin-inline: auto;
  padding: var(--s-5) 0 var(--s-9);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
}
.page-grid > article { min-width: 0; max-inline-size: var(--col-article); }
.page-hub .page-grid > article { max-inline-size: 52rem; }
.page-hub article h1 { font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.9rem); font-weight: 350; max-inline-size: 20ch; }

/* Contents rail */
.toc:not(:has(nav)) { display: none; }
.toc nav {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.toc nav::before {
  content: "On this page";
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { border-left: 1px solid var(--line); }
.toc a {
  display: block;
  padding: 0.55rem 0 0.55rem var(--s-4);
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
}
.toc a:hover { color: var(--text); border-left-color: var(--signal); }
.toc a:active { color: var(--signal-soft); }

@media (min-width: 68rem) {
  .page-grid {
    grid-template-columns: minmax(0, 1fr) 17rem;
    column-gap: clamp(3rem, 5vw, 5.5rem);
    align-items: start;
  }
  .toc {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .toc nav { background: transparent; border: 0; padding: var(--s-2) 0 0; }
  .dateline .jump { display: none; }
}

/* ---------- Home ---------- */

.page-home { padding-bottom: var(--s-9); }

.hero-eyebrow {
  width: var(--wrap);
  margin: 0 auto;
  padding-top: clamp(4.5rem, 12vw, 9.5rem);
  justify-content: center;
  text-align: center;
}
.hero-eyebrow::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--signal);
}

.home-article { width: var(--wrap); margin-inline: auto; }
.home-article > h1 {
  font-size: var(--step-hero);
  font-weight: 350;
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-inline-size: 23ch;
  margin: var(--s-5) auto var(--s-6);
  text-align: center;
}
.home-article > h1 + p {
  margin-inline: auto;
  max-inline-size: 60ch;
  text-align: center;
  color: var(--text-body);
}
.home-article > section { max-inline-size: none; }
.home-article > section:first-of-type { margin-top: clamp(5rem, 14vw, 10rem); }
.home-article > section > h2 { max-inline-size: 26ch; }
.home-article > section > p { max-inline-size: var(--measure); }

/* Start here: a routing panel */
.home-article #start-here + table { margin-top: var(--s-5); }
.home-article table td a,
.home-article table th { font-family: var(--font-display); }
.home-article table td { color: var(--text-muted); }
.home-article table td a { font-weight: 500; }
@media (max-width: 47.99rem) {
  .home-article table,
  .home-article table tbody,
  .home-article table tr,
  .home-article table th,
  .home-article table td { display: block; min-width: 0; }
  .home-article table { background: none; border: 0; overflow: visible; }
  .home-article table caption { position: static; padding: 0 0 var(--s-3); }
  .home-article table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .home-article table tbody tr {
    margin-bottom: var(--s-3);
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
  }
  .home-article table tbody th,
  .home-article table td { padding: 0; border: 0; background: none; }
  .home-article table tbody th { margin-bottom: var(--s-3); font-size: 1.05rem; }
  .home-article table td { padding-top: var(--s-2); }
  .home-article table td + td { margin-top: var(--s-2); border-top: 1px solid var(--line); padding-top: var(--s-3); }
  .home-article table td::before {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal);
  }
  .home-article table td:nth-child(2)::before { content: "Read first"; }
  .home-article table td:nth-child(3)::before { content: "Then"; }
  .home-article table tbody tr:hover > * { background: none; }
}

/* New this month: three dispatches */
.home-article #latest + ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}
.home-article #latest + ul > li {
  max-inline-size: none;
  margin: 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--line-strong);
  position: relative;
}
.home-article #latest + ul > li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--signal);
}
.home-article #latest + ul > li > strong:first-child {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
}
@media (min-width: 60rem) {
  .home-article #latest + ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}

/* Reference pages: a band of three */
.home-article #reference + dl {
  display: grid;
  margin-top: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.home-article #reference + dl > dt {
  padding: var(--s-5) var(--s-5) 0;
  border-top: 1px solid var(--line);
  font-size: 1.2rem;
  font-weight: 500;
}
.home-article #reference + dl > dt:first-child { border-top: 0; }
.home-article #reference + dl > dd {
  margin: 0;
  padding: var(--s-2) var(--s-5) var(--s-5);
  font-size: 0.975rem;
  color: var(--text-muted);
}
@media (min-width: 60rem) {
  .home-article #reference + dl {
    grid-template-rows: auto 1fr;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .home-article #reference + dl > dt { border-top: 0; }
  .home-article #reference + dl > dt:not(:first-child),
  .home-article #reference + dl > dt:not(:first-child) + dd { border-left: 1px solid var(--line); }
}

/* Who writes: the checklist */
.home-article #who-writes ~ ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  max-inline-size: 60rem;
}
.home-article #who-writes ~ ul > li {
  max-inline-size: none;
  margin: 0;
  padding: var(--s-4) var(--s-4) var(--s-4) 3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  position: relative;
}
.home-article #who-writes ~ ul > li::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 1.45rem;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
  transform: rotate(-45deg);
}
@media (min-width: 48rem) {
  .home-article #who-writes ~ ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.home-dateline {
  width: var(--wrap);
  margin: var(--s-7) auto 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* ---------- News ---------- */

.page-news { padding-bottom: var(--s-9); }
.news-head,
.news-article,
.news-more {
  width: min(100% - 2 * var(--gutter), 46rem);
  margin-inline: auto;
}
.news-head {
  padding-top: clamp(3rem, 8vw, 5.5rem);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.news-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 4rem;
  height: 2px;
  background: var(--signal);
}
.news-article h1 { max-inline-size: min(24ch, 100%); }
.news-article > section { margin-top: var(--s-7); }
.news-more {
  margin-top: var(--s-7);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  font-family: var(--font-display);
  color: var(--text-muted);
}
.news-more a { color: var(--text); text-underline-offset: 0.22em; text-decoration-color: var(--signal); }
.news-more a:hover { color: var(--signal-soft); }

/* News beats: the switcher under a news hub or a category */
[data-page="news"] #beats,
.page-news-hub #beats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-6);
  padding: 0;
}
[data-page="news"] #beats > li,
.page-news-hub #beats > li {
  margin: 0;
  padding: 0;
  max-inline-size: none;
}
[data-page="news"] #beats > li::marker,
.page-news-hub #beats > li::marker { content: none; }
[data-page="news"] #beats a,
.page-news-hub #beats a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}
[data-page="news"] #beats a:hover,
.page-news-hub #beats a:hover {
  border-color: var(--signal);
  color: var(--signal-soft);
  text-decoration: none;
}
[data-page="news"] #beats a:active,
.page-news-hub #beats a:active { color: var(--signal); }
[data-page="news"] #beats a[aria-current="page"],
.page-news-hub #beats a[aria-current="page"] {
  border-color: var(--signal);
  color: var(--signal);
}
[data-page="news"] #beats a[aria-current="page"]:hover,
.page-news-hub #beats a[aria-current="page"]:hover { color: var(--signal); }

/* One dispatch per note: date, headline, then the deck */
.page-news-hub #dispatches ~ ul {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
}
.page-news-hub #dispatches ~ ul > li {
  list-style: none;
  margin: 0;
  padding: var(--s-4) 0 0;
  max-inline-size: none;
  border-top: 1px solid var(--line-strong);
  position: relative;
}
.page-news-hub #dispatches ~ ul > li::marker { content: none; }
.page-news-hub #dispatches ~ ul > li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--signal);
}
.page-news-hub #dispatches ~ ul time {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}
.page-news-hub #dispatches ~ ul > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.page-news-hub #dispatches ~ ul > li > a:hover {
  color: var(--signal-soft);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-underline-offset: 0.18em;
}
.page-news-hub #dispatches ~ ul > li > a:active { color: var(--signal); }
.page-news-hub #dispatches ~ ul > li > p { margin-top: var(--s-3); }

/* ---------- Trust ---------- */

.page-trust { padding-bottom: var(--s-9); }
.trust-head,
.trust-article {
  width: min(100% - 2 * var(--gutter), 44rem);
  margin-inline: auto;
}
.trust-head { padding-top: clamp(3rem, 8vw, 5.5rem); padding-bottom: var(--s-4); }
.trust-article h1 {
  font-size: var(--step-h1-trust);
  font-weight: 450;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.trust-article > section { margin-top: var(--s-7); padding-top: 0; border-top: 0; }
.trust-article h2 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); font-weight: 500; }

/* Human sitemap: a directory, not a prose page */
[data-page="sitemap"] .trust-article h2 { margin-top: var(--s-2); }
[data-page="sitemap"] .trust-article h2 a { text-decoration: none; }
[data-page="sitemap"] .trust-article h2 a:hover { color: var(--signal-soft); }
[data-page="sitemap"] .trust-article h3 {
  margin: var(--s-5) 0 var(--s-2);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
[data-page="sitemap"] .trust-article section ul {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: grid;
  gap: 0;
}
[data-page="sitemap"] .trust-article section li {
  margin: 0;
  padding: 0;
  max-inline-size: none;
  border-top: 1px solid var(--line);
}
[data-page="sitemap"] .trust-article section li::marker { content: none; }
[data-page="sitemap"] .trust-article section li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration-thickness: 1px;
}
@media (min-width: 40rem) {
  [data-page="sitemap"] .trust-article section ul { grid-template-columns: 1fr 1fr; }
  [data-page="sitemap"] .trust-article section li:nth-child(-n+2) { border-top: 0; }
  [data-page="sitemap"] .trust-article section li:nth-child(odd) { padding-right: var(--s-4); }
  [data-page="sitemap"] .trust-article section li:nth-child(even) {
    padding-left: var(--s-4);
    border-left: 1px solid var(--line);
  }
}

/* ---------- 404 ---------- */

.notfound {
  width: min(100% - 2 * var(--gutter), 40rem);
  margin-inline: auto;
  padding: clamp(6rem, 18vw, 12rem) 0 var(--s-9);
  text-align: center;
}
.notfound .eyebrow { justify-content: center; }
.notfound h1 {
  margin: var(--s-4) 0 var(--s-5);
  font-size: var(--step-h1);
  font-weight: 380;
  letter-spacing: -0.03em;
}
.notfound p { color: var(--text-body); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-photo);
}
.footer-bar,
.colophon {
  width: var(--wrap);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
}
.footer-bar { padding: var(--s-5) 0 var(--s-3); }
.footer-topics ul,
.footer-trust ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-5);
}
.footer-topics a,
.footer-trust a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.35;
  text-decoration: none;
}
.footer-topics a { font-size: 0.9375rem; color: var(--text-body); }
.footer-trust a { font-size: var(--step-small); color: var(--text-muted); }
.footer-topics a:hover,
.footer-trust a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 0.25em; }
.footer-topics a:active,
.footer-trust a:active { color: var(--signal-soft); }
.colophon {
  padding: var(--s-2) 0 var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--step-small);
  color: var(--text-faint);
}
.colophon p { margin: 0; }
/* ---------- Share row ---------- */
.share {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}
.share-label {
  font-family: var(--font-display);
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.share-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.share-link {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
}
.share-link:hover { color: var(--text); border-color: var(--signal); }
.share-link:active { color: var(--signal-soft); }
.share-link:focus-visible { outline: 2px solid var(--signal-soft); outline-offset: 2px; }
.share-link[data-copied] { color: var(--signal-soft); border-color: var(--signal); }
.share-link[hidden] { display: none; }