/* UFOQ.AI — shared styles for every page. The rules behind them are in DESIGN.md.
   Every page links this file, has class="site" on <body>, and adds only its own page-specific styles. */
/* Fonts are stored with the site (assets/fonts), the same files as the current ufoq.ai */
@font-face { font-family: "League Gothic"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/league-gothic-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/source-serif-4-latin.woff2") format("woff2"); }

/* ---------- Colours, fonts and shapes ---------- */
:root {
  /* Brand palette */
  --navy: #000026;   /* Horizon Navy: headlines, text, hero and closing panels, pill buttons */
  --blue: #2222EC;   /* Signal Blue: links, hover, the current tab, small labels, opportunities */
  --sky: #22A3DF;    /* Horizon Sky: small highlights only */
  --white: #FFFFFF;  /* Clear White: the page background */
  --grey: #F7F8F9;   /* Quiet Grey: cards and boxes on the white page */
  /* Supporting tones made from the palette */
  --ink: #000026;
  --ink-soft: #3B3B5C;
  --ink-muted: #6A6A85;
  --faint: #A4A4BA;
  --line: #DCDFE6;
  --line-strong: #B9BDCB;
  --blue-tint: #EDEDFD;
  --sky-dark: #0B6E99;
  /* The one colour outside the palette: risks only, so they never read as opportunities */
  --risk: #B4233C;
  --opp: var(--blue);
  --display: "League Gothic", "Arial Narrow", sans-serif;   /* headlines only */
  --body: "Source Serif 4", Georgia, serif;                 /* everything else */
  --radius: 16px;      /* cards and boxes */
  --radius-lg: 30px;   /* hero and closing panels */
  --lift: 0 14px 34px -18px rgba(0,0,38,.28);   /* the one light shadow, on .raised cards */
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* anything marked hidden stays hidden, whatever its other styles */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.site .wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.site section { padding: 96px 0; }
.site section[id] { scroll-margin-top: 110px; } /* so the fixed header doesn't cover the heading */

/* ---------- Mockup banner (removed once the real login exists) and placeholders ---------- */
.mock-banner { background: var(--sky); color: var(--navy); text-align: center; font-size: 14px; padding: 6px 16px; }
.mock-link { margin-left: 8px; color: var(--navy); font-weight: 700; }
.xxx { color: var(--ink-muted); }   /* text still to be written */
.todo { display: inline-block; font: 600 12.5px/1 var(--body); border: 1px dashed var(--ink-muted); color: var(--ink-muted); padding: 6px 10px; border-radius: 6px; }

/* ---------- Header: white, logo, page tabs, one pill button ---------- */
header.top { position: sticky; top: 0; z-index: 20; background: var(--white); color: var(--navy); border-bottom: 1px solid var(--line); }
.top-inner { display: flex; align-items: center; gap: 28px; max-width: 1180px; margin: 0 auto; padding: 14px 40px; }
.brand { display: flex; align-items: baseline; gap: 18px; }
.brand h1 { margin: 0; font: 36px/0.9 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.brand a { color: inherit; text-decoration: none; }
.page-tabs { display: flex; gap: 30px; margin-left: 28px; }
.page-tabs a { padding: 8px 0 6px; border-bottom: 2px solid transparent; color: var(--ink-soft); text-decoration: none;
  font: 16px/1 var(--body); transition: color .12s, border-color .12s; }
.page-tabs a:hover { color: var(--blue); }
.page-tabs a[aria-current="page"] { color: var(--navy); font-weight: 600; border-bottom-color: var(--blue); }
.top-inner > .btn { margin-left: auto; padding: 11px 18px; }

/* ---------- Buttons and links: pills in the reading font ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; text-decoration: none;
  font: 600 15px/1 var(--body); padding: 13px 22px; border-radius: 999px;
  border: 1.5px solid var(--navy); background: var(--navy); color: var(--white);
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--blue); border-color: var(--blue); }
.btn.ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--navy); background: transparent; color: var(--navy); }
.btn.light { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn.light:hover { background: var(--sky); border-color: var(--sky); color: var(--white); }
.link { border: 0; background: none; padding: 0; color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Small rounded label ("chip"), used above headings */
.chip-label, .eyebrow, .block-head .kicker {
  display: inline-block; margin: 0 0 16px; padding: 6px 11px; border-radius: 6px;
  font: 600 13px/1 var(--body); background: var(--blue-tint); color: var(--blue);
}

/* ---------- Hero and closing: rounded navy panels set in from the page edges, everything centred ---------- */
.site .hero { margin: 16px 24px 0; padding: 104px 24px 112px; border-radius: var(--radius-lg); text-align: center; color: var(--white);
  background: radial-gradient(120% 90% at 50% 100%, #10106A 0%, #04043A 45%, var(--navy) 80%); }
.hero .wrap { display: flex; flex-direction: column; align-items: center; }
.hero h2 { max-width: 920px; margin: 0 0 20px; font: 88px/0.95 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.hero h2 span { color: var(--sky); }
.hero .eyebrow { background: rgba(34,163,223,.18); color: #9FD8F2; }
.lede { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.hero .lede { color: #C9C9E0; margin: 0 auto 32px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .actions, .closing .actions { justify-content: center; }
.hero .btn, .closing .btn { background: var(--white); border-color: var(--white); color: var(--navy); }
.hero .btn:hover, .closing .btn:hover { background: var(--sky); border-color: var(--sky); color: var(--white); }
.hero .btn.ghost, .closing .btn.ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.hero .btn.ghost:hover, .closing .btn.ghost:hover { background: transparent; border-color: var(--white); color: var(--white); }

.site .closing { margin: 0 24px 24px; padding: 96px 24px; border-radius: var(--radius-lg); text-align: center; color: var(--white);
  background: radial-gradient(120% 90% at 50% 0%, #10106A 0%, #04043A 45%, var(--navy) 80%); }
.closing .wrap { display: flex; flex-direction: column; align-items: center; }
.closing h2 { margin: 0 0 16px; max-width: 760px; font: 64px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.closing h2 span { color: var(--sky); }
.closing p { margin: 0 auto 28px; max-width: 56ch; font-size: 17px; color: #C9C9E0; }

/* ---------- Section opening: label, headline in capitals and one-liner, left-aligned, no rule ---------- */
.block-head { max-width: 900px; margin: 0 0 44px; }
.block-head h2 { margin: 0; font: 52px/0.98 var(--display); text-transform: uppercase; letter-spacing: .012em; }
.block-head p { margin: 12px 0 0; max-width: 60ch; color: var(--ink-muted); font-size: 16.5px; }

/* ---------- Boxes and cards ---------- */
/* Rounded grey boxes side by side */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.col { background: var(--grey); padding: 24px 24px 26px; border-radius: var(--radius); }
.col .idx { display: inline-block; margin-bottom: 14px; padding: 4px 8px; border-radius: 6px; background: var(--blue-tint); color: var(--blue); font: 600 12.5px/1 var(--body); }
.col h3 { margin: 0 0 8px; font: 26px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.col p { margin: 0; color: var(--ink-muted); font-size: 15px; }
/* A raised white card: the one thing in a section that should stand out */
.raised { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--lift); }

/* Trend cards: grey, the title is the one big thing; it turns blue on hover */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.entry { position: relative; display: flex; flex-direction: column; background: var(--grey); border-radius: var(--radius); padding: 20px 22px; }
.entry:hover h4 { color: var(--blue); }
.entry-tags { display: flex; gap: 6px; min-height: 18px; margin-bottom: 8px; } /* always there, so every title starts at the same height */
.entry h4 { margin: 0 0 8px; font: 23px/1.02 var(--display); letter-spacing: .02em; text-transform: uppercase; transition: color .12s; }
.entry h4 button, .entry h4 a { all: unset; cursor: pointer; }
.entry h4 button::after, .entry h4 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.entry h4 button:focus-visible::after, .entry h4 a:focus-visible::after { outline: 3px solid var(--sky); outline-offset: 2px; }
.entry p.sum { margin: 0 0 14px; color: var(--ink-muted); font-size: 13px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entry-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.entry-foot .ro { font-size: 13px; color: var(--ink-soft); }
.entry-foot .ro b { font-weight: 700; } /* same font and size as the words; only colour and weight differ */
.entry-foot .ro b.r { color: var(--risk); }
.entry-foot .ro b.o { color: var(--opp); }
.entry-foot .small { margin-left: auto; text-align: right; font-size: 12px; color: var(--ink-muted); } /* bottom-right corner */

/* Tags */
.tag { font: 600 12px/1 var(--body); padding: 4px 8px; border-radius: 5px; border: 1px solid transparent; }
.tag.new { background: var(--sky); border-color: var(--sky); color: var(--white); }       /* filled sky, white letters */
.tag.emerging { background: var(--white); border-color: var(--navy); color: var(--navy); } /* navy outline */

/* ---------- Risk Foresight tool: page title, filters, search ---------- */
.crumbs { margin-bottom: 8px; font: 14px/1.2 var(--body); color: var(--ink-muted); }
.crumbs button { border: 0; background: none; padding: 0; font: inherit; color: var(--blue); }
.crumbs button:hover { text-decoration: underline; }
.view-title { margin: 0; font: 64px/0.9 var(--display); letter-spacing: .012em; text-transform: uppercase; }
.view-sub { margin: 10px 0 0; color: var(--ink-soft); }
/* Filters: plain words on a thin line, the selected one underlined (deliberately unlike the group pills) */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; margin: 24px 0 44px; border-bottom: 1px solid var(--line-strong); }
.tabs { display: flex; flex-wrap: wrap; gap: 0 30px; }
.tab { display: flex; align-items: baseline; gap: 8px; border: 0; background: none; padding: 12px 0 10px;
  border-bottom: 3px solid transparent; margin-bottom: -1px; transition: border-color .12s; }
.tab .lbl { font: 15px/1 var(--body); color: var(--ink-muted); }
.tab .num { font: 15px/1 var(--body); color: var(--faint); }
.tab:hover .lbl { color: var(--blue); }
.tab[aria-pressed="true"] { border-bottom-color: var(--blue); }
.tab[aria-pressed="true"] .lbl { color: var(--navy); font-weight: 600; }
.tab[aria-pressed="true"] .num { color: var(--ink-soft); font-weight: 600; }
/* Search box (a pill) */
.search { flex: 1; max-width: 560px; margin-left: auto; position: relative; }
.search input { width: 100%; font: 16px var(--body); color: var(--navy); padding: 11px 40px 11px 42px;
  border-radius: 999px; border: 2px solid transparent; background: var(--white); }
.search input:focus { outline: none; border-color: var(--sky); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); }
.search .clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none;
  border: 0; background: transparent; padding: 4px 8px; color: var(--ink-muted); font: 20px/1 var(--display); }
.search.has-text .clear { display: block; }

/* ---------- Trend panel: headings, impacts, signals ---------- */
.d-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line-strong); padding-bottom: 8px; }
.d-head h3 { margin: 0; font: 40px/0.9 var(--display); letter-spacing: .012em; text-transform: uppercase; }
.d-head p { margin: 0 0 2px; color: var(--ink-muted); font-size: 14.5px; font-style: italic; }
.legend { margin-left: auto; display: flex; gap: 14px; font: 600 13px/1 var(--body); }
.legend .r { color: var(--risk); }
.legend .o { color: var(--opp); }
/* Impacts: 1st / 2nd / 3rd order on the left, effects on the right */
.order { display: grid; grid-template-columns: 150px 1fr; gap: 0 28px; border-bottom: 1px solid var(--line-strong); padding: 22px 0 10px; }
.order-label .n { display: block; font: 74px/0.8 var(--display); }
.order-label .w { display: block; margin-top: 8px; font: 600 13px/1.2 var(--body); color: var(--ink-soft); }
.order-label .h { display: block; margin-top: 4px; font-size: 14px; font-style: italic; color: var(--ink-muted); }
.effect { padding: 2px 0 14px; }
.effect + .effect { border-top: 1px solid var(--line); padding-top: 14px; }
.effect .kind-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 3px; }
.effect .rt { font: 700 12.5px/1 var(--body); letter-spacing: .02em; text-transform: uppercase; }
.effect.risk .rt { color: var(--risk); }
.effect.opportunity .rt { color: var(--opp); }
.effect .who { font-size: 14px; color: var(--ink-muted); }
.effect .who em { font-style: normal; color: var(--ink-soft); font-weight: 600; }
.effect p { margin: 0; font-size: 16.5px; }
.none { color: var(--ink-muted); font-style: italic; margin: 4px 0 14px; }
/* Signals: counts by type, then a plain ruled list */
.fig { display: flex; align-items: baseline; gap: 5px; }
.fig b { font: 700 15px/1 var(--body); }
.fig span { font: 15px/1 var(--body); color: var(--ink-muted); }
.ev-figs { display: flex; gap: 28px; flex-wrap: wrap; padding: 16px 0 14px; border-bottom: 1px solid var(--line-strong); }
.ev-list { list-style: none; padding: 0; margin: 0; }
.ev { display: grid; grid-template-columns: 110px 1fr; gap: 4px 28px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ev .k { font: 700 12.5px/1.4 var(--body); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-muted); }
.ev .k.observed { color: var(--navy); }
.ev .k.forecast { color: var(--blue); }
.ev .k.survey { color: var(--sky-dark); }
.ev p { margin: 0 0 4px; font-size: 15.5px; }
.ev .src { font-size: 14px; color: var(--ink-muted); }
/* Notes and "nothing found" */
.notice { margin-bottom: 22px; padding: 12px 16px; border-radius: 12px; background: var(--grey); font-size: 15.5px; color: var(--ink-soft); }
.notice b { margin-right: 6px; font: 700 13px/1 var(--body); color: var(--navy); }
.empty-state { padding: 48px 32px; border-radius: var(--radius); background: var(--grey); }
.empty-state h3 { margin: 0 0 8px; font: 40px/1 var(--display); text-transform: uppercase; }
.empty-state p { margin: 0 0 20px; color: var(--ink-soft); }

/* ---------- FAQ: questions that open and close ---------- */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--line); padding: 16px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font: 600 17px/1.4 var(--body); color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 26px/1 var(--display); color: var(--blue); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; font-size: 16px; }

/* ---------- Footer: white and quiet ---------- */
.site footer { background: var(--white); color: var(--ink-muted); border-top: 1px solid var(--line); }
.site footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 28px; font-size: 14px; }
footer .brand-small { font: 26px/1 var(--display); color: var(--navy); letter-spacing: .02em; }
footer a { color: var(--ink-soft); }
footer a:hover { color: var(--blue); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1000px) {
  .site section[id] { scroll-margin-top: 140px; }
  .hero h2 { font-size: 68px; }
  .block-head h2 { font-size: 44px; }
  .cols { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 900px) {
  .top-inner { flex-wrap: wrap; padding: 14px 16px; gap: 10px 12px; }
  .brand { flex-direction: column; gap: 4px; }
  .page-tabs { order: 3; flex-basis: 100%; margin-left: 0; gap: 24px; } /* tabs get their own line, and stay visible */
  .page-tabs a { font-size: 15px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .grid { grid-template-columns: 1fr; }
  .order { grid-template-columns: 1fr; }
  .order-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
  .order-label .n { font-size: 52px; }
  .ev { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .site .wrap { padding: 0 16px; }
  .site section { padding: 64px 0; }
  .site .hero { margin: 10px 10px 0; padding: 64px 8px 72px; border-radius: 22px; }
  .hero h2 { font-size: 52px; }
  .block-head h2 { font-size: 38px; }
  .site .closing { margin: 0 10px 10px; padding: 64px 8px; border-radius: 22px; }
  .closing h2 { font-size: 44px; }
}

/* ---------- Resource articles (DESIGN.md: resource article template) ---------- */
/* ---------- Article header ---------- */
.site .art-head { padding: 56px 0 32px; }
.crumb { margin: 0 0 18px; font-size: 14px; color: var(--ink-muted); }
.crumb a { color: var(--ink-muted); text-decoration: none; }
.crumb a:hover { color: var(--blue); }
.art-head .labels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.art-head .labels .chip-label { margin: 0; }
.chip-label.soft { background: var(--grey); color: var(--ink-soft); }
.art-head h2 { margin: 0 0 18px; max-width: 900px; font: 64px/0.98 var(--display); text-transform: uppercase; letter-spacing: .012em; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 14px; color: var(--ink-muted); }
.author { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--grey); border: 1px dashed var(--line-strong); display: grid; place-items: center; font: 600 11px var(--body); color: var(--faint); }
.author b { display: block; color: var(--navy); font-weight: 600; }

/* Cover picture (a navy panel until real artwork exists) */
.cover { aspect-ratio: 21 / 8; border-radius: var(--radius-lg); display: flex; align-items: flex-end; padding: 36px 40px; color: var(--white);
  background: radial-gradient(120% 140% at 90% 100%, #1B1BA8 0%, #06064A 45%, var(--navy) 85%); }
.cover span { font: 72px/0.9 var(--display); text-transform: uppercase; letter-spacing: .015em; max-width: 12ch; }

/* ---------- Two columns: sticky contents on the left, article on the right ---------- */
.site .art-body { padding: 56px 0 80px; }
.art-grid { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: 64px; }
.toc { position: sticky; top: 104px; align-self: start; }
.toc p { margin: 0 0 12px; font: 600 13px/1 var(--body); color: var(--ink-muted); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 8px 0 8px 14px; margin-left: -1px; border-left: 2px solid transparent;
  color: var(--ink-muted); text-decoration: none; font-size: 14px; line-height: 1.35; transition: color .12s, border-color .12s; }
.toc a b { font-weight: 600; color: var(--faint); }
.toc a:hover { color: var(--blue); }
.toc a.on { color: var(--navy); border-left-color: var(--blue); }
.toc a.on b { color: var(--blue); }
.toc .btn { margin-top: 22px; }

.article { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.article section { scroll-margin-top: 104px; }
.site .article section { padding: 0; margin: 0 0 48px; }
.article h3 { margin: 0 0 14px; font: 36px/1 var(--display); text-transform: uppercase; letter-spacing: .015em; color: var(--navy); }
.article h3 .n { color: var(--sky); margin-right: 10px; }
.article p { margin: 0 0 16px; }

/* Key takeaways box */
.takeaways { background: var(--grey); border-radius: var(--radius); padding: 22px 26px; }
.takeaways h4 { margin: 0 0 10px; font: 22px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--navy); }
.takeaways ul { margin: 0; padding-left: 20px; font-size: 16.5px; }
.takeaways li + li { margin-top: 6px; }

/* Signal callouts */
.signal { border-left: 3px solid var(--blue); background: var(--white); padding: 4px 0 4px 18px; margin: 0 0 18px; }
.signal .k { display: inline-block; margin-bottom: 6px; padding: 3px 8px; border-radius: 5px; background: var(--blue-tint); color: var(--blue); font: 600 12px/1.3 var(--body); }
.signal .k.observed { background: var(--navy); color: var(--white); }
.signal p { margin: 0 0 4px; font-size: 17px; color: var(--navy); }
.signal .src { font-size: 13.5px; color: var(--ink-muted); }

/* Three orders of impact block */
.orders3 { border-radius: var(--radius); background: var(--grey); padding: 8px 24px; }
.orders3 .row { display: grid; grid-template-columns: 64px 1fr; gap: 0 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.orders3 .row:first-child { border-top: 0; }
.orders3 .n { font: 38px/0.9 var(--display); color: var(--navy); }
.orders3 .n small { display: block; font: 600 12px/1.4 var(--body); color: var(--ink-muted); margin-top: 4px; }
.orders3 .fx + .fx { margin-top: 10px; }
.orders3 .rt { font: 700 12px/1 var(--body); letter-spacing: .02em; text-transform: uppercase; }
.orders3 .rt.risk { color: var(--risk); } .orders3 .rt.opportunity { color: var(--opp); }
.orders3 .who { font-size: 13px; color: var(--ink-muted); margin-left: 6px; }
.orders3 p { margin: 3px 0 0; font-size: 16px; color: var(--ink-soft); line-height: 1.55; }

/* Mid-article call to action */
.cta { border-radius: var(--radius); padding: 28px 30px; color: var(--white); margin: 0 0 48px;
  background: radial-gradient(120% 140% at 100% 100%, #1B1BA8 0%, #06064A 45%, var(--navy) 85%); }
.cta h4 { margin: 0 0 8px; font: 34px/1 var(--display); text-transform: uppercase; letter-spacing: .015em; }
.cta p { margin: 0 0 18px; color: #C9C9E0; font-size: 16px; }


/* Author box */
.author-box { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; background: var(--grey); border-radius: var(--radius); padding: 20px 22px; }
.author-box .avatar { width: 64px; height: 64px; font-size: 12px; }
.author-box b { display: block; font: 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); margin-bottom: 4px; }
.author-box p { margin: 0; font-size: 15px; color: var(--ink-muted); }

/* Related resources */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.rel { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; }
.rel .thumb { aspect-ratio: 16 / 9; border-radius: 14px; display: flex; align-items: flex-end; padding: 16px 18px; color: var(--white);
  background: radial-gradient(120% 120% at 85% 100%, #1B1BA8 0%, #06064A 45%, var(--navy) 85%); font: 28px/0.95 var(--display); text-transform: uppercase; }
.rel .thumb.v2 { background: radial-gradient(120% 120% at 10% 0%, #0B6E99 0%, #05305A 40%, var(--navy) 85%); }
.rel .thumb.v3 { background: radial-gradient(120% 120% at 100% 0%, #2222EC 0%, #0A0A60 45%, var(--navy) 85%); }
.rel .type { font: 600 12.5px/1 var(--body); color: var(--blue); }
.rel h4 { margin: 0; font: 22px/1.02 var(--display); text-transform: uppercase; letter-spacing: .02em; transition: color .12s; }
.rel:hover h4 { color: var(--blue); }

/* Standfirst, sub-headings, lists, tables, notes and references inside an article */
.article .standfirst { font-size: 20px; line-height: 1.55; color: var(--navy); }
.article h4.sub { margin: 30px 0 10px; font: 24px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.article ul, .article ol { margin: 0 0 16px; padding-left: 22px; }
.article li + li { margin-top: 6px; }
.article a { color: var(--blue); }
.article strong { color: var(--navy); }
.article .table-wrap { margin: 4px 0 22px; overflow-x: auto; }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.article th { text-align: left; vertical-align: bottom; padding: 10px 14px 8px 0; border-bottom: 1px solid var(--line-strong); font: 600 13px/1.3 var(--body); color: var(--ink-muted); }
.article td { vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.article .note { font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); }
.article .refs p { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.takeaways ol { margin: 0; padding-left: 20px; font-size: 16.5px; }
.takeaways p { font-size: 16.5px; }
.article .faq { max-width: none; }
.article .faq details p { font-size: 16px; }
.toc { max-height: calc(100vh - 128px); overflow-y: auto; }

/* ---------- Exhibits: diagrams inside articles, drawn in the site's own fonts and colours ---------- */
.exhibit { margin: 12px 0 14px; }
.exhibit .ex-title { margin: 0 0 4px; font: 26px/1.05 var(--display); text-transform: uppercase; letter-spacing: .015em; color: var(--navy); }
.exhibit .ex-cap { margin: 0 0 22px; font-size: 14px; color: var(--ink-muted); }
.ex-box { position: relative; background: var(--grey); border-radius: 14px; padding: 16px 18px; }
.ex-box.accent { background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }
.ex-box b { display: block; margin: 0 0 8px; font: 22px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.ex-box p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.ex-box p.m { color: var(--ink-muted); }
/* Arrows: a thin line with a small head. r = into the box from the left, l = into the box from the right,
   d = into the box from above, u = out of the box upwards */
.ex-arrow { position: absolute; background: var(--line-strong); }
.ex-arrow::after { content: ""; position: absolute; border-style: solid; }
.ex-arrow.r { top: 50%; left: calc(-1 * var(--gap)); width: var(--gap); height: 1.5px; }
.ex-arrow.r::after { right: -1px; top: 50%; transform: translateY(-50%); border-width: 4.5px 0 4.5px 7px; border-color: transparent transparent transparent var(--line-strong); }
.ex-arrow.l { top: 50%; left: 100%; width: var(--gap); height: 1.5px; }
.ex-arrow.l::after { left: -1px; top: 50%; transform: translateY(-50%); border-width: 4.5px 7px 4.5px 0; border-color: transparent var(--line-strong) transparent transparent; }
.ex-arrow.d { left: var(--arrow-x, 50%); top: calc(-1 * var(--vgap)); width: 1.5px; height: var(--vgap); }
.ex-arrow.d::after { bottom: -1px; left: 50%; transform: translateX(-50%); border-width: 7px 4.5px 0 4.5px; border-color: var(--line-strong) transparent transparent transparent; }
.ex-arrow.u { left: 50%; top: calc(-1 * var(--vgap)); width: 1.5px; height: var(--vgap); }
.ex-arrow.u::after { top: -1px; left: 50%; transform: translateX(-50%); border-width: 0 4.5px 7px 4.5px; border-color: transparent transparent var(--line-strong) transparent; }
.ex-arrow .lbl { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; color: var(--ink-muted); }
.exhibit .again { display: none; margin: 0; font-size: 13px; color: var(--ink-muted); }
.ex-legend { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 13px; color: var(--ink-muted); }
.ex-legend i { width: 16px; height: 16px; border-radius: 4px; background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }

/* Lifecycle: four boxes in a row, with brackets above */
.ex-life { --gap: 26px; --vgap: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px var(--gap); }
.ex-life .brk { position: relative; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); text-align: center; font: 600 13px/1.3 var(--body); color: var(--navy); }
.ex-life .brk::before, .ex-life .brk::after { content: ""; position: absolute; bottom: -7px; width: 1px; height: 7px; background: var(--line-strong); }
.ex-life .brk::before { left: 0; } .ex-life .brk::after { right: 0; }
.ex-life .brk.loop { grid-column: 1 / 4; } .ex-life .brk.erm { grid-column: 4; }

/* Loop: six boxes, 1-2-3 across the top and 4-5-6 back along the bottom */
.ex-loop { --gap: 36px; --vgap: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vgap) var(--gap); }
.ex-loop .s1 { grid-area: 1 / 1; } .ex-loop .s2 { grid-area: 1 / 2; } .ex-loop .s3 { grid-area: 1 / 3; }
.ex-loop .s4 { grid-area: 2 / 3; } .ex-loop .s5 { grid-area: 2 / 2; } .ex-loop .s6 { grid-area: 2 / 1; }

/* Chain: one row per step, label on the left */
.ex-chain { --vgap: 24px; --arrow-x: 40px; display: grid; gap: var(--vgap); }
.ex-chain .ex-box { display: grid; grid-template-columns: 150px 1fr; gap: 4px 20px; align-items: center; }
.ex-chain .ex-box b { margin: 0; }

@media (max-width: 1000px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } /* minmax: a wide table scrolls inside itself, not the page */
  .toc { position: static; max-height: none; }
  .toc .btn { display: none; }
  .related { grid-template-columns: 1fr 1fr; }
  .art-head h2 { font-size: 50px; }
  .cover span { font-size: 52px; }
}
@media (max-width: 700px) {
  .art-head h2 { font-size: 38px; }
  .cover { aspect-ratio: 16 / 10; padding: 22px; border-radius: 22px; }
  .cover span { font-size: 38px; }
  .article { font-size: 17px; }
  .article h3 { font-size: 30px; }
  .article .standfirst { font-size: 18px; }
  .related { grid-template-columns: 1fr; }
  .orders3 { padding: 4px 16px; }
  .orders3 .row { grid-template-columns: 1fr; gap: 6px; }
  /* Exhibits stack into one column; every arrow points down */
  .ex-life, .ex-loop { grid-template-columns: 1fr; }
  .ex-loop > * { grid-area: auto !important; }
  .ex-life .brk.loop, .ex-life .brk.erm { grid-column: auto; }
  .ex-life .brk.loop { order: 0; } .ex-life .b1, .ex-life .b2, .ex-life .b3 { order: 1; } .ex-life .brk.erm { order: 2; } .ex-life .b4 { order: 3; }
  .ex-life .b4 .ex-arrow, .ex-loop .ex-arrow.u { display: none; }
  .exhibit .ex-arrow.r, .exhibit .ex-arrow.l { left: 50%; top: calc(-1 * var(--vgap)); width: 1.5px; height: var(--vgap); }
  .exhibit .ex-arrow.r::after, .exhibit .ex-arrow.l::after { left: 50%; right: auto; top: auto; bottom: -1px; transform: translateX(-50%); border-width: 7px 4.5px 0 4.5px; border-color: var(--line-strong) transparent transparent transparent; }
  .ex-life { --vgap: 22px; row-gap: var(--vgap); }
  .ex-loop { --vgap: 22px; }
  .exhibit .again { display: block; }
  .ex-chain .ex-box { grid-template-columns: 1fr; }
}

/* ---------- Page title on white (listing and legal pages: no hero panel) ---------- */
.site .page-head { padding: 72px 0 40px; }
.page-head h2 { margin: 0; max-width: 900px; font: 64px/0.98 var(--display); text-transform: uppercase; letter-spacing: .012em; }
.page-head .intro { margin: 20px 0 0; max-width: 720px; font-size: 17.5px; line-height: 1.6; color: var(--ink-soft); }
.page-head .reviewed { margin: 14px 0 0; font-size: 13px; color: var(--ink-muted); }

/* ---------- Legal pages: one reading column, sections split by thin lines ---------- */
.site .policy { padding: 0 0 96px; }
.policy .wrap > div { max-width: 720px; }
.policy-sec { padding: 26px 0; border-top: 1px solid var(--line); }
.policy-sec h3 { margin: 0 0 12px; font: 28px/1 var(--display); text-transform: uppercase; letter-spacing: .015em; color: var(--navy); }
.policy-sec p { margin: 0 0 12px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.policy-sec p:last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  .page-head h2 { font-size: 52px; }
}
@media (max-width: 700px) {
  .site .page-head { padding: 44px 0 28px; }
  .page-head h2 { font-size: 40px; }
  .site .policy { padding-bottom: 64px; }
  .policy-sec h3 { font-size: 24px; }
  .policy-sec p { font-size: 16px; }
}

@media print {
  header.top, .toolbar { display: none !important; }
  .entry { break-inside: avoid; }
}