/* ============================================================ MAURICE CURTH — Triathlon · Design System Palette: deep ink, bone, burnt-orange (rust) Type: Saira Condensed (display) · Archivo (text) ============================================================ */ :root{ /* ink scale */ --ink: #0b0e12; --ink-1: #0f1318; --ink-2: #141a21; --ink-3: #1c242d; --line: rgba(232,230,225,.10); --line-2: rgba(232,230,225,.18); /* foreground */ --bone: #e9e7e1; --bone-dim: rgba(233,231,225,.62); --bone-faint: rgba(233,231,225,.40); --steel: #8b96a2; /* accent */ --rust: #d2551c; --rust-bright:#e9651f; --rust-deep: #9a3d12; /* metrics */ --maxw: 1280px; --pad: clamp(20px, 5vw, 72px); --r: 3px; --font-display: "Saira Condensed", "Arial Narrow", sans-serif; --font-body: "Archivo", system-ui, sans-serif; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ background:var(--ink); color:var(--bone); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--rust); color:#fff; } /* ---------- shared type helpers ---------- */ .kicker{ font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--rust); display:inline-flex; align-items:center; gap:.7em; } .kicker::before{ content:""; width:26px; height:1px; background:var(--rust); display:inline-block; } .kicker.center::before{ display:none; } .eyebrow{ font-size:12px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--bone-faint); } .display{ font-family:var(--font-display); font-weight:600; line-height:.92; letter-spacing:.005em; text-transform:uppercase; } .section{ padding:clamp(72px,11vw,150px) var(--pad); position:relative; } .wrap{ max-width:var(--maxw); margin:0 auto; } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:clamp(40px,6vw,72px); } .section-head h2{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:clamp(40px,7vw,86px); line-height:.9; letter-spacing:.005em; } .section-head .idx{ font-family:var(--font-display); font-size:15px; letter-spacing:.2em; color:var(--rust); white-space:nowrap; padding-bottom:.5em; } /* lang visibility handled by JS toggling [data-lang] on */ [data-lang="de"] .en{ display:none !important; } [data-lang="en"] .de{ display:none !important; }