/* assets/css/base.css */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html { scroll-padding-top: 140px; } /* Below ~355px the sponsor-strip logos wrap onto a second row (no fixed breakpoint drives this — it's content width, not a media query in components.css), pushing the sticky header's rendered height to ~170px (measured 320px/300px width) vs ~122px at 375px+. 140px is no longer enough there, so bump scroll-padding-top for narrow phones. */ @media (max-width: 400px) { html { scroll-padding-top: 190px; } } body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, .display { font-family: var(--font-display); text-transform: uppercase; /* AKSARA logo guide: capitals-only headlines, independent of which font is loaded */ font-weight: 700; letter-spacing: 0.01em; line-height: 1.05; margin: 0 0 var(--space-2); } h1 { font-size: clamp(2.5rem, 6vw, 5rem); } h2 { font-size: clamp(1.75rem, 4vw, 3rem); } h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); } p { margin: 0 0 var(--space-2); } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-3); } .section { padding-block: var(--space-6); } /* Partial-include mount points (assets/js/include-partials.js) wrap the fetched header/footer markup in a plain

. Left as a normal block box, that div becomes the containing block for .site-header's `position: sticky`, and since the div's height exactly equals the header's own height (it has no other content), the sticky element has no room to travel — it scrolls away with the page instead of pinning to the viewport top. `display: contents` removes the wrapper's own box from the render tree so its children (the actual

/