/* TRAUMFROSCH v1.2 — generated from _brand.toml; do not hand-edit. Source of truth is the TOML. */

:root {
  --brand-bone: #F4EFE6;
  --brand-bone-2: #EAE3D4;
  --brand-ink: #1D211F;
  --brand-void: #0A0A0A;
  --brand-gold: #C5A059;
  --brand-gold-soft: rgba(197, 160, 89, 0.22);
  --brand-drafting: #4A6B7C;
  --brand-drafting-soft: rgba(74, 107, 124, 0.08);
  --brand-warn: #8B4646;
  --brand-warn-soft: rgba(139, 70, 70, 0.05);
  --brand-bone-45: rgba(244, 239, 230, 0.45);
  --brand-bone-60: rgba(244, 239, 230, 0.60);
  --brand-bone-80: rgba(244, 239, 230, 0.80);
  --brand-ink-08: rgba(29, 33, 31, 0.08);
  --brand-ink-15: rgba(29, 33, 31, 0.15);
  --brand-ink-25: rgba(29, 33, 31, 0.25);
  --brand-ink-45: rgba(29, 33, 31, 0.45);
  --brand-ink-60: rgba(29, 33, 31, 0.60);
  --brand-ink-80: rgba(29, 33, 31, 0.80);
  --brand-serif: Playfair Display, Didot, 'Didot LT STD', Georgia, serif;
  --brand-mono: SF Mono, Roboto Mono, Menlo, Consolas, monospace;
  --brand-lh-display: 1.1;
  --brand-lh-tight: 1.4;
  --brand-lh-body: 1.65;
  --brand-lh-mono: 1.8;
  --u: 8px;
  --u2: 16px;
  --u3: 24px;
  --u4: 32px;
  --u5: 40px;
  --u6: 48px;
  --u7: 56px;
  --u8: 64px;
  --u9: 72px;
  --u10: 80px;
  --brand-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --brand-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --brand-dur-fast: 180ms;
  --brand-dur: 320ms;
  --brand-dur-slow: 600ms;
}


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--brand-bone);
  color: var(--brand-ink);
  font-family: var(--brand-serif);
  font-size: 16px;
  line-height: var(--brand-lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--brand-serif);
  line-height: var(--brand-lh-display);
  margin: 0 0 var(--u2) 0;
  font-weight: 500;
}
h1 { font-size: 3.25rem; letter-spacing: -0.01em; }
h2 { font-size: 2.25rem; letter-spacing: -0.005em; }
h3 { font-size: 1.625rem; }
h4 { font-size: 1.125rem; }
p { margin: 0 0 var(--u2) 0; max-width: 64ch; }
code, pre, .mono { font-family: var(--brand-mono); line-height: var(--brand-lh-mono); }
a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 0.18em; }
a:hover { color: var(--brand-gold); }

.wordmark {
  font-family: var(--brand-serif);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.layout {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--u8) var(--u3);
}

.rule {
  height: 1px;
  background: var(--brand-ink-15);
  margin: var(--u4) 0;
  border: 0;
}

.palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--u2);
  margin: var(--u3) 0;
}
.swatch {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  padding: var(--u2);
  border: 1px solid var(--brand-ink-15);
  border-radius: 2px;
}
.swatch .name {
  font-family: var(--brand-serif);
  font-style: italic;
  font-size: 1.125rem;
}
.swatch .hex,
.swatch .role {
  font-family: var(--brand-mono);
  font-size: 0.75rem;
}
.swatch .role { opacity: 0.6; max-width: 26ch; }

.caption {
  font-family: var(--brand-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink-60);
}

footer.brand-footer {
  font-family: var(--brand-mono);
  font-size: 0.75rem;
  color: var(--brand-ink-45);
  margin-top: var(--u8);
  padding-top: var(--u3);
  border-top: 1px solid var(--brand-ink-08);
}

/* Minimal control-demonstration surface — operator request 2026-05-23:
   assert ownership without leaking entity/contact/stack hints. The base
   .minimal-surface rule paints --brand-ink as a deterministic fallback
   for any response that reaches the browser without a .bg-* class
   (cache, error, intermediate). The .bg-* classes below are picked per
   request by serve.py from the surface-aligned subset of the brand
   palette (bone, bone-2, ink, drafting — three of which are register-
   declared surfaces, the fourth a register-declared "subdued emphasis"
   that reads as a surface in the absence of any foreground content). */
html:has(body.minimal-surface),
body.minimal-surface {
  background: var(--brand-ink);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
body.minimal-surface.bg-bone     { background: var(--brand-bone); }
body.minimal-surface.bg-bone-2   { background: var(--brand-bone-2); }
body.minimal-surface.bg-ink      { background: var(--brand-ink); }
body.minimal-surface.bg-drafting { background: var(--brand-drafting); }