/* --------------------------------------------------------------------------- Meridian — responsive layer. The canvas export flattened every media query into inline styles, so the breakpoints are re-derived here. Per-page grid collapses are generated into css/.css by build.mjs; this file handles the parts that are the same on every page: the header, the section rhythm, and overflow control. Loaded last, so it wins ties against the generated rules. --------------------------------------------------------------------------- */ /* --- Tablet and below ---------------------------------------------------- */ @media (max-width: 1024px) { html { scroll-padding-top: 88px; } /* Section padding on the artboards is tuned for a 1240px canvas. */ [style*='padding:'][style*='vw'] { padding-left: 5vw !important; padding-right: 5vw !important; } } /* --- Where the desktop header stops fitting ------------------------------ */ @media (max-width: 900px) { .site-header-wrap { width: min(calc(100% - 20px), 1240px) !important; top: 12px !important; } .site-header-wrap > header { height: auto !important; min-height: 60px; flex-wrap: wrap; padding: 9px 9px 9px 14px !important; border-radius: 20px !important; } /* Desktop nav and the header CTA give way to the generated mobile menu, which carries the same links plus the demo call to action. */ .site-header-wrap nav[aria-label='Primary navigation'] { display: none !important; } .site-header-wrap > header > a:not([aria-label='Meridian home']) { display: none !important; } .nav-burger { display: flex; } .nav-mobile { display: block; } .nav-mobile[hidden] { display: none; } /* Anything measured against the 1240px canvas needs to stop pushing. */ [style*='white-space:nowrap'] { white-space: normal !important; } /* Two-up hero/section splits stack. */ [style*='display:flex'][style*='gap'] { flex-wrap: wrap !important; } } /* --- Phones --------------------------------------------------------------- */ @media (max-width: 640px) { html { scroll-padding-top: 80px; } /* Display type is authored with clamp(), but the floor is still desktop-sized. */ [style*='font-size:clamp'] { letter-spacing: -0.04em !important; } /* Generous artboard padding becomes unusable margin on a phone. */ [style*='padding:96px'], [style*='padding:104px'], [style*='padding:112px'], [style*='padding:120px'], [style*='padding:128px'] { padding-top: 64px !important; padding-bottom: 64px !important; } .nav-mobile__link { font-size: 15px; } } /* --- Overflow guard ------------------------------------------------------- Fixed pixel widths from the canvas can exceed a phone viewport. Clip at the page wrapper rather than on , so position:fixed still works. */ @media (max-width: 900px) { body > div[style*='min-height:100vh'] { overflow-x: clip !important; } }