/* =========================================================================
CAPKREA — Obsidian / Daylight
One system, two faces. Dark is the default; light is the same geometry in
porcelain over paper. Everything below is driven by the tokens in § 2 —
change a token, both themes follow.
§ 1 Fonts (self-hosted — no third-party requests, see datenschutz.html)
§ 2 Tokens
§ 3 Base
§ 4 Layout
§ 5 Components
§ 6 Chrome — header, mobile nav, footer
§ 7 Landing sections
§ 8 Secondary pages — legal prose, 404
§ 9 Motion
========================================================================= */
/* ===== § 1 FONTS ======================================================= */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url("assets/fonts/Archivo-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url("assets/fonts/Archivo-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Bodoni Moda";
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url("assets/fonts/BodoniModa-Italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Bodoni Moda";
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url("assets/fonts/BodoniModa-Italic-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Bodoni Moda";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("assets/fonts/BodoniModa-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Bodoni Moda";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("assets/fonts/BodoniModa-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/IBMPlexMono-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/IBMPlexMono-400-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ===== § 2 TOKENS ======================================================
Dark ("Obsidian") is the default face: the page renders correctly with no
JavaScript at all. site.js only ever swaps [data-theme] on .
======================================================================== */
:root,
:root[data-theme="dark"] {
color-scheme: dark;
--acc: #bf2e1f; /* oxblood — the single accent */
--ink-0: #0b0a09; /* page ground */
--ink-1: #12100e; /* recessed band (Doctrine) */
--bone-0: #ede7da; /* primary text */
--bone-1: #a8a193; /* prose */
--bone-2: #857e70; /* labels, meta — 4.6:1 over the grain */
--line: rgba(237, 231, 218, 0.14);
--on-ink: #12100e; /* text on a bone-filled surface */
--on-acc: #f2ede2; /* text on the accent */
/* The oxblood is a graphic colour: as a fill it clears the 3:1 a non-text
* element owes, but as small type on ink it lands at 3.4:1. Anything the
* accent has to *say* uses this lifted cut instead — 4.6:1, same family.
* Daylight needs no such split: there the oxblood already reads 7:1. */
--acc-text: #dd4c3d;
--grain-opacity: 0.05;
--grain: url("data:image/svg+xml;utf8,");
--paper: none;
--serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
--sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
/* fluid type — 390px … 1440px, then held */
--t-hero: clamp(3.875rem, 1.5rem + 9.71vw, 10.25rem); /* 62 → 164 */
--t-statement: clamp(2.25rem, 1.6rem + 2.67vw, 4rem); /* 36 → 64 */
--t-title: clamp(2.875rem, 2.18rem + 2.86vw, 4.75rem); /* 46 → 76 */
--t-firm: clamp(2.375rem, 1.02rem + 4.38vw, 5.25rem); /* 38 → 84 */
--t-contact: clamp(3.375rem, 1.83rem + 5.52vw, 7rem); /* 54 → 112 */
--t-instrument: clamp(2.375rem, 2.08rem + 0.76vw, 2.875rem); /* 38 → 46 */
--t-rule: clamp(1.625rem, 1.44rem + 0.38vw, 1.875rem); /* 26 → 30 */
--t-quote: clamp(1.25rem, 1.02rem + 0.95vw, 1.875rem); /* 20 → 30 */
/* rhythm */
--gutter: clamp(1.5rem, 0.79rem + 2.91vw, 3rem); /* 24 → 48 */
--sec-top: clamp(5.5rem, 3.63rem + 7.62vw, 8rem); /* 88 → 128 */
--sec-bottom: clamp(6rem, 4.14rem + 7.62vw, 8.5rem); /* 96 → 136 */
--ease: cubic-bezier(0.19, 0.66, 0.22, 1);
}
:root[data-theme="light"] {
color-scheme: light;
--acc: #a32318;
--ink-0: #f9f8f5;
--ink-1: rgba(19, 18, 16, 0.05);
--bone-0: #131210;
--bone-1: #56534b;
--bone-2: #6a665c; /* 4.6:1 over the paper */
--line: rgba(19, 18, 16, 0.16);
--on-ink: #f9f8f5;
--on-acc: #fbfaf7;
--acc-text: var(--acc);
--grain-opacity: 0.035;
--grain: url("data:image/svg+xml;utf8,");
--paper: url("data:image/svg+xml;utf8,");
}
/* ===== § 3 BASE ======================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* the sticky header must not cover an anchored heading */
scroll-padding-top: 96px;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
background-color: var(--ink-0);
background-image: var(--paper);
background-size: 420px 420px;
color: var(--bone-0);
font-family: var(--sans);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection { background: var(--acc); color: var(--on-acc); }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible {
outline: 1px solid var(--acc);
outline-offset: 3px;
}
.skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
padding: 14px 22px;
background: var(--bone-0);
color: var(--on-ink);
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.skip:focus { left: 0; }
/* grain — one fixed veil over everything, both themes */
.grain {
position: fixed;
inset: 0;
z-index: 90;
pointer-events: none;
opacity: var(--grain-opacity);
background-image: var(--grain);
}
/* ===== § 4 LAYOUT ====================================================== */
.container {
width: 100%;
max-width: 1216px;
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.section {
border-bottom: 1px solid var(--line);
}
.section > .container {
padding-top: var(--sec-top);
padding-bottom: var(--sec-bottom);
}
.section--recessed { background: var(--ink-1); }
/* section header: index — label — hairline — crosshair */
.rule-head {
display: flex;
align-items: center;
gap: 18px;
}
.rule-head .idx,
.rule-head .label {
font-family: var(--mono);
font-size: clamp(0.625rem, 0.59rem + 0.19vw, 0.6875rem);
letter-spacing: 0.2em;
text-transform: uppercase;
white-space: nowrap;
}
.rule-head .idx { color: var(--acc-text); }
.rule-head .label { color: var(--bone-2); }
.rule-head .hair {
flex: 1 1 auto;
height: 1px;
background: var(--line);
transform-origin: left center;
}
.rule-head .xhair { flex: none; color: var(--bone-2); }
/* the support line that sits opposite a title */
.head-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
margin-top: 64px;
}
.support {
margin-bottom: 10px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--bone-1);
text-transform: uppercase;
}
/* ===== § 5 COMPONENTS ================================================== */
/* --- display type --- */
/* Bodoni carries an opsz axis. Left to itself the browser maps it to the used
font-size, so a 27px line gets the display cut — whose hairlines (the em
dash first of all) vanish against ink. Display sizes keep that cut; every
serif set below ~32px names a text-range opsz instead, which thickens the
thin strokes without touching the letterforms' character. */
.display {
font-family: var(--serif);
font-weight: 420;
line-height: 1;
letter-spacing: -0.01em;
color: var(--bone-0);
}
.display em { font-style: italic; font-weight: inherit; }
.dot { color: var(--acc); }
.mono-note .dot { color: var(--acc-text); }
.lede {
font-size: clamp(1rem, 0.93rem + 0.29vw, 1.1875rem);
line-height: 1.65;
color: var(--bone-1);
text-wrap: pretty;
}
.prose-p {
font-size: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
line-height: 1.72;
color: var(--bone-1);
text-wrap: pretty;
}
/* --- wordmark --- */
.wordmark {
display: inline-flex;
align-items: flex-end;
gap: 7px;
}
.wordmark b {
font-family: var(--sans);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.34em;
line-height: 1;
/* the tracking pushes a phantom space past the final A */
margin-right: -0.34em;
}
.wordmark i {
width: 5px;
height: 5px;
margin-bottom: 1px;
background: var(--acc);
}
/* --- buttons --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
height: 54px;
padding: 0 30px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
border-radius: 0;
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn svg { flex: none; }
.btn--solid {
background: var(--bone-0);
color: var(--on-ink);
border: 1px solid var(--bone-0);
}
.btn--solid:hover,
.btn--solid:focus-visible {
background: var(--acc);
border-color: var(--acc);
color: var(--on-acc);
}
.btn--ghost {
background: transparent;
color: var(--bone-0);
border: 1px solid var(--line);
}
.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--bone-0); }
.btn--small { height: 44px; padding: 0 22px; font-size: 11px; }
/* --- inline link inside prose --- */
.ink-link {
color: var(--bone-0);
border-bottom: 1px solid var(--line);
}
.ink-link:hover { color: var(--acc-text); border-bottom-color: var(--acc); }
/* --- outbound link with the corner arrow --- */
.golink {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bone-0);
}
.golink:hover { color: var(--acc-text); }
.golink--quiet { color: var(--bone-2); font-size: 11px; }
/* --- live marker --- */
.pulse {
width: 7px;
height: 7px;
flex: none;
background: var(--acc);
animation: pulse 2.8s ease-in-out infinite;
}
.marker {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--bone-1);
text-transform: uppercase;
}
.marker i { width: 6px; height: 6px; flex: none; background: var(--acc); }
/* --- meta label / value pairs --- */
.meta-k {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--bone-2);
text-transform: uppercase;
}
.meta-v {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.1em;
color: var(--bone-0);
}
.mono-note {
font-family: var(--mono);
font-size: clamp(0.5625rem, 0.53rem + 0.19vw, 0.625rem);
letter-spacing: 0.18em;
color: var(--bone-2);
text-transform: uppercase;
}
/* --- theme + language controls --- */
.mode-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: none;
padding: 0;
background: transparent;
border: 1px solid var(--line);
color: var(--bone-1);
cursor: pointer;
transition: border-color 0.25s ease, color 0.25s ease;
}
.mode-toggle:hover { border-color: var(--bone-0); color: var(--bone-0); }
/* one icon per theme; the other is removed from the flow entirely */
.mode-toggle .i-sun { display: none; }
:root[data-theme="dark"] .mode-toggle .i-sun { display: block; }
:root[data-theme="dark"] .mode-toggle .i-moon { display: none; }
.lang {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
}
.lang a { color: var(--bone-2); }
.lang a:hover { color: var(--bone-0); }
.lang a[aria-current="true"] { color: var(--bone-0); }
.lang .bar { width: 1px; height: 12px; background: var(--line); }
/* ===== § 6 CHROME ====================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 80;
border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--ink-0) 88%, transparent);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
}
@supports not (backdrop-filter: blur(4px)) {
.site-header { background: var(--ink-0); }
}
.site-header > .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
height: 76px;
}
.site-nav {
display: flex;
align-items: center;
gap: 36px;
}
.navlink {
padding-bottom: 3px;
border-bottom: 1px solid transparent;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--bone-1);
text-transform: uppercase;
}
.navlink:hover,
.navlink[aria-current="page"] { color: var(--bone-0); border-bottom-color: var(--acc); }
.header-tools {
display: flex;
align-items: center;
gap: 28px;
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: none;
padding: 0;
background: transparent;
border: 1px solid var(--line);
color: var(--bone-0);
cursor: pointer;
}
.nav-toggle:hover { border-color: var(--bone-0); }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
/* mobile drawer — built from the same hairlines as the page */
.nav-panel {
display: none;
border-bottom: 1px solid var(--line);
background: var(--ink-0);
}
.nav-panel[data-open="true"] { display: block; }
.nav-panel .container { padding-top: 8px; padding-bottom: 32px; }
.nav-panel a.panel-link {
font-variation-settings: "opsz" 20;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
padding: 20px 0;
border-top: 1px solid var(--line);
font-family: var(--serif);
font-size: 26px;
line-height: 1;
color: var(--bone-0);
}
.nav-panel a.panel-link:hover { color: var(--acc-text); }
.nav-panel a.panel-link span {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--bone-2);
}
.nav-panel .panel-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 28px;
}
/* --- footer --- */
.site-footer > .container { padding-top: 3px; }
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 208px 208px 128px;
gap: 48px;
padding-top: 72px;
padding-bottom: 64px;
border-top: 1px solid var(--line);
}
.foot-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.foot-brand p {
max-width: 320px;
font-size: 14px;
line-height: 1.7;
color: var(--bone-2);
}
.foot-col {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.foot-col > .meta-k { margin-bottom: 6px; }
.footlink { font-size: 14px; color: var(--bone-1); }
.footlink:hover { color: var(--acc-text); }
.footlink[aria-current="true"] { color: var(--bone-0); }
.footer-base {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding-top: 28px;
padding-bottom: 36px;
border-top: 1px solid var(--line);
}
/* ===== § 7 LANDING SECTIONS ============================================ */
/* --- hero --- */
.hero { position: relative; border-bottom: 1px solid var(--line); }
.hero > .container {
position: relative;
padding-top: clamp(4rem, 1.63rem + 9.71vw, 6.75rem);
}
.hero-eyebrow {
display: flex;
align-items: flex-start;
gap: 16px;
}
/* aligned to the first line's optical centre, so the marker stays put when
the line wraps on a narrow screen */
.hero-eyebrow i {
width: 7px;
height: 7px;
flex: none;
margin-top: 0.36em;
background: var(--acc);
}
.hero-eyebrow p {
font-family: var(--mono);
font-size: clamp(0.625rem, 0.61rem + 0.1vw, 0.6875rem);
letter-spacing: 0.22em;
color: var(--bone-1);
text-transform: uppercase;
}
.hero h1 {
margin-top: clamp(1.75rem, 1.45rem + 1.52vw, 2.25rem);
font-family: var(--serif);
font-weight: 400;
font-size: var(--t-hero);
line-height: 0.95;
letter-spacing: -0.015em;
color: var(--bone-0);
text-wrap: balance;
}
.hero h1 em { font-style: italic; font-weight: 400; }
.hero .lede {
max-width: 660px;
margin-top: clamp(2rem, 1.55rem + 1.9vw, 3rem);
}
.hero-cta {
display: flex;
align-items: center;
gap: 16px;
margin-top: clamp(2.5rem, 1.9rem + 2.48vw, 3.5rem);
}
.hero-meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
margin-top: clamp(3.5rem, 2.31rem + 4.86vw, 6rem);
padding-top: 24px;
padding-bottom: 28px;
border-top: 1px solid var(--line);
}
.hero-meta > div {
display: flex;
flex-direction: column;
gap: 8px;
}
.coords {
position: absolute;
top: 120px;
right: 0;
writing-mode: vertical-rl;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.3em;
color: var(--bone-2);
}
/* --- 01 position --- */
.statement {
max-width: 1080px;
margin-top: clamp(2.5rem, 1.79rem + 2.91vw, 4rem);
font-family: var(--serif);
font-weight: 420;
font-size: var(--t-statement);
line-height: 1.14;
letter-spacing: -0.01em;
color: var(--bone-0);
text-wrap: balance;
}
.statement em { font-style: italic; }
/* --- 02 instruments --- */
.ledger { margin-top: clamp(2.75rem, 1.79rem + 3.94vw, 4.5rem); }
.ledger-row {
display: grid;
grid-template-columns: 88px 336px minmax(0, 1fr) 224px;
gap: 40px;
padding: 52px 0 56px;
border-top: 1px solid var(--line);
transition: background 0.3s ease;
}
.ledger-row:last-child { border-bottom: 1px solid var(--line); }
.ledger-row:hover { background: var(--ink-1); }
.ledger-row .idx {
padding-top: 10px;
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.1em;
color: var(--bone-2);
transition: color 0.3s ease;
}
.ledger-row:hover .idx { color: var(--acc-text); }
.ledger-name {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.ledger-name h3 {
font-family: var(--serif);
font-weight: 440;
font-size: var(--t-instrument);
line-height: 1;
color: var(--bone-0);
}
.ledger-body {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 6px;
}
.ledger-body .spec {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--bone-2);
text-transform: uppercase;
}
.ledger-side {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 22px;
padding-top: 8px;
}
.proof {
display: flex;
align-items: baseline;
gap: 40px;
margin-top: clamp(3rem, 2.29rem + 2.91vw, 4.5rem);
}
.proof .meta-k { flex: none; color: var(--acc-text); }
.proof q {
font-variation-settings: "opsz" 16;
max-width: 720px;
font-family: var(--serif);
font-style: italic;
font-size: var(--t-quote);
line-height: 1.5;
color: var(--bone-0);
text-wrap: pretty;
quotes: none;
}
/* --- 03 doctrine --- */
.rules {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 56px;
margin-top: clamp(3rem, 1.57rem + 5.71vw, 5rem);
}
.rule {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
padding-top: 32px;
border-top: 1px solid var(--line);
}
.rule .sec {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--acc-text);
}
.rule h3 {
font-variation-settings: "opsz" 20;
font-family: var(--serif);
font-weight: 440;
font-size: var(--t-rule);
line-height: 1.15;
color: var(--bone-0);
}
/* --- 04 the firm --- */
.firm h2 {
margin-top: clamp(2.5rem, 1.79rem + 2.91vw, 4rem);
font-family: var(--serif);
font-weight: 420;
font-size: var(--t-firm);
line-height: 1.06;
letter-spacing: -0.01em;
color: var(--bone-0);
text-wrap: balance;
}
.firm h2 em { font-style: italic; }
.firm .creed {
font-variation-settings: "opsz" 16;
max-width: 980px;
margin-top: clamp(1.5rem, 1.14rem + 1.52vw, 2.5rem);
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.25rem, 1.09rem + 0.67vw, 1.6875rem);
line-height: 1.45;
color: var(--bone-1);
}
.facts {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
margin-top: clamp(2.75rem, 1.79rem + 3.94vw, 4.5rem);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.facts > div {
display: flex;
flex-direction: column;
gap: 10px;
padding: 26px 20px 30px 24px;
border-left: 1px solid var(--line);
}
.facts > div:first-child { padding-left: 0; border-left: 0; }
.facts > div:last-child { padding-right: 0; }
.facts .meta-k { letter-spacing: 0.2em; }
.facts .fact-v {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--bone-0);
white-space: nowrap;
}
.firm-close {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 96px;
margin-top: clamp(2.75rem, 1.79rem + 3.94vw, 4.5rem);
}
.firm-close p.prose-p { max-width: 520px; }
.seal {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
}
.seal .wordmark b { font-size: 16px; }
.seal hr {
width: 232px;
height: 1px;
margin: 0;
border: 0;
background: var(--line);
}
/* --- 05 contact --- */
.contact > .container {
padding-top: clamp(6.5rem, 4.63rem + 7.62vw, 9rem);
padding-bottom: clamp(7rem, 5.13rem + 7.62vw, 9.5rem);
}
.contact h2 {
margin-top: clamp(3rem, 2.29rem + 2.91vw, 4.5rem);
font-family: var(--serif);
font-weight: 400;
font-size: var(--t-contact);
line-height: 0.98;
letter-spacing: -0.015em;
color: var(--bone-0);
}
.contact h2 em { font-style: italic; }
.contact .lede { max-width: 560px; margin-top: clamp(1.875rem, 1.55rem + 1.33vw, 2.75rem); }
.contact-row {
display: flex;
align-items: center;
gap: 32px;
margin-top: clamp(2.5rem, 2.14rem + 1.52vw, 3.25rem);
}
.contact-row .mono-note { letter-spacing: 0.16em; font-size: 11px; }
.contact .bots { margin-top: 28px; }
/* ===== § 8 SECONDARY PAGES ============================================= */
/* One document, two UI languages: both label sets ship in the markup and
— set by the boot script before paint — picks one. The
legal text itself stays German; that is the binding version. */
:root[data-lang="de"] .t-en,
:root[data-lang="en"] .t-de { display: none; }
.page-head { border-bottom: 1px solid var(--line); }
.page-head > .container {
padding-top: clamp(4rem, 2.61rem + 5.71vw, 6rem);
padding-bottom: clamp(2.5rem, 1.79rem + 2.91vw, 4rem);
}
.page-head h1 {
margin-top: clamp(1.75rem, 1.28rem + 1.9vw, 2.75rem);
font-family: var(--serif);
font-weight: 420;
font-size: var(--t-firm);
line-height: 1.04;
letter-spacing: -0.01em;
color: var(--bone-0);
text-wrap: balance;
}
.page-head h1 em { font-style: italic; }
.page-head .lede { max-width: 640px; margin-top: 28px; }
/* legal prose — the ledger grammar applied to a document */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 22px; }
.prose h2 {
font-variation-settings: "opsz" 20;
margin-top: clamp(3rem, 2.29rem + 2.91vw, 4.5rem);
/* the section above already supplies the air */
padding-top: 26px;
border-top: 1px solid var(--line);
font-family: var(--serif);
font-weight: 440;
font-size: clamp(1.375rem, 1.24rem + 0.57vw, 1.75rem);
line-height: 1.2;
color: var(--bone-0);
}
.prose > h2:first-child { margin-top: 0; }
.prose h2 .n {
display: block;
margin-bottom: 12px;
font-family: var(--mono);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.2em;
color: var(--acc-text);
}
.prose p,
.prose li {
font-size: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
line-height: 1.75;
color: var(--bone-1);
}
.prose a { color: var(--bone-0); border-bottom: 1px solid var(--line); }
.prose a:hover { color: var(--acc-text); border-bottom-color: var(--acc); }
.prose ul { display: flex; flex-direction: column; gap: 10px; }
.prose li { position: relative; padding-left: 26px; }
.prose li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 6px;
height: 1px;
background: var(--acc);
}
.prose code {
font-family: var(--mono);
font-size: 0.86em;
letter-spacing: 0.02em;
color: var(--bone-0);
white-space: nowrap;
}
.prose .addr {
font-family: var(--mono);
font-size: 13px;
line-height: 2;
letter-spacing: 0.04em;
color: var(--bone-0);
}
.prose .pending {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 3px 10px;
border: 1px dashed var(--line);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--bone-2);
text-transform: uppercase;
}
.prose .stand {
margin-top: clamp(3rem, 2.29rem + 2.91vw, 4.5rem);
padding-top: 24px;
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--bone-2);
text-transform: uppercase;
}
/* 404 */
.notfound > .container {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: clamp(5rem, 2.63rem + 9.71vw, 7.75rem);
padding-bottom: clamp(6rem, 4.14rem + 7.62vw, 8.5rem);
}
.notfound .rule-head { align-self: stretch; }
.notfound .code {
font-variation-settings: "opsz" 60;
margin-top: 36px;
font-family: var(--serif);
font-weight: 400;
font-size: var(--t-hero);
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--bone-0);
}
.notfound .code em { font-style: italic; }
.notfound .lede { max-width: 520px; margin-top: 36px; }
.notfound .hero-cta { margin-top: 44px; }
/* ===== § 9 MOTION ====================================================== */
/* line-by-line rise for the hero, fade-up for everything that follows */
/* padding + equal negative margin widens the clipping box just enough that
Bodoni's descenders survive a 0.95 line-height, without moving anything */
.rl {
display: block;
overflow: hidden;
padding: 0.06em 0 0.14em;
margin: -0.06em 0 -0.14em;
}
.rl > span { display: block; animation: rise 1s var(--ease) var(--delay, 0s) both; }
.fade { animation: fadeup 0.9s var(--ease) var(--delay, 0s) both; }
/* the section hairline draws itself as its header arrives */
.rule-head.reveal .hair { transform: scaleX(0); }
.rule-head.reveal.is-in .hair {
transform: scaleX(1);
transition: transform 1.1s var(--ease) calc(var(--d, 0s) + 0.12s);
}
/* site.js adds .reveal only to elements still below the fold, then .is-in
as they arrive. No JS, no observer, or reduced motion — the class is never
added and the page is simply already there. */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
opacity: 1;
transform: none;
transition: opacity 0.85s var(--ease) var(--d, 0s), transform 0.85s var(--ease) var(--d, 0s);
}
@keyframes rise { from { transform: translateY(112%); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@media print {
.reveal { opacity: 1; transform: none; }
.site-header, .nav-panel, .grain { display: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ===== § 10 RESPONSIVE ================================================= */
@media (max-width: 1180px) {
.ledger-row { grid-template-columns: 72px minmax(0, 1fr) 200px; gap: 32px; }
.ledger-row .idx { grid-row: 1 / 3; }
.ledger-name { grid-column: 2; }
.ledger-body { grid-column: 2; padding-top: 22px; }
.ledger-side { grid-column: 3; grid-row: 1 / 3; align-items: flex-end; text-align: right; }
.facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.facts > div:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
.firm-close { gap: 48px; }
}
@media (max-width: 1020px) {
.site-nav { display: none; }
.nav-toggle { display: inline-flex; }
.header-tools { gap: 12px; }
.header-tools .btn { display: none; }
.rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
.coords { display: none; }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
.foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
html { scroll-padding-top: 80px; }
.site-header > .container { height: 64px; }
.head-row { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 40px; }
.support { margin-bottom: 0; }
.hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hero-cta { flex-direction: column; align-items: stretch; }
.hero-cta .btn { width: 100%; }
.ledger-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
padding: 36px 0 44px;
}
.ledger-row:hover { background: none; }
.ledger-row .idx { padding-top: 0; color: var(--acc-text); }
.ledger-body { padding-top: 0; }
.ledger-side {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
align-self: stretch;
padding-top: 10px;
text-align: left;
}
.ledger-side .golink--quiet { display: none; }
.proof { flex-direction: column; gap: 18px; }
.rules { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.facts { display: flex; flex-direction: column; }
.facts > div {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 15px 0;
border-left: 0;
border-bottom: 1px solid var(--line);
}
.facts > div:last-child { border-bottom: 0; }
.facts .fact-v { text-align: right; }
.firm-close { flex-direction: column; align-items: flex-start; gap: 44px; }
.seal { align-self: flex-end; }
.seal hr { width: 180px; }
.contact-row { flex-direction: column; align-items: stretch; gap: 20px; }
.contact-row .btn { width: 100%; }
.contact-row .mono-note { text-align: center; }
.contact .bots { text-align: center; margin-top: 4px; }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; padding-top: 52px; padding-bottom: 48px; }
.foot-col { gap: 2px; }
.footlink { padding: 3px 0; }
.footer-base {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding-top: 24px;
padding-bottom: 32px;
}
.notfound .hero-cta { align-self: stretch; }
}
@media (max-width: 420px) {
.lang { gap: 8px; }
.header-tools { gap: 8px; }
.wordmark b { font-size: 13px; letter-spacing: 0.32em; margin-right: -0.32em; }
}
/* the drawer only exists below the nav breakpoint */
@media (min-width: 1021px) {
.nav-panel { display: none !important; }
}