/* Site stylesheet. One file, loaded normally from the of every page. It is kept readable rather than minified: gzip does the compression on the wire, and a stylesheet you can read is one you can safely change. Order matters. The design tokens, reset and page shell come first because everything after them depends on the custom properties they define. */ /* ================================================================== PART ONE — tokens, reset, page shell, masthead ================================================================== */ /* ---------- design tokens ---------- */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --fs-xs: .8125rem; --fs-sm: .875rem; --fs-base: clamp(1rem, .972rem + .14vw, 1.0938rem); --fs-lg: clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem); --fs-xl: clamp(1.125rem, 1.05rem + .36vw, 1.3125rem); --fs-h4: clamp(1.0625rem, 1.01rem + .28vw, 1.2rem); --fs-h3: clamp(1.1875rem, 1.09rem + .48vw, 1.4375rem); --fs-h2: clamp(1.4375rem, 1.24rem + .98vw, 2rem); --fs-h1: clamp(1.9375rem, 1.55rem + 1.94vw, 2.9rem); --fs-display: clamp(2.125rem, 1.62rem + 2.52vw, 3.35rem); --lh-tight: 1.16; --lh-snug: 1.32; --lh-body: 1.68; --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; --wrap: 73rem; --wrap-narrow: 45rem; --gutter: clamp(1.15rem, .55rem + 2.4vw, 2.5rem); --shadow-1: 0 1px 2px rgba(12, 22, 33, .06), 0 1px 3px rgba(12, 22, 33, .05); --dur: .18s; } /* light theme (default) */ :root { color-scheme: light; --bg: #ffffff; --bg-soft: #f3f6f9; --surface: #ffffff; --surface-soft: #f7f9fb; --surface-sunken: #eef2f6; --line: #dce2ea; --line-strong: #bcc7d3; --field-border: #7d8895; --ink: #0f1720; --ink-soft: #47535f; --ink-faint: #5b6875; --brand: #0d2b45; --brand-soft: #e9eff5; --accent: #0b5f73; --accent-strong: #084b5c; --accent-soft: #e5f1f4; --accent-line: #7cb6c4; --sand: #8f6116; --sand-soft: #fcf3e2; --sand-line: #d9b877; --danger: #9d2a20; --danger-soft: #fceeec; --danger-line: #dda49d; --ok: #1c6238; --ok-soft: #eaf4ee; --focus: #0b5f73; --masthead-bg: rgba(255, 255, 255, .9); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0b1017; --bg-soft: #0e151d; --surface: #121a24; --surface-soft: #16202b; --surface-sunken: #0c131a; --line: #253140; --line-strong: #3b4a5c; --field-border: #5b6f86; --ink: #e9eff6; --ink-soft: #adbaca; --ink-faint: #94a3b5; --brand: #d8e7f4; --brand-soft: #16222e; --accent: #5cc3d8; --accent-strong: #8bd9e9; --accent-soft: #0f2a33; --accent-line: #2d6676; --sand: #dfb46a; --sand-soft: #251e10; --sand-line: #6a5429; --danger: #f0968d; --danger-soft: #2a1613; --danger-line: #79372f; --ok: #80cd9d; --ok-soft: #10241a; --focus: #5cc3d8; --masthead-bg: rgba(11, 16, 23, .9); --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0b1017; --bg-soft: #0e151d; --surface: #121a24; --surface-soft: #16202b; --surface-sunken: #0c131a; --line: #253140; --line-strong: #3b4a5c; --field-border: #5b6f86; --ink: #e9eff6; --ink-soft: #adbaca; --ink-faint: #94a3b5; --brand: #d8e7f4; --brand-soft: #16222e; --accent: #5cc3d8; --accent-strong: #8bd9e9; --accent-soft: #0f2a33; --accent-line: #2d6676; --sand: #dfb46a; --sand-soft: #251e10; --sand-line: #6a5429; --danger: #f0968d; --danger-soft: #2a1613; --danger-line: #79372f; --ok: #80cd9d; --ok-soft: #10241a; --focus: #5cc3d8; --masthead-bg: rgba(11, 16, 23, .9); --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } img, svg, video, canvas { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; } h1, h2, h3, h4 { color: var(--brand); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.014em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); } p { text-wrap: pretty; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; } :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); } ::selection { background: var(--accent-soft); color: var(--ink); } /* ---------- shell ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--wrap-narrow); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100%; left: var(--sp-4); z-index: 100; padding: var(--sp-3) var(--sp-5); background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; border-radius: 0 0 var(--r-md) var(--r-md); } .skip-link:focus { top: 0; color: #fff; } /* ---------- masthead ---------- */ .masthead { position: sticky; top: 0; z-index: 50; background: var(--masthead-bg); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--line); } .masthead__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); min-height: 4.25rem; padding-block: var(--sp-3); } .brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--brand); text-decoration: none; margin-inline-end: auto; } .brand__mark { flex: none; } .brand__tile { fill: var(--brand); } .brand__fold { fill: var(--accent); opacity: .55; } .brand__bar { fill: var(--bg); } .brand__bar--1 { fill: var(--accent-line); } :root[data-theme="dark"] .brand__bar { fill: #0b1017; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand__bar { fill: #0b1017; } } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-size: 1.135rem; font-weight: 700; letter-spacing: .11em; } .brand__tagline { display: none; margin-top: .18rem; color: var(--ink-faint); font-size: .7rem; font-weight: 500; letter-spacing: .035em; } .masthead__controls { display: flex; align-items: center; gap: var(--sp-2); order: 3; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem; border: 1px solid var(--field-border); border-radius: var(--r-md); background: var(--surface); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: border-color var(--dur), color var(--dur), background var(--dur); } .icon-btn:hover { border-color: var(--accent); color: var(--ink); } /* Both controls need scripting, so they stay out of the page until it runs. The `js` class is set synchronously in , before the first paint, which keeps this from shifting the layout. */ .nav-toggle, .theme-toggle { display: none; } .js .nav-toggle, .js .theme-toggle { display: inline-flex; } .nav-toggle__close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; } .theme-toggle__moon { display: none; } :root[data-theme="dark"] .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle__moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle__sun { display: none; } :root:not([data-theme="light"]) .theme-toggle__moon { display: block; } } .primary-nav { order: 4; width: 100%; } .js .primary-nav { display: none; } .js .primary-nav.is-open { display: block; } .primary-nav__list { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: 0; padding: var(--sp-2) 0 0; list-style: none; border-top: 1px solid var(--line); } .primary-nav__list a { display: block; padding: .6rem .7rem; border-radius: var(--r-sm); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; } .primary-nav__list a:hover { background: var(--surface-sunken); color: var(--ink); } .primary-nav__list a[aria-current="page"] { color: var(--accent-strong); box-shadow: inset 0 -2px 0 var(--accent); } @media (min-width: 56em) { .brand__tagline { display: block; } .masthead__inner { flex-wrap: nowrap; } .primary-nav, .js .primary-nav { display: block; order: 2; width: auto; margin-inline-start: auto; } .primary-nav__list { padding-top: 0; border-top: 0; gap: var(--sp-1); } .masthead__controls { order: 3; margin-inline-start: var(--sp-3); } .js .nav-toggle { display: none; } } /* ---------- first-screen blocks ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: var(--sp-3); color: var(--accent-strong); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--accent); } .page-head { padding-block: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem) var(--sp-6); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-soft), var(--bg)); } .page-head__title { max-width: 22ch; } .lede { max-width: 62ch; margin-top: var(--sp-4); color: var(--ink-soft); font-size: var(--fs-xl); line-height: 1.55; } .hero { padding-block: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem) clamp(2.25rem, 1.4rem + 3.4vw, 4rem); background: linear-gradient(180deg, var(--bg-soft), var(--bg)); border-bottom: 1px solid var(--line); } .hero__title { max-width: 17ch; font-size: var(--fs-display); } .hero__lede { max-width: 58ch; margin-top: var(--sp-5); color: var(--ink-soft); font-size: var(--fs-xl); line-height: 1.55; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; padding: .7rem 1.35rem; border: 1px solid transparent; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 650; text-decoration: none; cursor: pointer; transition: background var(--dur), border-color var(--dur), color var(--dur); } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-strong); color: #fff; } :root[data-theme="dark"] .btn--primary { color: #06222a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--primary { color: #06222a; } } .btn--ghost { background: var(--surface); border-color: var(--field-border); color: var(--ink); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent-strong); } main { display: block; } /* ================================================================== PART TWO — component library ================================================================== */ /* ================================================================== 1. Sections and rhythm ================================================================== */ .section { padding-block: clamp(2.75rem, 1.7rem + 4.2vw, 5.25rem); } .section--tight { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); } .section--soft { background: var(--bg-soft); border-block: 1px solid var(--line); } .section__head { max-width: 58ch; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); } .section__title { margin-bottom: var(--sp-3); } .section__intro { color: var(--ink-soft); font-size: var(--fs-lg); } .flow > * + * { margin-top: var(--sp-4); } .flow--loose > * + * { margin-top: var(--sp-5); } /* ================================================================== 2. Grids ================================================================== */ .grid { display: grid; gap: var(--sp-5); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); } @media (min-width: 64em) { .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; } } /* ================================================================== 3. Cards ================================================================== */ .card { display: flex; flex-direction: column; padding: clamp(1.25rem, 1rem + 1vw, 1.85rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--dur), box-shadow var(--dur); } .card--soft { background: var(--surface-soft); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin-bottom: var(--sp-4); border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-strong); } .card__title { margin-bottom: var(--sp-3); font-size: var(--fs-h4); } .card__text { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.62; } .card__text + .card__text { margin-top: var(--sp-3); } .card__foot { margin-top: auto; padding-top: var(--sp-4); } .numbered { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; margin-bottom: var(--sp-4); border: 1px solid var(--accent-line); border-radius: var(--r-pill); color: var(--accent-strong); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; } /* ================================================================== 4. Article cards and lists ================================================================== */ .article-card { display: flex; flex-direction: column; padding: clamp(1.35rem, 1rem + 1.4vw, 2.25rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--dur), box-shadow var(--dur); } .article-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-1); } .article-card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; } .article-card__title { font-size: var(--fs-h3); } .article-card__title a { color: inherit; text-decoration: none; } .article-card__title a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: .2em; } .article-card__summary { margin-top: var(--sp-3); color: var(--ink-soft); } .article-card__foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); } .article-card--featured { background: linear-gradient(160deg, var(--brand-soft), var(--surface) 62%); border-color: var(--accent-line); } .tag { display: inline-flex; align-items: center; padding: .2rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface-soft); color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em; } .tag--accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); } .link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 650; text-decoration: none; } .link-arrow::after { content: "\2192"; transition: transform var(--dur); } .link-arrow:hover { text-decoration: underline; text-underline-offset: .22em; } .link-arrow:hover::after { transform: translateX(3px); } .dot-sep::before { content: "\00b7"; margin-inline-end: var(--sp-3); color: var(--line-strong); } /* ================================================================== 5. Prose (article body) ================================================================== */ .prose { font-size: var(--fs-lg); } .prose > * + * { margin-top: var(--sp-5); } .prose > h2 { margin-top: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem); padding-top: var(--sp-6); border-top: 1px solid var(--line); } .prose > h3 { margin-top: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem); } .prose > h4 { margin-top: var(--sp-6); color: var(--ink); } .prose > h2 + *, .prose > h3 + *, .prose > h4 + * { margin-top: var(--sp-4); } .prose p { line-height: var(--lh-body); } .prose strong { color: var(--ink); font-weight: 680; } .prose a { font-weight: 500; } .prose ul, .prose ol { padding-inline-start: 1.35em; } .prose li + li { margin-top: var(--sp-3); } .prose li::marker { color: var(--accent); } .prose ol > li::marker { font-weight: 700; } .prose li > ul, .prose li > ol { margin-top: var(--sp-3); } .prose blockquote { padding: var(--sp-4) var(--sp-5); border-inline-start: 3px solid var(--accent); background: var(--surface-soft); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--ink-soft); } .prose blockquote p + p { margin-top: var(--sp-3); } .prose blockquote cite { display: block; margin-top: var(--sp-3); color: var(--ink-faint); font-size: var(--fs-sm); font-style: normal; } .prose code { padding: .13em .38em; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface-sunken); color: var(--ink); font-family: var(--font-mono); font-size: .875em; overflow-wrap: anywhere; } .prose pre { overflow-x: auto; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); font-size: var(--fs-sm); line-height: 1.6; } .prose pre code { padding: 0; border: 0; background: none; font-size: 1em; } .prose figure { margin-block: var(--sp-6); } .prose figcaption { margin-top: var(--sp-3); color: var(--ink-faint); font-size: var(--fs-sm); line-height: 1.55; } .prose sup a { padding-inline: .12em; font-size: .78em; font-weight: 700; text-decoration: none; } .prose sup a:hover { text-decoration: underline; } /* ================================================================== 6. Tables ================================================================== */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.55; } caption { padding: var(--sp-4) var(--sp-4) var(--sp-3); color: var(--ink-faint); font-size: var(--fs-sm); text-align: start; } th, td { padding: .8rem 1rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); } /* Deliberately not sticky: the page already has a sticky masthead, and a sticky header row would slide underneath it while scrolling. */ thead th { background: var(--surface-sunken); color: var(--brand); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } tbody th { color: var(--ink); font-weight: 650; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td, tbody tr:hover th { background: var(--surface-soft); } /* ================================================================== 7. Callouts and notices ================================================================== */ .callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); padding: clamp(1.1rem, .9rem + .8vw, 1.5rem) clamp(1.1rem, .9rem + .8vw, 1.6rem); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: var(--r-md); background: var(--surface-soft); font-size: var(--fs-base); } .callout__icon { grid-row: span 2; color: var(--accent); } .callout__title { align-self: center; color: var(--ink); font-size: var(--fs-base); font-weight: 700; letter-spacing: 0; } .callout__body { grid-column: 2; color: var(--ink-soft); } .callout__body > * + * { margin-top: var(--sp-3); } .callout__body ul { padding-inline-start: 1.2em; } .callout__body li + li { margin-top: var(--sp-2); } .callout--warn { border-inline-start-color: var(--sand); background: var(--sand-soft); } .callout--warn .callout__icon { color: var(--sand); } .callout--danger { border-inline-start-color: var(--danger); background: var(--danger-soft); } .callout--danger .callout__icon { color: var(--danger); } .callout--ok { border-inline-start-color: var(--ok); background: var(--ok-soft); } .callout--ok .callout__icon { color: var(--ok); } .independence-notice { display: flex; gap: var(--sp-4); padding: clamp(1.1rem, .9rem + .8vw, 1.5rem); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-sunken); color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; } .independence-notice__icon { flex: none; color: var(--ink-faint); } .independence-notice strong { color: var(--ink); } .independence-notice p + p { margin-top: var(--sp-3); } /* ================================================================== 8. Key takeaways, checklists, steps ================================================================== */ .takeaways { padding: clamp(1.35rem, 1rem + 1.4vw, 2rem); border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: var(--accent-soft); } .takeaways__title { margin-bottom: var(--sp-4); color: var(--accent-strong); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .takeaways ul { margin: 0; padding-inline-start: 0; list-style: none; } .takeaways li { position: relative; padding-inline-start: 1.7rem; color: var(--ink); font-size: var(--fs-base); } .takeaways li + li { margin-top: var(--sp-3); } .takeaways li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 2px; background: var(--accent); } .checklist { margin: 0; padding-inline-start: 0; list-style: none; } .checklist li { position: relative; padding: .1rem 0 .1rem 2rem; font-size: var(--fs-base); } .checklist li + li { margin-top: var(--sp-3); } .checklist li::before { content: ""; position: absolute; inset-inline-start: 0; top: .3em; width: 1.15rem; height: 1.15rem; border: 1.5px solid var(--field-border); border-radius: var(--r-xs); background: var(--surface); } /* A list of things that will never happen is not a list of things to tick off, so it gets a struck-through marker rather than an empty box. */ .checklist--never li::before { border-color: var(--danger); background: var(--danger-soft); } .checklist--never li::after { content: ""; position: absolute; inset-inline-start: .33rem; top: .78em; width: .5rem; height: 0; border-top: 2px solid var(--danger); } .steps { margin: 0; padding: 0; list-style: none; counter-reset: step; } .steps > li { position: relative; padding-inline-start: 3.1rem; counter-increment: step; } .steps > li + li { margin-top: var(--sp-5); } .steps > li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: var(--r-pill); background: var(--accent); color: var(--bg); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; } .steps__title { margin-bottom: var(--sp-2); font-size: var(--fs-h4); } .steps__body { color: var(--ink-soft); } /* ================================================================== 9. Table of contents, breadcrumb, article meta ================================================================== */ .breadcrumb { font-size: var(--fs-sm); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: .3rem .55rem; margin: 0; padding: 0; list-style: none; color: var(--ink-faint); } .breadcrumb li { display: flex; align-items: center; gap: .55rem; } .breadcrumb li + li::before { content: "/"; color: var(--line-strong); } .breadcrumb a { color: var(--ink-soft); text-decoration: none; } .breadcrumb a:hover { color: var(--accent-strong); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--ink-faint); } .article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); color: var(--ink-faint); font-size: var(--fs-sm); } .article-meta__item { display: flex; gap: .4rem; } .article-meta__label { font-weight: 650; color: var(--ink-soft); } .toc { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-soft); } .toc__title { margin-bottom: var(--sp-4); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; } .toc li { counter-increment: toc; } .toc li + li { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); } .toc a { display: flex; gap: .7rem; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.45; text-decoration: none; } .toc a::before { content: counter(toc, decimal-leading-zero); color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700; } .toc a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: .2em; } /* ================================================================== 10. References and glossary ================================================================== */ .references { counter-reset: ref; margin: 0; padding: 0; list-style: none; } .references > li { position: relative; padding-inline-start: 2.6rem; counter-increment: ref; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); } .references > li + li { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); } .references > li::before { content: "[" counter(ref) "]"; position: absolute; inset-inline-start: 0; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700; } .references cite { font-style: normal; font-weight: 650; color: var(--ink); } .references .ref-url { overflow-wrap: anywhere; } .glossary { margin: 0; } .glossary > div { padding-block: var(--sp-4); border-bottom: 1px solid var(--line); } .glossary > div:last-child { border-bottom: 0; } .glossary dt { color: var(--brand); font-weight: 700; } .glossary dd { margin: var(--sp-2) 0 0; color: var(--ink-soft); font-size: var(--fs-base); } /* ================================================================== 11. Figures and diagrams ================================================================== */ /* Diagrams are built from text rather than drawn, so they reflow on small screens, stay readable at any zoom level and are legible to screen readers without a parallel description. */ .diagram { padding: clamp(1.1rem, .85rem + 1.1vw, 1.85rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-soft); } .diagram__title { margin-bottom: var(--sp-5); color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .lanes { margin: 0; padding: 0; list-style: none; } .lane + .lane { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); } .lane__tag { display: inline-block; margin-bottom: var(--sp-3); color: var(--accent-strong); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .lane__chips { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-2); } .lane__chip { display: flex; align-items: center; padding: .5rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; } /* A connector between chips. The chips are list items in reading order, so the sequence is already conveyed without it. */ .lane__chip + .lane__chip::before { content: "\2192"; margin-inline-end: .7rem; color: var(--ink-faint); font-weight: 400; } .lane__chip--wait { border-style: dashed; border-color: var(--sand-line); background: var(--sand-soft); color: var(--sand); } .lane__chip--end { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); } .lane__note { margin-top: var(--sp-3); color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.55; } /* ================================================================== 13. Contact blocks ================================================================== */ .contact-card { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .contact-card__label { margin-bottom: var(--sp-2); color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .contact-card__value { font-size: var(--fs-base); font-weight: 650; overflow-wrap: anywhere; } .contact-card__note { margin-top: var(--sp-3); color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.55; } .detail-list { margin: 0; } .detail-list > div { display: grid; gap: .25rem; padding-block: var(--sp-4); border-bottom: 1px solid var(--line); } .detail-list > div:first-child { padding-top: 0; } .detail-list > div:last-child { border-bottom: 0; } .detail-list dt { color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .detail-list dd { margin: 0; color: var(--ink); font-weight: 600; } @media (min-width: 40em) { .detail-list > div { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; } } /* ================================================================== 14. Legal documents ================================================================== */ .legal { font-size: var(--fs-base); } .legal > * + * { margin-top: var(--sp-4); } .legal > h2 { margin-top: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-h3); } .legal > h3 { margin-top: var(--sp-6); font-size: var(--fs-h4); color: var(--ink); } .legal > h2 + *, .legal > h3 + * { margin-top: var(--sp-3); } .legal p, .legal li { color: var(--ink-soft); } .legal ul, .legal ol { padding-inline-start: 1.35em; } .legal li + li { margin-top: var(--sp-2); } .legal li::marker { color: var(--accent); } .legal strong { color: var(--ink); } .doc-status { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-soft); color: var(--ink-soft); font-size: var(--fs-sm); } .doc-status strong { color: var(--ink); } /* ================================================================== 15. CTA panel and stats ================================================================== */ .panel { padding: clamp(1.6rem, 1.2rem + 2vw, 3rem); border: 1px solid var(--line); border-radius: var(--r-xl); background: linear-gradient(155deg, var(--brand-soft), var(--surface) 70%); } .panel__title { max-width: 24ch; } .panel__text { max-width: 62ch; margin-top: var(--sp-4); color: var(--ink-soft); } .panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); } /* ================================================================== 16. Footer ================================================================== */ .site-footer { margin-top: clamp(3rem, 2rem + 4vw, 6rem); padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem) var(--sp-6); border-top: 1px solid var(--line); background: var(--bg-soft); font-size: var(--fs-sm); } .site-footer__grid { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } @media (min-width: 64em) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } } .site-footer__brand .brand--footer { margin-bottom: var(--sp-4); } .site-footer__blurb { max-width: 40ch; color: var(--ink-soft); line-height: 1.6; } .site-footer__heading { margin-bottom: var(--sp-4); color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .site-footer__nav ul { margin: 0; padding: 0; list-style: none; } .site-footer__nav li + li { margin-top: var(--sp-3); } .site-footer__nav a { color: var(--ink-soft); text-decoration: none; overflow-wrap: anywhere; } .site-footer__nav a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: .2em; } .site-footer__hint { display: block; color: var(--ink-faint); font-size: var(--fs-xs); } .publisher { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: var(--sp-6); border-top: 1px solid var(--line); } .publisher__heading { margin-bottom: var(--sp-4); color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .publisher__list { display: grid; gap: var(--sp-4); margin: 0; } @media (min-width: 52em) { .publisher__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-5); } } .publisher__row dt { color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 650; } .publisher__row dd { margin: .25rem 0 0; color: var(--ink); font-weight: 600; line-height: 1.5; } .site-footer__notices { margin-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } .notice-line { color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.6; } .notice-line + .notice-line { margin-top: var(--sp-3); } .site-footer__base { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: space-between; margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); color: var(--ink-faint); font-size: var(--fs-xs); } /* ================================================================== 17. Utilities ================================================================== */ .muted { color: var(--ink-soft); } .faint { color: var(--ink-faint); } .mono { font-family: var(--font-mono); font-size: .9em; } .list-plain { margin: 0; padding: 0; list-style: none; } .list-plain li + li { margin-top: var(--sp-3); } /* ================================================================== 18. Print ================================================================== */ @media print { .masthead, .site-footer__grid, .skip-link, .toc, .masthead__controls, .panel { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .prose { font-size: 11pt; } a { color: #000; text-decoration: underline; } .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; } .card, .callout, .takeaways, .table-wrap, .independence-notice { break-inside: avoid; border-color: #999; } h1, h2, h3 { break-after: avoid; color: #000; } } /* ================================================================== 19. Sponsorship slot Deliberately quiet: a hairline, a muted label and no colour of its own, so it reads as a marked-off block rather than something competing with the article. It sits in the flow, reserves its own height and never overlays or follows the reader. ================================================================== */ .sponsor { margin-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-soft); } .sponsor__label { margin-bottom: var(--sp-2); color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .sponsor__title { color: var(--brand); font-size: var(--fs-lg); font-weight: 650; line-height: 1.35; } .sponsor__title a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; } .sponsor__title a:hover { color: var(--accent-strong); } .sponsor__text { max-width: 68ch; margin-top: var(--sp-2); color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; } .sponsor__note { max-width: 68ch; margin-top: var(--sp-3); color: var(--ink-faint); font-size: var(--fs-xs); line-height: 1.55; } @media print { .sponsor { display: none; } }