/* Shared shell for the four document pages (404, thanks, privacy, imprint) - the pages that are not
   part of the horizontal film strip and therefore never load horizontal.css. Page-specific rules stay
   inline in each page so the single page's own styling is still readable in one place. */
:root {
    --paper:#F2F1EC;
    --paper2:#E8E6DE;
    --ink:#171712;
    --muted:#6E6A5F;
    --rule:#B5B1A3;
    --red:#D8291C;
    --red2:#F04A3C;
    --deep:#B02116;
    --accent:var(--deep);
    --sans:"Inter","Inter Fallback",ui-sans-serif,system-ui,sans-serif;
    --mono:"Fragment Mono","Fragment Fallback",ui-monospace,monospace
}
* {
    margin:0;
    padding:0;
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    background:var(--paper);
    color:var(--ink);
    font:400 17px/1.65 var(--sans);
    -webkit-font-smoothing:antialiased;
    overflow-x:clip
}
::selection {
    background:var(--red);
    color:var(--paper)
}
a {
    color:inherit;
    text-decoration:none
}
:focus-visible {
    outline:2px solid var(--ink);
    outline-offset:3px
}
.wrap {
    max-width:1240px;
    margin:0 auto;
    padding:0 44px
}
.mast {
    border-bottom:2px solid var(--ink)
}
.mast .wrap {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:14px 34px;
    min-height:78px;
    padding-top:20px;
    padding-bottom:20px
}
.brand {
    font:900 23px/1 var(--sans);
    letter-spacing:-.02em
}
.brand i {
    display:inline-block;
    width:.36em;
    height:.36em;
    border-radius:50%;
    background:var(--red);
    margin-left:.07em
}
.mastnav {
    margin-left:auto;
    display:flex;
    gap:26px;
    flex-wrap:wrap
}
.mastnav a {
    font:400 12px var(--mono);
    padding-bottom:2px;
    border-bottom:2px solid transparent
}
.mastnav a:hover {
    border-bottom-color:var(--accent)
}
.pagehead {
    padding:84px 0 0
}
.pagehead h1 {
    font:600 clamp(34px,5vw,58px)/1.02 var(--sans);
    letter-spacing:-.035em
}
.updated {
    font:400 11.5px var(--mono);
    color:var(--muted);
    margin-top:18px
}
.doc {
    padding:14px 0 130px
}
.doc section {
    max-width:70ch;
    padding:34px 0;
    border-top:2px solid var(--rule)
}
.doc section:first-of-type {
    border-top:none
}
.doc h2 {
    font:700 20px/1.4 var(--sans);
    letter-spacing:-.01em;
    margin-bottom:14px
}
.doc p {
    font-size:15.5px;
    line-height:1.8;
    margin-bottom:12px
}
.doc p:last-child {
    margin-bottom:0
}
.doc a {
    border-bottom:2px solid var(--red)
}
.doc strong {
    font-weight:700
}
.foot {
    background:var(--ink);
    color:var(--paper)
}
.foot .wrap {
    padding-top:26px;
    padding-bottom:26px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    font:400 10.5px/1.8 var(--mono);
    color:#8B887C
}
.foot a {
    color:var(--paper)
}
/* The document outline is ink-coloured; on the ink footer it would be invisible. */
.foot :focus-visible {
    outline-color:var(--paper)
}
@media (max-width:1000px) {
    .wrap {
        padding:0 26px
    }
}