/* =========================================================================== Base — reset and element defaults. Tokens only, no raw values. Not wrapped in @layer: WordPress prints its global-styles CSS unlayered, and unlayered rules beat every cascade layer regardless of specificity. =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } /* Any component that sets its own `display` beats the user agent's `[hidden] { display: none }`, because a class always outranks a UA rule. The sort form's redundant Apply button was hidden by script and stayed on screen for exactly that reason. */ [hidden] { display: none !important; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; } body { background: var(--surface-page); color: var(--text-default); font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal); font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-tight); letter-spacing: -0.015em; color: var(--text-heading); font-variation-settings: "SOFT" 20, "WONK" 0; text-wrap: balance; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } h5, h6 { font-family: var(--font-ui); font-weight: 600; line-height: var(--leading-snug); color: var(--text-heading); } p { text-wrap: pretty; } strong, b { font-weight: 650; } a { text-underline-offset: 0.18em; text-decoration-thickness: from-font; } ::selection { background: var(--decor-warm); color: var(--surface-inverse); } hr { border: 0; border-top: 1px solid var(--border-subtle); margin-block: var(--section); } /* One focus treatment for the whole interface. Accent-coloured so it never reads as decoration, and never removed without a replacement. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); } @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; } } /* --- layout primitives --------------------------------------------------- */ .wrap { width: min(var(--wrap), 100% - (var(--gutter) * 2)); margin-inline: auto; } .wrap--narrow { width: min(var(--wrap-narrow), 100% - (var(--gutter) * 2)); } .section { padding-block: var(--section); } .section--tight { padding-block: var(--section-tight); } .section--inverse { background: var(--surface-inverse); color: var(--text-inverse); } .section--inverse :is(h1, h2, h3, h4, h5, h6) { color: var(--text-inverse); } .section--accent { background: var(--surface-accent); } .section--sunken { background: var(--surface-sunken); } .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-sm)); } .flow > * + * { margin-top: var(--flow-gap, var(--space-sm)); } .prose { max-width: var(--measure); } /* 100vw includes the scrollbar, so on a scrolled page the band is wider than the visible viewport and drags a horizontal scrollbar in behind itself. Reserving the gutter on makes 100vw stop counting it, and also stops the page from lurching sideways when a drawer adds .no-scroll. */ html { scrollbar-gutter: stable; } .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } /* --- utilities ----------------------------------------------------------- */ .visually-hidden, .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; } .skip-link { position: absolute; left: -9999px; z-index: 999; padding: var(--space-xs) var(--space-md); background: var(--surface-inverse); color: var(--text-inverse); border-radius: 0 0 var(--radius-md) 0; } .skip-link:focus { left: 0; top: 0; } .muted { color: var(--text-muted); } .lede { font-size: var(--text-md); line-height: 1.55; } .is-hidden { display: none !important; } .no-scroll { overflow: hidden; } /* --- ambient ground ------------------------------------------------------ Glass needs something behind it to refract. On a flat cream page a frosted panel is indistinguishable from a slightly-wrong cream box, so the page carries three soft blooms that the panels sit over. Fixed rather than scrolled: the blooms stay put while content moves across them, which is what makes the blur read as depth. `position: fixed` on a pseudo-element costs one composited layer and never repaints. */ body { position: relative; isolation: isolate; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60rem 44rem at 12% -8%, var(--bloom-deep), transparent 62%), radial-gradient(52rem 40rem at 92% 6%, var(--bloom-river), transparent 60%), radial-gradient(46rem 38rem at 70% 96%, var(--bloom-bronze), transparent 64%); } /* --- glass --------------------------------------------------------------- One place defines what "a pane of glass" means. Components opt in with .glass / .glass--dark rather than each re-deriving tint, blur and sheen. */ .glass { background: var(--glass-tint); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-sheen); } .glass--strong { background: var(--glass-tint-strong); } .glass--warm { background: var(--glass-tint-warm); } .glass--sunken { background: var(--glass-tint-sunken); } .glass--dark { background: var(--glass-tint-dark-panel); border-color: var(--glass-border-dark); box-shadow: var(--glass-shadow), var(--glass-sheen-dark); color: var(--text-inverse); } .glass--dark-strong { background: var(--glass-tint-dark-strong); }