/* ============================================================
MOIRA — BRAND SYSTEM · canonical tokens
The single source of truth for every Moira artifact.
Link it:
Do NOT introduce colors, fonts, or marks outside this file.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&family=Instrument+Sans:wght@400;500;600&family=Martian+Mono:wght@300;400;500&family=Onest:wght@400;500;600&display=swap');
:root{
/* ---- color · one neutral scale, NO accent ---- */
--n0:#FFFFFF; /* white · primary surface */
--n1:#FAFAFA; /* paper */
--n2:#F0F0EF; /* mist · fills */
--n3:#E2E2DF; /* line */
--n4:#C4C4C0; /* grey */
--n5:#9A9A95; /* ash · quiet labels */
--n6:#6C6C67; /* slate · secondary text */
--ink:#141417; /* ink · text, mark, reversed bg */
--ink-2:#2B2B2E;
--hair:#E4E4E1; /* hairline rules */
/* ---- type ---- */
--sans:'Archivo',system-ui,sans-serif; /* display + structure */
--text:'Instrument Sans',system-ui,sans-serif; /* body / reading */
--mono:'Martian Mono',ui-monospace,monospace; /* technical labels */
}
/* sanctioned body-text alternates (set data-text on ) */
[data-text="instrument"]{--text:'Instrument Sans',system-ui,sans-serif}
[data-text="onest"]{--text:'Onest',system-ui,sans-serif}
[data-text="plex"]{--text:'IBM Plex Sans',system-ui,sans-serif}
/* ---- universal brand helpers (prefixed to avoid collisions) ----
.e-tk technical label / caption (Martian Mono, tracked caps)
.e-cap section label (Archivo, tracked caps)
.e-num technical numeral (Martian Mono, light) */
.e-tk{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--n5)}
.e-tk--ink{color:var(--ink)}
.e-cap{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--n6)}
.e-num{font-family:var(--mono);font-weight:300;letter-spacing:.06em;color:var(--ink)}
/* ---- the mark · "The cut" ----
A soft square with three rounded corners and the top-right
corner cut clean. Monochrome ink. viewBox 0 0 100 100, path:
M30 8 H66 L92 34 V70 A22 22 0 0 1 70 92 H30 A22 22 0 0 1 8 70
V30 A22 22 0 0 1 30 8 Z
Clear space >= 1/2 the mark · minimum size 16px. */
/* ============================================================
DOCUMENT ARCHITECTURE · the spec-sheet layer
These are the structural marks that make every Moira surface
read as one precision instrument: the registration frame,
the running rail, numbered section heads, figure callouts.
Reusable across the brand sheet, the deck, and product chrome.
Colors resolve from --hair/--n* so they invert automatically
on ink (dark) surfaces that re-map those tokens.
============================================================ */
/* registration frame · a hairline rectangle, inset from the edge,
with an L-tick at each corner. Mark a positioned container with
.e-rule and drop four inside it, OR just
use the helper structure the deck injects. Decorative only. */
.e-rule{position:absolute;border:1px solid var(--hair);pointer-events:none;z-index:0}
.e-tk-mark{position:absolute;width:11px;height:11px;pointer-events:none;z-index:1}
.e-tk-mark::before,.e-tk-mark::after{content:"";position:absolute;background:var(--n4)}
.e-tk-mark::before{left:5px;top:0;width:1px;height:11px}
.e-tk-mark::after{top:5px;left:0;height:1px;width:11px}
.e-tk-mark.tl{top:-6px;left:-6px}
.e-tk-mark.tr{top:-6px;right:-6px}
.e-tk-mark.bl{bottom:-6px;left:-6px}
.e-tk-mark.br{bottom:-6px;right:-6px}
/* numbered section head · index · tracked title · right spec note,
sharing one baseline above a hairline rule. The brand's primary
way of opening a section ("02 · The Mark · Construction"). */
.e-sechead{display:flex;align-items:baseline;gap:18px;border-top:1px solid var(--hair);padding-top:16px}
.e-sechead .no{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--n4)}
.e-sechead .ti{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.e-sechead .rt{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--n5)}
/* figure callout · the small mono caption that labels a specimen,
a mockup, a diagram ("Fig.01 — the cut"). Carries dimensional,
spec-sheet authority wherever an image or device sits. */
.e-fig{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--n5)}
.e-fig b{color:var(--ink);font-weight:400}
/* dimension stamp · ratio / measure annotation ("1 : 1", "1920").
Always Martian Mono, always quiet. */
.e-dim{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--n5)}