/* The sticky header covers the top of the viewport and, on phones, the fixed action bar covers the bottom. Without this, every in-page anchor and every scroll-into-view parks its target underneath one of them. */ html { scroll-padding-top: 7rem; scroll-padding-bottom: 9rem; } *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, p, figure, ul { margin: 0; padding: 0; } ul { list-style: none; } img, video, svg { display: block; max-width: 100%; height: auto; } /* The UA stylesheet's [hidden] rule is a type selector and loses to any class selector that sets display. Anything in this project that sets el.hidden expects it to actually hide, so make that true project-wide. */ [hidden] { display: none !important; } body { font-family: var(--font-body); background: var(--white); color: var(--ink-on-white); font-size: var(--step-0); line-height: 1.6; -webkit-text-size-adjust: 100%; /* `clip`, not `hidden`. `overflow-x: hidden` makes a scroll container, which stops being the scrolling element — programmatic scrolling and in-page anchor jumps then target the wrong box. `clip` suppresses the same horizontal overflow without creating a scroller. */ overflow-x: clip; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.02; text-transform: uppercase; letter-spacing: -0.005em; text-wrap: balance; } /* The script accent. One word per headline, never a whole line. */ .script { font-family: var(--font-script); text-transform: none; letter-spacing: 0; font-weight: 400; } p { text-wrap: pretty; } :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Scroll reveals. The no-JS default must be visible, so the hidden state is applied by script, not by the stylesheet alone. */ .js [data-reveal] { opacity: 0; transform: translateY(1.1rem); } .js [data-reveal] { transition: opacity .55s ease, transform .55s ease; } .js [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; } }