/* =========================================================
   The standalone documents: /legal/ and /privacy/.

   These pages carry no bundle, no shader and no React — they are one request
   plus this stylesheet and two faces. The stylesheet is hand-written and lives
   under public/ rather than being imported from src/styles: the site's own
   sheet is content-hashed at build time and has no stable URL a plain document
   could point at. Only the handful of values these pages actually paint are
   duplicated from src/styles/tokens.css; if the palette moves, it moves here
   too.

   Shared by both documents rather than inlined in each, because there are now
   two of them saying the same thing. /client/ predates this file and still
   carries its own copy — a third page in this family is the point to fold that
   one in as well.
   ========================================================= */

@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("/fonts/barlow-semi-condensed-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Instrument Serif";
    src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --background: #fff;
    --text-positive: #1c1c1a;
    --rule: rgba(28, 28, 26, 0.16);

    --gutter: clamp(24px, 4.45vw, 88px);
    --serif: "Instrument Serif", "Times New Roman", Times, serif;
    --ui: "Barlow Semi Condensed", "Avenir Next Condensed", "Helvetica Neue", Arial,
        sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="dark"] {
    --background: #1c1c1a;
    --text-positive: #e8e8e6;
    --rule: rgba(232, 232, 230, 0.22);
}

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

html {
    -webkit-font-smoothing: antialiased;
    background: var(--background);
    font-size: 10px;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: calc(var(--gutter) * 0.9) var(--gutter);
    gap: 2rem;
    font-family: var(--ui);
    font-weight: 400;
    color: var(--text-positive);
    background: var(--background);
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.brand {
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1;
    transition: opacity 0.25s var(--ease);
}

.brand:hover {
    opacity: 0.62;
}

main {
    flex: 1;
    /* Not centred, unlike /client/: these documents are longer than the screen,
       so they start under the mark and run. */
    padding: clamp(4vh, 9vh, 12vh) 0 6vh;
}

.label {
    margin: 0 0 1.4rem;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
}

h1 {
    margin: 0 0 1.8rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(38px, 7vw, 96px);
    line-height: 1;
    letter-spacing: -0.01em;
}

.lead {
    margin: 0 0 clamp(2rem, 5vh, 3.4rem);
    max-width: 60ch;
    font-size: clamp(16px, 2.2vh, 19px);
    line-height: 1.5;
}

/* ---------- language switch --------------------------------------------
   /legal/ carries both languages at once and hides one with a sibling
   selector, so the switch is two radios and no script. The radios stay in the
   page rather than being display:none — that would take them out of the tab
   order and off a screen reader, and they are the control.

   Only /legal/ has a second language, so nothing here fires on /privacy/.
--------------------------------------------------------------------- */

.lang-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.lang-switch {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    /* Level with the eyebrow of whichever version is showing, rather than
       adding a band of its own above it. */
    margin-bottom: -2.6rem;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lang-switch label {
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.25s var(--ease);
}

.lang-switch label:hover {
    opacity: 0.75;
}

#lang-en:checked ~ .lang-switch label[for="lang-en"],
#lang-de:checked ~ .lang-switch label[for="lang-de"] {
    opacity: 1;
    cursor: default;
}

/* The radio is invisible, so its focus ring has to be drawn on the label. */
#lang-en:focus-visible ~ .lang-switch label[for="lang-en"],
#lang-de:focus-visible ~ .lang-switch label[for="lang-de"] {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

#lang-en:checked ~ .doc[lang="de"],
#lang-de:checked ~ .doc[lang="en"] {
    display: none;
}

@media (max-width: 900px) {
    /* The eyebrow it sat beside is now closer to the top edge. */
    .lang-switch {
        margin-bottom: -2.2rem;
    }
}

/* ---------- rows -------------------------------------------------------
   The site's own row furniture: a label on the left, the body on a column of
   its own. A <dl> where the label names its body — the legal notice — and
   <section>s where it heads one, which is what a policy's clauses are.
--------------------------------------------------------------------- */

.rows {
    margin: 0;
}

.row {
    display: grid;
    grid-template-columns: 6fr 1fr 11fr;
    padding: clamp(0.75rem, 1.8vh, 1.4rem) 0;
    border-top: 1px solid var(--rule);
}

.row:last-child {
    border-bottom: 1px solid var(--rule);
}

.row-label {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.row-label .sub {
    opacity: 0.55;
    letter-spacing: 0.03em;
}

.row-body {
    grid-column: 3;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.88;
    max-width: 62ch;
}

.row-body p {
    margin: 0;
}

.row-body p + p,
.row-body ul,
.row-body ul + p {
    margin-top: 0.8rem;
}

.row-body ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.row-body li + li {
    margin-top: 0.35rem;
}

/* The one place a key name is quoted verbatim: same size as the text around
   it, so it reads as a name and not as a code sample. */
.row-body code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.92em;
}

.row-body a {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
    transition: border-color 0.25s var(--ease);
    /* Long URLs and addresses are single words: without this they push the
       column past the screen on a phone. */
    overflow-wrap: anywhere;
}

.row-body a:hover {
    border-color: currentColor;
}

.row-body a + a {
    margin-left: 1.2rem;
}

footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule);
    font-size: 14px;
}

footer a {
    opacity: 0.9;
    transition: opacity 0.25s var(--ease);
}

footer a:hover {
    opacity: 1;
}

/* The 6fr/11fr split leaves a ~120px label column on a phone, which is the
   same reason the site's own rows stack below 900px. */
@media (max-width: 900px) {
    .row {
        grid-template-columns: 1fr;
        row-gap: 0.4rem;
    }

    .row-label,
    .row-body {
        grid-column: 1;
    }

    .row-body {
        font-size: 14.5px;
        max-width: none;
    }
}