/* Cabineteer website — derived component styles on top of the source tokens (css/tokens.css). Fonts are the packaged OFL files; spacing 4/8/16/24/32/48/80; controls 4px radius, panels 0. */ @font-face{font-family:"Manrope";src:url("../fonts/Manrope-Variable.ttf") format("truetype");font-weight:200 800;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");font-weight:400;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");font-weight:500;font-display:swap} *{box-sizing:border-box} html{background:var(--c-paper);color:var(--c-ink)} body{margin:0;font:var(--c-type-body-weight) var(--c-type-body-size)/var(--c-type-body-line) var(--c-type-body-family),system-ui,sans-serif} a{color:var(--c-ink)} :focus-visible{outline:3px solid var(--c-ink);outline-offset:3px} .wrap{max-width:1328px;margin:0 auto;padding:0 56px} @media(max-width:720px){.wrap{padding:0 20px}} .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} /* header */ .site-header{background:var(--c-surface);border-bottom:1px solid var(--c-dividerDecorative)} /* two-row desktop header (T-Q35, QA-02). The old single row never fit: logo, seven links and the CTA needed more than the capped 1216px content area (1328 - 2x56), so the nav wrapped at every width (evidence/M1b/T-Q30-header-nav-wrap-defect.png). Row 1 is the logo and the CTA; row 2 is the nav, forced onto its own line by flex-basis:100%. Markup order is logo, toggle, cta, nav on all 13 pages, so the DOM order matches the visual order and no CSS `order` is used. The seven links need 973px on one line (829px measured + 6 x 24px gaps); the content area is the viewport minus 112px, which first clears that at 1091px. Below that, the mobile disclosure covers it. Vivek chose the two-row header; extending the breakpoint instead of squeezing the spacing was the lead's instruction. */ .site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding-top:16px;padding-bottom:16px} .site-header .logo img{height:40px;width:auto;display:block} .nav-toggle{display:none} .site-header .cta{background:var(--c-ink);color:#fff;padding:12px 20px;border-radius:var(--c-radius);border:0;min-height:48px;display:inline-flex;align-items:center;text-decoration:none;font:var(--c-type-button-weight) var(--c-type-button-size)/var(--c-type-button-line) var(--c-type-button-family);margin-left:auto} .site-header .cta:hover{background:var(--c-action-hover)} .nav{display:flex;gap:24px;flex-wrap:wrap;flex-basis:100%} .nav a{text-decoration:none;font-weight:600;font-size:16px;padding:8px 0;border-bottom:2px solid transparent} .nav a[aria-current=page]{border-bottom-color:var(--c-ink)} /* mobile header (QA-02, extended by T-Q35): below 1090px the desktop row above does not fit (see the note above `.site-header .wrap`), so this threshold now covers both the original small-phone range and the in-between laptop/tablet range where 8 items never fit the header's capped width. Row 1 is logo+toggle; the CTA becomes its own full-width row (still always visible, not gated by the toggle); the nav stays a disclosure driven by js/nav.js, pushed into normal flow rather than an overlay, so it needs no focus trap and never causes horizontal overflow. Closed nav still has zero focusable targets (T-Q04): the CTA sits outside