/* ───────────────────────────────────────────────────────────── ‘Affan Najiy — portfolio Berkshire base (text-first, no decoration) + McMaster grid (dense tables). Palette carried over from tyunnie-pa: orange / black / warm white. Light mode only, on purpose. `color-scheme: light` below stops browsers auto-inverting form controls and scrollbars on a dark OS. Orange is a SIGNAL, not decoration. It appears only on: link underlines and hover, section index numbers, the table-header rule, nav hover, row hover fill, and focus rings. Never as a large fill, never as a gradient, never as a shadow. ───────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* Surfaces */ --bg: #faf8f5; /* page — warm cream */ --surface: #ffffff; /* tables sit above the page */ --surface-2: #f3f0ea; /* zebra stripe */ --border: #e8e2d8; /* hairline rules */ --rule: #111010; /* structural rules — header, footer, masthead */ /* Ink */ --fg: #111010; /* headings */ --text: #2d2416; /* body copy — 14.4:1 */ --muted: #75695a; /* hints, footer, nav, label column — 5.05:1 */ /* Accent. --accent is the brand orange, used for RULES, BORDERS, UNDERLINES and FOCUS RINGS only. At 2.64:1 on cream it is not a legible text colour, so anything that renders orange *words* uses --accent-text (4.96:1). */ --accent: #f97316; --accent-text: #b8490c; --accent-soft: #fff0e6; --accent-mid: #fed7aa; --accent-rgb: 249, 115, 22; /* One family, screen and paper. Arial on Windows, Helvetica on macOS, Liberation Sans (metrically identical to Arial) on Linux — all installed by default, so rule 1.3 holds: nothing is downloaded. Calibri, Aptos and Garamond are deliberately absent; they ship with Microsoft Office or not at all, so on a Mac or a Linux box they would silently fall back to something unchosen. The former serif/mono split is gone by decision: resume convention wants one or two families, and this is the family a hiring reader and an ATS parser both expect. Hierarchy is now carried by weight, size, letter spacing and case instead of by typeface. */ --sans: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif; --maxw: 1000px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; } /* Screen-reader-only: present to assistive tech, absent visually. */ .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; } /* ── No JavaScript ──────────────────────────────────────── `.no-js` sits on from the first byte and is removed by the first line of script.js. Anything marked `.js-only` is a control that cannot do its job without that file — a filter box that cannot filter, a sort header that cannot sort, an export button that opens nothing. Showing a dead control is worse than showing none: it invites a click and then says nothing about why nothing happened (Nielsen §1.5, §1.1). The