/* ========================================================================== THE SITE HEADER — settled LIVE on every page since 2026-09-09 Applied from /doctor/firstscreen-fsx2-v1.html (study 1, "Measure") — the header half of it. This file is linked by all six pages, so the bar is one component with one behaviour everywhere: index, google-ads, about-us, our-management, legal-documents and contact-us. NO MARKUP CHANGES. Not one element added, removed, renamed or reordered. The Menu button is still in every page's HTML and still wired to its panel; it is switched off by CSS above 901px, which is reversible in one line. WHAT THE AUDIT FOUND, measured at 1440x900 before this file existed: · four different left edges inside a 101px bar — wordmark 51.8, nav 414.2, section row 441.8, first work card 51.8. The section row is meant to sit under the current page tab and landed 27.6px right of it. · a 257px hole on the right, held open by a Menu button repeating the six links already beside it. .nav carried a margin-right of 115px at 1440 and 154px at 1920 for no other reason than to clear that button. It loads late on every page, so it needs no !important — and it out-ranks nav.css (0,1,0 selectors, in the ) and ds.css's two header rules on specificity anyway. It touches nothing but the bar: no section, no card, no colour, no height. --barh is left alone deliberately; it is the token .screen's own min-height is built on. ========================================================================== */ /* ========================================================================== 1 · THE HEADER — two rows, one rectangle The bar's height is deliberately NOT touched: --barh is a static token the screen's own min-height is built on, and 14/40/15/16/15 is already a balanced vertical. Everything wrong with this bar is horizontal. ========================================================================== */ @media (min-width: 901px){ /* 1a · the Menu button goes. All six pages are already on the bar, and the panel it opened listed those same pages. .baract, not .sitemenu: the unit is a flex item of .brow, so hiding only the button would leave its 34px column gap behind as a second hole. The phone burger lives in the same unit and is untouched below 901px, where it is the only way in. */ .bar .baract{ display: none; } /* 1b · the nav ends ON the right gutter. The margin-right existed only to clear the button — 115px at 1440, 154px at 1920 — and it was the larger half of that 205px hole. Gone, the last link now ends on exactly the vertical the last work card ends on. */ .bar .nav{ margin-right: 0; } /* 1c · the section row starts ON the left gutter. It was indented to the current page tab (--home-x) and landed 27.6px right of it — a fourth alignment that agreed with nothing. On the gutter it shares one edge with the wordmark above it and the first work card below it, and that single vertical is what ties the three bands together. */ .bar .krow .kids{ padding-left: 0; } } /* 1d · the two rows given their own voices. The page row carries the site; it takes the weight. The section row is a locator, so it steps down. */ @media (min-width: 1281px){ .bar .nav a.ptab{ font-size: 15px; letter-spacing: -.01em; } .bar .nav{ gap: clamp(16px, 2.1vw, 30px); } } /* 1e · the two refinements above are held back to >=1281px on purpose. Between 901 and 1280 the six links, the wordmark and the gutters already use the whole bar — measured at 960 the brand sits 12px from the first link. Removing the Menu button gives that band 124px of relief, which is the whole win there; spending it again on larger type or a wider gap put the last link past the right gutter. Above 1281 there is real slack, and that is where the type may grow. */ /* 1f · 2026-09-20 — the bold-width ghost spaced like the words it stands in for. Every page tab reserves its bold width with an ::after ghost (attr(data-label)), so the tab does not grow when it becomes the current page and the row never shifts between pages. The homepage header (home-system/home.css, carried to the inner pages by site-chrome/header.css) spaces the tab words at .003em but left the ghost at --fs-nav-ls (-.005em), so a current tab came out ~1px wider than its ghost and the row drifted by up to 1px from page to page. Same weight, same spacing now. Linked on all six pages; the id pair out-ranks the home rule. */ @media (min-width: 901px){ html body header.bar #navPrimary#navPrimary a.ptab::after{ letter-spacing: .003em !important; } } /* 1g · 2026-09-20 — the section row keeps air between its links at tablet widths. home-system/home.css sets the row's gap to 0 below 901px and lets the peek tuner (index.html's inline copy / home-system/peek.js on the other pages) pick the gap on phones (<=760px), so the next link shows cut at the edge. Between 761 and 900px the tuner does not run, the gap stayed 0 and the current section's pill sat flush against the next link, on every page. 14px is what the tuner picks on the homepage at 390px. Phones are left to the tuner (inner pages add their own floor in site-chrome/header.css). */ @media (min-width: 761px) and (max-width: 900px){ html body header.bar #navKids#navKids#navKids{ column-gap: 14px !important; } } /* ========================================================================== OUR WORK TAB · 2026-09-28 — the header gained a seventh tab (Our Work, after Our Services). From 901px (where the tabs appear) to 1079px the seven tabs need up to ~755px and less is left beside the full wordmark, so in that band the brand shows its DMD mark alone (the name stays in the markup for screen readers) and the tabs keep their own size and spacing. 1080px and wider, and phones, are unchanged. Undo: delete this block. ========================================================================== */ @media (min-width: 901px) and (max-width: 1079px){ html body header.bar .brow .wm{ font-size: 0; gap: 0; letter-spacing: 0; } }