/* Self hosted variable fonts. font-display:swap so text is never invisible
   while a face loads, which is the FOIT that makes a slow connection look
   broken. size-adjust and the metric overrides keep the fallback close enough
   in size that the swap does not shift the layout. */
@font-face {
  font-family: 'Lexend Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/lexend-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('/fonts/source-sans-3-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3 Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url('/fonts/source-sans-3-latin-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --plane:#fffdf7; --surface:#ffffff; --ink:#051821; --ink2:#1a4645;
  --muted:#4d6462; --border:#e3ddc9; --accent:#ae4f00;
  --accent-dark:#f58800; --accent-ink:#ffffff; --accent-soft:#fdf3e6;
  --muted-dark:#a9c2c2; --support:#f58800;
  --support-dark:#f8bc24;
  /* --brand is the accent under the name the artwork uses, so a generated SVG
     reads as brand coloured without knowing which token it came from. */
  --brand:#ae4f00;
  --inv-plane:#051821; --inv-ink:#ffffff; --inv-ink2:#a9c2c2;
  --display:'Lexend Variable', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; --body:'Source Sans 3 Variable', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --wrap:1120px; --r:12px;
  color-scheme:light;
}
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce) {
  /* Smooth scrolling is motion too. Zeroing animation and transition durations
     does not cover it, so without this a reader who asked for less motion
     still gets a page that glides under them. */
  html { scroll-behavior:auto }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}
body {
  margin:0; background:var(--plane); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg { max-width:100%; height:auto; display:block }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px }
.hp { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip { position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; z-index:100; border-radius:0 0 var(--r) 0; font-weight:600 }
.skip:focus { left:0 }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:3px }

/* type */
h1,h2,h3,h4 { font-family:var(--display); font-weight:600; line-height:1.15;
  letter-spacing:-.015em; margin:0 0 .5em; color:var(--ink) }
h1 { font-size:clamp(2.3rem,5.4vw,3.9rem); letter-spacing:-.03em }
h2 { font-size:clamp(1.6rem,3.2vw,2.4rem); letter-spacing:-.02em }
h3 { font-size:1.22rem }
h4 { font-size:1.02rem; font-family:var(--body); font-weight:700 }
p { margin:0 0 1.05em }
a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover { text-decoration-thickness:2px }
strong { font-weight:650 }
.eyebrow { font-family:var(--body); font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px }
.lede { font-size:clamp(1.06rem,1.9vw,1.28rem); color:var(--ink2); max-width:64ch; line-height:1.6 }

/* layout */
.sec { padding:clamp(52px,7vw,92px) 0 }
.sec.tight { padding:clamp(32px,4vw,54px) 0 }
.sec.invert { background:var(--inv-plane); color:var(--inv-ink) }
.sec.invert h1,.sec.invert h2,.sec.invert h3 { color:var(--inv-ink) }
.sec.invert p { color:var(--inv-ink2) }
.sec.invert { --muted:var(--muted-dark); --support:var(--support-dark);
  --brand:var(--accent-dark) }
.sec.invert .eyebrow, .sec.invert a { color:var(--accent-dark) }
.sec.invert .tl-when, .sec.invert .creds li::before { color:var(--accent-dark) }
.sec.invert .timeline li::before { background:var(--accent-dark); border-color:var(--inv-plane) }
/* On the dark sections the accent is the light hue, so the button text has to
   flip to the dark plane colour. White on light gold is a 1.9:1 failure.
   :not(.btn-ghost):not(.btn-outline) because a bare `.sec.invert .btn` has
   higher specificity than `.btn-ghost` and silently repaints the secondary
   button to look exactly like the primary one. Found by the hotlinedirectory
   build, where the dark call to action band had two identical buttons. */
.sec.invert .btn:not(.btn-ghost):not(.btn-outline) {
  color:var(--inv-plane) !important; background:var(--accent-dark);
  border-color:var(--accent-dark) }
.sec.soft { background:var(--accent-soft) }
.sec + .sec { border-top:1px solid var(--border) }
.sec.invert + .sec, .sec + .sec.invert { border-top:0 }

.grid { display:grid; gap:20px }
.cols-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.cols-3 { grid-template-columns:repeat(auto-fit,minmax(248px,1fr)) }
.cols-4 { grid-template-columns:repeat(auto-fit,minmax(206px,1fr)) }

/* header */
.site-head { position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--plane) 88%,transparent);
  backdrop-filter:saturate(150%) blur(9px); border-bottom:1px solid var(--border) }
.head-row { display:flex; align-items:center; gap:18px; min-height:66px }
.wordmark { font-family:var(--display); font-weight:700; font-size:1.16rem; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; margin-right:auto }
.wordmark:hover { color:var(--accent) }
.site-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.site-nav a { color:var(--ink2); text-decoration:none; font-size:.93rem; font-weight:500;
  padding:8px 11px; border-radius:8px }
.site-nav a:hover { color:var(--ink); background:var(--accent-soft) }
.site-nav a[aria-current] { color:var(--ink); font-weight:650 }
.navbtn { display:none }
.btn { display:inline-block; background:var(--accent); color:var(--accent-ink) !important;
  text-decoration:none; font-weight:650; font-size:.95rem; padding:13px 24px; border-radius:9px;
  border:1px solid var(--accent); transition:filter .15s ease }
.btn:hover { filter:brightness(1.08) }
.btn-sm { padding:8px 15px; font-size:.9rem }
.btn-ghost { background:transparent; color:var(--inv-ink) !important; border-color:currentColor }
.btn-ghost:hover { background:rgba(255,255,255,.09); filter:none }
/* the light section equivalent of btn-ghost */
.btn-outline { background:transparent; color:var(--accent) !important; border-color:var(--border) }
.btn-outline:hover { background:var(--accent-soft); border-color:var(--accent); filter:none }

/* cards */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:22px 22px 18px }
.card h3 { margin:0 0 8px; font-size:1.13rem }
.card h3 a { color:inherit; text-decoration:none }
.card h3 a:hover { color:var(--accent) }
.card p { color:var(--ink2); font-size:.95rem; margin:0 }
.card-kick { font-family:var(--body); font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 9px !important }
.card-meta { font-family:var(--mono); font-size:.76rem; color:var(--muted); margin:12px 0 0 !important }
.sec.invert .card { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.13) }
.sec.invert .card p { color:var(--inv-ink2) }

/* stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:26px 0; margin:34px 0 }
.stat { display:flex; flex-direction:column; gap:5px; padding:0 6px }
.stat-v { font-family:var(--display); font-size:clamp(1.7rem,3.6vw,2.4rem); font-weight:700;
  letter-spacing:-.03em; line-height:1 }
.stat-l { font-size:.83rem; color:var(--muted); line-height:1.4 }

/* timeline */
.timeline { list-style:none; margin:34px 0 0; padding:0; border-left:2px solid var(--border) }
.timeline li { position:relative; padding:0 0 30px 28px }
.timeline li::before { content:""; position:absolute; left:-7px; top:7px; width:12px; height:12px;
  border-radius:50%; background:var(--accent); border:3px solid var(--plane) }
.tl-when { font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; color:var(--accent);
  display:block; margin-bottom:5px }
.timeline h3 { margin:0 0 6px; font-size:1.1rem }
.timeline p { color:var(--ink2); font-size:.95rem; margin:0; max-width:62ch }

/* credentials */
.creds h3 { font-size:.78rem; font-family:var(--body); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px }
.creds ul { list-style:none; margin:0; padding:0 }
.creds li { position:relative; padding:0 0 9px 20px; font-size:.93rem; color:var(--ink2) }
.creds li::before { content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--accent) }

/* callout, quote */
.callout { border:1px solid var(--border); border-left:3px solid var(--accent);
  background:var(--surface); border-radius:0 var(--r) var(--r) 0; padding:16px 20px; margin:26px 0 }
.callout p { margin:0; font-size:.94rem; color:var(--ink2) }
.callout-warn { border-left-color:#c2410c }
.pull { margin:34px 0; padding:0 0 0 26px; border-left:3px solid var(--accent) }
.pull blockquote { margin:0 }
.pull p { font-family:var(--display); font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.45;
  color:var(--ink); margin:0 0 12px }
.pull figcaption { font-size:.86rem; color:var(--muted) }

/* utilities. These exist so that no page needs a style attribute, which
   would force style-src 'unsafe-inline' into the Content Security Policy on
   every site to save a handful of declarations. */
.mt-s { margin-top:22px }
.mt-m { margin-top:26px }
.mt-l { margin-top:34px }
.acts-left { justify-content:flex-start }
.grid-wide { gap:44px; align-items:start }
.grid-top { align-items:start }

/* band */
.band { text-align:center; max-width:660px; margin:0 auto }
.band p { font-size:1.06rem }
.band-acts { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:26px 0 0 }

/* prose + toc */
.prose { max-width:72ch }
.prose h3 { margin:2.1em 0 .5em; font-size:1.2rem; scroll-margin-top:86px }
.prose h3:first-child { margin-top:0 }
.prose h4 { margin:1.6em 0 .4em }
.prose p, .prose li { color:var(--ink2); font-size:.97rem }
.prose ul,.prose ol { padding-left:22px; margin:0 0 1.05em }
.prose li { margin-bottom:.45em }
.prose dl { margin:0 0 1.05em }
.prose dt { font-weight:650; color:var(--ink); margin-top:.9em }
.prose dd { margin:.2em 0 0; color:var(--ink2); font-size:.97rem }
.toc { background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:18px 22px; margin:0 0 34px; max-width:72ch }
.toc h2 { font-family:var(--body); font-size:.74rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin:0 0 10px }
.toc ol { margin:0; padding-left:20px; columns:2; column-gap:28px }
.toc li { margin-bottom:5px; font-size:.92rem; break-inside:avoid }
@media (max-width:620px) { .toc ol { columns:1 } }

/* footer */
.site-foot { --muted:var(--muted-dark); background:var(--inv-plane); color:var(--inv-ink2); padding:56px 0 26px; margin-top:0 }
.foot-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:30px 24px }
.foot-cols h2 { font-family:var(--body); font-size:.72rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--inv-ink); margin:0 0 13px }
.foot-cols a { display:block; color:var(--inv-ink2); text-decoration:none; font-size:.9rem;
  padding:4px 0 }
.foot-cols a:hover { color:var(--accent-dark); text-decoration:underline }
.foot-note { font-size:.84rem; color:var(--inv-ink2); max-width:74ch; margin:34px 0 0;
  opacity:.85 }
.foot-bar { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.13); margin-top:30px; padding-top:20px;
  font-size:.83rem; color:var(--inv-ink2) }
.foot-bar-links a { color:var(--inv-ink2); margin-left:16px }

/* mobile nav */
@media (max-width:860px) {
  .navbtn { display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:0 9px; cursor:pointer; border:1px solid var(--border);
    border-radius:9px }
  .navbtn span { display:block; height:2px; background:var(--ink); border-radius:2px }
  .site-nav { display:none; width:100%; flex-direction:column; align-items:stretch; gap:2px;
    padding:6px 0 16px }
  #navtoggle:checked ~ .site-nav { display:flex }
  .site-nav a { padding:11px 12px }
  .site-nav .btn { text-align:center; margin-top:8px }
  .head-row { flex-wrap:wrap }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  /* --ink and --ink2 are remapped here, not just overridden per element.
     Without this, every rule that says color:var(--ink) paints near black text
     on the near black plane in dark mode and the words vanish. The per element
     rules below covered h1 to h4 and p, and missed everything else: .prose dt,
     .prose dd, table row headers, the report metadata. The palette on
     shahzadandrainer.com made it visible by measurement rather than by luck,
     because there ink and invert_plane are the SAME hex, so the failure is a
     clean 1:1 rather than a 1.15:1 that looks like a rendering artefact.

     --ink is also used for rules and borders, and remapping is right there
     too: a hairline that reads as ink on paper should read as ink on the dark
     sheet. What must NOT follow the token is type sitting on an orange or
     yellow fill, because those fills do not change between the two schemes.
     Those are literal in design.py, and say so. */
  :root { color-scheme:dark; --accent:var(--accent-dark); --muted:var(--muted-dark);
    --support:var(--support-dark); --brand:var(--accent-dark);
    --ink:var(--inv-ink); --ink2:var(--inv-ink2) }
  body { background:var(--inv-plane); color:var(--inv-ink) }
  h1,h2,h3,h4 { color:var(--inv-ink) }
  p, .lede { color:var(--inv-ink2) }
  /* The same specificity trap the .sec.invert rule above already documents,
     and this time it shipped. `.btn-ghost` sets colour with !important, and so
     did this rule; equal specificity, equal weight, so source order decided it
     and this one is later. Every secondary button in every dark call to action
     band on the estate was painted the plane colour on a transparent
     background: #051821 on #051821, a clean 1:1, invisible. Found by measuring
     computed colour in the browser rather than by reading the palette, because
     no palette pair was wrong. */
  .btn:not(.btn-ghost):not(.btn-outline) { color:var(--inv-plane) !important }
  .btn-outline { color:var(--accent-dark) !important; border-color:rgba(255,255,255,.22) }
  .btn-outline:hover { background:rgba(255,255,255,.07) }
  .skip { color:var(--inv-plane) }
  .site-head { background:color-mix(in srgb,var(--inv-plane) 88%,transparent);
    border-bottom-color:rgba(255,255,255,.12) }
  .wordmark { color:var(--inv-ink) }
  .site-nav a { color:var(--inv-ink2) }
  .site-nav a:hover, .site-nav a[aria-current] { color:var(--inv-ink) }
  .navbtn span { background:var(--inv-ink) }
  .navbtn { border-color:rgba(255,255,255,.18) }
  .sec.soft { background:rgba(255,255,255,.035) }
  .sec + .sec { border-top-color:rgba(255,255,255,.1) }
  .card, .callout, .toc { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12) }
  .card p, .prose p, .prose li, .prose dd, .callout p { color:var(--inv-ink2) }
  .stats { border-color:rgba(255,255,255,.12) }
  .timeline { border-left-color:rgba(255,255,255,.14) }
  .timeline li::before { border-color:var(--inv-plane) }
  .timeline p, .creds li { color:var(--inv-ink2) }
  .pull p { color:var(--inv-ink) }
  .site-foot { border-top:1px solid rgba(255,255,255,.1) }
}

@media print {
  .site-head,.site-foot,.toc,.band-acts { display:none }
  body { background:#fff; color:#000; font-size:11pt }
  .sec { padding:12px 0; border:0 }
  a { color:#000; text-decoration:underline }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9pt; color:#444 }
}

/* ---- hero -------------------------------------------------------------- */
.hero-split .hero-grid { display:grid; grid-template-columns:1.25fr .85fr;
  gap:clamp(28px,5vw,64px); align-items:start }
@media (max-width:900px){ .hero-split .hero-grid { grid-template-columns:1fr } }
.hero-main h1 { max-width:15ch }
/* .band-acts centres, and it is the same specificity as .acts-left, so in the
   shared stylesheet it wins by source order and every split hero centred its
   buttons under left aligned text. Two classes, so this one wins. */
.hero-main .band-acts.acts-left { justify-content:flex-start }
.hero-note { font-size:.86rem; color:var(--muted); margin:20px 0 0; max-width:52ch }
.hero-aside { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:22px 24px }
.hero-aside h2 { font-family:var(--body); font-size:.72rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 14px }
.hero-aside dl { margin:0 }
.hero-aside dt { font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-top:14px }
.hero-aside dt:first-child { margin-top:0 }
.hero-aside dd { margin:3px 0 0; font-size:.95rem; color:var(--ink) }
.hero-aside dd small { display:block; color:var(--ink2); font-size:.85rem;
  margin-top:2px }

/* ---- credential strip -------------------------------------------------- */
.strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.credrow { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:10px 30px }
.credrow li { position:relative; font-size:.88rem; color:var(--ink2);
  padding-left:16px; line-height:1.45 }
.credrow li::before { content:""; position:absolute; left:0; top:.58em;
  width:6px; height:6px; border-radius:50%; background:var(--accent) }

/* ---- metrics ----------------------------------------------------------- */
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:26px 24px }
.metric { display:flex; flex-direction:column; gap:6px }
.metric-v { font-family:var(--display); font-size:clamp(2rem,4.2vw,2.9rem);
  font-weight:700; letter-spacing:-.035em; line-height:1 }
.metric-l { font-size:.92rem; font-weight:600 }
.metric-f { font-size:.78rem; color:var(--muted); line-height:1.45 }
.sec.invert .metric-l { color:var(--inv-ink) }
.sec.invert .metric-f { color:var(--inv-ink2) }

/* ---- capabilities ------------------------------------------------------ */
.caps .cap { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:22px }
.cap-n { font-family:var(--mono); font-size:.74rem; color:var(--accent);
  letter-spacing:.1em; display:block; margin-bottom:12px }
.cap h3 { font-size:1.1rem; margin:0 0 8px }
.cap p { color:var(--ink2); font-size:.94rem; margin:0 }
.cap ul { list-style:none; margin:14px 0 0; padding:0 }
.cap li { position:relative; padding-left:17px; font-size:.87rem;
  color:var(--ink2); margin-bottom:6px }
.cap li::before { content:""; position:absolute; left:0; top:.6em; width:6px;
  height:1px; background:var(--accent) }

/* ---- process ----------------------------------------------------------- */
.process { list-style:none; counter-reset:s; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px }
.process li { position:relative; padding-top:44px }
.step-n { position:absolute; top:0; left:0; width:32px; height:32px;
  display:grid; place-items:center; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); font-weight:700; font-size:.9rem;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent) }
.process h3 { font-size:1.05rem; margin:0 0 6px }
.process p { color:var(--ink2); font-size:.93rem; margin:0 }

/* ---- people ------------------------------------------------------------ */
.people .person { display:flex; gap:18px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); padding:22px }
.avatar { flex:0 0 52px; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent-soft);
  color:var(--accent); font-family:var(--display); font-weight:700;
  font-size:1.05rem; letter-spacing:.02em;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent) }
.person h3 { margin:0 0 2px; font-size:1.12rem }
.person-role { font-size:.83rem; color:var(--muted); margin:0 0 10px }
.person p { font-size:.93rem; color:var(--ink2) }
.person-pts { list-style:none; margin:12px 0 0; padding:0 }
.person-pts li { position:relative; padding-left:16px; font-size:.85rem;
  color:var(--ink2); margin-bottom:5px }
.person-pts li::before { content:""; position:absolute; left:0; top:.58em;
  width:6px; height:6px; border-radius:50%; background:var(--accent) }
.person-link { margin:12px 0 0; font-size:.88rem }

/* ---- tabs -------------------------------------------------------------- */
.tabs { margin:30px 0 0 }
.tabin { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px }
.tablist { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border);
  margin-bottom:26px }
.tablabel { cursor:pointer; padding:11px 16px; font-size:.93rem; font-weight:600;
  color:var(--ink2); border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--dur-hover,180ms) ease, border-color var(--dur-hover,180ms) ease }
.tablabel:hover { color:var(--ink) }
/* Everything is visible by default. Panels are only hidden inside @supports,
   so a browser without :has() shows all of them stacked, which is complete and
   readable rather than blank. Hiding is the enhancement, never the base. */
@supports selector(:has(*)) {
  .tabs .tabpanel { display:none }
  .tabs:has(.tabin:nth-of-type(1):checked) .tabpanels>.tabpanel:nth-child(1),
  .tabs:has(.tabin:nth-of-type(2):checked) .tabpanels>.tabpanel:nth-child(2),
  .tabs:has(.tabin:nth-of-type(3):checked) .tabpanels>.tabpanel:nth-child(3),
  .tabs:has(.tabin:nth-of-type(4):checked) .tabpanels>.tabpanel:nth-child(4),
  .tabs:has(.tabin:nth-of-type(5):checked) .tabpanels>.tabpanel:nth-child(5),
  .tabs:has(.tabin:nth-of-type(6):checked) .tabpanels>.tabpanel:nth-child(6) {
    display:block }
  .tabs:has(.tabin:nth-of-type(1):checked) .tablabel:nth-of-type(1),
  .tabs:has(.tabin:nth-of-type(2):checked) .tablabel:nth-of-type(2),
  .tabs:has(.tabin:nth-of-type(3):checked) .tablabel:nth-of-type(3),
  .tabs:has(.tabin:nth-of-type(4):checked) .tablabel:nth-of-type(4),
  .tabs:has(.tabin:nth-of-type(5):checked) .tablabel:nth-of-type(5),
  .tabs:has(.tabin:nth-of-type(6):checked) .tablabel:nth-of-type(6) {
    color:var(--accent); border-bottom-color:var(--accent) }
}
.tabs:has(.tabin:focus-visible) .tablist { outline:2px solid var(--accent);
  outline-offset:4px; border-radius:4px }

/* ---- filter ------------------------------------------------------------ */
.filter { margin:26px 0 0 }
.fin { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px }
.chip { cursor:pointer; font-size:.86rem; font-weight:600; color:var(--ink2);
  border:1px solid var(--border); background:var(--surface); border-radius:20px;
  padding:7px 15px;
  transition:color var(--dur-hover,180ms) ease, border-color var(--dur-hover,180ms) ease,
             background-color var(--dur-hover,180ms) ease }
.chip:hover { color:var(--ink); border-color:var(--accent) }
.fin:checked + .chip { background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink) }
.fin:focus-visible + .chip { outline:3px solid var(--accent); outline-offset:2px }
/* The per facet hide rules are generated by filter_css(), because a facet is an
   arbitrary string and CSS cannot compare an attribute to a checked input. The
   base state here shows everything: the generated rules only ever hide, and
   only while a specific facet is selected. */
.fitem { display:block }

/* ---- faq --------------------------------------------------------------- */
.faq { border-bottom:1px solid var(--border) }
.faq summary { cursor:pointer; list-style:none; padding:18px 40px 18px 0;
  position:relative; font-family:var(--display); font-size:1.08rem;
  font-weight:600; color:var(--ink) }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:""; position:absolute; right:8px; top:26px;
  width:11px; height:11px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg);
  transition:transform 180ms var(--ease-out,ease) }
.faq[open] summary::after { transform:rotate(-135deg); top:30px }
.faq summary:hover { color:var(--accent) }
.faq-a { padding:0 0 20px; max-width:72ch }
.faq-a p { color:var(--ink2); font-size:.95rem; margin:0 0 .9em }
.faq-a p:last-child { margin-bottom:0 }

/* ---- section nav ------------------------------------------------------- */
.secnav { position:sticky; top:66px; z-index:30; background:var(--surface);
  border-bottom:1px solid var(--border); overflow-x:auto }
.secnav .wrap { display:flex; gap:2px; white-space:nowrap }
.secnav a { padding:12px 14px; font-size:.87rem; font-weight:600; color:var(--ink2);
  text-decoration:none; border-bottom:2px solid transparent }
.secnav a:hover { color:var(--ink) }
.secnav a[aria-current] { color:var(--accent); border-bottom-color:var(--accent) }

/* ---- data table -------------------------------------------------------- */
.tablewrap { overflow-x:auto; margin:26px 0 34px }
table.cover { border-collapse:collapse; width:100%; font-size:.9rem; min-width:520px }
table.cover caption { text-align:left; font-size:.72rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding:0 0 11px }
table.cover th, table.cover td { text-align:left; padding:10px 14px 10px 0;
  border-bottom:1px solid var(--border); vertical-align:top }
table.cover thead th { font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted) }
/* A row header is a name, not a column label. Without this it inherits the
   tiny uppercase treatment above and domain names become unreadable. */
table.cover tbody th { font-size:.9rem; font-weight:650; letter-spacing:0;
  text-transform:none; color:var(--ink) }
table.cover td { color:var(--ink2) }
table.cover code { font-family:var(--mono); font-size:.85rem; color:var(--ink) }
table.cover .num { text-align:right; font-variant-numeric:tabular-nums }

/* ---- misc -------------------------------------------------------------- */
.cgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px 30px; margin:30px 0 0 }
.cgrid h3 { font-size:1.02rem; margin:0 0 6px }
.cgrid p { color:var(--ink2); font-size:.93rem; margin:0 }
.noterow { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px 30px; margin:28px 0 0 }
.noterow dt { font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px }
.noterow dd { margin:0; font-size:.94rem; color:var(--ink2) }

@media (prefers-color-scheme: dark) {
  /* Several of these sat between 1.7 and 3.2 to 1 against the dark plane,
     which is a fail for anything carrying words. --inv-ink2 is the palette's
     checked body colour on dark, so it is the right value for all of them. */
  .secnav a, .chip, .cap-n, .metric-f, .person-role { color:var(--inv-ink2) }
  .step-n { color:var(--accent-dark);
    background:color-mix(in srgb,var(--accent-dark) 16%,transparent);
    border-color:color-mix(in srgb,var(--accent-dark) 34%,transparent) }
  .avatar { color:var(--accent-dark);
    background:color-mix(in srgb,var(--accent-dark) 16%,transparent);
    border-color:color-mix(in srgb,var(--accent-dark) 34%,transparent) }
  .cap-n { color:var(--accent-dark) }
  table.cover tbody th, table.cover code { color:var(--inv-ink) }
  table.cover td, table.cover thead th { color:var(--inv-ink2) }
  table.cover th, table.cover td { border-bottom-color:rgba(255,255,255,.12) }
  .hero-aside, .caps .cap, .people .person, .chip { background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.12) }
  /* The selected chip is the same trap as the buttons. On light the accent is
     dark and accent_ink is white; on dark the accent flips to the light hue
     and accent_ink does not, so the pressed chip shipped white on pale blue at
     2.19:1. The text on an accent fill has to follow the fill, not the scheme.
     Ordered after the .chip background rule above so it wins. */
  .fin:checked + .chip { background:var(--accent-dark);
    border-color:var(--accent-dark); color:var(--inv-plane) }
  .hero-aside dd { color:var(--inv-ink) }
  .hero-aside dd small, .cap p, .cap li, .person p, .person-pts li, .cgrid p,
  .noterow dd, .faq-a p, .credrow li, .process p { color:var(--inv-ink2) }
  .faq summary { color:var(--inv-ink) }
  .secnav { background:rgba(255,255,255,.04); border-bottom-color:rgba(255,255,255,.12) }
  .strip { border-color:rgba(255,255,255,.12) }
  .tablist, .faqs, .faq { border-color:rgba(255,255,255,.12) }
}

/* ---- generated artwork ------------------------------------------------- */
.art-hero { position:absolute; inset:-12% -6% auto -6%; width:112%; height:128%;
  z-index:0; pointer-events:none }
.art-orb { width:100%; height:100%; display:block }
.art-wave, .art-slant { display:block; width:100%; height:clamp(44px,6vw,96px);
  margin-bottom:-1px }
.art-portrait { width:100%; height:100%; display:block; border-radius:50%;
  overflow:hidden }

/* ---- the territory map ------------------------------------------------- */
.art-map { width:100%; max-width:620px; height:auto; display:block }
.art-map .st rect { fill:var(--accent-soft);
  stroke:color-mix(in srgb,var(--brand) 22%,transparent); stroke-width:1 }
.art-map .st text { fill:var(--brand) }
.art-map .st-taken rect { fill:var(--brand); stroke:var(--brand) }
.art-map .st-taken text { fill:var(--accent-ink) }
@media (hover:hover) and (pointer:fine) {
  .art-map .st { transition:transform var(--dur-hover,180ms) var(--ease-out,ease);
    transform-box:fill-box; transform-origin:center }
  .art-map .st-open:hover { transform:scale(1.12) }
}
@media (prefers-color-scheme:dark) {
  .art-map .st rect { fill:color-mix(in srgb,var(--accent-dark) 14%,transparent);
    stroke:color-mix(in srgb,var(--accent-dark) 30%,transparent) }
  .art-map .st text { fill:var(--accent-dark) }
  .art-map .st-taken rect { fill:var(--accent-dark); stroke:var(--accent-dark) }
  .art-map .st-taken text { fill:var(--inv-plane) }
}

/* ---- marquee ----------------------------------------------------------- */
.marquee { overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) }
.marquee-track { display:flex; width:max-content; animation:mq 48s linear infinite }
.marquee-row { display:flex; align-items:center; flex:none }
.marquee-row span { display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--display); font-size:clamp(1.35rem,3.4vw,2.4rem);
  font-weight:600; letter-spacing:-.02em; padding:0 clamp(20px,3vw,44px);
  color:var(--ink) }
.marquee-row span::after { content:""; width:9px; height:9px; border-radius:50%;
  background:var(--accent); margin-left:clamp(20px,3vw,44px) }
@keyframes mq { to { transform:translateX(-50%) } }
.marquee:hover .marquee-track { animation-play-state:paused }
@media (prefers-reduced-motion:reduce) {
  .marquee-track { animation:none }
  .marquee { mask-image:none; -webkit-mask-image:none; overflow-x:auto }
}
.sec.invert .marquee-row span { color:var(--inv-ink) }
@media (prefers-color-scheme:dark) { .marquee-row span { color:var(--inv-ink) } }

/* ======================================================================== *
   DE-BOXING LAYER. Overrides the defaults above. See buildkit/debox.py.
 * ======================================================================== */

:root { --r: 22px; --r-lg: 34px; --wrap: 1200px }

/* --- 1. borders off ----------------------------------------------------- */
.card, .caps .cap, .people .person, .hero-aside, .callout, .toc, .chip {
  border-color: transparent;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.card, .caps .cap, .people .person { padding: 28px 28px 24px; border-radius: var(--r) }
.hero-aside { border-radius: var(--r-lg); padding: 30px 32px }
.callout { border-radius: 0 var(--r) var(--r) 0 }
.chip { border-color: color-mix(in srgb, var(--brand) 14%, transparent) }

/* The hairline between every section was doing the same job as the change of
   background and doing it more loudly. Sections that share a background get
   space instead; sections that change background need no line at all. */
.sec + .sec { border-top: 0 }
.sec { padding: clamp(64px, 8vw, 120px) 0 }
.sec.tight { padding: clamp(30px, 4vw, 52px) 0 }

/* --- 2. curved and slanted edges ---------------------------------------- */
.edge { display: block; line-height: 0; margin: 0 }
.edge + .sec, .sec + .edge { margin-top: 0 }

/* --- 3. asymmetry ------------------------------------------------------- */
.hero-split .hero-grid { grid-template-columns: 7fr 5fr; align-items: center }
@media (max-width: 940px) { .hero-split .hero-grid { grid-template-columns: 1fr } }
.hero { position: relative; overflow: hidden; isolation: isolate;
  padding-top: clamp(64px, 9vw, 130px); padding-bottom: clamp(64px, 9vw, 120px) }
.hero > .wrap { position: relative; z-index: 1 }
/* one grid per page breaks its own column, so the eye has somewhere to go */
.grid.offset > :nth-child(3n+2) { transform: translateY(26px) }
@media (max-width: 760px) { .grid.offset > * { transform: none } }
.sec-head { max-width: 44ch }
.sec-head.pull { margin-left: clamp(0px, 8vw, 130px) }

/* --- 4. type as structure ----------------------------------------------- */
h1 { font-size: clamp(2.8rem, 7.2vw, 5.4rem); letter-spacing: -.045em;
  line-height: 1.02 }
h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -.035em;
  line-height: 1.08 }
h3 { font-size: 1.3rem; letter-spacing: -.02em }
.lede { font-size: clamp(1.14rem, 1.75vw, 1.42rem); line-height: 1.55;
  max-width: 46ch }
/* eyebrow becomes a rule and a word, which reads as a section marker rather
   than as a small caption nobody looks at */
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  color: var(--brand) }
.eyebrow::before { content: ""; width: 30px; height: 2px; flex: none;
  background: currentColor; border-radius: 2px }
.sec.invert .eyebrow { color: var(--accent-dark) }

/* --- 5. colour in large fields ------------------------------------------ */
.sec.brand { background: var(--brand); color: var(--accent-ink) }
.sec.brand h1, .sec.brand h2, .sec.brand h3, .sec.brand .metric-v {
  color: var(--accent-ink) }
.sec.brand p, .sec.brand .metric-l, .sec.brand .metric-f {
  color: color-mix(in srgb, var(--accent-ink) 84%, var(--brand)) }
.sec.brand .eyebrow { color: color-mix(in srgb, var(--accent-ink) 90%, transparent) }
.sec.brand .btn { background: var(--accent-ink); border-color: var(--accent-ink);
  color: var(--brand) !important }
.sec.brand .btn-outline { background: transparent; border-color: currentColor;
  color: var(--accent-ink) !important }
.sec.brand .card { background: color-mix(in srgb, #000 14%, var(--brand)) }
.sec.brand .card p, .sec.brand .card-kick, .sec.brand .card-meta {
  color: color-mix(in srgb, var(--accent-ink) 82%, var(--brand)) }
.sec.brand a { color: var(--accent-ink) }

/* accent-soft becomes a real field rather than a whisper */
.sec.soft { background: var(--accent-soft) }
.sec.soft .card { background: color-mix(in srgb, var(--surface) 78%, transparent) }

/* --- buttons: pill, not rectangle --------------------------------------- */
.btn { border-radius: 100px; padding: 15px 28px; font-size: 1rem;
  letter-spacing: -.01em }
.btn-sm { padding: 9px 18px; font-size: .92rem }

/* --- numbers and step markers ------------------------------------------- */
.cap-n { font-family: var(--display); font-size: 2.3rem; font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--brand);
  opacity: .28; margin-bottom: 14px }
.metric-v { font-size: clamp(2.6rem, 5.2vw, 4rem); letter-spacing: -.045em }
.step-n { width: 40px; height: 40px; font-size: 1rem }

/* --- portraits ---------------------------------------------------------- */
.people .person { flex-direction: column; gap: 22px; align-items: flex-start }
.person .avatar, .person .art-portrait { width: 92px; height: 92px; flex: none }
.person .avatar { display: none }

/* --- footer ------------------------------------------------------------- */
.site-foot { padding-top: clamp(64px, 8vw, 104px) }

/* --- dark ---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .card, .caps .cap, .people .person, .hero-aside, .callout, .toc, .chip {
    background: color-mix(in srgb, var(--accent-dark) 8%, rgba(255,255,255,.03));
    border-color: transparent }
  .sec.soft { background: color-mix(in srgb, var(--accent-dark) 6%, transparent) }
  .sec.soft .card { background: rgba(255,255,255,.05) }
}

/* motion layer: marketing */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-hover: 180ms;
  --dur-enter: 260ms;
  --dur-reveal: 620ms;
}

/* Press feedback. Purpose: feedback, confirming the interface heard you.
   scale(0.97) rather than anything more, and only on a fine pointer, because
   a touch device fires a false hover on tap. */
.btn, .site-nav a, .pages a, .card h3 a {
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-hover) ease,
              border-color var(--dur-hover) ease,
              color var(--dur-hover) ease;
}
.btn:active { transform: scale(0.97) }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px) }
}
/* Focus must never be softened. It appears exactly when a keyboard user needs
   to know where they are, so it is the one thing here with no transition. */
:focus-visible { transition: none }


/* Card lift. Purpose: state indication, showing the card is a target.
   Gated to fine pointers so a tap does not leave a card stuck in hover. */
@media (hover: hover) and (pointer: fine) {
  .card { transition: transform var(--dur-hover) var(--ease-out),
                      border-color var(--dur-hover) ease,
                      box-shadow var(--dur-hover) ease }
  .card:hover { transform: translateY(-2px);
                border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
                box-shadow:0 6px 22px -12px rgba(0,0,0,.28) }
}
.pages a, .toc a { transition: color var(--dur-hover) ease }


/* Underline that grows from the cursor side. Purpose: feedback. Cheap, and it
   uses background-size rather than a pseudo element so it needs no extra node
   and cannot affect layout. */
@media (hover: hover) and (pointer: fine) {
  .prose a, .lede a, .sec p a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--dur-hover) var(--ease-out);
  }
  .prose a:hover, .lede a:hover, .sec p a:hover { background-size: 100% 1px }
}


/* Section reveal, fired once.

   The previous version used `animation-timeline: view()`, which is cheaper but
   bidirectional: scroll back up and every paragraph fades out again. The
   animation recipe this estate follows is explicit that a reveal fires once,
   because re-animating on every scroll-by is an interface fighting its reader.
   CSS scroll timelines cannot express "once".

   So it is an IntersectionObserver, and the arming is done in script rather
   than in CSS. That ordering is the whole safety argument: an element is
   visible until reveal.js decides to hide it, so no script, a failed script, a
   reader mode or an old browser all get the full page. The only thing script
   can do here is add motion, never remove content. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal][data-shown] { opacity: 1; transform: none; will-change: auto }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none }
}
@media print { [data-reveal] { opacity: 1 !important; transform: none !important } }


/* Stagger a grid entrance. 60ms steps. Decorative, and it never blocks
   interaction: the delay is on the transition, so the card is clickable from
   the first frame whether or not it has finished arriving. Clamped at the
   sixth item, because past that a stagger stops reading as rhythm and starts
   reading as lag. */
[data-reveal-stagger] > :nth-child(2) { transition-delay: 60ms }
[data-reveal-stagger] > :nth-child(3) { transition-delay: 120ms }
[data-reveal-stagger] > :nth-child(4) { transition-delay: 180ms }
[data-reveal-stagger] > :nth-child(5) { transition-delay: 240ms }
[data-reveal-stagger] > :nth-child(n+6) { transition-delay: 300ms }
@media (prefers-reduced-motion: reduce) {
  [data-reveal-stagger] > * { transition-delay: 0s }
}


/* Reduced motion. Fewer and gentler, not zero: colour and opacity stay,
   because they carry state. Everything that travels through space goes. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn:hover, .card:hover { transform: none }
  [data-reveal] { opacity: 1; transform: none }
}

/* ---- grid density ------------------------------------------------------ */
/* The kit sizes its grids with auto-fit and a minimum track width, so
   `cols-3` is a hint rather than a count: at the 1120px wrap, minmax(248px)
   resolves to FOUR columns, and a six item capability grid rendered as 4 + 2
   with a hole in it. Raising the minimum so that the arithmetic lands on the
   intended count is better than pinning `repeat(3, 1fr)`, because auto-fit
   still collapses empty tracks, which is what makes a two item people grid sit
   as two wide cards rather than two thirds of a row. */
.grid.cols-2 { grid-template-columns:repeat(auto-fit,minmax(400px,1fr)) }
.grid.cols-3 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) }
@media (max-width:760px) {
  .grid.cols-2, .grid.cols-3 { grid-template-columns:1fr }
}

/* ---- flagship: hero ---------------------------------------------------- */
.hero { padding-top:clamp(56px,8vw,104px) }
.hero h1 { max-width:18ch }
.hero-split .hero-grid { gap:clamp(30px,5vw,72px) }
.hero-main h1 { max-width:18ch; margin-bottom:.42em }
.hero-split .lede { max-width:56ch }
.hero-split .band-acts { margin-top:30px }
/* `.band-acts` is declared after `.acts-left` in the kit stylesheet and both
   are single class selectors, so the hero's actions inherited the band's
   `justify-content:center` and sat centred under left aligned text. */
.hero-split .band-acts.acts-left { justify-content:flex-start }
/* The panel is the part of a corporate hero that earns its space, so it is
   given a little more weight than the block library default: a top rule in the
   brand hue, and looser rows so six facts do not read as a receipt. */
.hero-aside { padding:26px 28px 28px; border-top:3px solid var(--accent) }
.hero-aside h2 { margin-bottom:18px }
.hero-aside dt { margin-top:18px }
.hero-aside dd { font-weight:600; font-size:1rem }
.hero-aside dd small { font-weight:400; line-height:1.45; margin-top:4px }
.hero-note { border-top:1px solid var(--border); padding-top:18px; margin-top:32px;
  max-width:56ch }

/* ---- lead in section --------------------------------------------------- */
.leadin { grid-template-columns:.82fr 1.18fr; gap:clamp(26px,4vw,64px);
  align-items:start }
.leadin-head h2 { margin-bottom:0 }
.leadin .lede, .leadin .prose { max-width:none }
.leadin .prose { margin-top:1.1em }
@media (max-width:900px) { .leadin { grid-template-columns:1fr } }

/* ---- credential strip -------------------------------------------------- */
/* Multi column rather than a grid. Seven entries of unequal length in a three
   track grid leave a ragged last row and a row gap set by the tallest cell;
   column flow packs them and balances the column bottoms instead. */
.strip { padding:clamp(26px,3.4vw,40px) 0 }
.credrow { display:block; columns:3; column-gap:44px }
.credrow li { break-inside:avoid; margin-bottom:13px; padding-left:18px }
@media (max-width:1000px) { .credrow { columns:2 } }
@media (max-width:660px) { .credrow { columns:1 } }

/* ---- metrics ----------------------------------------------------------- */
.metrics { gap:34px 30px }
.metric-v { color:var(--accent-dark) }
/* Two lines reserved for the label so the hairline above every footnote lands
   on the same baseline across the band. Without it a one line label lifts its
   rule 25px above its neighbours and the row reads as misaligned. */
.metric-l { min-height:3.3em }
.metric-f { max-width:34ch; padding-top:9px;
  border-top:1px solid rgba(255,255,255,.14) }

/* ---- capability grid --------------------------------------------------- */
.caps .cap { padding:26px 24px 24px; display:flex; flex-direction:column }
.caps.cols-2 .cap { padding:30px 28px 28px }
.caps .cap p { flex:1 0 auto }
.cap-n { font-size:.8rem; font-weight:700 }
.cap ul { border-top:1px solid var(--border); padding-top:13px; margin-top:16px }

/* ---- people ------------------------------------------------------------ */
.people .person { padding:26px 26px 24px; gap:20px }
.people .person > div { display:flex; flex-direction:column; flex:1 }
.people .person-link { margin-top:auto; padding-top:16px }
.avatar { flex:0 0 58px; width:58px; height:58px; font-size:.98rem }

/* ---- filter ------------------------------------------------------------ */
.filter { margin-top:30px }
.chips { margin-bottom:28px }
.fgrid .card { display:flex; flex-direction:column }
.fgrid .card p { flex:1 0 auto }

/* ---- tabs -------------------------------------------------------------- */
/* A panel that inherits the section width runs to about 110 characters, which
   is past the point where the eye loses the line it is on. */
.tabpanel > p { max-width:74ch }

/* ---- faq --------------------------------------------------------------- */
.faqs { border-top:1px solid var(--border); max-width:none }
.faq summary { padding:20px 44px 20px 0 }
.faq-a { max-width:80ch }

/* ---- section nav ------------------------------------------------------- */
/* The link's own 14px of padding pushed the first label 14px right of every
   other left edge on the page. Pull the wrap back by the same amount so the
   text lines up with the h1 above it. */
.secnav .wrap { padding-left:10px }
.secnav a:last-child { margin-right:14px }

/* ---- tables ------------------------------------------------------------ */
.tablewrap { overflow-x:auto; margin:26px 0 34px }
table.cover { border-collapse:collapse; width:100%; font-size:.9rem; min-width:560px }
table.cover caption { text-align:left; font-size:.72rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding:0 0 11px }
table.cover th, table.cover td { text-align:left; padding:11px 16px 11px 0;
  border-bottom:1px solid var(--border); vertical-align:top }
table.cover thead th { font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted) }
/* datatable() emits the first cell of each row as a row header. Without this it
   inherits the column header styling and the whole first column renders as tiny
   uppercase grey, which is unreadable for a domain name. */
table.cover tbody th { font-size:.92rem; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--ink) }
table.cover td { color:var(--ink2) }
table.cover code { font-family:var(--mono); font-size:.85rem; color:var(--ink) }
table.cover tbody tr:last-child th, table.cover tbody tr:last-child td {
  border-bottom:0 }

/* ---- process and callout grid ------------------------------------------ */
/* Same auto-fit arithmetic as the card grids above. At the default minimum the
   five step record rendered 4 + 1, with one step alone under three quarters of
   an empty row, and the six publication rules rendered 4 + 2 in 200px columns.
   Three tracks gives a comfortable measure and a shorter last row. */
.process { grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:34px 30px }
.process h3 { font-size:1rem; line-height:1.3 }
.cgrid { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px 34px }

@media (max-width:760px) {
  .metric-f { max-width:none }
  .process, .cgrid { grid-template-columns:1fr }
}
@media (max-width:620px) {
  .hero-aside { padding:22px 22px 24px }
  .credrow { gap:11px }
}

@media (prefers-color-scheme: dark) {
  .hero-aside { border-top-color:var(--accent-dark) }
  .hero-note { border-top-color:rgba(255,255,255,.12) }
  .cap ul, .faqs { border-top-color:rgba(255,255,255,.12) }
  table.cover td { color:var(--inv-ink2) }
  table.cover code, table.cover tbody th { color:var(--inv-ink) }
  table.cover th, table.cover td { border-bottom-color:rgba(255,255,255,.12) }
}

/* filter: estate */
@supports selector(:has(*)) {
  .filter[data-filter="estate"]:has(#estate-ventures:checked) .fitem:not([data-f="ventures"]) { display:none }
  .filter[data-filter="estate"]:has(#estate-impact:checked) .fitem:not([data-f="impact"]) { display:none }
}


/* ==========================================================================
   THE GAZETTE. shahzadandrainer.com only.
   ========================================================================== */

:root { --teal:#266867; --teal-dark:#8fb9b8; --sheet:1300px }

/* The sheet. The page is a printed thing sitting on a surface, so the surface
   has to exist. Everything inside is full bleed to the sheet's edge, which is
   what makes the rules read as rules rather than as underlines. */
body { background:#e4e8e7 }
.sheet { max-width:var(--sheet); margin:0 auto; background:var(--plane);
  box-shadow:0 0 90px -46px rgba(5,24,33,.55) }
.gz-pad { padding-left:clamp(16px,3.4vw,52px);
  padding-right:clamp(16px,3.4vw,52px) }

/* ---- masthead ---------------------------------------------------------- */
.gz-mast { padding:clamp(12px,2vw,22px) clamp(16px,3.4vw,52px) 0 }
.gz-dateline { display:flex; justify-content:space-between; gap:10px;
  flex-wrap:wrap; font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink2); border-bottom:1px solid var(--ink);
  padding-bottom:9px }
.gz-dl-mid { color:var(--teal) }
.gz-title { display:flex; justify-content:space-between; gap:2%;
  font-family:var(--display); font-size:clamp(1.4rem,8.2vw,6.4rem);
  letter-spacing:-.02em; line-height:1; margin:16px 0 14px; font-weight:800;
  white-space:nowrap; color:var(--ink) }
.gz-title span { display:block }
.gz-title-sm { font-size:clamp(1.05rem,3.4vw,1.9rem); margin:11px 0 10px;
  justify-content:flex-start; gap:.34em }
.gz-title-sm a { color:inherit; text-decoration:none; display:flex; gap:.34em }
.gz-title-sm a:hover { color:var(--accent) }

/* The rules stay, the title goes. */
.gz-navwrap { position:sticky; top:0; z-index:40; background:var(--plane);
  border-top:1px solid var(--ink); border-bottom:5px solid var(--ink) }
.gz-nav { display:flex; gap:2px; padding:2px 0; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch }
.gz-nav::-webkit-scrollbar { display:none }
.gz-nav a { padding:11px 14px; font-size:.8rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  color:var(--ink2); white-space:nowrap }
.gz-nav a:hover, .gz-nav a.is-here { color:#051821;
  background:var(--support-dark) }
.gz-nav a[aria-current] { color:var(--ink); box-shadow:inset 0 -3px 0 var(--accent) }
.gz-nav-cta { margin-left:auto; background:var(--support);
  color:#051821 !important }
/* The hover is the same hue taken deep rather than a flip to ink, which in
   dark mode would have painted white on white once --ink started following
   the scheme. 7.64:1 either way. */
.gz-nav-cta:hover { background:#8a3d00; color:#fff !important }

/* ---- front page -------------------------------------------------------- */
.gz-front { display:grid; grid-template-columns:minmax(0,1fr) 328px;
  gap:clamp(20px,3vw,46px);
  padding:clamp(22px,3.2vw,44px) clamp(16px,3.4vw,52px) }
.gz-over { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px; font-weight:800 }
.gz-lead h2 { font-size:clamp(1.5rem,3.9vw,3.2rem); line-height:1.06;
  letter-spacing:-.04em; margin:0 0 16px; font-weight:750 }
.gz-deck { font-size:clamp(1rem,1.55vw,1.18rem); color:var(--ink2);
  line-height:1.5; margin:0 0 22px; padding-bottom:18px;
  border-bottom:1px solid var(--border); max-width:62ch }
.gz-cols { columns:2; column-gap:36px; column-rule:1px solid var(--border) }
.gz-cols p { margin:0 0 1em; font-size:.97rem; line-height:1.66;
  color:var(--ink2); break-inside:avoid }
.gz-cap { float:left; font-family:var(--display); font-size:3.5em;
  line-height:.76; padding:.05em .09em 0 0; font-weight:800; color:var(--accent) }
.gz-quote { margin:26px 0 0; padding:22px 0; border-top:4px solid var(--ink);
  border-bottom:1px solid var(--border) }
.gz-quote blockquote { margin:0 0 10px;
  font-family:var(--display); font-size:clamp(1.08rem,2.1vw,1.55rem);
  line-height:1.36; letter-spacing:-.02em; font-weight:600; max-width:44ch }
.gz-quote figcaption { font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink2) }
.gz-jump { margin:20px 0 0 }
.gz-jump a { font-weight:700; color:var(--teal); text-decoration:none;
  border-bottom:2px solid var(--support); padding-bottom:2px }
.gz-jump a:hover { color:var(--ink); border-bottom-color:var(--ink) }

/* ---- side column ------------------------------------------------------- */
.gz-side { border-left:1px solid var(--ink);
  padding-left:clamp(16px,2vw,28px) }
.gz-sh { font-family:var(--body); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; border-bottom:2px solid var(--ink);
  padding-bottom:7px; margin:0 0 16px; font-weight:800; color:var(--ink) }
.gz-sh2 { margin-top:28px }
.gz-brief { padding:0 0 13px; margin-bottom:13px;
  border-bottom:1px dotted var(--border) }
.gz-brief h4 { font-family:var(--display); font-size:.97rem; margin:0 0 5px;
  letter-spacing:-.015em }
.gz-brief p { margin:0; font-size:.84rem; color:var(--ink2); line-height:1.55 }
.gz-listing { list-style:none; margin:0; padding:0; counter-reset:g }
.gz-listing li { counter-increment:g; padding:8px 0 8px 27px; position:relative;
  border-bottom:1px dotted var(--border); font-size:.85rem }
.gz-listing li::before { content:counter(g,decimal-leading-zero);
  position:absolute; left:0; top:10px; font-family:var(--mono);
  font-size:.68rem; color:var(--accent) }
.gz-listing b { display:block; letter-spacing:-.01em }
.gz-listing span { color:var(--ink2); font-size:.75rem;
  font-family:var(--mono) }

/* ---- bands ------------------------------------------------------------- */
.gz-band { padding:clamp(24px,3.4vw,48px) clamp(16px,3.4vw,52px);
  border-top:1px solid var(--border) }
.gz-band-rule { border-top:5px solid var(--ink) }

/* ---- figures ----------------------------------------------------------- */
.gz-figs { border-top:5px solid var(--ink); background:var(--inv-plane);
  color:var(--inv-ink) }
.gz-figs .gz-sh { border-bottom-color:rgba(255,255,255,.3);
  color:var(--inv-ink) }
.gz-figrow { display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:26px }
.gz-fig b { display:block; font-family:var(--display);
  font-size:clamp(1.8rem,4.2vw,3.2rem); line-height:1; letter-spacing:-.05em;
  color:var(--support-dark); font-weight:800; font-variant-numeric:tabular-nums }
.gz-fig span { display:block; margin-top:9px; font-weight:650;
  font-size:.94rem; color:var(--inv-ink) }
.gz-fig em { display:block; margin-top:5px; font-size:.76rem;
  color:var(--inv-ink2); font-style:normal; line-height:1.45 }
.gz-figfoot { margin:26px 0 0; font-size:.8rem; color:var(--inv-ink2);
  font-style:italic; max-width:70ch }

/* ---- wings ------------------------------------------------------------- */
.gz-wing-grid { display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,44px) }
.gz-wing-h { font-family:var(--display); font-size:1.15rem; margin:0 0 16px;
  padding-bottom:10px; border-bottom:3px solid var(--support);
  letter-spacing:-.02em }
.gz-wing-h span { display:block; font-family:var(--body); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink2);
  font-weight:600; margin-top:5px }
.gz-wing-i { border-bottom-color:var(--teal) }
.gz-ent { padding:14px 0; border-bottom:1px dotted var(--border) }
.gz-ent h4 { font-family:var(--display); font-size:1rem; margin:0 0 5px;
  letter-spacing:-.015em }
.gz-ent h4 a { color:inherit; text-decoration:none }
.gz-ent h4 a:hover { color:var(--accent); text-decoration:underline }
.gz-ent p { margin:0 0 6px; font-size:.88rem; color:var(--ink2);
  line-height:1.55 }
.gz-ent code { font-family:var(--mono); font-size:.74rem; color:var(--teal) }

/* ---- tables ------------------------------------------------------------ */
.gz-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
.gz-table { width:100%; border-collapse:collapse; font-size:.92rem }
/* A domain is one unbroken token. Without this it sets the minimum width of
   the whole page and a phone gets a horizontal scrollbar. */
.gz-table code, .gz-listing span, .gz-ent code { overflow-wrap:anywhere;
  word-break:break-word }
.gz-table th, .gz-table td { text-align:left; padding:13px 14px 13px 0;
  border-bottom:1px dotted var(--border); vertical-align:top }
.gz-table thead th { font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink2);
  border-bottom:2px solid var(--ink); padding-bottom:9px }
.gz-table tbody th { font-weight:700; letter-spacing:-.01em; width:26%;
  color:var(--ink) }
.gz-table td { color:var(--ink2) }
.gz-when { font-family:var(--mono); font-size:.78rem; color:var(--teal);
  width:96px; white-space:nowrap }
.gz-table tbody .gz-now td, .gz-table tbody .gz-now th {
  background:var(--support-dark); color:#051821 }
.gz-table tbody .gz-now .gz-when { color:#051821; font-weight:700 }
.gz-done .gz-when::after { content:" \2713"; color:var(--teal) }
.gz-later td, .gz-later th { color:var(--muted) }
.gz-later .gz-when::before { content:"92 "; color:var(--muted) }
.gz-cover code { font-family:var(--mono); font-size:.8rem; color:var(--ink) }
.gz-lede { color:var(--ink2); max-width:64ch; margin:0 0 20px; font-size:.97rem }

/* ---- story band -------------------------------------------------------- */
.gz-story { background:var(--support); color:#051821;
  padding:clamp(34px,4.6vw,72px) clamp(16px,3.4vw,52px) }
.gz-story-in { max-width:860px }
/* Ink at 72 percent composited to 4.58:1 on the orange, which is a
   pass by 0.08 and therefore not a decision anybody made. Solid and
   measured instead: 5.18:1. Same visual job, no opacity arithmetic. */
.gz-over-dark { color:#4a2a00 }
.gz-story h2 { font-size:clamp(1.35rem,3.2vw,2.5rem); letter-spacing:-.04em;
  margin:0 0 26px; line-height:1.14; font-weight:750; color:#051821 }
/* :not(.btn-ghost) is here to win a specificity fight rather than to select
   anything: the kit's dark mode rule is .btn:not(.btn-ghost):not(.btn-outline),
   which is three classes, and a plain `.gz-story .btn` is two. Without this the
   dark scheme repaints this button #051821 on #051821 and the only call to
   action on the band disappears. Measured, not guessed. */
.gz-story .btn:not(.btn-ghost) { background:#051821; border-color:#051821;
  color:#fff !important }
.gz-story .btn:not(.btn-ghost):hover { background:transparent;
  color:#051821 !important }

/* ---- glossary ---------------------------------------------------------- */
.gz-gloss { max-width:74ch; border-top:1px solid var(--border) }
.gz-g { border-bottom:1px dotted var(--border) }
.gz-g summary { cursor:pointer; list-style:none; padding:14px 34px 14px 0;
  position:relative; font-weight:700; font-size:1rem; font-family:var(--display) }
.gz-g summary::-webkit-details-marker { display:none }
.gz-g summary::after { content:"+"; position:absolute; right:8px; top:12px;
  font-size:1.3rem; color:var(--accent); line-height:1 }
.gz-g[open] summary::after { content:"\2212" }
.gz-g p { margin:0 0 16px; font-size:.92rem; color:var(--ink2);
  line-height:1.6 }

/* ---- footer ------------------------------------------------------------ */
.gz-foot { background:var(--inv-plane); color:var(--inv-ink2);
  padding:clamp(32px,4.4vw,66px) clamp(16px,3.4vw,52px) 26px }
.gz-foot-top { display:grid; grid-template-columns:1fr auto; gap:34px;
  align-items:end; padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.16) }
.gz-foot .gz-over { color:var(--support-dark) }
.gz-foot h2 { font-size:clamp(1.35rem,3vw,2.3rem); letter-spacing:-.04em;
  margin:0 0 26px; color:var(--inv-ink); max-width:20ch; font-weight:750 }
.gz-foot .btn:not(.btn-ghost) { background:var(--support);
  border-color:var(--support); color:#051821 !important }
.gz-foot .btn:hover { filter:brightness(1.06) }
.gz-foot-meta { text-align:right; font-size:.85rem; color:var(--inv-ink2) }
.gz-foot-meta b { color:var(--inv-ink) }
.gz-foot-cols { display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:30px 24px;
  padding:34px 0 0 }
.gz-foot-cols h2 { font-family:var(--body); font-size:.72rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--inv-ink);
  margin:0 0 13px; max-width:none }
.gz-foot-cols a { display:block; color:var(--inv-ink2); text-decoration:none;
  font-size:.9rem; padding:4px 0 }
.gz-foot-cols a:hover { color:var(--support-dark); text-decoration:underline }
.gz-foot-note { font-size:.84rem; color:var(--inv-ink2); max-width:74ch;
  margin:34px 0 0 }
.gz-foot-bar { display:flex; justify-content:space-between; gap:16px;
  flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14); margin-top:30px;
  padding-top:20px; font-size:.83rem; color:var(--inv-ink2) }
.gz-foot-bar a { color:var(--inv-ink2) }

/* ==========================================================================
   TWO VOICES. /story
   ========================================================================== */

.gz-storyhead { padding:clamp(26px,3.8vw,56px) clamp(16px,3.4vw,52px)
  clamp(20px,2.6vw,34px); border-bottom:5px solid var(--ink) }
.gz-storyhead h1 { font-size:clamp(1.9rem,5.6vw,4.2rem); letter-spacing:-.045em;
  line-height:1.02; margin:0 0 18px; font-weight:750 }
.gz-storyhead .gz-deck { border-bottom:0; padding-bottom:0; margin:0 }

.gz-voices { position:relative;
  padding:clamp(20px,3vw,38px) clamp(16px,3.4vw,52px)
          clamp(30px,4vw,60px) }
.gz-vh { display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,5vw,80px); border-bottom:4px solid var(--ink);
  padding-bottom:12px; margin-bottom:8px; position:sticky; top:46px;
  background:var(--plane); z-index:20 }
.gz-vh-n { font-family:var(--display); font-weight:800; font-size:1.02rem;
  margin:0; letter-spacing:-.02em }
.gz-vh > div:last-child .gz-vh-n { color:var(--teal) }
.gz-vh-p { margin:2px 0 0; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink2) }
.gz-vrow { display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,5vw,80px); position:relative; padding:26px 0 }
.gz-vrow + .gz-vrow { border-top:1px dotted var(--border) }
/* The year sits in the gutter between the two lives, which is the only place
   on the page that belongs to neither of them. */
.gz-vy { position:absolute; left:50%; top:20px; transform:translateX(-50%);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  color:var(--ink2); background:var(--plane); padding:2px 9px; margin:0;
  border:1px solid var(--border); border-radius:99px; z-index:5 }
.gz-v { min-width:0 }
.gz-v h3 { font-family:var(--display); font-size:1.06rem; margin:0 0 8px;
  letter-spacing:-.02em; line-height:1.28 }
.gz-v p { margin:0 0 .9em; font-size:.94rem; line-height:1.66;
  color:var(--ink2) }
.gz-v p:last-child { margin-bottom:0 }
.gz-v-l { padding-right:clamp(10px,2vw,26px);
  border-right:1px solid var(--border) }
.gz-v-r { padding-left:clamp(10px,2vw,26px) }
.gz-v-r h3 { color:var(--teal) }
.gz-v-quiet { min-height:1px }
/* The convergence. Two measures become one, and the rule that separated them
   is gone from here down. This is the whole argument of the page made in
   layout rather than in a sentence claiming it. */
/* On a two column row the year hangs in the gutter, which is the only part of
   the page that belongs to neither life. Once the columns merge there is no
   gutter, so it comes back into the flow above the heading instead of sitting
   on top of it. The first render had 2024, 2025 and Today printed straight
   through their own headlines. */
/* row-gap:0 because the row's own gap is the space BETWEEN the two lives, and
   a merged row has one. Left in place it became a 72px hole between the year
   and its heading, since the year is now a grid item rather than an absolute
   one. */
.gz-vrow-both { grid-template-columns:1fr; row-gap:0 }
.gz-vrow-both .gz-vy { position:static; transform:none; display:block;
  width:max-content; margin:0 auto 14px }
.gz-vrow-both .gz-v-both { border:0; padding:0; max-width:74ch;
  margin:0 auto; text-align:center }
.gz-vrow-both .gz-v-both h3 { font-size:clamp(1.2rem,2.6vw,1.75rem);
  letter-spacing:-.03em }
.gz-vrow-both .gz-v-both p { text-align:left }
.gz-vrow-merge { background:var(--accent-soft); border-top:4px solid var(--ink);
  padding:34px clamp(14px,3vw,38px); margin-top:14px }
.gz-vrow-merge .gz-vy { background:var(--support); border-color:var(--support);
  color:#051821; font-weight:700 }
.gz-vquote { margin:0; padding:22px 0 0; border-top:1px solid var(--border) }
.gz-vquote blockquote { margin:0 0 10px; font-family:var(--display);
  font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.4; letter-spacing:-.02em;
  font-weight:600 }
.gz-vquote figcaption { font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink2) }

/* ==========================================================================
   ANNUAL REPORT. the six legal documents
   ========================================================================== */

.gz-rh { display:grid; grid-template-columns:minmax(0,1fr) 268px;
  gap:clamp(22px,3.4vw,54px); align-items:start; border-bottom:5px solid var(--ink);
  padding:clamp(24px,3.4vw,50px) clamp(16px,3.4vw,52px) clamp(22px,3vw,38px) }
.gz-rh-n { font-family:var(--mono); font-size:clamp(2.4rem,7vw,5.4rem);
  line-height:.9; margin:0 0 10px; color:var(--accent); font-weight:400;
  letter-spacing:-.04em }
.gz-rh h1 { font-size:clamp(1.8rem,4.4vw,3.4rem); letter-spacing:-.04em;
  margin:0 0 14px; font-weight:750; line-height:1.04 }
.gz-rh-s { font-size:clamp(1rem,1.5vw,1.14rem); color:var(--ink2);
  line-height:1.55; max-width:58ch; margin:0 }
.gz-rh-meta { margin:0; padding:18px 0 0; border-top:3px solid var(--ink);
  font-size:.85rem }
.gz-rh-meta dt { font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink2); margin-top:14px }
.gz-rh-meta dt:first-child { margin-top:0 }
.gz-rh-meta dd { margin:3px 0 0; font-weight:650; color:var(--ink) }
.gz-report-grid { display:grid; grid-template-columns:minmax(0,1fr) 244px;
  gap:clamp(24px,3.4vw,56px); align-items:start }
.gz-report-main { min-width:0 }
.gz-rc { grid-column:2; grid-row:1; position:sticky; top:74px;
  border-top:3px solid var(--ink); padding:16px 0 0 }
.gz-rc h2 { font-family:var(--body); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink2); margin:0 0 12px;
  font-weight:800 }
.gz-rc ol { list-style:none; margin:0; padding:0 }
.gz-rc li { break-inside:avoid; margin-bottom:7px }
.gz-rc a { display:flex; gap:10px; text-decoration:none; color:var(--ink2);
  font-size:.9rem; padding:3px 0 }
.gz-rc a span { font-family:var(--mono); font-size:.72rem; color:var(--accent);
  padding-top:.14em }
.gz-rc a:hover { color:var(--ink) }
.gz-rc a:hover span { color:var(--ink) }
.gz-report { padding:clamp(24px,3.4vw,48px) clamp(16px,3.4vw,52px) }
.gz-report .prose { max-width:74ch }
.gz-report .prose h3 { font-family:var(--display); font-size:1.16rem;
  margin:2.4em 0 .55em; padding-top:.7em; border-top:1px solid var(--border);
  scroll-margin-top:76px; counter-increment:rep }
.gz-report .prose h3::before { content:counter(rep,decimal-leading-zero) " ";
  font-family:var(--mono); font-size:.74rem; color:var(--accent);
  letter-spacing:.1em; display:block; margin-bottom:6px; font-weight:400 }
.gz-report .prose h3:first-child { margin-top:0; border-top:0; padding-top:0 }
.gz-report .prose { counter-reset:rep }

/* ==========================================================================
   Interior pages. The kit blocks, wearing the Gazette's rules.
   ========================================================================== */

.sheet .sec { padding:clamp(30px,4.2vw,58px) 0 }
.sheet .sec + .sec { border-top:1px solid var(--border) }
.sheet .sec.invert + .sec, .sheet .sec + .sec.invert { border-top:0 }
.sheet .wrap { max-width:none; padding:0 clamp(16px,3.4vw,52px) }
.sheet .hero { padding-top:clamp(26px,3.6vw,48px) }
.sheet .hero h1 { letter-spacing:-.04em; font-weight:750 }
.sheet .eyebrow { color:var(--accent); font-weight:800; letter-spacing:.2em;
  font-size:.7rem }
.sheet .card { border-radius:0; border:0; border-top:3px solid var(--ink);
  background:transparent; padding:16px 0 0 }
.sheet .sec.invert .card { background:transparent;
  border-top-color:var(--support) }
.sheet .callout { border-radius:0; border:0; border-left:4px solid var(--support);
  background:var(--accent-soft) }
.sheet .toc { border-radius:0; background:transparent; border:0;
  border-top:3px solid var(--ink); border-bottom:1px solid var(--border);
  padding:16px 0 }
.sheet .btn { border-radius:0 }
.sheet .stats { border-top-width:3px; border-top-color:var(--ink) }
.sheet .pull { border-left:0; border-top:4px solid var(--ink); padding:20px 0 0 }
.sheet .timeline { border-left-color:var(--border) }
.sheet .prose h3 { scroll-margin-top:76px }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:980px) {
  .gz-front { grid-template-columns:1fr }
  .gz-side { border-left:0; border-top:3px solid var(--ink);
    padding:22px 0 0 }
  .gz-cols { columns:1 }
  .gz-wing-grid { grid-template-columns:1fr }
  .gz-rh { grid-template-columns:1fr }
  .gz-report-grid { grid-template-columns:1fr }
  .gz-rc { grid-column:1; position:static; margin-bottom:8px }
  .gz-rc ol { columns:2; column-gap:38px }
  .gz-foot-top { grid-template-columns:1fr }
  .gz-foot-meta { text-align:left }
}
@media (max-width:760px) {
  .gz-title { display:block; white-space:normal;
    font-size:clamp(1.9rem,10.5vw,3.6rem); text-align:center }
  .gz-title span { display:inline }
  .gz-title-sm { text-align:left; font-size:1.05rem }
  .gz-nav-cta { margin-left:0 }
  /* The nav strip scrolls sideways on a phone rather than collapsing into a
     hamburger, because a masthead's rules are the navigation and a hamburger
     would delete them. A scroller with no edge treatment reads as a strip that
     simply ends, so the last item is faded under a gradient: that is the only
     thing that tells a thumb there is more to the right. Not clickable. */
  .gz-navwrap { position:sticky; overflow:hidden }
  .gz-navwrap::after { content:""; position:absolute; right:0; top:0; bottom:0;
    width:38px; pointer-events:none;
    background:linear-gradient(90deg,rgba(255,253,247,0),var(--plane)) }
  .gz-table tbody th { width:auto }
  .gz-rc ol { columns:1 }
  /* Two voices become one column on a phone. A 165px measure is not a column,
     it is a word list, so the rule is dropped and the two lives interleave in
     date order with the name carried on each entry instead. */
  .gz-vh { display:none }
  .gz-vrow { grid-template-columns:1fr; gap:0; padding:20px 0 20px 0 }
  .gz-v-l { border-right:0; padding-right:0; padding-bottom:16px }
  .gz-v-r { padding-left:0 }
  .gz-v-l:not(.gz-v-quiet)::before, .gz-v-r:not(.gz-v-quiet)::before {
    content:attr(data-who); display:block; font-size:.64rem;
    letter-spacing:.18em; text-transform:uppercase; color:var(--ink2);
    margin-bottom:6px; font-weight:700 }
  .gz-vy { position:static; transform:none; display:inline-block;
    margin:0 0 12px }
  .gz-vrow-both .gz-v-both { text-align:left }
}

/* ==========================================================================
   Dark
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root { --teal:var(--teal-dark) }
  body { background:#02090d }
  .sheet { background:var(--inv-plane); box-shadow:none }
  .gz-navwrap { background:var(--inv-plane) }
  .gz-navwrap::after { background:linear-gradient(90deg,rgba(5,24,33,0),
    var(--inv-plane)) }
  .gz-nav a[aria-current] { box-shadow:inset 0 -3px 0 var(--accent-dark) }
  /* Rules. --ink now flips to white, so a 5px masthead rule would read as a
     white bar rather than as a rule. Held back to a hairline weight of white
     instead, which is what ink on newsprint looks like when the newsprint is
     the dark thing. */
  .gz-dateline, .gz-deck, .gz-quote, .gz-listing li, .gz-brief, .gz-ent,
  .gz-table th, .gz-table td, .gz-g, .gz-gloss, .gz-band, .gz-rc,
  .gz-vrow + .gz-vrow, .gz-vquote, .gz-report .prose h3, .gz-v-l {
    border-color:rgba(255,255,255,.15) }
  .gz-cols { column-rule-color:rgba(255,255,255,.15) }
  .gz-quote, .gz-vh, .gz-rh, .gz-band-rule, .gz-figs, .gz-vrow-merge,
  .gz-table thead th, .gz-sh, .gz-rh-meta, .gz-navwrap, .gz-storyhead,
  .sheet .card, .sheet .toc, .sheet .stats, .sheet .pull {
    border-color:rgba(255,255,255,.45) }
  .gz-vh, .gz-vy { background:var(--inv-plane) }
  .gz-vrow-merge { background:rgba(245,136,0,.09) }
  .gz-later td, .gz-later th { color:var(--muted-dark) }
  .sheet .card { border-top-color:var(--support) }
  .sheet .callout { background:rgba(245,136,0,.09) }
}

/* ==========================================================================
   Motion
   ==========================================================================
   There are no hiding rules here, and that is the point. Every entrance in
   motion.js is a gsap.from(), so the start state is written by the script and
   only by the script. Script blocked, failed or absent means a fully visible
   page rather than a fully blank one. The only motion the stylesheet owns is
   the two states the script toggles by class.
   ========================================================================== */

.gz-rc a.is-here { color:var(--ink); font-weight:650 }
.gz-rc a.is-here span { color:var(--ink) }
@media (prefers-color-scheme: dark) {
  .gz-rc a.is-here, .gz-rc a.is-here span { color:var(--inv-ink) }
}