/* Punchlist — spec sheet, not a landing page. Near-black on off-white. One accent. Hard 1px rules. Monospace for every number, date, source and status token. No gradients, no shadows, no glass, no rounded corners. Carried forward from check.html. */ :root{ --bg:#FBFAF8; --panel:#FFF; --ink:#16181A; --muted:#5A6068; --rule:#D8D5CF; --rule2:#EBE8E2; --strong:#16181A; /* AMBER SYSTEM — --accent is a FILL ONLY. Never use it as text or as a line: it is 2.06:1 on --bg and fails WCAG AA and the 3:1 UI minimum. Pair it with --ink (8.29:1, AAA). For accent-coloured TEXT, rules, focus rings and borders, use --accent-ink (6.22:1, AA). */ --accent:#F59E0B; --accent-ink:#855300; --accent-d:#D97706; --accent-rule:#E8B45C; --wash:#FEF6E7; --ok:#2F6B34; --okbg:#EEF6EE; --okrule:#C8E0C9; --dead:#9E0000; --deadbg:#FDF0F0; --deadrule:#E8C4C4; --warn:#7A5A00; --warnbg:#FBF6E7; --warnrule:#E5D9AE; --info:#1F4E79; --infobg:#EDF3F9; --inforule:#C3D6E6; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} img,svg{max-width:100%} a{color:var(--accent-ink)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{ outline:3px solid var(--accent-ink);outline-offset:2px} h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;margin:0;font-weight:700} h1{font-size:clamp(28px,6vw,44px)} h2{font-size:clamp(22px,4vw,30px)} h3{font-size:19px} p{margin:0 0 14px} .wrap{max-width:880px;margin:0 auto;padding:0 20px} .wrap-wide{max-width:1120px;margin:0 auto;padding:0 20px} .mono{font-family:var(--mono)} .muted{color:var(--muted)} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;z-index:99;background:var(--ink);color:#fff;padding:10px 14px} /* ---------- masthead ---------- */ .masthead{border-bottom:1px solid var(--rule);background:var(--panel);position:relative;z-index:20} .masthead .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:13px 20px;flex-wrap:wrap} .brand{font-weight:700;font-size:18px;display:flex;align-items:center;gap:9px; text-decoration:none;color:var(--ink)} .brand .tick{width:11px;height:11px;background:var(--accent);flex:none} .brand small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);letter-spacing:0} .masthead nav{display:flex;flex-wrap:wrap;gap:2px} .masthead nav a{font-family:var(--mono);font-size:12.5px;color:var(--muted); /* 24px minimum tap target (WCAG 2.2 AA, 2.5.8). These rendered at 19px tall — a miss under a thumb, on the most-tapped control on the site. */ text-decoration:none;padding:8px;min-height:24px;display:inline-flex;align-items:center} .masthead nav a:hover,.masthead nav a[aria-current]{color:var(--ink)} .masthead nav a[aria-current]{border-bottom:2px solid var(--accent-ink)} /* ---------- hero ---------- */ .hero{padding:52px 0 40px;border-bottom:1px solid var(--rule)} .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase; color:var(--accent-ink);font-weight:700;margin-bottom:14px} .lede{font-size:clamp(16.5px,2.2vw,19px);color:var(--muted);margin:18px 0 0;max-width:60ch} .lede strong{color:var(--ink)} .ctarow{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .btn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent); color:var(--ink);text-decoration:none;font-weight:600;font-size:16.5px;padding:14px 24px; /* Border is --accent-d, not --accent: an amber edge on the off-white page is 2.06:1 and fails the 3:1 UI-component minimum, so the button would have no discernible boundary. --accent-d is 3.05:1 and stays visually amber. */ border:1px solid var(--accent-d);min-height:48px;font-family:inherit;cursor:pointer} .btn:hover{background:var(--accent-d);border-color:var(--accent-d)} .btn.sec{background:transparent;color:var(--ink);border-color:var(--strong)} /* Solid near-black button — the mockup's Contractor Login treatment. 17.80:1 */ .btn.dark{background:var(--strong);color:#fff;border-color:var(--strong)} .btn.dark:hover{background:#000;border-color:#000} .btn.sec:hover{background:var(--ink);color:#fff} .btn:disabled{background:var(--rule);border-color:var(--rule);color:#8A8F95;cursor:not-allowed} /* ---------- sections ---------- */ /* T-151. The legacy pages stack
s and use the 1px rule to separate them, and that is still right. The design pages do not: their partial lays out its own sections inside `.dc-page` with their own spacing, and this rule leaked a hairline across the bottom of each one, with the section's children flush against it and no inset — two cramped-padding findings on the homepage. The guard is wrapped in `:where()` and that is the whole point of it. T-152 found that the first shipped form, `:not(.dc-page) > section`, was not the selector it looked like: `:not()` takes the specificity of its ARGUMENT, so the rule went from (0,0,1) to (0,1,1) and started beating three class rules it had always lost to — `.hero` (line ~60), `.pb0` and `.tier` (below). The founder approved this change on the premise that its only effect was removing a leaked hairline from six design pages; at (0,1,1) it also moved 404.html's hero padding, re-drew the hairline `.pb0` deliberately suppresses on the change-log filter bar, and re-padded four `.tier` blocks. `:where()` contributes ZERO specificity, so the rule keeps its original (0,0,1) weight and every class rule wins again. Do not unwrap it. The two alternatives that were considered and rejected: · `main > section` drops the rule from every legacy
that is not a child of
— 404.html's hero among them. (An earlier version of this comment named arizona, california, hub, nevada and oregon here. That was wrong and T-152 caught it: those five pages carry their own inline