/* ══ THE STORY, IN THE FIELD'S LANGUAGE - on the dark ground ═════════════════════════════════════
   The story is a scroll-driven film: the line, the twelve layers, the assembler. It was drawn for the dark and
   it stays dark, the way the Field's own dark sections are: ink ground with the faint lattice, Archivo for the
   headlines, Inter for the words, cream text, orange as the only accent, pills for every control. Loaded last,
   after the page's own sheet; it retunes, it does not rebuild. 18 Sep 2026. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@112,900&family=Inter:wght@400;500;600;700&display=swap');
:root { --paper:#1c1712; --ink:#efe9db; --ink2:#b3a58c; --faint:#8f8370; --btc:#f7931e; --gold:#f7931e; --acid:#f7931e; --sol:#efe9db; --edge:rgba(239,233,219,.16); --ease:cubic-bezier(.2,.8,.2,1); }
html, body { background:#1c1712 !important; color:var(--ink) !important; font-family:Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important; }
body { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M26 3 L47 15 L47 33 L26 45 L5 33 L5 15 Z'/%3E%3Cpath d='M52 48 L73 60 L73 78 L52 90 L31 78 L31 60 Z'/%3E%3Cpath d='M0 48 L21 60 L21 78 L0 90 L-21 78 L-21 60 Z'/%3E%3C/g%3E%3C/svg%3E") !important; background-size:52px 90px !important; }

/* the two voices */
.serif, .card h1, #cap h2, .ov h3, .icard h4, .costrow b, h1, h2, h3 { font-family:Archivo, Impact, "Arial Black", sans-serif !important; font-weight:900 !important; font-stretch:112%; font-style:normal !important; text-transform:uppercase; letter-spacing:-.01em !important; line-height:.92 !important; }
.card h1 em { font-style:normal !important; color:var(--gold) !important; }
.mono, #cap .k, .card .k, .costrow span, .costnote, .lay, .lay li, .icard .id, #counter, .ov .sub, .hint, #ca, #ca .lab, .k { font-family:Inter, system-ui, sans-serif !important; font-style:normal !important; }
#cap .k, .card .k, .costrow span, .costnote, #counter, .hint { font-weight:600 !important; letter-spacing:.14em !important; text-transform:uppercase; color:var(--ink2) !important; font-size:11.5px !important; }
.card p, #cap p, .ov .sub { color:var(--ink2) !important; font-family:Inter, system-ui, sans-serif !important; }

/* the chapters: a dark sheet with soft edges, no glow */
#cap { background:#2a231c !important; border:0 !important; border-radius:24px !important; box-shadow:0 20px 60px rgba(0,0,0,.35) !important; padding:26px 28px !important; }
#cap::before { display:none !important; }
.costrow > div { background:rgba(239,233,219,.06) !important; border-radius:16px !important; border:0 !important; }
.card { background:transparent !important; }

/* every control is a pill: cream on the dark, orange when pressed */
#ca button, #ca a, #endcard a, .btn, #cap button, .x, .gal .c button {
  font:600 13px/1 Inter, system-ui, sans-serif !important; letter-spacing:0 !important; text-transform:none !important;
  border:2px solid var(--ink) !important; border-radius:999px !important; background:transparent !important; color:var(--ink) !important;
  padding:10px 16px !important; cursor:pointer; transition:background .2s ease, color .2s ease, transform .18s var(--ease);
}
#ca .buy, #endcard a:not(.ghost), .btn:not(.ghost), #cap button { background:var(--ink) !important; color:#1c1712 !important; }
#ca button:hover, #ca a:hover, #endcard a:hover, .btn:hover, #cap button:hover { background:var(--gold) !important; color:#1c1712 !important; border-color:var(--gold) !important; transform:translateY(-1px); }
#ca { background:#2a231c !important; border:0 !important; border-radius:999px !important; box-shadow:0 12px 34px rgba(0,0,0,.3); padding:8px 8px 8px 16px !important; }
#ca code { font:500 12px ui-monospace, Menlo, Consolas, monospace !important; color:var(--ink) !important; }
#ca .lab { color:var(--ink2) !important; font-size:11px !important; letter-spacing:.14em !important; }

/* the assembler and the gallery */
.ov { background:rgba(28,23,18,.97) !important; }
.canvasbox { border-radius:22px !important; overflow:hidden; background:#0e0b09 !important; }
.lay li { border-bottom:1px solid rgba(239,233,219,.1) !important; color:var(--ink2) !important; }
.lay li.on { color:var(--ink) !important; }
.lay .i { border-radius:8px !important; border:1px solid rgba(239,233,219,.18) !important; }
.lay li.on .i { background:var(--gold) !important; color:#1c1712 !important; border-color:var(--gold) !important; }
.icard, .icard .art { background:#2a231c !important; border-radius:22px !important; border:0 !important; }
.insp { background:rgba(28,23,18,.85) !important; }
#titlecard .logo { filter:none !important; }

/* the line keeps its light; the counter and the scroll cue read cream */
#stage svg path, #stage svg line { stroke:var(--ink); }
#counter, .hint { color:var(--ink2) !important; }

/* the footer on the dark */
.omen-foot a { color:var(--ink) !important; }
::selection { background:var(--gold); color:#1c1712; }
@media (max-width:700px) { #cap { padding:20px 18px !important; border-radius:20px !important; } #ca { border-radius:22px !important; flex-wrap:wrap; } }