/* The dark Grimdark palette, QUOTED from Armamentarium.Presentation/Theming/GrimdarkPalette.cs.
   This project references nothing (ADR 0032 Decision 3, ADR 0033), so it cannot ask the palette for
   a tone the way the two heads do - they project it, this file cites it. That makes it the one copy
   of these values outside GrimdarkPalette, which is why WebSitePaletteSyncTests in
   Armamentarium.Tests reads this file and compares every hex here against GrimdarkPalette.Dark.
   Change a tone there and the test says so; without it the copy would drift silently, which is
   exactly the failure ADR 0028 describes for the translation table.

   Dark only, and no prefers-color-scheme block. The light rendition exists and is drawn - it is in
   the palette and in the design project - and it is still deliberately not built: a second rendition
   is a second thing to keep in step, and every tone here already sits under a test precisely because
   an unheld copy drifts. Revisit it when someone asks for it, not because it would be possible. */
:root {
    --app: #0C0D0B;
    --surface: #151713;
    --raised: #1D1F1A;
    --input: #090A08;
    --selected: #232720;
    --row-alt: #1A1C17;
    --border: #2A2D26;
    --border-strong: #6A6E61;
    --hairline: #1D1F1A;
    --text1: #E9E7DE;
    --text2: #A6A69B;
    --text3: #83857B;
    --warning: #D19A33;
    --danger: #D9584A;
    --success: #7FA85C;
    --on-fill: #0C0D0B;
    --brand: #CB6B47;
}

/* Spacing, geometry and type, quoted from the design system's own token files. Values rather than
   names where the design gives a value: this stylesheet has no build step, and a token that only
   ever has one value is a name to look up rather than a decision to make. */
:root {
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;

    --h-header: 56px;
    --h-touch: 44px;

    /* No breakpoint tokens. A custom property cannot be used in a media query - @media
       (min-width: var(--bp-medium)) is simply ignored - so a token here would be a name that looks
       authoritative and is never read. The two widths are written out where they are used, and they
       are the application's own: 700 and 1000 (ai-doc/03-architecture.md). */

    --rule-lead: 48px;
    --reading-width: 880px;
    --wide-width: 1180px;

    --font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Cascadia Mono', ui-monospace, monospace;
    --font-text: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* Chakra Petch carries headings and labels, IBM Plex Mono the figures - the two roles ADR 0006 gives
   them. Body text stays on the system stack: DejaVu Sans is mandatory only where catalogue text
   appears, and no catalogue text appears anywhere on this site. That is not a shortcut but a
   measurement - DejaVu Regular and Bold are 739 and 689 kB, against 77 kB per Chakra Petch face, on
   pages meant to be read on a phone.

   Both files are copied from the single tracked copy in Armamentarium.Presentation/Assets/Fonts/ by
   a build target - see the .csproj for why a Content link answers 200 with an empty body. */
@font-face {
    font-family: 'Chakra Petch';
    src: url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('fonts/ChakraPetch-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    /* Smooth only where motion is welcome. A jump is the honest fallback, not a degraded one. */
    scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    /* Explicit, not inherited: an unpainted body borrows whatever the browser puts behind it. */
    margin: 0;
    min-height: 100%;
    background-color: var(--app);
    color: var(--text2);
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 23px;
    text-wrap: pretty;
}

/* ===== Links, focus =====================================================================
   The focus ring is drawn everywhere and never removed. It is the one affordance a keyboard
   reader has, and these are pages someone may have to read carefully. */
a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid var(--border-strong);
}

a:hover {
    color: var(--text1);
    border-bottom-color: var(--brand);
}

:focus-visible {
    outline: 2px solid var(--text1);
    outline-offset: 2px;
}

/* Every anchor target clears the sticky header. Without this the heading a link jumps to lands
   underneath it - the reader arrives at a section whose title is hidden. */
[id] {
    scroll-margin-top: calc(var(--h-header) + var(--space-16));
}

/* ===== Skip link ========================================================================
   First focusable element on every page. The legal documents run 1400 to 2500 px; without it a
   keyboard reader tabs through the whole header on every one of them, and the only navigation is
   at the very bottom. */
.skip-link {
    position: absolute;
    left: var(--space-16);
    top: -100px;
    z-index: 40;
    padding: var(--space-12) var(--space-16);
    background: var(--raised);
    border: 1px solid var(--border-strong);
    border-bottom-color: var(--border-strong);
    color: var(--text1);
    font: 600 13px/16px var(--font-display);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    transition: top 90ms linear;
}

.skip-link:focus-visible {
    top: var(--space-8);
}

/* ===== Word mark ========================================================================
   One text block, two runs (ai-doc/01-projekt.md): ARM in text 1, AMENTARIUM in the brand tone. */
.wordmark {
    display: inline-flex;
    align-items: baseline;
    flex: none;
    border-bottom: none;
    font: 700 18px/1 var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text1);
}

.wordmark > span {
    color: var(--brand);
}

.wordmark--small {
    font-size: 16px;
}

a.wordmark:hover {
    color: var(--text1);
}

/* ===== Header ===========================================================================
   Sticky, and therefore held to ONE row. The draft lets three children wrap - word mark, a text
   link home with a 130 px floor, and the language switch - and a sticky header that wraps takes a
   second bite out of a 390 px viewport before any text is visible. Below the medium breakpoint the
   text link goes; the word mark is the way home. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-16);
    min-height: var(--h-header);
    padding: var(--space-8) var(--space-16);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.back-link {
    display: none;
    align-items: center;
    gap: var(--space-8);
    border-bottom: none;
    color: var(--text2);
    font: 600 11px/14px var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.back-link:hover {
    color: var(--text1);
}

@media (min-width: 700px) {
    .site-header {
        padding: var(--space-8) var(--space-24);
    }

    .back-link {
        display: inline-flex;
    }
}

.lang-switch {
    display: flex;
    flex: none;
    margin-left: auto;
    border: 1px solid var(--border);
}

.lang-switch > * {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--h-touch);
    min-height: 34px;
    border-bottom: none;
    font: 600 11px/14px var(--font-mono);
    letter-spacing: 0.04em;
    color: var(--text3);
}

.lang-switch > * + * {
    border-left: 1px solid var(--border);
}

.lang-switch a:hover {
    background: var(--raised);
    color: var(--text1);
}

.lang-switch__current {
    background: var(--selected);
    color: var(--text1);
    box-shadow: inset 0 -2px 0 0 var(--brand);
}

/* ===== Main ============================================================================= */
.site-main {
    max-width: var(--reading-width);
    margin: 0 auto;
    padding: 0 var(--space-16) var(--space-48);
}

.site-main--wide {
    max-width: var(--wide-width);
}

@media (min-width: 700px) {
    .site-main {
        padding: 0 var(--space-24) 80px;
    }
}

/* ===== The hazard band ==================================================================
   135 degrees, brand tone, from the design system's own geometry tokens. It marks the top of a page
   and the top of the footer, and nothing else - it is a signal, and a signal used everywhere is
   decoration. */
.hazard {
    height: 6px;
    background: repeating-linear-gradient(135deg, var(--brand) 0 8px, var(--app) 8px 16px);
}

/* ===== Page head ======================================================================== */
.page-head {
    padding: 0 0 var(--space-48);
}

.page-head > .hazard {
    margin: var(--space-48) 0 var(--space-32);
}

.eyebrow {
    margin-bottom: var(--space-16);
    font: 700 12px/16px var(--font-display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand);
}

h1 {
    margin: 0;
    font: 600 clamp(30px, 4.6vw, 54px)/1.04 var(--font-display);
    letter-spacing: 0.02em;
    color: var(--text1);
    overflow-wrap: break-word;
    hyphens: auto;
}

.lede {
    margin: 20px 0 0;
    max-width: 62ch;
    color: var(--text2);
}

/* ===== Sections ========================================================================= */
section {
    padding: 0 0 var(--space-48);
}

h2 {
    margin: 0 0 var(--space-16);
    font: 600 18px/24px var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text1);
}

h3 {
    margin: 0 0 var(--space-12);
    font: 700 12px/16px var(--font-display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text1);
}

/* The title rule with its brand lead-in. Two elements rather than a gradient: the lead has a fixed
   length, and a gradient stop would have to be recomputed for every width. */
.rule {
    display: flex;
    height: 2px;
    margin-bottom: var(--space-24);
}

.rule::before {
    content: "";
    width: var(--rule-lead);
    background: var(--brand);
}

.rule::after {
    content: "";
    flex: 1;
    background: var(--border);
}

/* ===== Cards and grids ==================================================================
   The 1 px gap on a border-coloured ground is the design's own trick: the gaps ARE the grid lines,
   so a row that wraps never leaves a rule hanging in mid-air. */
.grid {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.grid--cols {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid--wide-cols {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
    background: var(--surface);
    padding: var(--space-16);
}

@media (min-width: 700px) {
    .card {
        padding: 20px;
    }
}

.card__label {
    margin-bottom: 10px;
    font: 600 11px/14px var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text3);
}

.card p {
    margin: 0;
    max-width: 74ch;
    font-size: 14px;
    line-height: 22px;
}

.card p + p {
    margin-top: 10px;
}

.card .fine {
    margin-top: 10px;
    color: var(--text3);
}

/* A single panel outside a grid. */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: var(--space-16);
}

@media (min-width: 700px) {
    .panel {
        padding: var(--space-24);
    }
}

.panel--brand {
    border-left: 3px solid var(--brand);
}

.panel--warning {
    border-left: 3px solid var(--warning);
}

.panel--success {
    border-left: 3px solid var(--success);
}

.panel p {
    margin: 0;
    max-width: 74ch;
}

.panel p + p {
    margin-top: var(--space-12);
}

.fine {
    font-size: 12px;
    line-height: 16px;
    color: var(--text3);
}

/* ===== Numbered processing blocks (privacy) ============================================= */
.numbered {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.numbered__index {
    font: 600 34px/36px var(--font-mono);
    color: var(--brand);
}

.field-list {
    display: grid;
    gap: var(--space-12);
}

.field-list h4 {
    margin: 0;
    font: 600 11px/14px var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text3);
}

.field-list p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 21px;
}

/* ===== Rights table (privacy) ===========================================================
   A real table, because it is one: two columns, a header row, and a reader who may want to look up
   a single article. Rows are 44 px so a finger can follow one across. */
.rights {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
}

.rights th,
.rights td {
    text-align: left;
    padding: 10px var(--space-16);
    min-height: var(--h-touch);
    font-size: 14px;
    line-height: 20px;
}

.rights th {
    border-bottom: 1px solid var(--border-strong);
    font: 600 11px/14px var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
}

.rights td {
    border-bottom: 1px solid var(--hairline);
    color: var(--text1);
}

.rights tbody tr:nth-child(even) td {
    background: var(--row-alt);
}

.rights tbody tr:last-child td {
    border-bottom: none;
}

.rights td:last-child,
.rights th:last-child {
    width: 1%;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text2);
}

/* ===== Buttons ========================================================================== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-height: var(--h-touch);
    padding: 0 var(--space-24);
    border: 1px solid var(--border-strong);
    border-bottom-color: var(--border-strong);
    background: var(--raised);
    color: var(--text1);
    font: 600 13px/16px var(--font-display);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
}

.button:hover {
    background: var(--selected);
    color: var(--text1);
}

.button--primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-fill);
}

.button--primary:hover {
    background: var(--text1);
    border-color: var(--text1);
    color: var(--on-fill);
}

/* ===== Form ============================================================================= */
.form-field {
    display: block;
}

.form-field + .form-field {
    margin-top: var(--space-24);
}

.form-field__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    font: 700 12px/16px var(--font-display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text3);
}

/* The required marker is a marker, not a second label. In the draft it stands at label size beside
   the label and reads out as "Email address Required"; here the asterisk carries the colour and the
   word sits in fine print, which is also how a screen reader announces it once. */
.form-field__required {
    font: 400 12px/16px var(--font-text);
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text3);
}

.form-field__required::before {
    content: "*";
    margin-right: var(--space-4);
    color: var(--brand);
}

input[type="email"],
textarea {
    width: 100%;
    padding: 0 var(--space-12);
    background: var(--input);
    border: 1px solid var(--border);
    color: var(--text1);
    font-family: var(--font-text);
    font-size: 15px;
}

input[type="email"] {
    height: var(--h-touch);
}

textarea {
    min-height: 160px;
    padding: var(--space-12);
    line-height: 22px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--text3);
}

[aria-invalid="true"] {
    border-color: var(--danger);
}

.field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-8);
    font-size: 12px;
    line-height: 16px;
    color: var(--danger);
}

.field-hint {
    display: block;
    margin-top: var(--space-8);
    font-size: 12px;
    line-height: 16px;
    color: var(--text3);
}

.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    flex-wrap: wrap;
    margin-top: var(--space-24);
}

/* The honeypot. Off-screen rather than display:none - some bots skip what is not rendered - and out
   of the tab order and the accessibility tree, so no person ever meets it. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===== Notice =========================================================================== */
.notice {
    display: flex;
    gap: var(--space-12);
    padding: var(--space-16);
    background: var(--surface);
    border: 1px solid var(--border);
    margin-bottom: var(--space-24);
}

.notice--danger {
    border-left: 3px solid var(--danger);
}

.notice__title {
    margin: 0;
    color: var(--text1);
    font-weight: 600;
}

.notice p {
    margin: var(--space-4) 0 0;
    font-size: 14px;
    line-height: 21px;
}

.icon {
    flex: none;
    vertical-align: -0.15em;
}

.icon--warning {
    color: var(--warning);
}

.icon--danger {
    color: var(--danger);
}

.icon--success {
    color: var(--success);
}

.icon--brand {
    color: var(--brand);
}

/* ===== Footer =========================================================================== */
.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

/* The same column as the content above it. The footer was a full width band with a 1180 px inner
   while the legal pages read at 880, so the word mark and the four targets started 95 px to the LEFT
   of every line of text on the page - a misalignment that reads as two designs meeting. */
.site-footer__inner {
    max-width: var(--reading-width);
    margin: 0 auto;
    padding: 14px var(--space-16) var(--space-24);
}

@media (min-width: 700px) {
    .site-footer__inner {
        padding: 14px var(--space-24) var(--space-24);
    }
}

.site-footer__inner--wide {
    max-width: var(--wide-width);
}

.mandatory-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--text3);
}

.site-footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    flex-wrap: wrap;
    margin-top: var(--space-12);
}

/* The only navigation these documents have besides the skip link, and in the draft it is 11 px
   uppercase text with no padding - a target about 14 px tall. The tokens carry 44 px for exactly
   this, so it is used. */
.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-16);
}

.site-footer__nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--h-touch);
    padding: 0;
    border-bottom: none;
    color: var(--text2);
    font: 600 11px/14px var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-footer__nav a:hover,
.site-footer__nav a.is-current {
    color: var(--text1);
}

.site-footer__date {
    flex: none;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text3);
}

/* ===== Front page ======================================================================= */
.hero {
    padding: var(--space-48) 0;
}

.hero h1 {
    max-width: 18ch;
}

.hero__lede {
    margin: var(--space-24) 0 0;
    max-width: 60ch;
    font-size: 17px;
    line-height: 26px;
    color: var(--text2);
}

.stat-row {
    margin-top: var(--space-32);
}

.stat {
    background: var(--surface);
    padding: var(--space-16) 20px;
}

.stat__value {
    font: 600 34px/36px var(--font-mono);
    color: var(--text1);
}

.stat__label {
    margin-top: 6px;
    font: 600 11px/14px var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text3);
}

/* No anchor navigation in the header, and that is an answer to a defect rather than an omission: the
   draft draws one and clips it with overflow:hidden, so below the medium width its last targets vanish
   without a scrollbar and without a hint. Drawing it only above that width would have been the other
   answer; not drawing it at all is smaller, and the sections of a front page are reachable by
   scrolling. The four targets that have to be reachable from anywhere are in the footer. */

.feature h3 {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

/* Screenshots sit inside the section that describes them. Width and height are declared so the page
   does not jump when they arrive, and everything below the fold loads lazily. */
.shot {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--space-24);
    border: 1px solid var(--border);
    background: var(--app);
}

.shot__caption {
    margin: var(--space-8) 0 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--text3);
}

/* The width-step reel (ARMAM-262). Four screenshots side by side in a strip that snaps, because the
   section is called "one interface, four widths" and showing one of them made it a claim.

   A scroll strip rather than tabs or a carousel: it needs no JavaScript (ADR 0040), it is already
   operable by touch, wheel, trackpad and keyboard, and it degrades to a plain row of images if the
   snap properties are unsupported. Tabs would need a checked-radio trick to fake state, and a
   carousel would need a timer — neither earns its complexity for four static pictures.

   The frames deliberately keep different aspect ratios: a phone is portrait and a wide screen is
   landscape, and flattening them to one shape would hide the very thing the section is about. */
.reel {
    display: flex;
    gap: var(--space-16);
    margin-top: var(--space-24);
    padding-bottom: var(--space-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Space for the focus ring of a figure scrolled to the edge. */
    scroll-padding: 2px;
    overscroll-behavior-x: contain;
}

.reel__item {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
}

/* Every frame the same height, the width falling out of the picture's own proportions. A phone then
   stands narrow and tall beside a wide screen — which is what the comparison is about — and the
   labels below them land on one line instead of four. Sizing by width instead would make the compact
   frame twice as tall as the large one and the row unreadable. */
.reel__shot {
    display: block;
    height: 420px;
    width: auto;
    border: 1px solid var(--border);
    background: var(--app);
}

/* Narrow viewports: shorter frames, so a whole one still fits above the fold. */
@media (max-width: 700px) {
    .reel__shot {
        height: 320px;
    }
}

.reel__label {
    display: flex;
    gap: var(--space-8);
    align-items: baseline;
    margin: var(--space-8) 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text2);
}

.reel__width {
    color: var(--text3);
    text-transform: none;
    letter-spacing: 0;
}

.reel__note {
    margin: var(--space-8) 0 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--text3);
}

/* The strip scrolls sideways; the page must not. Anything that overflows lives inside a scroller of
   its own, and this is the one on the front page. */
.reel:focus-visible,
.reel__item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Platform rows. One card per shipped platform at full weight; what is not shipped is a line of
   text below, not a card with a small badge. A row of equal cards reads as "three stores, pick
   one", and --disabled never carries information on its own. */
.platform {
    background: var(--surface);
    padding: 20px;
}

.platform__name {
    font: 600 15px/20px var(--font-text);
    color: var(--text1);
}

.platform__meta {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text3);
}

.platform__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-12);
    font-size: 12px;
    line-height: 16px;
    color: var(--warning);
}

/* FAQ. <details> and no script: the browser has had this control for a decade, it is keyboard
   operable and announced correctly, and a hand-built one would be neither for free. */
details {
    background: var(--surface);
    padding: var(--space-16) 20px;
}

summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    min-height: var(--h-touch);
    cursor: pointer;
    list-style: none;
    font: 600 15px/20px var(--font-text);
    color: var(--text1);
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--text3);
    border-bottom: 2px solid var(--text3);
    transform: rotate(45deg) translate(-2px, -2px);
}

details[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

details p {
    margin: var(--space-12) 0 0;
    max-width: 74ch;
    font-size: 14px;
    line-height: 22px;
}

/* A link card, for the four documents on the front page. */
.doc-card {
    display: block;
    background: var(--surface);
    padding: 20px;
    border-bottom: none;
    color: var(--text2);
}

.doc-card:hover {
    background: var(--raised);
    color: var(--text2);
}

.doc-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font: 600 15px/20px var(--font-text);
    color: var(--text1);
}

.doc-card p {
    margin: var(--space-8) 0 0;
    font-size: 14px;
    line-height: 21px;
}

.doc-card__go {
    display: inline-block;
    margin-top: var(--space-12);
    font: 600 11px/14px var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
}

/* A note under a section, not inside a card: the draft-and-not-legal-advice line and its kin. */
.section-note {
    margin-top: 14px;
}

/* A caption a screen reader announces and a sighted reader does not need: the table above it has a
   visible heading already, and two would be one too many. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* A figure inside prose - a price, a version, a count. Tabular figures so it does not shift when the
   number changes, which is the whole reason the design system carries a mono face at all. */
.figure {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ===== Notice pages (404, error) ========================================
   The two pages that carry no header and no footer: they have no counterpart to switch to and no
   language to switch INTO - an unknown address says nothing about what its visitor reads. They are
   also the two pages a stylesheet change breaks silently, which is why they have their own block
   rather than borrowing classes whose meaning may move. */
.notice-page {
    max-width: 34rem;
    margin: 0 auto;
    padding: 12vh var(--space-24) var(--space-48);
    text-align: center;
}

.notice-page__mark {
    margin: 0;
    font-size: clamp(1.75rem, 7vw, 2.75rem);
    line-height: 1.1;
}

.notice-page__band {
    width: 4rem;
    margin: var(--space-24) auto;
}

.notice-page p {
    margin: 0;
    color: var(--text2);
}

.notice-page p + p {
    margin-top: var(--space-8);
}

.notice-page__actions {
    margin-top: var(--space-24);
}