@import url("fonts.css");
/* arcaeon.css - the Arcaeon design system, 2026-09-23.
   Spec: DESIGN_SYSTEM_2026-09-23.md (site root). ONE scheme: deep navy ground,
   brand navy on raised surfaces, light text, gold accent. The only light
   surface is .receipt, and it lives only inside a .frame. Fonts are
   self-hosted: css/fonts.css (one variable woff2 per family) is imported
   above, so a page links this one file and nothing else. Contrast numbers
   beside tokens are WCAG ratios, computed by tests/test_tokens_contrast.py,
   given as "on ground #0C1828 / on raised #13233A". */

:root{
  /* ground family (brand navy #13233A from brand/arcaeon_mark_C2 README) */
  --navy-deep:#0C1828;   /* page ground, footer, frame ring, code wells */
  --navy:#13233A;        /* raised: cards, frame body, header, bands */
  --navy-raised:var(--navy); /* retired alias; remove once nothing reads it */
  --line:#2B4466;        /* decorative hairlines only (1.80 / 1.60, exempt) */
  --line-strong:#6384AD; /* control borders, frame edge: 4.62 / 4.09 (3:1 rule) */
  /* text on navy */
  --ink:#E8EEF3;         /* body text 15.26 / 13.51 (mark inner) */
  --ink-soft:#A9B8CA;    /* secondary 8.83 / 7.82 */
  --ink-dim:#8FA1B7;     /* captions only 6.75 / 5.98 */
  /* accent (mark outer gold #e0a73c, locked gold #C8912E) */
  --gold:#E0A73C;        /* links, eyebrow, focus ring 8.29 / 7.34 */
  --gold-fill:#C8912E;   /* button fill; navy text on it 5.68 */
  --gold-hover:#E0A73C;  /* fill on hover; navy text 7.34 */
  --on-gold:#13233A;
  /* receipt surface (inside .frame only) */
  --paper:#F7F3EA;
  --paper-ink:#13233A;   /* 14.27 */
  --paper-soft:#4A5A70;  /* 6.35 */
  --paper-line:#DDD3C0;
  --paper-gold:#7A5410;  /* gold text on paper 6.11; #E0A73C fails at 1.94 */
  /* status: differs in LIGHTNESS as well as hue, always paired with a word */
  --ok:#86EFC0;          /* L .71, 12.85 / 11.38 */
  --unknown:#A9B8CA;     /* L .47 */
  --bad:#F47C7C;         /* L .35, 6.81 / 6.03 */
  --ok-paper:#1C7A4E;    /* 4.81 on paper */
  --bad-paper:#B42318;   /* 5.94 on paper */
  /* type: one display, one body, system mono for hashes */
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-1:.75rem;   /* 12 caption, meta */
  --fs-2:.875rem;  /* 14 small, labels, window bar */
  --fs-3:1rem;     /* 16 body */
  --fs-4:1.25rem;  /* 20 lead, h3 */
  --fs-5:clamp(1.5rem,1.1rem + 1.6vw,1.875rem);   /* 24-30 h2 */
  --fs-6:clamp(2.125rem,1.4rem + 3.2vw,3.25rem);  /* 34-52 h1 */
  --lh-tight:1.15; --lh-body:1.6;
  /* spacing, 8 px base (4 is the frame ring half-step only) */
  --sp-h:4px; --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px;
  /* radii: frames 24, cards 16, controls 8, chips pill */
  --r-frame:24px; --r-inner:20px; --r-card:16px; --r-ctl:8px; --r-pill:999px;
  --maxw:1120px; --gutter:16px; --touch:44px;
  --focus:0 0 0 3px var(--navy-deep),0 0 0 5px var(--gold);
  --shadow:0 24px 60px -28px rgba(0,0,0,.7);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy-deep);color:var(--ink);font:400 var(--fs-3)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:var(--lh-tight);letter-spacing:-.015em;margin:0 0 var(--sp-2)}
h1{font-size:var(--fs-6);letter-spacing:-.03em}
h2{font-size:var(--fs-5)}
h3{font-size:var(--fs-4)}
p{margin:0 0 var(--sp-2)}
small,.meta{font-size:var(--fs-2);color:var(--ink-soft)}
.caption{font-size:var(--fs-1);color:var(--ink-dim);letter-spacing:.04em}
.eyebrow{font:500 var(--fs-2)/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
code,kbd,samp,pre,.hash{font-family:var(--font-mono);font-size:.9em}
a{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
/* focus: a 2 px gold ring outside a 3 px ground-colored gap. The transparent
   outline stays so forced-colors mode (which drops box-shadow) still draws one. */
:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid transparent;outline-offset:2px;box-shadow:var(--focus);border-radius:var(--r-ctl)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
@media (min-width:720px){.wrap{padding:0 var(--sp-3)}}
.band{padding:var(--sp-6) 0}
.band-deep{background:var(--navy)}
.stack>*+*{margin-top:var(--sp-2)}
.skip-link{position:absolute;left:var(--sp-1);top:-60px;z-index:100;background:var(--gold-fill);color:var(--on-gold);
  padding:var(--sp-1) var(--sp-2);border-radius:0 0 var(--r-ctl) var(--r-ctl);font-weight:600}
.skip-link:focus,.skip-link:focus-visible{top:0}

/* header: mark (brand_mark.py HEADER_MARK, 30 px) + wordmark + nav */
.site-head{position:sticky;top:0;z-index:20;background:rgba(19,35,58,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:var(--touch);color:var(--ink);text-decoration:none;
  font:600 var(--fs-4)/1 var(--font-display);letter-spacing:-.01em}
.brand:hover{color:var(--ink)}
.nav{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:center}
.nav a{display:inline-flex;align-items:center;min-height:var(--touch);color:var(--ink-soft);text-decoration:none;font-size:var(--fs-2)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold)}

/* footer: mark (FOOTER_MARK_BLOCK, 20 px) + arcaeon.io, links, legal */
.site-foot{background:var(--navy-deep);border-top:1px solid var(--line);padding:var(--sp-5) 0 var(--sp-4);color:var(--ink-soft);font-size:var(--fs-2)}
.site-foot a{color:var(--ink-soft)}
.site-foot a:hover{color:var(--gold)}
.foot-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.foot-brand{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--ink);letter-spacing:.04em}
.site-foot .arc-foot{color:var(--ink-soft)!important}

/* buttons: 8 px radius, 44 px min, gold primary, outlined secondary */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:var(--touch);
  padding:10px var(--sp-3);border-radius:var(--r-ctl);border:1px solid transparent;font:600 var(--fs-3)/1.2 var(--font-body);
  text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn-primary{background:var(--gold-fill);color:var(--on-gold)}
.btn-primary:hover{background:var(--gold-hover);color:var(--on-gold)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}
.btn-quiet{background:transparent;color:var(--gold);padding-inline:var(--sp-1)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-block{display:flex;width:100%}

/* card */
.card{background:var(--navy);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-3)}

/* PRODUCT FRAME: 1 px border, 4 px padding ring, window bar, inner body.
   <figure class="frame"><div class="frame-bar"><span class="frame-dots"></span>
   <span class="frame-title">Console</span><span class="frame-meta">v0.8.0</span></div>
   <div class="frame-body">...</div><figcaption class="frame-cap">...</figcaption></figure> */
.frame{margin:0;background:var(--navy-deep);border:1px solid var(--line-strong);border-radius:var(--r-frame);
  padding:var(--sp-h);box-shadow:var(--shadow);position:relative;max-width:100%}
.frame-bar{display:flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:0 var(--sp-2);
  font:500 var(--fs-2)/1 var(--font-display);color:var(--ink-soft)}
.frame-dots{flex:none;width:34px;height:10px;background:radial-gradient(circle,var(--line-strong) 4px,transparent 4.5px) 0 50%/12px 10px repeat-x}
.frame-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-meta{font-family:var(--font-mono);font-size:var(--fs-1);color:var(--ink-dim)}
.frame-body{background:var(--navy);border:1px solid var(--line);border-radius:var(--r-inner);
  padding:var(--sp-3);overflow:auto;min-width:0}
.frame-cap{padding:var(--sp-1) var(--sp-2) var(--sp-h);font-size:var(--fs-2);color:var(--ink-soft)}
/* "design around the edges": gold corner ticks on a showcase frame */
.frame-showcase{background:linear-gradient(135deg,rgba(224,167,60,.10),transparent 40%),var(--navy-deep)}
.frame-showcase::before,.frame-showcase::after{content:"";position:absolute;width:28px;height:28px;border:2px solid var(--gold);pointer-events:none}
.frame-showcase::before{top:-9px;left:-9px;border-right:0;border-bottom:0;border-top-left-radius:12px}
.frame-showcase::after{bottom:-9px;right:-9px;border-left:0;border-top:0;border-bottom-right-radius:12px}

/* RECEIPT: the one light surface, only as .frame-body.receipt */
.receipt{background:var(--paper);color:var(--paper-ink);border-color:var(--paper-line);font-size:var(--fs-2)}
.receipt a{color:var(--paper-gold)}
.receipt .meta,.receipt small{color:var(--paper-soft)}
.receipt hr{border:0;border-top:1px dashed var(--paper-line);margin:var(--sp-2) 0}
.receipt .row{display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
.receipt .hash{color:var(--paper-ink);word-break:break-all}
.receipt .ok{color:var(--ok-paper)} .receipt .bad{color:var(--bad-paper)}
.receipt :focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--paper-ink)}

/* SEAL: mark inside a ring + verify line under it */
.seal{display:inline-flex;flex-direction:column;align-items:center;gap:var(--sp-1);text-align:center}
.seal-ring{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;
  border:2px solid var(--gold);box-shadow:inset 0 0 0 4px var(--navy),inset 0 0 0 5px var(--line-strong)}
.seal-ring .arc-mark{width:44px;height:44px}
.seal-verify{font:500 var(--fs-1)/1.3 var(--font-mono);color:var(--ink-soft);letter-spacing:.02em}
.seal-verify a{color:var(--gold)}
.receipt .seal-ring{border-color:var(--paper-ink);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px var(--paper-line)}
.receipt .seal-ring .arc-in{stroke:var(--paper-ink)}
.receipt .seal-verify{color:var(--paper-soft)}

/* status chip: color + lightness + a word, never color alone */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 12px;border-radius:var(--r-pill);
  border:1px solid currentColor;font:600 var(--fs-1)/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.chip-ok{color:var(--ok)} .chip-unknown{color:var(--unknown)} .chip-bad{color:var(--bad)}
.chip-bad::before{border-radius:1px}
.chip-unknown::before{background:transparent;border:2px solid currentColor}

/* forms */
input,select,textarea{font:inherit;color:var(--ink);background:var(--navy-deep);border:1px solid var(--line-strong);
  border-radius:var(--r-ctl);min-height:var(--touch);padding:10px 12px;max-width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--gold)}
label{display:block;font-size:var(--fs-2);color:var(--ink-soft);margin-bottom:var(--sp-h)}

/* footer rows (brand_mark.site_foot): links and phone keep a 44 px hit area */
.foot-links,.foot-phone,.foot-note{margin:var(--sp-1) 0 0}
.foot-links a,.foot-phone a,.foot-note a{display:inline-flex;align-items:center;min-height:var(--touch)}
.foot-note{color:var(--ink-soft);max-width:40em}

/* PROSE: long-form pages (render_md.py, fixes/render.py, 404.html) */
.prose{padding-top:var(--sp-6);padding-bottom:var(--sp-5)}
.prose h1{max-width:22em;margin-bottom:var(--sp-3)}
.prose h2{margin:var(--sp-6) 0 var(--sp-2);padding-top:var(--sp-4);border-top:1px solid var(--line);max-width:24em}
.prose h3{margin:var(--sp-4) 0 var(--sp-1)}
.prose h4,.prose h5,.prose h6{font:600 var(--fs-2)/1.3 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:var(--sp-4) 0 var(--sp-1)}
.prose p,.prose ul,.prose ol,.prose blockquote,.prose dl{max-width:40em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 var(--sp-2)}
.prose li{margin:var(--sp-1) 0}
.prose strong,.prose b{font-weight:600;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0}
.prose blockquote{margin:var(--sp-3) 0;padding:0 var(--sp-3);border-left:2px solid var(--gold);color:var(--ink-soft)}
.prose code{background:var(--navy-deep);border:1px solid var(--line);border-radius:var(--r-ctl);padding:1px 6px}
pre{background:var(--navy);border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--sp-2) var(--sp-3);
  overflow-x:auto;max-width:100%;line-height:1.6;color:var(--ink)}
pre code,.prose pre code{background:none;border:0;padding:0;font-size:inherit}
.frame-body pre{margin:0;background:transparent;border:0;padding:0}
.table-wrap{max-width:100%;overflow-x:auto;margin:var(--sp-3) 0}
.table-wrap table{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.table-wrap th,.table-wrap td{text-align:left;padding:12px var(--sp-1);border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap th{font:600 var(--fs-1)/1.3 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.lede{font-size:var(--fs-4);color:var(--ink-soft);max-width:34em}

/* mobile: 16 px gutters (set on .wrap), no horizontal scroll */
@media (max-width:719px){
  .band{padding:var(--sp-5) 0}
  .frame{border-radius:var(--r-inner)}
  .frame-body{padding:var(--sp-2);border-radius:var(--r-card)}
  .frame-showcase::before,.frame-showcase::after{display:none}
  .btn{width:100%}
  .site-head{position:static}
  .site-head .wrap{flex-wrap:wrap;padding-top:var(--sp-h);padding-bottom:var(--sp-h)}
  .site-head .nav{width:100%;gap:0 var(--sp-2)}
  .nav{gap:0 var(--sp-2)}
  .prose{padding-top:var(--sp-5)}
  pre{white-space:pre-wrap;padding:var(--sp-2)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:#fff;color:#000}.site-head,.site-foot,.skip-link{display:none}.frame{box-shadow:none;border-color:#999}}