/* ===================================================================== Quadrant · shared design system Extracted verbatim from the home page so every page renders identically. Previously each page carried its own copy of these rules, which is why layouts drifted apart. Single source of truth now. ===================================================================== */ :root{ --paper:#f3eee2; --paper-deep:#ebe3d2; --ink:#211f1a; --ink-soft:#5b564b; --line:#d8cfba; --d:#bb4430; --i:#d99a2b; --s:#4f7a6b; --c:#3a5a8c; /* Deepened DISC hues for TEXT on paper only. Raw --i measures 2.11:1 on #f3eee2 (WCAG needs 3:1 even at large-text size) - unusable as text, fine as a fill. Raw --s is 4.19:1 (fails AA 4.5:1 at normal text size) and raw --d is 4.55:1 (passes by a razor). Same values as brand/quadrant-ui.css's --q-disc-*-text, so the two systems agree on what each hue means as text. how-you-lead.html deliberately loads no shared CSS and carries its own local copies of all three - a change here must be copied there. Fills/borders keep using the raw hues. */ --d-text:#a63a28; --i-text:#8a5e0f; --s-text:#3f6356; /* The error/danger role (split off brand red 18 Aug 2026), same value as brand/quadrant-ui.css's --q-critical. Standalone pages that load no shared CSS carry hand-mirrors of it: apply, candidates, login, pool, reps-admin, my. */ --q-critical:#9c2f1e; /* --------------------------------------------------------------- OPTION C - the dark face (Rod's pick, 12 Aug 2026). A black box casting a black shadow is one shape, not two: at rest they merge, and on hover the revealed strip is the same value as the thing revealing it, so the lift is genuinely invisible. On a red button the identical mechanism reads instantly, because red against ink is an edge. The fix removes the sameness rather than adding a device. A CLICKABLE dark surface is a warm charcoal; the SHADOW stays true ink and therefore stays the darkest value on the page, so the dark border Rod liked is still a dark border - the box just steps up to meet it. Hover then has somewhere to go, which true ink did not. Dark BANDS and other non-clickable dark ground keep --ink: they are the floor, not an object, and the contrast between the floor and a face standing on it is the point. --------------------------------------------------------------- */ --face:#33302a; --face-hover:#43403a; /* --------------------------------------------------------------- THE BUTTON LIFT. One place to change it for the whole site. box-shadow travels WITH the element, so translating a button without growing its shadow slides button and shadow together and nothing appears to happen. That is why the buttons read as static. To get what was asked for - the button lifts, the shadow box stays put, and the dark gap underneath gets bigger - the shadow offset has to GROW by exactly the number of pixels the button moves. rest translate(0,0) shadow 4px hover translate(-3,-3) shadow 7px <- shadow's screen position unchanged, revealed gap +3px active translate(1,1) shadow 2px --q-shadow is redeclared on individual buttons that carry a smaller resting shadow (see .btn.sm); everything else derives. --------------------------------------------------------------- */ --q-lift:3px; --q-shadow:4px; --q-press:1px; } /* The hover and press offsets are derived with calc() written INSIDE the button rules, not stored in another :root variable. A custom property declared on :root computes its calc() against :root's own values and then inherits that frozen result, so a button redeclaring --q-shadow locally would keep the root-derived hover offset and the shadow would stop lining up. Resolving the calc at the button is what lets .btn.sm change one number and stay correct. */ *{box-sizing:border-box} html,body{margin:0;padding:0;scroll-behavior:smooth} body{background:var(--paper);color:var(--ink); font-family:'Hanken Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased} .display{font-family:'Bricolage Grotesque','Hanken Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.02} .mono{font-family:'Spline Sans Mono','Courier New',monospace;text-transform:uppercase;letter-spacing:.16em;font-weight:600} a{color:inherit} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:2px solid var(--ink)} .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1080px;margin:0 auto} .brand{display:flex;align-items:center;gap:12px;text-decoration:none} .brandmark{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;width:28px;height:28px} .brandmark span{border-radius:0} .brandname{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em} .navlinks{display:flex;align-items:center;gap:22px} /* touch-action and user-select ride along because all:unset strips the browser's own button behaviour on touchscreens: without them a long press selects the label text instead of clicking, and a quick second tap can fire double-tap zoom instead of a click. */ .btn{all:unset;touch-action:manipulation;-webkit-user-select:none;user-select:none;cursor:pointer;display:inline-block;font-weight:700;font-size:15px;text-align:center; padding:13px 22px;background:var(--face);color:var(--paper);border:2px solid var(--face); box-shadow:var(--q-shadow) var(--q-shadow) 0 var(--ink); transition:transform .08s,box-shadow .08s,background-color .08s,border-color .08s} .btn:hover{transform:translate(calc(-1 * var(--q-lift)),calc(-1 * var(--q-lift))); box-shadow:calc(var(--q-shadow) + var(--q-lift)) calc(var(--q-shadow) + var(--q-lift)) 0 var(--ink)} .btn:active{transform:translate(var(--q-press),var(--q-press)); box-shadow:calc(var(--q-shadow) - 2px) calc(var(--q-shadow) - 2px) 0 var(--ink)} /* Keyboard parity: a tabbed button gets the hover lift AND a ring, so it is never less obvious than the moused state. THE RING IS AMBER, NOT INK, AND THAT IS THE WHOLE POINT. An outline paints AFTER the element's own box-shadow, and the focus state carries the hover lift - so an ink ring at offset 3px lands inside the 7px ink shadow and disappears along the right and bottom edges. Half a ring is worse than none, because it reads as a rendering fault. Amber is a brand colour and reads against the paper, the ink shadow and all three fills. all:unset above wipes the UA outline, so this puts one back. */ .btn:focus-visible{transform:translate(calc(-1 * var(--q-lift)),calc(-1 * var(--q-lift))); box-shadow:calc(var(--q-shadow) + var(--q-lift)) calc(var(--q-shadow) + var(--q-lift)) 0 var(--ink); outline:3px solid var(--i);outline-offset:3px} /* BOLDEN THE BACKGROUND ON HOVER. Deeper shades picked by hand off the brand hexes and written as literals. Not filter:brightness() - that is applied in the device colour space and lands on a different colour per browser, and these have to match the flat fills elsewhere on the page. dark face #33302a -> #43403a (solid button, dark card) red #bb4430 -> #9a3626 (.cta) cream #f3eee2 -> #ebe3d2 (.ghost fills to paper-deep, = --paper-deep) Text colour is never touched, so contrast only ever improves. */ .btn:hover,.btn:focus-visible{background:var(--face-hover);border-color:var(--face-hover)} .btn.cta{background:var(--d);border-color:var(--d)} .btn.cta:hover,.btn.cta:focus-visible{background:#9a3626;border-color:#9a3626} .btn.ghost{background:var(--paper);color:var(--ink)} .btn.ghost:hover,.btn.ghost:focus-visible{background:var(--paper-deep);border-color:var(--ink);color:var(--ink)} /* .sm keeps its smaller resting shadow; redeclaring the token is all it takes, because every state below derives from it at this element. */ .btn.sm{--q-shadow:3px;padding:10px 16px;font-size:13px} /* Disabled must not lift and must not look pressable: no shadow to lift off, no lift, no pointer. Wins over the state rules above on specificity, so :hover/:active/:focus-visible cannot re-raise it. */ .btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.45;box-shadow:none;transform:none} .btn[disabled]:hover,.btn[disabled]:active,.btn[disabled]:focus-visible, .btn[aria-disabled="true"]:hover,.btn[aria-disabled="true"]:active,.btn[aria-disabled="true"]:focus-visible{ transform:none;box-shadow:none;background:var(--ink);border-color:var(--ink)} .btn.cta[disabled]:hover,.btn.cta[disabled]:active,.btn.cta[disabled]:focus-visible{background:var(--d);border-color:var(--d)} .btn.ghost[disabled]:hover,.btn.ghost[disabled]:active,.btn.ghost[disabled]:focus-visible{background:var(--paper);border-color:var(--ink)} .hero{display:grid;grid-template-columns:1fr;gap:40px;padding:64px 0 56px;align-items:center} .eyebrow{font-size:12px;color:var(--ink-soft);margin-bottom:20px} h1.title{font-size:clamp(42px,7vw,78px);margin:0 0 22px} .u{position:relative;white-space:nowrap} .u:after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.22em;background:var(--i);z-index:-1;opacity:.85} .lede{font-size:19px;color:var(--ink-soft);margin:0 0 28px} .heroCtas{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .meta{font-size:13px;color:var(--ink-soft)} .quadcards{display:grid;grid-template-columns:1fr 1fr;gap:16px} .qcard{border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);padding:20px} .qletter{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:40px;line-height:1} .qcard h3{margin:10px 0 4px;font-size:18px} .qcard p{margin:0;color:var(--ink-soft);font-size:14px} section{padding:56px 0;border-top:2px solid var(--line)} .sectlabel{font-size:12px;color:var(--ink-soft);margin-bottom:14px} h2{font-size:clamp(30px,4.5vw,46px);margin:0 0 30px} .pains{display:grid;grid-template-columns:1fr;gap:22px} .pain{border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);padding:24px} .pain .k{font-family:'Spline Sans Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.14em} .pain h3{margin:10px 0 8px;font-size:20px} .pain p{margin:0;color:var(--ink-soft);font-size:15px} .steps{display:grid;grid-template-columns:1fr;gap:22px} .step{border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);padding:24px} .step .n{font-family:'Spline Sans Mono',monospace;font-weight:700;font-size:14px;color:var(--ink-soft)} .step h3{margin:10px 0 8px;font-size:20px} .step p{margin:0;color:var(--ink-soft);font-size:15px} .magnets{display:grid;grid-template-columns:1fr;gap:22px} .magnet{border:2px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink);padding:28px} .magnet h3{margin:8px 0 10px;font-size:24px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em} .magnet p{margin:0 0 18px;color:var(--ink-soft);font-size:15px} .job{border-left:4px solid var(--ink);padding:4px 0 4px 20px;margin-bottom:22px} .job .k{font-family:'Spline Sans Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)} .job h3{margin:8px 0 8px;font-size:22px} .job p{margin:0;color:var(--ink-soft);font-size:15px} .subbox{border:2px solid var(--ink);background:var(--paper-deep);box-shadow:8px 8px 0 var(--ink);padding:30px} /* outline:none used to sit at the end of this rule. It has been removed: at (0,2,1) it beat the site-wide field-focus rule further down this file, so the newsletter boxes would have been the only fillable fields on the site with no focus ring. The border and padding are unchanged. */ .subbox input[type=text],.subbox input[type=email]{width:100%;border:2px solid var(--line);background:var(--paper);padding:13px 15px;font-size:15px;font-family:inherit;color:var(--ink)} .subbox input:focus{border-color:var(--ink)} /* Keyboard focus for those two boxes (WCAG 2.0 AA, SC 2.4.7 Focus Visible). This rule predates the site-wide field-focus rule at the bottom of the file and is now covered by it, with the same values. It is kept deliberately: at (0,3,1) it is the strongest field-focus selector in the file, so a page that ships its own .subbox input override still cannot leave the newsletter box without a ring. The resting state is untouched either way. */ .subbox input[type=text]:focus-visible,.subbox input[type=email]:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .final{text-align:center;padding:80px 0} .final h2{margin:0 auto 26px} footer{border-top:2px solid var(--ink);padding:34px 0} .foot{display:grid;grid-template-columns:1fr;gap:18px;align-items:start} .foot p{margin:0;color:var(--ink-soft);font-size:13px;max-width:52ch} @media(min-width:760px){ .hero{grid-template-columns:1.1fr .9fr} .pains,.steps{grid-template-columns:repeat(3,1fr)} .magnets{grid-template-columns:1fr 1fr} .foot{grid-template-columns:1fr 1fr} .subgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} } .qsplit{display:grid;grid-template-columns:1fr 1fr;gap:20px} .qcard{border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);background:var(--paper);padding:26px} .qcard.dark{background:var(--ink);color:var(--paper)} .qbtn{display:inline-block;background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:11px 20px;font-weight:800;text-decoration:none;box-shadow:3px 3px 0 var(--ink)} .qbtn.gold{background:var(--i);color:var(--ink);border-color:var(--i);box-shadow:3px 3px 0 rgba(0,0,0,.35)} .qsec{display:inline-block;margin-left:14px;font-weight:700;color:var(--ink-soft);text-decoration:none;font-size:13.5px} .qcard.dark .qsec{color:#cfc8ba} .qeyebrow{font-family:'Spline Sans Mono','Courier New',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase} @media(max-width:720px){.qsplit{grid-template-columns:1fr}} /* --------------------------------------------------------------- Unified nav — six items across every page. The original bar was spaced for four, so links wrapped and crowded the wordmark. This tightens tracking and pins the links to the right without changing the typeface, colours or the button. --------------------------------------------------------------- */ .nav{align-items:center;gap:18px} .navlinks{margin-left:auto;align-items:center;gap:18px;flex-wrap:nowrap} .navlinks a{white-space:nowrap;font-size:13px;letter-spacing:.12em} .navlinks a.btn{letter-spacing:.04em} @media(max-width:1180px){.navlinks{gap:13px}.navlinks a{font-size:12px;letter-spacing:.08em}} /* --------------------------------------------------------------- Employers-page rules — ALL scoped under .p-employers. Learned the hard way: comparing exact selector strings missed descendant overlaps like `.hero h1`, which silently beat the home page's `h1.title` clamp and shrank the display heading. Scoping the whole block removes that class of bug entirely. --------------------------------------------------------------- */ .p-employers nav a {color:var(--ink-soft);text-decoration:none;font-weight:700;font-size:13.5px;margin-left:18px} .p-employers nav a.on {color:var(--ink)} .p-employers .hero h1 {font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:46px;line-height:1.03;letter-spacing:-.025em;margin:0 auto 16px;max-width:20ch} .p-employers .hero p {font-size:19px;color:var(--ink-soft);margin:0 auto 26px;max-width:58ch} .p-employers .cta {display:inline-block;background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:14px 28px;font-weight:800;font-size:16px;text-decoration:none;box-shadow:5px 5px 0 var(--ink)} .p-employers .cta.alt {background:var(--paper);color:var(--ink);margin-left:12px} @media(max-width:640px){ .p-employers .hero h1 {font-size:32px} .p-employers .cta.alt {margin-left:0;margin-top:12px} } .p-employers .quad {max-width:820px;margin:36px auto 0;display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)} .p-employers .quad div {padding:22px 20px;border:1px solid var(--line)} .p-employers .quad .lab {font-family:'Spline Sans Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.06em;margin-bottom:4px} .p-employers .quad p {margin:0;font-size:13.5px;color:var(--ink-soft)} .p-employers .qd {border-top:4px solid var(--d)!important} .p-employers .qi {border-top:4px solid var(--i)!important} .p-employers .qs {border-top:4px solid var(--s)!important} .p-employers .qc {border-top:4px solid var(--c)!important} .p-employers .section {max-width:1000px;margin:0 auto;padding:56px 28px} .p-employers .section h2 {font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:32px;letter-spacing:-.02em;text-align:center;margin:0 0 8px} .p-employers .section .sub {text-align:center;color:var(--ink-soft);max-width:56ch;margin:0 auto 36px} @media(max-width:760px){ .p-employers .steps {grid-template-columns:1fr 1fr} } .p-employers .band {background:var(--ink);color:var(--paper)} .p-employers .band .section h2 {color:var(--paper)} .p-employers .feat {display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:8px} @media(max-width:760px){ .p-employers .feat {grid-template-columns:1fr} } .p-employers .feat .f {border:2px solid #4a463d;padding:20px} .p-employers .feat .f h3 {font-family:'Bricolage Grotesque',sans-serif;font-size:18px;margin:0 0 5px;color:var(--paper)} .p-employers .feat .f p {margin:0;color:#cfc8ba;font-size:13.5px} .p-employers .closing {text-align:center;padding:60px 28px} .p-employers .closing h2 {font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;margin:0 0 18px} .p-employers .hero {max-width:1000px;margin:0 auto;padding:56px 28px 30px;text-align:center} .p-employers .steps {display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .p-employers .step {border:2px solid var(--ink);background:var(--paper);padding:20px;box-shadow:5px 5px 0 var(--ink)} .p-employers .step .n {font-family:'Spline Sans Mono',monospace;font-weight:700;font-size:13px;color:var(--c);margin-bottom:8px} .p-employers .step h3 {font-family:'Bricolage Grotesque',sans-serif;font-size:18px;margin:0 0 5px} .p-employers .step p {margin:0;font-size:13.5px;color:var(--ink-soft)} /* Brandmark squares — colours moved here from per-page inline styles. The order is D, I, C, S and NOT the D-I-S-C you will reach for by reflex (Rod, 19 Aug 2026). The mark is a circumplex, not a list. Its axes are task/people left-to-right and fast-paced/measured top-to- bottom, so nth-child(3) is BOTTOM-LEFT and must be C, nth-child(4) is BOTTOM-RIGHT and must be S. That puts D diagonally opposite S and I diagonally opposite C, which is what the model says everywhere else: QUADRANT_COMBOS folds DS/IC/SD/CI into the primary letter because they are non-adjacent, PROFILE-NAMES.md sits them 6 apart on the wheel, and brand/quadrant-team-render.js has always plotted it this way. Alphabetical order here silently inverts both diagonals. */ .brandmark span:nth-child(1){background:var(--d,#bb4430)} .brandmark span:nth-child(2){background:var(--i,#d99a2b)} .brandmark span:nth-child(3){background:var(--c,#3a5a8c)} .brandmark span:nth-child(4){background:var(--s,#4f7a6b)} /* --------------------------------------------------------------- Design system pass: wayfinding, rhythm, closers. 1. Active nav state — the page you are on gets the gold underline. 2. One section rhythm for marketing pages. 3. Closing CTA band so pages end with a next step. 4. Site footer with real navigation. --------------------------------------------------------------- */ .navlinks a[aria-current="page"]{border-bottom:3px solid var(--i,#d99a2b);padding-bottom:2px} main.wrap>section{padding:52px 0 12px} .ctaband{background:var(--ink,#211f1a);padding:46px 20px;text-align:center;margin-top:56px} .ctaband h2{color:var(--paper,#f3eee2);font-size:26px;margin:0 auto 18px;max-width:none;text-align:center} .ctaband a.go{background:var(--i,#d99a2b);color:var(--ink,#211f1a);padding:12px 24px;font-weight:800;display:inline-block;text-decoration:none;font-size:15px} .sitefooter{border-top:2px solid var(--ink,#211f1a);background:var(--paper,#f3eee2);padding:38px 0 0} .sitefooter .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;max-width:1120px;margin:0 auto;padding:0 24px;font-size:13.5px} .sitefooter .colhead{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5b5647;margin:0 0 8px;font-weight:700} .sitefooter .cols a{display:block;color:var(--ink,#211f1a);text-decoration:none;line-height:2.1} .sitefooter .cols a:hover{text-decoration:underline;text-decoration-color:var(--i,#d99a2b);text-decoration-thickness:2px} .sitefooter .blurb{color:#5b5647;line-height:1.65} .sitefooter .fbrand{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:800;color:var(--ink,#211f1a)} .sitefooter .fine{max-width:1120px;margin:26px auto 0;padding:14px 24px 22px;border-top:1px solid var(--line,#d8cfba);font-size:12.5px;color:#5b5647;line-height:1.6} .sitefooter .fine a{color:inherit} /* --------------------------------------------------------------- Cookie consent bar — where its styles are, and why not here. The bar's own rules (.qc-bar, .qc-in, .qc-btn and the rest) are injected by brand/quadrant-consent.js and are deliberately NOT in this file. Only 13 of the 40 pages carrying the Google tag link this stylesheet, and a consent bar that looks right on a third of the site is worse than no bar at all. The script's copy uses var(--ink,#211f1a) style fallbacks, so it picks up the :root palette at the top of this file where this file is loaded, and falls back to the same hex where it is not. Do not add competing .qc-* rules here: there would be two sources for one component and they would drift. What this file has to respect: 1. Z-INDEX. The bar sits at 60. The sticky header above is at 40. Nothing in this file may claim 60 or higher without moving the bar first, or the visitor gets asked a question he cannot reach. 2. The script puts .qc-asking on while the question is on screen and takes it off when it is answered. Anything that needs to get out of the bar's way hangs off that class, so it stops applying the moment the bar is gone. 3. NAMESPACE. Everything the bar owns is prefixed .qc- with the hyphen. The existing .qcard, .qbtn, .qsplit, .qsec and .qeyebrow rules above do not collide with it, and new ones must not either. --------------------------------------------------------------- */ /* Header nav geometry is fixed site-wide; page-level .wrap rules must not distort it. */ header .wrap.nav{max-width:1080px!important;width:auto!important;margin:0 auto!important;padding:16px 24px!important;box-sizing:border-box} /* Legacy pages made
itself a flex row, shrinking the nav to fit-content. */ header:has(> .wrap.nav){display:block!important;padding:0!important;gap:0!important} /* --------------------------------------------------------------- Nav dropdowns (.navdd) — jump straight to a section instead of scrolling the whole page. Rules of the component: 1. The parent stays a real link. The caret button beside it is the only thing that toggles, so "For employers" still navigates. 2. Desktop opens on hover (CSS) or on focus/click (mobile-nav.js adds .open). Below 761px the menu is not a hover menu at all — mobile-nav.js restyles it into an indented sub-list inside the hamburger panel, and those rules live in that file next to the panel rules they have to beat. 3. z-index 50: above the page, below the cookie bar at 60. Read the cookie-consent note above before changing it. 4. No new design language — paper ground, 2px ink border, the same hard shadow every raised surface on this site uses, and the mono label face the nav links already use. --------------------------------------------------------------- */ .navdd{position:relative;display:inline-flex;align-items:center} /* The caret is absolutely positioned into the 18px gap that already sits between nav links, so a dropdown adds ZERO width to the bar. The bar is nowrap and already runs tight between 761px and ~830px; a caret that took layout width would push that overflow band wider. */ /* The arrow is drawn with borders, not typed: the ▾ glyph is not in the nav's mono face, so at 9px it fell back to a system font and read as a separator dot rather than a caret. Total box is 11px wide, which fits inside the 13px gap the nav tightens to below 1180px. */ .navdd-btn{all:unset;position:absolute;left:100%;top:50%;transform:translateY(-50%); cursor:pointer;font-size:0;line-height:0;padding:6px 2px} .navdd-btn::before{content:"";display:block;width:0;height:0; border-left:3.5px solid transparent;border-right:3.5px solid transparent; border-top:4px solid var(--ink-soft)} .navdd-btn:hover::before,.navdd.open .navdd-btn::before{border-top-color:var(--ink)} .navdd-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* 30px, not 16px: the header has its own padding below the link, so a 16px offset put the menu's top edge 14px INSIDE the bar and painted over the header's own bottom rule. The menu has to start below that line, not on it. If the header padding ever changes, this and the ::after bridge below move together. */ .navdd-menu{display:none;position:absolute;top:calc(100% + 30px);left:0; min-width:200px;max-width:calc(100vw - 32px);background:var(--paper); border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:6px 0;z-index:50} .navdd-menu a{display:block;white-space:nowrap;padding:9px 18px;text-decoration:none; font-family:'Spline Sans Mono','Courier New',monospace;text-transform:uppercase; font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--ink)} .navdd-menu a:hover,.navdd-menu a:focus-visible{background:var(--paper-deep);outline:none} @media(min-width:761px){ .navdd:hover .navdd-menu,.navdd.open .navdd-menu{display:block} /* Bridges the 30px gap between the link and the menu so the pointer can travel down without the hover dropping out. Sits inside the header over empty space; nothing under it is clickable. */ .navdd::after{content:"";position:absolute;left:0;top:100%;width:100%;height:32px} } /* Anchored jumps clear the sticky header (~72px) instead of landing under it. Scroll position only — nothing moves on the page. */ section[id],h2[id]{scroll-margin-top:88px} /* ===================================================================== SITE-WIDE INTERACTION STANDARD Three rules, no exceptions. They live at the bottom of the file on purpose: this stylesheet is linked after every page's own