/* =============================================================================
an- design system
A calm, paper-and-ink editorial system for a one-off microsite.
Hand-written. No framework, no build step, no JS dependency.
REQUIRED in , and this is the ONLY external dependency:
Class prefix: an-
Reserved, never styled here: rt-
============================================================================= */
/* -----------------------------------------------------------------------------
1. TOKENS
-------------------------------------------------------------------------- */
:root {
color-scheme: light dark;
/* --- Type families ------------------------------------------------------ */
--an-font-sans:
"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--an-font-serif:
"Source Serif 4", ui-serif, Georgia, "Iowan Old Style", "Times New Roman",
Times, serif;
--an-font-mono:
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
/* --- Type scale (fluid, mobile first) ----------------------------------- */
--an-fs-display-xl: clamp(2.375rem, 1.62rem + 3.35vw, 4rem); /* 38 -> 64 */
--an-fs-display-l: clamp(1.875rem, 1.47rem + 1.80vw, 2.75rem); /* 30 -> 44 */
--an-fs-display-m: clamp(1.375rem, 1.20rem + 0.77vw, 1.75rem); /* 22 -> 28 */
--an-fs-display-s: clamp(1.125rem, 1.06rem + 0.29vw, 1.25rem); /* 18 -> 20 */
--an-fs-lead: clamp(1.1875rem, 1.09rem + 0.44vw, 1.4375rem);/* 19 -> 23 */
--an-fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16 -> 17 */
--an-fs-body-lg: clamp(1.0625rem, 1.02rem + 0.20vw, 1.125rem); /* 17 -> 18 */
--an-fs-small: 0.9375rem; /* 15 */
--an-fs-detail: 0.875rem; /* 14 */
--an-fs-micro: 0.8125rem; /* 13 */
--an-lh-tight: 1.08;
--an-lh-display: 1.16;
--an-lh-snug: 1.32;
--an-lh-body: 1.65;
--an-lh-loose: 1.75;
--an-ls-display: -0.02em;
--an-ls-tight: -0.01em;
--an-ls-normal: 0em;
--an-ls-wide: 0.085em;
--an-fw-regular: 400;
--an-fw-medium: 500;
--an-fw-semibold: 600;
/* --- Space scale -------------------------------------------------------- */
--an-space-1: 0.25rem;
--an-space-2: 0.5rem;
--an-space-3: 0.75rem;
--an-space-4: 1rem;
--an-space-5: 1.5rem;
--an-space-6: 2rem;
--an-space-7: 2.5rem;
--an-space-8: 3rem;
--an-space-9: 4rem;
--an-space-10: 5rem;
--an-space-11: 6rem;
/* Section rhythm and gutters */
--an-section: clamp(3.5rem, 1.9rem + 6.8vw, 7.5rem);
--an-section-tight: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
--an-gutter: clamp(1.25rem, 0.85rem + 2vw, 4rem);
/* --- Measure and containers --------------------------------------------- */
--an-container: 72rem; /* 1152px */
--an-container-narrow: 46rem; /* 736px */
--an-measure: 68ch; /* ~68-72 characters at body size */
/* --- Radii -------------------------------------------------------------- */
--an-radius-xs: 4px;
--an-radius-sm: 6px;
--an-radius-md: 8px;
--an-radius-lg: 12px;
/* --- Hairlines ---------------------------------------------------------- */
--an-hairline: 1px;
/* --- Motion ------------------------------------------------------------- */
--an-dur-fast: 150ms;
--an-dur: 200ms;
--an-dur-slow: 260ms;
--an-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
/* --- Elevation (deliberately almost nothing) ---------------------------- */
--an-shadow-sm: 0 1px 2px rgb(20 20 19 / 0.05);
/* ==========================================================================
COLOUR - LIGHT
Warm paper. Warm ink. One accent (clay).
Contrast ratios are documented in COMPONENTS.md.
======================================================================== */
/* Surfaces */
--an-bg: #f0eee6; /* page - bone / oat */
--an-bg-raised: #faf9f5; /* cards, header, cooler + lighter */
--an-bg-sunken: #e8e6dc; /* notice bar, table head, warmer + deeper */
--an-bg-warm: #e3dacc; /* CTA band, warmest neighbour */
/* Ink */
--an-ink: #141413; /* body + headings */
--an-ink-strong: #000000; /* rare, for maximum emphasis */
--an-ink-2: #3d3d3a; /* secondary text */
--an-ink-3: #5e5d59; /* muted text, kickers, captions */
--an-ink-mark: #87867f; /* decorative marks only, never text */
/* Accent - clay */
--an-clay: #d97757; /* the accent. rules, marks, primary button */
--an-clay-deep: #c6613f; /* hover / pressed */
--an-clay-text: #9e4423; /* the only clay-family value legible as text */
--an-clay-wash: #f7e6de; /* footnote target, selection */
/* Lines */
--an-line: rgb(20 20 19 / 0.13);
--an-line-strong: rgb(20 20 19 / 0.26);
--an-line-ink: #141413;
/* Verdict - strong */
--an-strong-bg: #dfe5d4;
--an-strong-ink: #46552f;
--an-strong-line: rgb(70 85 47 / 0.34);
/* Verdict - partial */
--an-partial-bg: #efe3c8;
--an-partial-ink: #6b4a16;
--an-partial-line: rgb(107 74 22 / 0.30);
/* Verdict - gap. Deliberately a calm stone, never a red alert. */
--an-gap-bg: #e1dfd5;
--an-gap-ink: #3d3d3a;
--an-gap-line: rgb(20 20 19 / 0.30);
/* Buttons */
--an-btn-primary-bg: var(--an-clay);
--an-btn-primary-bg-hover: var(--an-clay-deep);
--an-btn-primary-ink: #141413;
--an-btn-secondary-ink: #141413;
--an-btn-secondary-line: #141413;
--an-btn-secondary-bg-hover: #141413;
--an-btn-secondary-ink-hover:#faf9f5;
--an-focus: #141413;
}
@media (prefers-color-scheme: dark) {
:root {
/* Warm dark neutral, not black, not blue-grey. */
--an-bg: #1b1a18;
--an-bg-raised: #232220;
--an-bg-sunken: #141413;
--an-bg-warm: #2a2724;
--an-ink: #f0eee6;
--an-ink-strong: #faf9f5;
--an-ink-2: #d1cfc5;
--an-ink-3: #a8a69d;
--an-ink-mark: #6e6c65;
--an-clay: #d97757;
--an-clay-deep: #e28a69;
--an-clay-text: #e08c6d;
--an-clay-wash: #3a2620;
--an-line: rgb(250 249 245 / 0.14);
--an-line-strong: rgb(250 249 245 / 0.28);
--an-line-ink: #f0eee6;
--an-strong-bg: #283021;
--an-strong-ink: #b7ce9b;
--an-strong-line: rgb(183 206 155 / 0.34);
--an-partial-bg: #332c1c;
--an-partial-ink: #e5c88c;
--an-partial-line: rgb(229 200 140 / 0.30);
--an-gap-bg: #2b2a26;
--an-gap-ink: #c9c7bd;
--an-gap-line: rgb(250 249 245 / 0.30);
--an-btn-primary-bg: var(--an-clay);
--an-btn-primary-bg-hover: var(--an-clay-deep);
--an-btn-primary-ink: #141413;
--an-btn-secondary-ink: #f0eee6;
--an-btn-secondary-line: #f0eee6;
--an-btn-secondary-bg-hover: #f0eee6;
--an-btn-secondary-ink-hover: #141413;
--an-focus: #f0eee6;
}
}
/* -----------------------------------------------------------------------------
2. RESET AND BASE
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
font-family: var(--an-font-sans);
background-color: var(--an-bg);
color: var(--an-ink);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
/* Sticky header clearance for in-page targets */
scroll-padding-top: 5.5rem;
}
body {
background-color: var(--an-bg);
color: var(--an-ink);
font-family: var(--an-font-sans);
font-size: var(--an-fs-body);
font-weight: var(--an-fw-regular);
line-height: var(--an-lh-body);
letter-spacing: var(--an-ls-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis-weight: none;
/* No horizontal overflow, ever. */
overflow-x: hidden;
min-height: 100%;
}
img,
svg,
video,
canvas,
picture,
iframe {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select { font: inherit; color: inherit; }
button { background: none; border: 0; }
h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption {
overflow-wrap: break-word;
}
::selection {
background-color: var(--an-clay-wash);
color: var(--an-ink);
}
:focus-visible {
outline: 2px solid var(--an-focus);
outline-offset: 2px;
border-radius: var(--an-radius-xs);
}
:target {
scroll-margin-top: 6rem;
}
.an-skip {
position: absolute;
left: var(--an-space-4);
top: var(--an-space-4);
z-index: 100;
transform: translateY(-200%);
background-color: var(--an-bg-raised);
color: var(--an-ink);
border: var(--an-hairline) solid var(--an-line-ink);
border-radius: var(--an-radius-sm);
padding: var(--an-space-2) var(--an-space-4);
font-size: var(--an-fs-small);
font-weight: var(--an-fw-medium);
text-decoration: none;
}
.an-skip:focus { transform: translateY(0); }
/* -----------------------------------------------------------------------------
3. LAYOUT: page shell, container, section rhythm, rules
-------------------------------------------------------------------------- */
.an-page {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
}
.an-main { flex: 1 0 auto; }
.an-container {
width: 100%;
max-width: calc(var(--an-container) + (var(--an-gutter) * 2));
margin-inline: auto;
padding-inline: var(--an-gutter);
}
.an-container--narrow {
max-width: calc(var(--an-container-narrow) + (var(--an-gutter) * 2));
}
.an-container--prose {
max-width: calc(var(--an-measure) + (var(--an-gutter) * 2));
}
.an-section {
padding-block: var(--an-section);
}
.an-section--tight { padding-block: var(--an-section-tight); }
.an-section--top { padding-block: var(--an-section) 0; }
.an-section--bottom { padding-block: 0 var(--an-section); }
.an-section--flush { padding-block: 0; }
/* Tinted full-bleed band */
.an-section--raised { background-color: var(--an-bg-raised); }
.an-section--sunken { background-color: var(--an-bg-sunken); }
/* Hairline rules */
.an-rule {
border: 0;
border-top: var(--an-hairline) solid var(--an-line);
margin-block: var(--an-space-8);
}
.an-rule--tight { margin-block: var(--an-space-5); }
/* A short clay tick used to open a section. Decorative only. */
.an-rule--accent {
border-top-width: 2px;
border-top-color: var(--an-clay);
width: 2.5rem;
margin-inline: 0;
margin-block: 0 var(--an-space-5);
}
/* Vertical flow: uniform spacing between siblings */
.an-stack > * + * { margin-top: var(--an-space-4); }
.an-stack--sm > * + * { margin-top: var(--an-space-2); }
.an-stack--lg > * + * { margin-top: var(--an-space-6); }
.an-stack--xl > * + * { margin-top: var(--an-space-8); }
.an-measure { max-width: var(--an-measure); }
/* Section header block */
.an-section-head {
max-width: var(--an-measure);
margin-bottom: var(--an-space-8);
}
.an-section-head > * + * { margin-top: var(--an-space-4); }
/* -----------------------------------------------------------------------------
4. TYPOGRAPHY
-------------------------------------------------------------------------- */
.an-kicker {
display: block;
font-family: var(--an-font-sans);
font-size: var(--an-fs-micro);
font-weight: var(--an-fw-medium);
line-height: 1.4;
letter-spacing: var(--an-ls-wide);
text-transform: uppercase;
color: var(--an-ink-3);
}
.an-kicker--accent { color: var(--an-clay-text); }
/* Display headings: serif, regular weight, calm and large. */
.an-h1,
.an-display {
font-family: var(--an-font-serif);
font-size: var(--an-fs-display-xl);
font-weight: var(--an-fw-regular);
line-height: var(--an-lh-tight);
letter-spacing: var(--an-ls-display);
color: var(--an-ink);
text-wrap: balance;
}
.an-h2 {
font-family: var(--an-font-serif);
font-size: var(--an-fs-display-l);
font-weight: var(--an-fw-regular);
line-height: var(--an-lh-display);
letter-spacing: var(--an-ls-display);
color: var(--an-ink);
text-wrap: balance;
}
.an-h3 {
font-family: var(--an-font-sans);
font-size: var(--an-fs-display-m);
font-weight: var(--an-fw-semibold);
line-height: var(--an-lh-snug);
letter-spacing: var(--an-ls-tight);
color: var(--an-ink);
text-wrap: balance;
}
/* h4-scale sub-heading */
.an-h4 {
font-family: var(--an-font-sans);
font-size: var(--an-fs-display-s);
font-weight: var(--an-fw-semibold);
line-height: var(--an-lh-snug);
letter-spacing: var(--an-ls-tight);
color: var(--an-ink);
}
.an-lead {
font-family: var(--an-font-sans);
font-size: var(--an-fs-lead);
font-weight: var(--an-fw-regular);
line-height: 1.5;
letter-spacing: var(--an-ls-tight);
color: var(--an-ink-2);
max-width: var(--an-measure);
text-wrap: pretty;
}
.an-body {
font-size: var(--an-fs-body);
line-height: var(--an-lh-body);
color: var(--an-ink);
max-width: var(--an-measure);
}
.an-body--lg { font-size: var(--an-fs-body-lg); }
.an-small {
font-size: var(--an-fs-small);
line-height: var(--an-lh-snug);
color: var(--an-ink-3);
max-width: var(--an-measure);
}
.an-print {
font-size: var(--an-fs-detail);
line-height: 1.55;
color: var(--an-ink-3);
max-width: var(--an-measure);
}
.an-mono {
font-family: var(--an-font-mono);
font-size: 0.9em;
font-variant-numeric: tabular-nums;
}
/* Prose block: apply once to a wrapper, everything inside is set. */
.an-prose {
font-size: var(--an-fs-body-lg);
line-height: var(--an-lh-body);
color: var(--an-ink);
max-width: var(--an-measure);
text-wrap: pretty;
}
.an-prose > * + * { margin-top: var(--an-space-5); }
.an-prose h2 { font: inherit; }
.an-prose h2,
.an-prose h3 { margin-top: var(--an-space-8); }
.an-prose h2 {
font-family: var(--an-font-serif);
font-size: var(--an-fs-display-l);
font-weight: var(--an-fw-regular);
line-height: var(--an-lh-display);
letter-spacing: var(--an-ls-display);
}
.an-prose h3 {
font-family: var(--an-font-sans);
font-size: var(--an-fs-display-m);
font-weight: var(--an-fw-semibold);
line-height: var(--an-lh-snug);
letter-spacing: var(--an-ls-tight);
}
.an-prose h2 + *,
.an-prose h3 + * { margin-top: var(--an-space-3); }
.an-prose ul,
.an-prose ol { padding-inline-start: 1.35em; }
.an-prose li + li { margin-top: var(--an-space-2); }
.an-prose li::marker { color: var(--an-ink-3); }
.an-prose strong { font-weight: var(--an-fw-semibold); }
.an-prose em { font-style: italic; }
.an-prose code {
font-family: var(--an-font-mono);
font-size: 0.875em;
background-color: var(--an-bg-sunken);
border: var(--an-hairline) solid var(--an-line);
border-radius: var(--an-radius-xs);
padding: 0.1em 0.35em;
overflow-wrap: anywhere;
}
/* -----------------------------------------------------------------------------
5. LINKS
-------------------------------------------------------------------------- */
.an-link,
.an-prose a:not([class]) {
color: var(--an-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: var(--an-clay);
text-underline-offset: 0.18em;
transition: text-decoration-color var(--an-dur) var(--an-ease),
color var(--an-dur) var(--an-ease);
}
.an-link:hover,
.an-prose a:not([class]):hover {
color: var(--an-clay-text);
text-decoration-color: var(--an-clay-text);
}
.an-link--quiet {
text-decoration-color: var(--an-line-strong);
color: var(--an-ink-2);
}
.an-link--quiet:hover { color: var(--an-ink); text-decoration-color: var(--an-clay); }
/* Text link with arrow */
.an-arrow-link {
display: inline-flex;
align-items: baseline;
gap: 0.45em;
font-family: var(--an-font-sans);
font-size: var(--an-fs-small);
font-weight: var(--an-fw-medium);
letter-spacing: var(--an-ls-tight);
color: var(--an-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: transparent;
text-underline-offset: 0.2em;
transition: text-decoration-color var(--an-dur) var(--an-ease),
color var(--an-dur) var(--an-ease);
}
.an-arrow-link::after {
content: "\2192"; /* → */
display: inline-block;
color: var(--an-clay-text);
transition: transform var(--an-dur) var(--an-ease);
}
.an-arrow-link:hover { text-decoration-color: var(--an-clay); }
.an-arrow-link:hover::after { transform: translateX(3px); }
/* -----------------------------------------------------------------------------
6. BUTTONS
-------------------------------------------------------------------------- */
.an-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
min-height: 2.875rem; /* 46px touch target */
padding: 0.6875rem 1.25rem;
font-family: var(--an-font-sans);
font-size: var(--an-fs-small);
font-weight: var(--an-fw-medium);
line-height: 1.2;
letter-spacing: var(--an-ls-tight);
text-align: center;
text-decoration: none;
border: var(--an-hairline) solid transparent;
border-radius: var(--an-radius-md);
cursor: pointer;
transition: background-color var(--an-dur) var(--an-ease),
border-color var(--an-dur) var(--an-ease),
color var(--an-dur) var(--an-ease);
}
.an-btn--primary {
background-color: var(--an-btn-primary-bg);
border-color: var(--an-btn-primary-bg);
color: var(--an-btn-primary-ink);
}
.an-btn--primary:hover {
background-color: var(--an-btn-primary-bg-hover);
border-color: var(--an-btn-primary-bg-hover);
}
.an-btn--secondary {
background-color: transparent;
border-color: var(--an-btn-secondary-line);
color: var(--an-btn-secondary-ink);
}
.an-btn--secondary:hover {
background-color: var(--an-btn-secondary-bg-hover);
border-color: var(--an-btn-secondary-bg-hover);
color: var(--an-btn-secondary-ink-hover);
}
.an-btn--quiet {
background-color: transparent;
border-color: var(--an-line-strong);
color: var(--an-ink);
}
.an-btn--quiet:hover { border-color: var(--an-line-ink); }
.an-btn[aria-disabled="true"],
.an-btn:disabled { opacity: 0.5; pointer-events: none; }
.an-btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--an-space-3);
align-items: center;
}
/* -----------------------------------------------------------------------------
7. PRIVATE-LINK NOTICE BAR
-------------------------------------------------------------------------- */
.an-notice {
background-color: var(--an-bg-sunken);
border-bottom: var(--an-hairline) solid var(--an-line);
color: var(--an-ink-2);
font-size: var(--an-fs-micro);
line-height: 1.45;
letter-spacing: 0.005em;
}
.an-notice__inner {
display: flex;
align-items: flex-start;
gap: var(--an-space-3);
flex-wrap: nowrap;
padding-block: 0.5rem;
}
.an-notice__mark {
flex: none;
width: 6px;
height: 6px;
margin-top: 0.5em; /* optical centre on the first line */
border-radius: 50%;
background-color: var(--an-clay);
}
.an-notice__text {
flex: 1 1 auto;
min-width: 0;
}
.an-notice a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--an-line-strong);
text-underline-offset: 0.16em;
}
.an-notice a:hover { text-decoration-color: var(--an-clay); }
/* -----------------------------------------------------------------------------
8. HEADER + NAV (no JS: the mobile menu is a disclosure)
-------------------------------------------------------------------------- */
.an-header {
position: sticky;
top: 0;
z-index: 30;
background-color: var(--an-bg);
border-bottom: var(--an-hairline) solid var(--an-line);
}
.an-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; /* safety valve: wrap rather than overflow */
gap: var(--an-space-2) var(--an-space-4);
min-height: 3.75rem;
padding-block: var(--an-space-2);
}
/* Text wordmark. Deliberately generic: a dot and a name. */
.an-wordmark {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--an-font-sans);
font-size: var(--an-fs-body);
font-weight: var(--an-fw-semibold);
letter-spacing: var(--an-ls-tight);
color: var(--an-ink);
text-decoration: none;
min-width: 0;
overflow-wrap: anywhere;
}
.an-wordmark::before {
content: "";
flex: none;
width: 9px;
height: 9px;
border-radius: 2px;
background-color: var(--an-clay);
transform: rotate(45deg);
}
.an-wordmark__sub {
font-weight: var(--an-fw-regular);
color: var(--an-ink-3);
}
@media (max-width: 22.5rem) {
.an-wordmark__sub { display: none; }
}
.an-nav { position: static; }
.an-nav__disclosure { position: static; }
.an-nav__summary {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 2.375rem;
padding: 0.375rem 0.75rem;
font-size: var(--an-fs-small);
font-weight: var(--an-fw-medium);
color: var(--an-ink);
border: var(--an-hairline) solid var(--an-line-strong);
border-radius: var(--an-radius-sm);
cursor: pointer;
list-style: none;
user-select: none;
transition: border-color var(--an-dur) var(--an-ease);
}
.an-nav__summary::-webkit-details-marker { display: none; }
.an-nav__summary::marker { content: ""; }
.an-nav__summary:hover { border-color: var(--an-line-ink); }
.an-nav__summary::after {
content: "";
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--an-dur) var(--an-ease);
}
.an-nav__disclosure[open] .an-nav__summary::after {
transform: translateY(1px) rotate(-135deg);
}
.an-nav__list {
list-style: none;
margin: 0;
padding: 0;
}
/* Disclosure state (all widths by default): the open list is a sheet pinned
under the header. The desktop rules below undo this. */
.an-nav__disclosure[open] .an-nav__list {
position: absolute;
left: 0;
right: 0;
top: 100%;
display: flex;
flex-direction: column;
background-color: var(--an-bg-raised);
border-bottom: var(--an-hairline) solid var(--an-line);
padding: var(--an-space-2) var(--an-gutter) var(--an-space-4);
}
.an-nav__disclosure[open] .an-nav__link {
display: block;
padding-block: 0.6875rem;
border-bottom: var(--an-hairline) solid var(--an-line);
}
.an-nav__disclosure[open] .an-nav__list > li:last-child .an-nav__link {
border-bottom: 0;
}
.an-nav__link {
font-family: var(--an-font-sans);
font-size: var(--an-fs-small);
font-weight: var(--an-fw-regular);
color: var(--an-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: transparent;
text-underline-offset: 0.22em;
transition: text-decoration-color var(--an-dur) var(--an-ease),
color var(--an-dur) var(--an-ease);
}
.an-nav__link:hover { text-decoration-color: var(--an-clay); }
.an-nav__link[aria-current="page"] {
text-decoration-color: var(--an-clay);
font-weight: var(--an-fw-medium);
}
/* Desktop: no disclosure, a plain inline row.
The content is hidden by the UA with content-visibility, which
only author CSS on ::details-content can undo. Where that selector is not
supported the disclosure simply stays a working menu at every width, so
the nav is never unreachable. */
@media (min-width: 56rem) {
@supports selector(::details-content) {
.an-nav__summary { display: none; }
.an-nav__disclosure::details-content {
content-visibility: visible;
block-size: auto;
overflow: visible;
}
.an-nav__disclosure .an-nav__list,
.an-nav__disclosure[open] .an-nav__list {
position: static;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--an-space-2) var(--an-space-5);
background-color: transparent;
border-bottom: 0;
padding: 0;
}
.an-nav__disclosure[open] .an-nav__link {
display: inline;
padding-block: 0;
border-bottom: 0;
}
}
.an-header__inner { min-height: 4.25rem; }
}
/* -----------------------------------------------------------------------------
9. REQUIREMENT -> EVIDENCE LIST
The most important component. Stacked cards on mobile, an aligned
four-column ledger from 60rem. Semantic list + headings throughout,
so no ARIA repair is needed at any width.
-------------------------------------------------------------------------- */
.an-reqs {
list-style: none;
margin: 0;
padding: 0;
border-top: var(--an-hairline) solid var(--an-line-strong);
}
/* Decorative column labels. Only visible in ledger mode. */
.an-reqs__head { display: none; }
.an-req {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"id verdict"
"title title"
"ev ev";
column-gap: var(--an-space-3);
row-gap: var(--an-space-2);
align-items: start;
padding-block: var(--an-space-5);
border-bottom: var(--an-hairline) solid var(--an-line);
}
.an-req__id {
grid-area: id;
align-self: center;
font-family: var(--an-font-sans);
font-size: var(--an-fs-micro);
font-weight: var(--an-fw-medium);
letter-spacing: var(--an-ls-wide);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
color: var(--an-ink-3);
line-height: 1.4;
}
.an-req__title {
grid-area: title;
font-family: var(--an-font-sans);
font-size: var(--an-fs-body-lg);
font-weight: var(--an-fw-semibold);
line-height: 1.35;
letter-spacing: var(--an-ls-tight);
color: var(--an-ink);
text-wrap: pretty;
}
.an-req__ev {
grid-area: ev;
min-width: 0;
font-size: var(--an-fs-body);
line-height: 1.55;
color: var(--an-ink-2);
text-wrap: pretty;
}
.an-req__ev > * + * { margin-top: var(--an-space-2); }
.an-req__label {
display: block;
font-size: var(--an-fs-micro);
font-weight: var(--an-fw-medium);
letter-spacing: var(--an-ls-wide);
text-transform: uppercase;
color: var(--an-ink-3);
margin-bottom: var(--an-space-1);
}
.an-req__source {
font-size: var(--an-fs-detail);
color: var(--an-ink-3);
}
.an-req__verdict {
grid-area: verdict;
align-self: center;
justify-self: end;
}
/* Ledger mode */
@media (min-width: 60rem) {
.an-reqs__head {
display: grid;
grid-template-columns:
5.5rem minmax(0, 1fr) minmax(0, 1.5fr) 7rem;
column-gap: var(--an-space-5);
padding-bottom: var(--an-space-3);
border-bottom: var(--an-hairline) solid var(--an-line-strong);
}
.an-reqs__head > * {
font-size: var(--an-fs-micro);
font-weight: var(--an-fw-medium);
letter-spacing: var(--an-ls-wide);
text-transform: uppercase;
color: var(--an-ink-3);
}
.an-reqs__head + .an-reqs { border-top: 0; }
.an-reqs__head > :last-child { text-align: left; }
.an-req {
grid-template-columns:
5.5rem minmax(0, 1fr) minmax(0, 1.5fr) 7rem;
grid-template-areas: "id title ev verdict";
column-gap: var(--an-space-5);
row-gap: 0;
padding-block: var(--an-space-5);
align-items: baseline;
}
.an-req__id { align-self: baseline; }
.an-req__title { font-size: var(--an-fs-body); }
.an-req__verdict { align-self: baseline; justify-self: start; }
.an-req__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
margin: -1px;
}
}
/* Hover affordance in ledger mode only, kept very quiet. */
@media (hover: hover) and (min-width: 60rem) {
.an-req { transition: background-color var(--an-dur) var(--an-ease); }
.an-req:hover { background-color: var(--an-bg-raised); }
}
/* -----------------------------------------------------------------------------
10. VERDICT CHIPS
Three states distinguished by hue AND by marker shape, so they survive
colour-vision differences and greyscale printing.
-------------------------------------------------------------------------- */
.an-chip {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.25rem 0.5rem 0.25rem 0.45rem;
font-family: var(--an-font-sans);
font-size: var(--an-fs-micro);
font-weight: var(--an-fw-medium);
line-height: 1.3;
letter-spacing: 0.01em;
white-space: nowrap;
border: var(--an-hairline) solid transparent;
border-radius: var(--an-radius-xs);
}
.an-chip::before {
content: "";
flex: none;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: currentColor;
}
.an-chip--strong {
background-color: var(--an-strong-bg);
border-color: var(--an-strong-line);
color: var(--an-strong-ink);
}
.an-chip--partial {
background-color: var(--an-partial-bg);
border-color: var(--an-partial-line);
color: var(--an-partial-ink);
}
/* half-filled marker */
.an-chip--partial::before {
background-color: transparent;
border: 2px solid currentColor;
box-shadow: inset 0 0 0 1px var(--an-partial-bg);
}
.an-chip--gap {
background-color: var(--an-gap-bg);
border-color: var(--an-gap-line);
color: var(--an-gap-ink);
}
/* open marker */
.an-chip--gap::before {
background-color: transparent;
border: 1.5px solid currentColor;
}
/* Neutral / metadata chip */
.an-chip--note {
background-color: transparent;
border-color: var(--an-line-strong);
color: var(--an-ink-2);
}
.an-chip--note::before { display: none; }
/* -----------------------------------------------------------------------------
11. CARDS
-------------------------------------------------------------------------- */
.an-cards {
display: grid;
gap: var(--an-space-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.an-cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.an-card {
display: flex;
flex-direction: column;
gap: var(--an-space-3);
min-width: 0;
padding: clamp(1.25rem, 0.9rem + 1.6vw, 1.75rem);
background-color: var(--an-bg-raised);
border: var(--an-hairline) solid var(--an-line);
border-radius: var(--an-radius-lg);
transition: border-color var(--an-dur) var(--an-ease),
background-color var(--an-dur) var(--an-ease);
}
.an-card--flat { background-color: transparent; }
.an-card__kicker {
font-size: var(--an-fs-micro);
font-weight: var(--an-fw-medium);
letter-spacing: var(--an-ls-wide);
text-transform: uppercase;
color: var(--an-ink-3);
}
.an-card__title {
font-family: var(--an-font-sans);
font-size: var(--an-fs-display-s);
font-weight: var(--an-fw-semibold);
line-height: var(--an-lh-snug);
letter-spacing: var(--an-ls-tight);
color: var(--an-ink);
}
.an-card__title a {
color: inherit;
text-decoration: none;
}
.an-card__title a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.an-card__body {
font-size: var(--an-fs-body);
line-height: var(--an-lh-body);
color: var(--an-ink-2);
}
.an-card__meta {
margin-top: auto;
padding-top: var(--an-space-2);
font-size: var(--an-fs-detail);
color: var(--an-ink-3);
}
/* Whole-card link target */
.an-card--link { position: relative; }
.an-card--link:hover {
border-color: var(--an-line-strong);
background-color: var(--an-bg-raised);
}
.an-card--link:focus-within {
outline: 2px solid var(--an-focus);
outline-offset: 2px;
}
/* -----------------------------------------------------------------------------
12. FEATURE ROW (two columns, stacks on mobile)
-------------------------------------------------------------------------- */
.an-feature {
display: grid;
gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
align-items: center;
}
.an-feature__body { min-width: 0; }
.an-feature__body > * + * { margin-top: var(--an-space-4); }
.an-feature__media {
min-width: 0;
border: var(--an-hairline) solid var(--an-line);
border-radius: var(--an-radius-lg);
background-color: var(--an-bg-raised);
overflow: hidden;
}
.an-feature__media > img { width: 100%; }
.an-feature__media--placeholder { aspect-ratio: 4 / 3; }
@media (min-width: 46rem) {
.an-feature { grid-template-columns: 1fr 1fr; }
.an-feature--reverse > .an-feature__media { order: 2; }
.an-feature--wide-body { grid-template-columns: 1.15fr 1fr; }
}
/* -----------------------------------------------------------------------------
13. NUMBERED PROCESS / TIMELINE
-------------------------------------------------------------------------- */
.an-steps {
list-style: none;
margin: 0;
padding: 0;
counter-reset: an-step;
}
.an-step {
counter-increment: an-step;
position: relative;
padding-left: 3.25rem;
padding-bottom: var(--an-space-7);
min-width: 0;
}
.an-step:last-child { padding-bottom: 0; }
.an-step::before {
content: counter(an-step, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border: var(--an-hairline) solid var(--an-line-strong);
border-radius: 50%;
background-color: var(--an-bg);
font-family: var(--an-font-sans);
font-size: var(--an-fs-micro);
font-weight: var(--an-fw-medium);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
color: var(--an-ink-2);
line-height: 1;
}
/* connecting hairline */
.an-step::after {
content: "";
position: absolute;
left: calc(1.125rem - 0.5px);
top: 2.25rem;
bottom: 0.25rem;
width: 1px;
background-color: var(--an-line);
}
.an-step:last-child::after { display: none; }
.an-step__title {
font-family: var(--an-font-sans);
font-size: var(--an-fs-display-s);
font-weight: var(--an-fw-semibold);
line-height: var(--an-lh-snug);
letter-spacing: var(--an-ls-tight);
color: var(--an-ink);
padding-top: 0.15rem;
}
.an-step__body {
margin-top: var(--an-space-2);
font-size: var(--an-fs-body);
line-height: var(--an-lh-body);
color: var(--an-ink-2);
max-width: var(--an-measure);
}
.an-step__meta {
margin-top: var(--an-space-2);
font-size: var(--an-fs-detail);
color: var(--an-ink-3);
}
/* -----------------------------------------------------------------------------
14. PULL QUOTE / TESTIMONIAL
-------------------------------------------------------------------------- */
.an-quote {
margin: 0;
padding-left: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
border-left: 2px solid var(--an-clay);
max-width: calc(var(--an-measure) - 4ch);
}
.an-quote__text {
font-family: var(--an-font-serif);
font-size: var(--an-fs-display-m);
font-weight: var(--an-fw-regular);
line-height: 1.38;
letter-spacing: var(--an-ls-tight);
color: var(--an-ink);
text-wrap: pretty;
}
.an-quote__text > p + p { margin-top: var(--an-space-4); }
.an-quote__cite {
display: block;
margin-top: var(--an-space-4);
font-family: var(--an-font-sans);
font-size: var(--an-fs-detail);
font-style: normal;
line-height: 1.5;
color: var(--an-ink-3);
}
.an-quote__cite strong {
display: block;
font-weight: var(--an-fw-medium);
color: var(--an-ink-2);
}
/* -----------------------------------------------------------------------------
15. FOOTNOTES
-------------------------------------------------------------------------- */
.an-fnref {
font-size: 0.7em;
font-weight: var(--an-fw-medium);
font-variant-numeric: tabular-nums;
line-height: 1;
vertical-align: super;
margin-left: 0.1em;
padding-inline: 0.1em;
color: var(--an-clay-text);
text-decoration: none;
border-radius: 2px;
}
.an-fnref:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.an-footnotes {
list-style: none;
margin: 0;
padding: 0;
counter-reset: an-fn;
border-top: var(--an-hairline) solid var(--an-line);
padding-top: var(--an-space-5);
}
.an-footnote {
counter-increment: an-fn;
position: relative;
display: grid;
grid-template-columns: 1.85rem minmax(0, 1fr);
column-gap: var(--an-space-2);
padding: var(--an-space-2) var(--an-space-2) var(--an-space-2) 0;
margin-left: -0.5rem;
padding-left: 0.5rem;
border-left: 2px solid transparent;
border-radius: 0 var(--an-radius-xs) var(--an-radius-xs) 0;
font-size: var(--an-fs-detail);
line-height: 1.6;
color: var(--an-ink-2);
scroll-margin-top: 6rem;
transition: background-color var(--an-dur-slow) var(--an-ease),
border-color var(--an-dur-slow) var(--an-ease);
}
.an-footnote::before {
content: counter(an-fn) ".";
font-variant-numeric: tabular-nums;
color: var(--an-ink-3);
text-align: right;
}
.an-footnote > * { min-width: 0; }
/* Visible target highlight when jumped to */
.an-footnote:target {
background-color: var(--an-clay-wash);
border-left-color: var(--an-clay);
}
.an-footnote:target::before { color: var(--an-clay-text); }
.an-fn-back {
margin-left: 0.35em;
font-size: 0.95em;
color: var(--an-ink-3);
text-decoration: none;
white-space: nowrap;
}
.an-fn-back:hover { color: var(--an-clay-text); }
/* -----------------------------------------------------------------------------
16. CLOSING CTA BAND
-------------------------------------------------------------------------- */
.an-cta {
background-color: var(--an-bg-warm);
border: var(--an-hairline) solid var(--an-line);
border-radius: var(--an-radius-lg);
padding: clamp(1.75rem, 1.1rem + 3.2vw, 3.5rem);
}
.an-cta__inner {
max-width: 46rem;
}
.an-cta__inner > * + * { margin-top: var(--an-space-4); }
.an-cta__title {
font-family: var(--an-font-serif);
font-size: var(--an-fs-display-l);
font-weight: var(--an-fw-regular);
line-height: var(--an-lh-display);
letter-spacing: var(--an-ls-display);
color: var(--an-ink);
max-width: 20ch;
text-wrap: balance;
}
.an-cta__body {
font-size: var(--an-fs-body-lg);
line-height: var(--an-lh-body);
color: var(--an-ink-2);
max-width: 56ch;
}
.an-cta__actions { margin-top: var(--an-space-6); }
/* -----------------------------------------------------------------------------
17. FOOTER
-------------------------------------------------------------------------- */
.an-footer {
border-top: var(--an-hairline) solid var(--an-line);
padding-block: var(--an-space-9) var(--an-space-8);
font-size: var(--an-fs-detail);
color: var(--an-ink-3);
}
.an-footer__cols {
display: grid;
gap: var(--an-space-6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.an-footer__col > * + * { margin-top: var(--an-space-2); }
.an-footer__heading {
font-size: var(--an-fs-micro);
font-weight: var(--an-fw-medium);
letter-spacing: var(--an-ls-wide);
text-transform: uppercase;
color: var(--an-ink-3);
margin-bottom: var(--an-space-3);
}
.an-footer__list {
list-style: none;
margin: 0;
padding: 0;
}
.an-footer__list li + li { margin-top: var(--an-space-2); }
.an-footer a {
color: var(--an-ink-2);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: transparent;
text-underline-offset: 0.2em;
transition: text-decoration-color var(--an-dur) var(--an-ease),
color var(--an-dur) var(--an-ease);
}
.an-footer a:hover { color: var(--an-ink); text-decoration-color: var(--an-clay); }
.an-footer__bottom {
display: flex;
flex-wrap: wrap;
gap: var(--an-space-2) var(--an-space-5);
align-items: baseline;
justify-content: space-between;
margin-top: var(--an-space-8);
padding-top: var(--an-space-5);
border-top: var(--an-hairline) solid var(--an-line);
font-size: var(--an-fs-micro);
}
.an-footer__disclaimer {
max-width: 62ch;
color: var(--an-ink-3);
}
/* -----------------------------------------------------------------------------
18. GENERIC DATA TABLE (for anything that is genuinely tabular
and not the requirement ledger)
-------------------------------------------------------------------------- */
.an-table-wrap {
overflow-x: auto;
max-width: 100%;
border: var(--an-hairline) solid var(--an-line);
border-radius: var(--an-radius-md);
}
.an-table {
width: 100%;
border-collapse: collapse;
font-size: var(--an-fs-small);
line-height: 1.5;
}
.an-table th,
.an-table td {
text-align: left;
vertical-align: top;
padding: var(--an-space-3) var(--an-space-4);
border-bottom: var(--an-hairline) solid var(--an-line);
}
.an-table thead th {
background-color: var(--an-bg-sunken);
font-size: var(--an-fs-micro);
font-weight: var(--an-fw-medium);
letter-spacing: var(--an-ls-wide);
text-transform: uppercase;
color: var(--an-ink-3);
white-space: nowrap;
}
.an-table tbody tr:last-child th,
.an-table tbody tr:last-child td { border-bottom: 0; }
.an-table caption {
caption-side: bottom;
padding: var(--an-space-3) var(--an-space-4);
font-size: var(--an-fs-detail);
color: var(--an-ink-3);
text-align: left;
}
/* -----------------------------------------------------------------------------
19. UTILITIES
-------------------------------------------------------------------------- */
.an-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
margin: -1px;
}
.an-muted { color: var(--an-ink-3); }
.an-nowrap { white-space: nowrap; }
.an-tnum { font-variant-numeric: tabular-nums; }
.an-center { margin-inline: auto; }
/* -----------------------------------------------------------------------------
20. MOTION: scroll reveal, CSS only, no JS
Content is visible by default. The reveal is layered on only where the
browser supports scroll-driven animations and motion is welcome.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
@keyframes an-reveal {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.an-reveal {
animation: an-reveal var(--an-dur-slow) var(--an-ease) both;
animation-timeline: view();
animation-range: entry 0% entry 85%;
}
}
}
/* Optional JS hook, for anyone who prefers IntersectionObserver.
Add .an-reveal-js to the element and toggle .is-in. Safe without JS
because the hidden state only applies when the page opts in via
. */
.an-js .an-reveal-js {
opacity: 0;
transform: translateY(8px);
transition: opacity var(--an-dur-slow) var(--an-ease),
transform var(--an-dur-slow) var(--an-ease);
}
.an-js .an-reveal-js.is-in { opacity: 1; transform: none; }
/* -----------------------------------------------------------------------------
21. REDUCED MOTION
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 1ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.an-reveal {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.an-js .an-reveal-js { opacity: 1; transform: none; }
.an-arrow-link:hover::after { transform: none; }
}
/* -----------------------------------------------------------------------------
22. PRINT (Letter, clean PDF)
Re-declares the light tokens so a dark-mode viewer still prints on paper.
-------------------------------------------------------------------------- */
@page {
size: Letter;
margin: 0.75in;
}
@media print {
:root {
color-scheme: light;
--an-bg: #ffffff;
--an-bg-raised: #ffffff;
--an-bg-sunken: #f2f1ec;
--an-bg-warm: #f2f1ec;
--an-ink: #101010;
--an-ink-2: #303030;
--an-ink-3: #4a4a48;
--an-ink-mark: #7a7a75;
--an-clay: #b4502c;
--an-clay-deep: #9e4423;
--an-clay-text: #8f3e20;
--an-clay-wash: #ffffff;
--an-line: rgb(0 0 0 / 0.28);
--an-line-strong: rgb(0 0 0 / 0.45);
--an-line-ink: #101010;
--an-strong-bg: #ffffff;
--an-strong-ink: #2f3d1c;
--an-strong-line: #2f3d1c;
--an-partial-bg: #ffffff;
--an-partial-ink: #5b3d0e;
--an-partial-line: #5b3d0e;
--an-gap-bg: #ffffff;
--an-gap-ink: #303030;
--an-gap-line: #303030;
--an-section: 2rem;
--an-section-tight: 1.25rem;
--an-gutter: 0rem;
}
html, body {
background: #fff !important;
color: #101010;
font-size: 10.5pt;
line-height: 1.5;
overflow: visible;
}
/* Chrome fragments flex containers poorly. Fall back to block flow so
page breaks land between rows rather than skipping half a page. */
.an-page {
display: block;
min-height: 0;
}
.an-main { flex: none; }
.an-notice,
.an-header,
.an-skip,
.an-cta,
.an-nav,
.an-btn { display: none !important; }
.an-container,
.an-container--narrow,
.an-container--prose { max-width: none; padding-inline: 0; }
.an-card,
.an-feature__media { border-color: rgb(0 0 0 / 0.3); }
.an-req,
.an-card,
.an-step,
.an-quote,
.an-footnote,
.an-table tr { break-inside: avoid; page-break-inside: avoid; }
/* Keep a heading with the copy that follows it. Scoped to prose and to
the section-head block: applying break-after to every heading makes
Chrome push whole sections onto a fresh page. */
.an-section-head,
.an-quote,
.an-cta__inner { break-inside: avoid; page-break-inside: avoid; }
.an-prose h2,
.an-prose h3,
.an-step__title,
.an-card__title,
.an-footer__heading { break-after: avoid; page-break-after: avoid; }
.an-footnotes { break-before: auto; }
/* Keep the ledger columns in print regardless of paper width. */
.an-reqs__head {
display: grid;
grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.45fr) 4.5rem;
column-gap: 1rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid rgb(0 0 0 / 0.45);
break-after: avoid;
page-break-after: avoid;
}
.an-reqs__head > * {
font-size: 7.5pt;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #4a4a48;
}
.an-reqs__head > :last-child { text-align: right; }
.an-reqs__head + .an-reqs { border-top: 0; }
.an-reqs { break-inside: auto; page-break-inside: auto; }
.an-req {
grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.45fr) 4.5rem;
grid-template-areas: "id title ev verdict";
column-gap: 1rem;
row-gap: 0;
padding-block: 0.5rem;
align-items: baseline;
}
.an-req__label {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.an-req__id,
.an-req__verdict { align-self: start; }
.an-chip { border-width: 1px; padding: 0.05rem 0.3rem; font-size: 8pt; }
/* Reveal animations must never leave anything blank on paper. */
.an-reveal,
.an-reveal-js { animation: none !important; opacity: 1 !important; transform: none !important; }
/* Expose URLs for links inside prose. */
.an-prose a[href^="http"]::after,
.an-arrow-link[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 8pt;
color: #4a4a48;
word-break: break-all;
}
.an-arrow-link::after { color: #4a4a48; }
.an-footer {
border-top: 1px solid rgb(0 0 0 / 0.3);
padding-block: 1rem 0;
}
.an-footer__cols { display: none; }
}