/* ============================================================ Base — reset, typography, layout primitives, overlays, a11y ============================================================ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} /* the license dashboard is an app surface — no momentum/smooth scroll (anti-generic rule #12) */ html:has(.app-shell){scroll-behavior:auto} body{ background:var(--ink);color:var(--bone); font-family:var(--grotesk);font-weight:330;font-size:var(--fs-body);line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-optical-sizing:auto; /* let Fraunces' opsz axis follow size (P04) */ overflow-x:clip;min-height:100vh; /* clip (not hidden) so stays a non-scroll container — keeps position:sticky working (Safari/iOS) */ } /* tabular, lining figures so data never reflows — matrices, prices, keys, dates, dashboard rows (P05) */ .matrix,.price__amt,.band,.lic__key .val,.lic__row,.stat,.uichip,.lic__icon-stat{font-variant-numeric:tabular-nums lining-nums} ::selection{background:var(--accent);color:var(--ink)} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} button{font-family:inherit;color:inherit;cursor:pointer;background:none;border:none} :focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px;border-radius:2px} /* --- text helpers --- */ .mono{font-family:var(--mono);font-weight:400} .serif{font-family:var(--serif)} /* TYPE RULE (P06): Space Mono is reserved for genuinely TECHNICAL strings only — .ARW/Log profiles, timecodes, license-key IDs, version stamps, px/ms specs, the .seclabel .num counter. Human/editorial labels (eyebrows, before/after tags, feature tags, captions) use small Fraunces italic. */ .eyebrow{font-family:var(--serif);font-style:italic;font-weight:380;font-size:16px;letter-spacing:.005em; text-transform:none;color:var(--bone-dim)} .eyebrow--mono{font-family:var(--mono);font-style:normal;font-size:var(--fs-eyebrow);letter-spacing:.26em; text-transform:uppercase;color:var(--accent-quiet)} .lead{font-size:var(--fs-lead);color:var(--bone-dim);line-height:1.7} .accent{color:var(--accent-lit)} /* --- layout primitives --- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .section{position:relative;padding-block:var(--s-6)} .section--flush{padding-top:0} .stack>*+*{margin-top:var(--s-3)} /* section label: number · title · rule */ .seclabel{display:flex;align-items:center;gap:16px;margin-bottom:var(--s-4)} .seclabel .num{font-family:var(--mono);font-size:12px;color:var(--accent-quiet);white-space:nowrap} /* editorial section label (P06: mono is for technical strings only; prose labels are small Fraunces italic) */ .seclabel .lab{font-family:var(--serif);font-style:italic;font-weight:380;font-size:15px;color:var(--bone-dim);white-space:nowrap} .seclabel .ti{font-family:var(--serif);font-size:var(--fs-h2);font-weight:400;color:var(--bone);letter-spacing:-.015em;line-height:1.04} .seclabel .rule{flex:1;height:var(--hair);background:linear-gradient(90deg,var(--line-strong),transparent); box-shadow:0 -1px 0 rgba(8,5,3,.6)} /* engraved: a dark edge above the line so it reads incised (P07) */ @media(max-width:640px){.seclabel{flex-wrap:wrap;gap:10px}.seclabel .rule{order:3;flex-basis:100%}} /* --- film grain + vignette (fixed overlays) --- */ .grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:9000; opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 7s steps(6) infinite} @keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}} .vignette{position:fixed;inset:0;pointer-events:none;z-index:8000; background:radial-gradient(120% 90% at 50% 16%,transparent 46%,var(--shade) 100%)} /* --- reveal-on-scroll (only active once JS adds .js) --- */ .js [data-reveal]{opacity:0;transform:translateY(26px); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)} .js [data-reveal].in{opacity:1;transform:none} .js [data-reveal-d="1"]{transition-delay:.08s} .js [data-reveal-d="2"]{transition-delay:.16s} .js [data-reveal-d="3"]{transition-delay:.24s} .js [data-reveal-d="4"]{transition-delay:.32s} /* --- accessibility --- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--accent);color:var(--ink); padding:10px 16px;border-radius:var(--radius);font-weight:500;transition:top .3s var(--ease)} .skip-link:focus{top:12px} /* --- motion toggle --- */ .motion-toggle{position:fixed;right:16px;bottom:16px;z-index:9500; font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--bone-dim);background:rgba(20,15,10,.72);backdrop-filter:blur(8px); border:var(--hair) solid var(--line);padding:8px 12px;border-radius:var(--radius); display:flex;align-items:center;gap:8px;transition:color .3s,border-color .3s} .motion-toggle:hover{color:var(--bone);border-color:var(--line-strong)} .motion-toggle .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)} [data-motion="off"] .motion-toggle .dot{background:var(--hairline)} /* respect OS reduced-motion AND the in-page toggle */ @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .js [data-reveal]{opacity:1!important;transform:none!important} } [data-motion="off"] *{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important} [data-motion="off"] [data-reveal]{opacity:1!important;transform:none!important}