/* ============================================================ beindie — "paper arcade" public design system Editorial print layout, pixel accents used sparingly. Light default; dark via . ============================================================ */ /* ---------- 1. Tokens ---------- */ :root{ /* logo palette — fixed, never themed */ --red:#ff2d2d; --orange:#ff8a00; --yellow:#ffd400; --green:#3ddc3d; --blue:#00b2ff; /* light theme surface + ink */ --paper:#f4f1ea; --paper-2:#fbf9f4; --paper-3:#ffffff; --ink:#141414; --ink-soft:#3a3630; --muted:#6b6558; --line:#d9d4c7; --line-strong:#bdb6a5; --shade:rgba(20,20,20,.05); /* the one interface accent */ --ui:var(--yellow); --on-ui:#141414; /* per-item accent (overridden by .accent-*) */ --accent:var(--yellow); --on-accent:#141414; /* type */ --display:"Space Grotesk","Archivo Black","Arial Black",system-ui,sans-serif; --body:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif; --pixel:"Press Start 2P","Courier New",monospace; /* rhythm */ --wrap:1240px; --gutter:clamp(20px,4.5vw,48px); --section:clamp(72px,10vw,140px); } /* Dark is neutral black, not a warm grey: the paper tint stays in the ink only. (The first warm-grey dark theme read as brown on real screens.) */ :root[data-theme="dark"]{ --paper:#080808; --paper-2:#101010; --paper-3:#171717; --ink:#f1ede4; --ink-soft:#d4d2cd; --muted:#8e8c88; --line:#262626; --line-strong:#3d3d3d; --shade:rgba(241,237,228,.06); } /* per-item accents */ .accent-red{--accent:var(--red);--on-accent:#141414} .accent-orange{--accent:var(--orange);--on-accent:#141414} .accent-yellow{--accent:var(--yellow);--on-accent:#141414} .accent-green{--accent:var(--green);--on-accent:#141414} .accent-blue{--accent:var(--blue);--on-accent:#141414} /* ---------- 2. Reset & base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{max-width:100%;display:block} img{height:auto} h1,h2,h3,h4,h5{ font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1.02; margin:0; text-wrap:balance; } p{margin:0} a{color:inherit} ul,ol{margin:0} hr{border:0;border-top:1px solid var(--line);margin:0} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--yellow);color:#141414} :focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; } .btn-primary:focus-visible,.pitch-band :focus-visible{outline-color:var(--ink)} /* ---------- 3. Layout primitives ---------- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .wrap-narrow{max-width:860px} main{display:block} .section{padding-block:var(--section)} .section--tight{padding-block:clamp(48px,6vw,80px)} .g12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,40px)} .stack{display:grid;gap:14px} .rule{border:0;border-top:1px solid var(--line);margin:0} .rule--strong{border-top-color:var(--line-strong)} .hide{display:none!important} .skip-link{ position:absolute;left:12px;top:-60px;z-index:200; background:var(--yellow);color:#141414; border:2px solid #141414;padding:10px 16px; font-weight:600;text-decoration:none; transition:top .15s ease; } .skip-link:focus{top:12px} .vh{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* ---------- 4. Type utilities ---------- */ .eyebrow{ font-family:var(--pixel); font-size:10px; line-height:1.8; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:inline-flex;align-items:center;gap:10px; margin:0; } .eyebrow .idx{color:var(--ink)} .eyebrow::before{ content:"";width:9px;height:9px;flex:none; background:var(--accent);border:1px solid var(--ink); } .eyebrow--bare::before{display:none} .display-xl{font-size:clamp(2.9rem,7.2vw,5.1rem);line-height:.94;letter-spacing:-.04em} .display-l{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:.98;letter-spacing:-.035em} .display-m{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.04} .display-s{font-size:1.3rem;line-height:1.15;letter-spacing:-.02em} .lead{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.5;color:var(--ink-soft);max-width:46ch} .dek{color:var(--muted);max-width:52ch;font-size:1.02rem} .muted{color:var(--muted)} .meta{font-size:13px;letter-spacing:.02em;color:var(--muted)} .micro{ font-family:var(--pixel);font-size:10px;line-height:1.8; letter-spacing:.06em;text-transform:uppercase;color:var(--muted); } .link{ color:inherit;text-decoration:none; background-image:linear-gradient(var(--yellow),var(--yellow)); background-repeat:no-repeat;background-position:0 100%; background-size:100% 2px; padding-bottom:1px; transition:background-size .18s ease; } .link:hover{background-size:100% 42%} /* .link on a