/* CREUSD — original ring gold #E1A00F (owner 2026-10-20 12:53). Text-on-light gold #946A0A (4.65:1), hover #825D09; dark text gold #E1A00F (8.49:1). Weights 300/400 only. Static; no motion. */
@font-face { font-family: Inter; font-style: normal; font-weight: 300 400; font-display: swap;
  src: url(/assets/fonts/inter-latin-var.woff2) format('woff2'); }  /* Inter v20 latin, OFL 1.1 (fonts/OFL.txt); self-hosted, no third-party request */
:root {
  --gold: #E1A00F;
  --gold-text: #946A0A;
  --gold-text-hover: #825D09;
  --ink: #141414;
  --body: #3A3A3A;
  --muted: #6B6B6B;
  --paper: #FBFAF6;
  --panel: #FFFFFF;
  --rule: #E6E1D6;
  --dot: #E9E5DA;
  --focus: var(--gold-text);
  --link-line: var(--gold-text);
  --max: 40rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --gold-text: #E1A00F;
    --ink: #F5F0E6;
    --body: #C9C4B8;
    --muted: #9BA3AE;
    --paper: #0C0E13;
    --panel: #12151C;
    --rule: rgba(255,255,255,.08);
    --dot: rgba(255,255,255,.07);
    --focus: var(--gold);
    --link-line: rgba(225,160,15,.55);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--body);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--link-line); padding-bottom: 1px; }
a:hover { border-bottom-color: var(--gold); }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-bottom-color: transparent; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem .75rem; border: 0; }
.skip:focus { left: .75rem; top: .75rem; z-index: 10; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Dot band: landing particle grammar, behind the logo only, nothing read on it. */
.band {
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: 16px 16px;
  background-position: 8px 8px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.site-header, main, .site-footer { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }

.site-header { padding: 1rem 0 .5rem; }  /* fold trim 10-20 (was 1.5rem 0 .75rem) */
.brand { display: inline-block; width: max-content; border: 0; padding: 0; }
.brand img { display: block; width: min(100%, 13rem); height: auto; }  /* 15rem (240) per ONYX G5; stepped to 13rem per G1 fallback */

main { flex: 1 0 auto; }

.hero { padding: .75rem 0 1rem; }  /* fold trim 10-20 (was 1.25rem 0 1.5rem) */
.eyebrow {
  margin: 0 0 1rem;
  font-size: .8125rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-text);
}
h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.rule { border: 0; height: 1px; width: 4rem; margin: 0 0 1.5rem; background: var(--gold); }

.status { margin: 1.5rem 0; padding: 1.5rem 1.75rem; border-left: 2px solid var(--gold); background: var(--panel); }
.status-line { margin: 0; font-size: 1em; }  /* ruling 09-24 §4.4: not smaller than body text, not collapsible */
.status-line strong { font-weight: 400; color: var(--ink); }

.site-footer { padding: 1.25rem 0 1.25rem; border-top: 1px solid var(--rule); margin-top: 1rem; font-size: .9375rem; }
.site-footer p { margin: 0 0 .5rem; }
.fine { color: var(--muted); font-size: .8125rem; }

.notfound { padding: 2rem 0 3rem; }
.notfound h1 { margin-bottom: 1rem; }

@media (max-width: 30rem) {
  .site-header { padding: 2.5rem 0 1.25rem; }
  .brand img { width: min(100%, 15rem); }
  .hero { padding: 1.5rem 0 1.5rem; }
  .status { padding: 1.25rem 1.25rem; }
}