/* CAMPUX design system, shared by every page. Loaded first (tokens, primitives); scripts/inject-system.mjs appends the late overrides at the end of so they win over each page's own CSS. Reference implementation: index.html. Rules: docs/DESIGN-TASKS.md */ :root{ --paper:#F4F1EA; --paper-2:#EBE7DE; --paper-3:#FAF8F3; --surface:#EBE7DE; --ink:#141210; --ink-2:#5B564D; --ink-3:#6B655B; --rule:#DDD8CC; --rule-hair:#E6E2D8; --hair:#DDD8CC; --pen:#C4360E; --serif:'Fraunces',Georgia,serif; --sans:'Inter Tight',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace; --gutter:clamp(24px,5.5vw,120px); --rail:clamp(160px,17vw,280px); --measure:68ch; --gap:clamp(64px,8vw,140px); --r:12px; --r-s:6px; } /* primitives any page may use */ .cx-label{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3)} .cx-stand{font-family:var(--sans);font-size:clamp(19px,1.5vw,23px);line-height:1.45;color:var(--ink-2);letter-spacing:-.01em;max-width:56ch} .cx-num{font-family:var(--serif);font-weight:300;font-variation-settings:'opsz' 144;letter-spacing:-.02em} .cx-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15px;font-weight:500;text-decoration:none;padding:14px 24px;border-radius:var(--r-s);background:var(--ink);color:var(--paper);border:1px solid var(--ink);cursor:pointer} .cx-btn.ghost{background:transparent;color:var(--ink)} .cx-btn.ghost:hover{background:var(--surface)} .cx-card{background:var(--surface);border-radius:var(--r);padding:26px 28px} .cx-hair{border:0;border-top:1px solid var(--hair);margin:0} .cx-sheet{padding-left:var(--gutter);padding-right:var(--gutter)} /* skip links: hidden until focused, on every page */ .skip-to-main,.sr-skip{position:absolute!important;left:-9999px!important;top:0!important;z-index:9999;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:14px;font-weight:500;padding:10px 16px;text-decoration:none;border-radius:var(--r-s)} .skip-to-main:focus,.sr-skip:focus{left:8px!important;top:8px!important} :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}