@charset "utf-8";
/* ==========================================================================
   Page-level components. Tokens only, no new colors, no new sizes.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.hero { padding-top: var(--s-7); padding-bottom: 0; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.hero .d1 { text-align: center; margin: 0 auto; max-inline-size: 16ch; }
.hero-sub {
  text-align: center; margin: var(--s-3) auto 0; max-inline-size: 44ch;
  font-size: clamp(17px, 1rem + .5vw, 23px); font-weight: 700; color: var(--accent-deep);
  letter-spacing: -0.01em;
}
.hero-say { text-align: center; margin: var(--s-3) auto 0; max-inline-size: 54ch; font-size: var(--t-17); line-height: 1.55; color: var(--ink-soft); }
.hero-cta { justify-content: center; margin-top: var(--s-5); }
.heroart { margin: var(--s-6) auto 0; max-width: 1010px; }
.heroart img { width: 100%; }

.startline {
  margin: var(--s-6) 0 var(--s-3); padding-top: var(--s-4);
  border-top: 1px solid var(--line); font-size: var(--t-15); color: var(--ink-faint);
}
.startline b { color: var(--navy); }

.prodrow { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.prodrow li { border-left: 1px solid var(--line); }
.prodrow li:nth-child(4n+1) { border-left: 0; }
.prodrow li:nth-child(n+5) { border-top: 1px solid var(--line); }
.prodrow a {
  display: block; padding: var(--s-4); text-decoration: none; height: 100%;
  transition: background-color var(--ease);
}
.prodrow a:hover { background: var(--bg); }
.prodrow img { width: 30px; height: 30px; margin-bottom: var(--s-2); }
.prodrow b { display: block; font-size: var(--t-16); color: var(--navy); font-weight: 700; }
.prodrow span { display: block; font-size: var(--t-14); line-height: 1.45; color: var(--ink-soft); margin-top: 3px; }
.prodrow em {
  display: block; font: 400 var(--t-11)/1.4 var(--mono); font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); margin-top: var(--s-2);
}

/* --- Spec band ---------------------------------------------------------- */
.spec-band { background: var(--bg); border-bottom: 1px solid var(--line); }
.spec-band .grid { margin-top: var(--s-4); }

/* --- Coverage bars ------------------------------------------------------ */
.bar { display: flex; gap: 2px; margin-bottom: var(--s-4); }
.bar i { display: block; height: 5px; border-radius: 1px; }
.bar .on { background: var(--accent); }
.bar .off { background: var(--line); }
.gapcards p.miss { color: var(--navy); font-weight: 600; }
.gapcards .k { margin-top: var(--s-3); }
.gapcards .k:first-of-type { margin-top: 0; }

/* --- Three moments ------------------------------------------------------ */
.moments { display: grid; gap: var(--s-8); margin-top: var(--s-6); }
.moment-head { margin-bottom: var(--s-4); }
.moment-head .when {
  display: block; font: 600 var(--t-11)/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--s-2);
}
.moment-head b { display: block; font-size: var(--t-23); color: var(--navy); font-weight: 800; letter-spacing: -0.012em; margin-bottom: var(--s-2); }
.moment-head p { font-size: var(--t-16); line-height: 1.6; color: var(--ink-soft); max-inline-size: 62ch; }

/* --- Two doors on the dark act ------------------------------------------ */
.twodoor {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s-7);
  border-top: 1px solid var(--on-dark-line);
}
.twodoor > div { padding: var(--s-6) var(--s-6) 0; border-left: 1px solid var(--on-dark-line); }
.twodoor > div:first-child { border-left: 0; padding-left: 0; }
.twodoor b { display: block; color: var(--on-dark); font-size: var(--t-17); margin-bottom: var(--s-2); }
.twodoor p { font-size: var(--t-15); line-height: 1.6; color: var(--on-dark-soft); margin-bottom: var(--s-4); max-inline-size: 40ch; }

/* --- Section intro pattern shared by inner pages ------------------------ */
.page-head { padding-block: var(--s-7) var(--s-6); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.page-head .d1 { max-inline-size: 22ch; }
.page-head .lede { margin-top: var(--s-4); max-inline-size: 62ch; }
.page-head .btn-row { margin-top: var(--s-5); }

/* --- Breadcrumbs -------------------------------------------------------- */
.crumbs { display: flex; gap: var(--s-2); list-style: none; font-size: var(--t-13); color: var(--ink-faint); margin-bottom: var(--s-4); flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line); }
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--accent-deep); text-decoration: underline; }

/* --- FAQ / accordion ---------------------------------------------------- */
.faq { border-top: 1px solid var(--navy); margin-top: var(--s-6); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s-4) var(--s-6) var(--s-4) 0;
  position: relative; font-size: var(--t-17); font-weight: 700; color: var(--navy); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: var(--s-2); top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq .a { padding: 0 var(--s-6) var(--s-5) 0; font-size: var(--t-16); line-height: 1.65; color: var(--ink-soft); max-inline-size: 74ch; }
.faq .a > * + * { margin-top: var(--s-3); }

/* --- Doc layout --------------------------------------------------------- */
.doc-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: var(--s-8); align-items: start; }
/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   own content and pushes the page sideways. The documentation nav did exactly
   that on a phone, by eleven pixels. */
.doc-layout > * { min-width: 0; }
.doc-nav ul, .doc-nav li, .doc-nav a { min-width: 0; overflow-wrap: anywhere; }
.doc-nav { position: sticky; top: calc(var(--header-h) + var(--s-4)); font-size: var(--t-14); }
.doc-nav h2 { font: 600 var(--t-11)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-3); }
.doc-nav ul { list-style: none; border-left: 1px solid var(--line); }
.doc-nav li a { display: block; padding: 6px var(--s-3); color: var(--ink-soft); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; }
.doc-nav li a:hover { color: var(--navy); background: var(--bg-soft); }
.doc-nav li a[aria-current="page"] { color: var(--accent-deep); border-left-color: var(--accent); font-weight: 600; }
.doc-body h2 { font-size: var(--t-23); margin-top: var(--s-7); margin-bottom: var(--s-3); }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font-size: var(--t-17); margin-top: var(--s-5); margin-bottom: var(--s-2); }
.doc-body p, .doc-body li { font-size: var(--t-16); line-height: 1.68; color: var(--ink-soft); }
.doc-body p + p { margin-top: var(--s-3); }
.doc-body ul, .doc-body ol { margin: var(--s-3) 0 0 var(--s-5); }
.doc-body li + li { margin-top: var(--s-2); }
.doc-body pre {
  background: var(--navy-deep); color: #d6e2f2; padding: var(--s-4); border-radius: var(--r-md);
  overflow-x: auto; font: 400 var(--t-13)/1.6 var(--mono); margin-top: var(--s-4);
}
.doc-body code { font: 400 .92em/1 var(--mono); background: var(--bg-paper); padding: 2px 5px; border-radius: 3px; }
.doc-body pre code { background: none; padding: 0; color: inherit; }
.doc-body table { margin-top: var(--s-4); }
.doc-body th[scope="col"] { text-align: left; font-size: var(--t-13); text-transform: uppercase; letter-spacing: .07em; font-family: var(--mono); color: var(--ink-faint); border-bottom: 1px solid var(--navy); padding: 0 var(--s-4) var(--s-2) 0; }
/* A row header is a data cell that happens to name its row. It should read as
   body text, not as a column heading. */
.doc-body th[scope="row"] { text-align: left; font-size: var(--t-15); font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--line); padding: var(--s-3) var(--s-4) var(--s-3) 0; vertical-align: top; }
.doc-body td { font-size: var(--t-15); color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: var(--s-3) var(--s-4) var(--s-3) 0; vertical-align: top; }
.callout { border-left: 3px solid var(--accent); background: var(--bg-soft); padding: var(--s-4) var(--s-5); margin-top: var(--s-5); border-radius: 0 var(--r-md) var(--r-md) 0; }
.callout b { color: var(--navy); }

/* --- Cards for index listings (docs, partners) -------------------------- */
.cards { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--navy); margin-top: var(--s-6); }
.cards > a { display: block; padding: var(--s-5); border-left: 1px solid var(--line); text-decoration: none; transition: background-color var(--ease); }
.cards > a:first-child { border-left: 0; padding-left: 0; }
.cards > a:hover { background: var(--bg-soft); }
.cards .k { display: block; font: 600 var(--t-11)/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--s-2); }
.cards b { display: block; font-size: var(--t-17); color: var(--navy); margin-bottom: var(--s-2); }
.cards p { font-size: var(--t-14); line-height: 1.55; color: var(--ink-soft); }

/* --- Forms -------------------------------------------------------------- */
.form { max-width: 560px; }
.field { margin-top: var(--s-4); }
.field label { display: block; font-size: var(--t-14); font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: var(--s-3); border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
  font: 400 var(--t-16)/1.4 var(--sans);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field .help { font-size: var(--t-13); color: var(--ink-faint); margin-top: 5px; }
.form .btn { margin-top: var(--s-5); }
.notice { padding: var(--s-4); border-radius: var(--r-sm); font-size: var(--t-15); margin-bottom: var(--s-4); }
.notice-bad  { background: color-mix(in srgb, var(--bad) 12%, transparent); border: 1px solid var(--bad); color: var(--ink); }
.notice-good { background: color-mix(in srgb, var(--good) 12%, transparent); border: 1px solid var(--good); color: var(--ink); }

@media (max-width: 1050px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .doc-nav { position: static; }
  .cards { grid-template-columns: 1fr 1fr; }
  .cards > a:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .cards > a:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) { .prodrow { grid-template-columns: repeat(2,1fr); }
  .prodrow li:nth-child(4n+1) { border-left: 1px solid var(--line); }
  .prodrow li:nth-child(odd) { border-left: 0; }
  .prodrow li:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 720px) {
  .twodoor { grid-template-columns: 1fr; }
  .twodoor > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--on-dark-line); padding-top: var(--s-5); }
  .twodoor > div:first-child { border-top: 0; padding-top: var(--s-6); }
  .cards { grid-template-columns: 1fr; }
  .cards > a { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line); }
  .cards > a:first-child { border-top: 0; }
}
@media (max-width: 560px) { .prodrow { grid-template-columns: 1fr; }
  .prodrow li { border-left: 0 !important; border-top: 1px solid var(--line); }
  .prodrow li:first-child { border-top: 0; } }

/* Documentation pager */
.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.doc-pager a { display: block; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; transition: border-color var(--ease); }
.doc-pager a:hover { border-color: var(--accent); }
.doc-pager .next { text-align: right; grid-column: 2; }
.doc-pager span { display: block; font: 600 var(--t-11)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-2); }
.doc-pager b { font-size: var(--t-15); color: var(--navy); }
@media (max-width: 560px) { .doc-pager { grid-template-columns: 1fr; } .doc-pager .next { grid-column: 1; text-align: left; } }

/* Partner portal header */
.portal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap; }
.portal-out { margin: 0; }

/* --- Search page -------------------------------------------------------- */
.searchbar { display: flex; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }
.searchbar input { flex: 1 1 320px; min-height: 50px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 var(--t-17)/1.4 var(--sans); }
.searchbar input:focus { border-color: var(--accent); }
.results { list-style: none; border-top: 1px solid var(--navy); }
.results li { border-bottom: 1px solid var(--line); }
.results a { display: block; padding: var(--s-4) 0; text-decoration: none; }
.results a:hover { background: var(--bg-soft); }
.results .kind { float: right; font: 600 var(--t-11)/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--accent-deep); }
.results b { display: block; font-size: var(--t-19); color: var(--navy); margin-bottom: var(--s-2); }
.results .snip { display: block; font-size: var(--t-15); line-height: 1.6; color: var(--ink-soft); max-inline-size: 80ch; }
.results .url { display: block; font: 400 var(--t-12)/1.5 var(--mono); color: var(--ink-faint); margin-top: var(--s-2); }
.results mark, .answer mark { background: var(--accent-tint); color: inherit; border-radius: 2px; padding: 0 2px; }

.answer { border-left: 3px solid var(--accent); padding-left: var(--s-5); max-inline-size: 78ch; }
.answer-body p { font-size: var(--t-17); line-height: 1.65; color: var(--ink); }
.answer-body p + p { margin-top: var(--s-3); }
.answer-quotes { list-style: none; margin-top: var(--s-3); }
.answer-quotes li { font: italic var(--t-17)/1.6 var(--serif); color: var(--ink); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.answer-quotes li:last-child { border-bottom: 0; }
.cite { font: 600 var(--t-11)/1 var(--mono); color: var(--accent-deep); vertical-align: super; margin-left: 2px; }
.answer-sources { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.answer-sources .k { display: block; font: 600 var(--t-11)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-3); }
.answer-sources ol { list-style: none; }
.answer-sources li { display: flex; gap: var(--s-3); align-items: baseline; padding: 4px 0; font-size: var(--t-15); }
.answer-sources .n { font: 600 var(--t-11)/1 var(--mono); color: var(--accent-deep); }
.answer-note { margin-top: var(--s-4); font-size: var(--t-13); line-height: 1.55; color: var(--ink-faint); max-inline-size: 70ch; }

/* --- Docs: table of contents rail --------------------------------------- */
.doc-layout.has-toc { grid-template-columns: 230px minmax(0,1fr) 190px; }
.doc-toc { position: sticky; top: calc(var(--header-h) + var(--s-4)); font-size: var(--t-13); }
.doc-toc h2 { font: 600 var(--t-11)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-3); }
.doc-toc ul { list-style: none; border-left: 1px solid var(--line); }
.doc-toc a { display: block; padding: 5px var(--s-3); color: var(--ink-faint); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; line-height: 1.4; }
.doc-toc a:hover { color: var(--navy); }
.doc-toc .lvl-3 a { padding-left: var(--s-5); font-size: var(--t-12); }
.doc-body hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
.doc-body b { color: var(--navy); }
@media (max-width: 1180px) { .doc-layout.has-toc { grid-template-columns: 230px minmax(0,1fr); } .doc-toc { display: none; } }
@media (max-width: 1050px) { .doc-layout.has-toc { grid-template-columns: 1fr; } }

/* ---- reader assistant -------------------------------------------------
   Part of the page, not floating over it. No shadow, no rounded chat bubble,
   no accent-colored attention grab: it sits inside the same hairline grammar
   as everything else and waits to be used. */
.assist {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-6) 0;
  margin: var(--s-7) 0;
}
.assist-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.assist-title { font-size: var(--t-19); font-weight: 700; letter-spacing: -0.012em; }
.assist-dismiss {
  font: inherit; font-size: var(--t-13); color: var(--ink-faint);
  background: none; border: 0; cursor: pointer; padding: 2px 4px;
}
.assist-dismiss:hover { color: var(--ink); text-decoration: underline; }
.assist-sub { color: var(--ink-soft); font-size: var(--t-14); margin: var(--s-2) 0 var(--s-4); max-width: 62ch; }

.assist-form { display: flex; gap: var(--s-2); max-width: 560px; }
.assist-form input {
  flex: 1 1 auto; font: inherit; padding: 10px 13px;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--bg); color: var(--ink); min-width: 0;
}
.assist-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.assist-suggest { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; }
.assist-suggest button {
  font: inherit; font-size: var(--t-13); color: var(--ink);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; cursor: pointer; text-align: left;
}
.assist-suggest button:hover { border-color: var(--accent); color: var(--accent-deep); }

.assist-answer { margin-top: var(--s-5); max-width: 68ch; }
.assist-answer:not([hidden]) { border-left: 3px solid var(--accent); padding-left: var(--s-4); }
.assist-status { color: var(--ink-soft); margin: 0; }
.assist-a p { margin: 0 0 var(--s-3); }
.assist-a .answer-quotes { margin: 0 0 var(--s-3); padding-left: var(--s-4); }
.assist-a .answer-quotes li { margin-bottom: var(--s-2); }
.assist-a sup.cite { color: var(--accent-deep); font-weight: 600; }
.assist-src, .assist-mode, .assist-more { font-size: var(--t-13); color: var(--ink-soft); margin: 0 0 var(--s-2); }
.assist-mode { font-style: italic; }

/* The one offer of help. Anchored to the end of the document, not to the
   viewport: it never covers the page and never follows the reader down it. */
.assist-offer {
  border-top: 2px solid var(--accent);
  background: var(--accent-tint);
  padding: var(--s-5) var(--s-5) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
  align-items: flex-start;
}
.assist-offer-t { margin: 0; font-weight: 560; max-width: 60ch; }
.assist-offer-a { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.assist-offer-x {
  font: inherit; font-size: var(--t-14); color: var(--ink-soft);
  background: none; border: 0; cursor: pointer; text-decoration: underline;
}
.assist-in { animation: assist-rise 260ms ease-out; }
@keyframes assist-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .assist-in { animation: none; } }

@media (min-width: 720px) {
  .assist-offer { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- changelog and the human sitemap ---------------------------------- */
.log-year { border-top: 1px solid var(--line); padding-top: var(--s-5); margin-bottom: var(--s-6); }
.log-year > .h3 { color: var(--ink-faint); margin-bottom: var(--s-4); }
.log-entry { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.log-entry:last-child { border-bottom: 0; }
.log-meta { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.log-meta time { color: var(--ink-faint); font-size: var(--t-13); }
.log-kind { font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 660; padding: 2px 7px; border-radius: 2px; border: 1px solid var(--line); color: var(--ink-soft); }
.log-kind.k-added { border-color: var(--good); color: var(--good); }
.log-kind.k-fixed { border-color: var(--accent); color: var(--accent-deep); }
.log-kind.k-removed { border-color: var(--bad); color: var(--bad); }
.log-body h3 { font-size: var(--t-17); margin-bottom: var(--s-2); }
.log-body p { margin: 0 0 var(--s-2); color: var(--ink-soft); max-width: 70ch; }

.sitemap-group { border-top: 1px solid var(--line); padding: var(--s-5) 0; }
.sitemap-group > .h3 { margin-bottom: var(--s-4); }
.sitemap-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3);
  /* min(300px, 100%), not 300px: a fixed minimum track is wider than a 320px
     phone and forces the page to scroll sideways. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.sitemap-list li { display: flex; flex-direction: column; gap: 2px; }
.sitemap-list a { font-weight: 560; }
.sitemap-list span { color: var(--ink-soft); font-size: var(--t-13); }

@media (max-width: 640px) {
  .log-entry { grid-template-columns: 1fr; gap: var(--s-2); }
  .log-meta { flex-direction: row; align-items: center; gap: var(--s-3); }
}

/* ---- leadership --------------------------------------------------------
   A row per person, photo left, words right. Not a grid of cards: five faces
   in a grid reads as stock photography, and the point of the section is that
   these are the people who answer the phone. */
#leadership > .wrap > .lede { max-width: 62ch; margin-top: var(--s-3); }
.leaders { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.leader {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--s-5);
  padding: var(--s-5) 0; border-top: 1px solid var(--line); align-items: start;
}
.leader:last-child { border-bottom: 1px solid var(--line); }
.leader-photo img, .leader-photo picture {
  display: block; width: 96px; height: 96px; border-radius: 50%;
  /* Top-weighted, because a centered square crop of a portrait cuts the top of
     the head off and every one of these is a portrait. */
  object-fit: cover; object-position: 50% 12%;
}
/* Grayscale until hover, but only where hovering exists. On a touch screen
   there is no hover, so this would leave every face permanently gray with no
   way to undo it. */
@media (hover: hover) and (pointer: fine) {
  .leader-photo { filter: grayscale(1); transition: filter 180ms ease; }
  .leader:hover .leader-photo { filter: none; }
}
@media (prefers-reduced-motion: reduce) { .leader-photo { transition: none; } }
.leader-text h3 { font-size: var(--t-19); margin: 0; }
.leader-text h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.leader-text h3 a:hover { border-bottom-color: var(--accent); color: var(--accent-deep); }
.leader-role {
  display: block; font-size: var(--t-12); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--accent-deep); font-weight: 620; margin: 4px 0 var(--s-3);
}
.leader-text p { margin: 0; color: var(--ink-soft); max-width: 68ch; }
.leader-more { display: inline-block; margin-top: var(--s-3); font-size: var(--t-14); }

.routing { margin: var(--s-5) 0 0; display: grid; gap: 0; }
.routing > div {
  display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: var(--s-5);
  padding: var(--s-4) 0; border-top: 1px solid var(--line);
}
.routing > div:last-child { border-bottom: 1px solid var(--line); }
.routing dt { font-weight: 620; margin: 0; }
.routing dd { margin: 0; color: var(--ink-soft); }

@media (max-width: 640px) {
  .leader { grid-template-columns: 64px 1fr; gap: var(--s-4); }
  .leader-photo img, .leader-photo picture { width: 64px; height: 64px; }
  .routing > div { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* A button that has to read as a link, for the consent control in the privacy
   page. It is a button because it acts on this page rather than going anywhere. */
.linkish {
  font: inherit; color: var(--accent-deep); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline;
}
.linkish:hover { color: var(--ink); }

/* ---- glossary ---------------------------------------------------------- */
.gloss-jump { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.gloss-jump h2 { font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); margin-bottom: var(--s-3); }
.gloss-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gloss-jump a { font-size: var(--t-14); }

.gloss-group { border-top: 1px solid var(--line); padding-top: var(--s-5); margin-bottom: var(--s-6); }
.gloss-group > .h3 { margin-bottom: var(--s-4); }
.gloss { margin: 0; }
.gloss > div {
  display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; gap: var(--s-5);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--s-5));
}
.gloss > div:target { background: var(--accent-tint); }
.gloss dt { font-weight: 660; margin: 0; }
.gloss dd { margin: 0; color: var(--ink-soft); max-width: 72ch; }
.gloss-link { margin-left: 6px; color: var(--line); text-decoration: none; font-weight: 400; }
.gloss > div:hover .gloss-link { color: var(--accent); }

@media (max-width: 640px) {
  .gloss > div { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* ---- tick lists --------------------------------------------------------
   A marker in the margin rather than a bullet, so a list of what a thing does
   and a list of what it does not are told apart at a glance. */
.ticks { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.ticks li {
  position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line); color: var(--ink-soft); max-width: 66ch;
}
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 22px;
  width: 10px; height: 5px; border-left: 2px solid var(--good);
  border-bottom: 2px solid var(--good); transform: rotate(-45deg);
}
.ticks-no li::before {
  border: 0; width: 11px; height: 2px; background: var(--bad);
  transform: none; top: 25px;
}

.integ-group { border-top: 1px solid var(--line); padding-top: var(--s-5); margin-bottom: var(--s-6); }
.integ-group > .h3 { margin-bottom: var(--s-2); }

.industry { border-top: 1px solid var(--line); padding: var(--s-5) 0; scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.industry:last-of-type { border-bottom: 1px solid var(--line); }
.industry > .h3 { margin-bottom: var(--s-4); }
.industry-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr 1fr; }
.industry-grid .k { display: block; font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: var(--s-2); }
.industry-grid p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
@media (max-width: 720px) { .industry-grid { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ---- reading list ------------------------------------------------------ */
.read-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; }
.read-tags li { font-size: var(--t-12); padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); }
.read-tags span { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.read-item { display: grid; grid-template-columns: 130px 1fr; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.read-item:last-child { border-bottom: 0; }
.read-meta { display: flex; flex-direction: column; gap: 4px; }
.read-meta time { color: var(--ink-faint); font-size: var(--t-13); }
.read-src { font-size: var(--t-12); color: var(--ink-soft); word-break: break-word; }
.read-body h3 { font-size: var(--t-17); margin-bottom: var(--s-3); max-width: 62ch; }
.read-body p { margin: 0; color: var(--ink-soft); max-width: 70ch; }
.read-body blockquote { margin: 0; border-left: 3px solid var(--accent); padding-left: var(--s-4); }
.read-body blockquote cite { display: block; margin-top: var(--s-2); font-style: normal; font-size: var(--t-13); color: var(--ink-faint); }
.read-item-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; }
.read-item-tags li { font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.read-item-tags li::after { content: '·'; margin-left: var(--s-2); }
.read-item-tags li:last-child::after { content: ''; }
@media (max-width: 640px) { .read-item { grid-template-columns: 1fr; gap: var(--s-2); } .read-meta { flex-direction: row; gap: var(--s-3); } }

/* ---- resources --------------------------------------------------------- */
.res-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.res-list li { border-top: 1px solid var(--line); }
.res-list li:last-child { border-bottom: 1px solid var(--line); }
.res-list a { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: var(--s-4); padding: var(--s-4) 0; text-decoration: none; color: inherit; align-items: baseline; }
.res-list b { font-size: var(--t-16); border-left: 3px solid var(--accent); padding-left: var(--s-3); }
.res-list a:hover b { color: var(--accent-deep); }
.res-list span { color: var(--ink-soft); font-size: var(--t-14); }
.res-files { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.res-files li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.res-files span { color: var(--ink-faint); font-size: var(--t-13); }
@media (max-width: 640px) { .res-list a { grid-template-columns: 1fr; gap: var(--s-2); } }

/* A closing step on a page that would otherwise end and leave the reader
   nowhere. Quiet: a rule and a row of links, not another banner. */
.next-steps { border-top: 1px solid var(--line); padding-top: var(--s-5); margin-top: var(--s-6); }
.next-steps .h3 { margin-bottom: var(--s-2); }
.next-steps .sub { margin-bottom: var(--s-4); }

/* --- The 404 handler ---------------------------------------------------
   The address the reader asked for is shown back to them, in mono because it
   is a URL and not prose, and it wraps because a long one otherwise pushes the
   page sideways on a phone. */
.nf-path {
  font: 500 var(--t-14)/1.5 var(--mono);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 2px 6px;
  overflow-wrap: anywhere; word-break: break-word;
}
.nf-search { margin-top: var(--s-5); max-inline-size: 34rem; }
.nf-search label {
  display: block; font: 600 var(--t-12)/1.4 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: var(--s-2);
}
.nf-search-row { display: flex; gap: var(--s-3); align-items: stretch; }
.nf-search-row input {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  padding: 0 var(--s-3); font: 400 var(--t-16)/1 var(--sans);
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.nf-search-row input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}
.nf-search-row .btn { flex: 0 0 auto; }
@media (max-width: 520px) {
  .nf-search-row { flex-direction: column; }
  .nf-search-row .btn { width: 100%; }
}