/* ========================================================================== The Accommodation Paper-forward reading environment, with a darkroom variant that follows the reader's OS setting. Margin annotations are the signature device: accommodations are things written in the margins of standard procedure. ========================================================================== */ :root { /* Light: cool paper, not cream */ --paper: #f2f1ec; --paper-sunk: #e9e7e0; --ink: #1b1c19; --ink-soft: #55584f; --ink-faint: #83867b; --rule: #d6d4ca; --red: #bf2f2c; --red-quiet: #f0dedd; --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Manrope", ui-sans-serif, system-ui, sans-serif; --measure: 34rem; --margin-col: 9rem; --margin-gap: 3.5rem; --gutter: clamp(1.25rem, 5vw, 3rem); --step-0: 1.0625rem; --step-1: 1.1875rem; --step-2: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem); --step-3: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem); --step-4: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); } /* The inline script in resolves a theme before first paint and always writes data-theme, so everything below keys off one attribute. The media query is the no-JS fallback and applies only when the attribute is absent. */ :root[data-theme="dark"], :root:not([data-theme]) { color-scheme: light; } :root[data-theme="dark"] { /* Darkroom */ --paper: #0f100d; --paper-sunk: #171814; --ink: #e6e4da; --ink-soft: #a4a69a; --ink-faint: #74776c; --rule: #2b2d26; --red: #e05a55; --red-quiet: #2a1918; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --paper: #0f100d; --paper-sunk: #171814; --ink: #e6e4da; --ink-soft: #a4a69a; --ink-faint: #74776c; --rule: #2b2d26; --red: #e05a55; --red-quiet: #2a1918; color-scheme: dark; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: var(--step-1); line-height: 1.65; font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; margin: 0; text-wrap: balance; } p { margin: 0 0 1.25em; } a { color: inherit; text-decoration-color: var(--red); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { color: var(--red); } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 1px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--red); color: #fff; padding: 0.75rem 1rem; font-family: var(--sans); font-size: 0.875rem; z-index: 10; } .skip-link:focus { left: 0; } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: calc(var(--measure) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: calc(var(--margin-col) + var(--margin-gap) + 44rem + var(--gutter) * 2); } /* ---------- Eyebrows: the utility voice ---------- */ .eyebrow { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.5rem; } .eyebrow--accent { color: var(--red); } .eyebrow__sep { color: var(--rule); margin-inline: 0.5em; } .flag { display: inline-block; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft); margin-left: 0.75em; } .flag::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; background: var(--red); margin-right: 0.5em; vertical-align: 0.06em; } /* ---------- Header ---------- */ .site-header { border-bottom: 1px solid var(--rule); background: var(--paper); } /* Narrow: wordmark and toggle share the top row, nav drops to its own line. Wide: one row, nav pushed right. */ .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 0.6rem; padding-block: 1.25rem; } .wordmark { flex: 1 1 auto; } .theme-toggle, .reading-toggle { order: 1; } .site-nav { order: 2; width: 100%; } @media (min-width: 48rem) { .site-header__inner { flex-wrap: nowrap; padding-block: 1.5rem; gap: 0.6rem; } .site-nav { margin-right: 1.4rem; } .site-nav { order: 0; width: auto; margin-left: auto; } .theme-toggle, .reading-toggle { order: 0; } } /* Header takes the bare wordmark; the ruled lockup is reserved for the homepage masthead, which is the only place with room to let it breathe. */ .wordmark { text-decoration: none; font-family: var(--serif); font-variation-settings: "opsz" 42; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1; white-space: nowrap; } .wordmark:hover { color: var(--red); } /* The lockup: a continuous rule interrupted by the word, set at display optical size. Rule weight and gap are tied to the word's own size so the proportions hold at any scale. */ .lockup { display: flex; align-items: center; justify-content: center; gap: 0.5em; font-size: clamp(1.35rem, 5vw, 3.25rem); } .lockup__word { font-family: var(--serif); font-variation-settings: "opsz" 72; font-weight: 400; font-size: 1em; line-height: 1; letter-spacing: -0.005em; white-space: nowrap; } .lockup__rule { flex: 1 1 0; height: 0.032em; min-height: 1px; background: currentColor; } .lockup__eyebrow { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: lowercase; color: var(--red); text-align: center; margin: 0 0 0.9rem; } .site-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; } .site-nav a { text-decoration: none; color: var(--ink-soft); } .site-nav a:hover { color: var(--red); } /* ---------- Masthead ---------- */ .masthead { padding-block: clamp(3rem, 9vw, 5.5rem) 2.5rem; } .masthead__body { margin-top: clamp(2.5rem, 6vw, 4rem); } .masthead__title { font-size: var(--step-3); font-weight: 500; max-width: 24ch; margin-bottom: 1.25rem; } .masthead__blurb { color: var(--ink-soft); max-width: 52ch; font-size: var(--step-1); } /* ---------- Lead story ---------- */ .lead { padding-block: 2.5rem 3.5rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .lead__title { font-size: var(--step-3); max-width: 22ch; margin-bottom: 0.75rem; } .lead__title a { text-decoration: none; } .lead__title a:hover { text-decoration: underline; } .lead__standfirst { font-size: var(--step-2); font-weight: 300; font-style: italic; color: var(--ink-soft); max-width: 40ch; } .lead__meta, .card__meta, .archive-row__meta { font-family: var(--sans); font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.02em; } .lead__flag { margin-top: 0.5rem; margin-bottom: 0; } .lead__flag .flag { margin-left: 0; } /* ---------- Cards ---------- */ .feed { padding-block: 3rem; } .card-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin-bottom: 2.5rem; } .card__title { font-size: var(--step-2); margin-bottom: 0.5rem; } .card__title a { text-decoration: none; } .card__title a:hover { text-decoration: underline; } .card__standfirst { color: var(--ink-soft); font-size: var(--step-0); } .link-more { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--red); padding-bottom: 2px; } /* ---------- Pitch ---------- */ .pitch { padding-block: 3.5rem 4.5rem; border-top: 1px solid var(--rule); background: var(--paper-sunk); } .pitch__title { font-size: var(--step-3); margin-bottom: 1rem; } .pitch__body { color: var(--ink-soft); max-width: 48ch; } .button { display: inline-block; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; color: var(--paper); background: var(--red); padding: 0.7rem 1.25rem; border-radius: 2px; transition: opacity 0.15s ease; } .button:hover { color: var(--paper); opacity: 0.88; } /* ---------- Article ---------- */ .article__header { padding-bottom: 2rem; } .article__title { font-size: var(--step-4); font-weight: 500; margin-bottom: 1rem; } .article__standfirst { font-size: var(--step-2); font-weight: 300; font-style: italic; color: var(--ink-soft); max-width: 40ch; margin: 0; } .article__grid { padding-bottom: 3rem; } .article__head-grid { padding-top: clamp(2.5rem, 7vw, 4.5rem); } .article__margin { border-top: 1px solid var(--rule); padding-top: 1.25rem; margin-bottom: 2.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; } .margin-block .eyebrow { margin-bottom: 0.25rem; } .margin-block__value { font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-soft); margin: 0; } .margin-block__value a { text-decoration: none; border-bottom: 1px solid var(--rule); } .margin-block__value a:hover { border-color: var(--red); } /* The signature: on wide viewports the utility voice moves into a true margin. Used by article pages and by every section on the homepage, so the annotation motif is the spine of the site rather than one page's trick. */ .margin-grid { --col: var(--measure); width: 100%; max-width: calc(var(--margin-col) + var(--margin-gap) + var(--col) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .margin-grid--wide { --col: 44rem; } .margin-grid__aside > .eyebrow:first-child { margin-top: 0.35rem; } @media (min-width: 64rem) { .margin-grid { display: grid; grid-template-columns: var(--margin-col) minmax(0, var(--col)); gap: var(--margin-gap); } .margin-grid__aside { text-align: right; } .article__margin { display: block; border-top: none; padding-top: 0.6rem; margin-bottom: 0; position: sticky; top: 2.5rem; align-self: start; } .margin-block { margin-bottom: 1.5rem; } } /* ---------- Content note ---------- */ /* Recessed rather than accented: the panel reads as an aside at a glance, and the red square is a marker rather than a color, so nothing here looks clickable. The same square marks flagged pieces in listings. */ .content-note { background: var(--paper-sunk); border-radius: 2px; padding: 1.15rem 1.25rem; margin: 0 0 2.5rem; } .content-note__label { display: flex; align-items: center; gap: 0.55rem; font-family: var(--sans); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.4rem; } .content-note__label::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--red); display: inline-block; flex: none; } .content-note__body { font-size: var(--step-0); color: var(--ink-soft); margin: 0; } /* ---------- Prose ---------- */ .article__body, .prose { font-size: var(--step-1); line-height: 1.7; } .article__body > p:first-of-type::first-letter, .prose > p:first-of-type::first-letter { font-size: 1em; } .article__body h2, .prose h2 { font-size: var(--step-2); margin: 2.5rem 0 0.75rem; } .article__body h3, .prose h3 { font-size: var(--step-1); font-weight: 700; margin: 2rem 0 0.5rem; } .article__body em, .prose em { font-style: italic; } .article__body blockquote, .prose blockquote { margin: 2rem 0; padding-left: 1.25rem; border-left: 2px solid var(--rule); color: var(--ink-soft); font-style: italic; } .article__body ul, .prose ul { padding-left: 1.15rem; margin: 0 0 1.5rem; } .article__body li, .prose li { margin-bottom: 0.4rem; } .article__body hr, .prose hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; } /* ---------- Author card ---------- */ .author-card { border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-bottom: 4rem; } .author-card__name { font-size: var(--step-2); margin-bottom: 0.5rem; } .author-card__name a { text-decoration: none; } .author-card__name a:hover { text-decoration: underline; } .author-card__bio { color: var(--ink-soft); font-size: var(--step-0); } .inline-list, .plain-list { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 0.8125rem; } .inline-list { display: flex; flex-wrap: wrap; gap: 1.25rem; } .plain-list li { margin-bottom: 0.4rem; } .inline-list a, .plain-list a { text-decoration: none; color: var(--ink-soft); border-bottom: 1px solid var(--rule); } .inline-list a:hover, .plain-list a:hover { color: var(--red); border-color: var(--red); } /* ---------- Pages ---------- */ .page__header { padding-block: clamp(2.5rem, 7vw, 4.5rem) 2rem; border-bottom: 1px solid var(--rule); margin-bottom: 2.5rem; } .page__title { font-size: var(--step-3); font-weight: 500; margin-bottom: 0.75rem; } .page__standfirst { color: var(--ink-soft); max-width: 44ch; margin: 0; } .page__header .inline-list { margin-top: 1rem; } .prose { padding-bottom: 4rem; } /* ---------- Archive ---------- */ .archive-list { list-style: none; margin: 0; padding: 0 0 4rem; } .archive-row { display: grid; gap: 0.35rem 2.5rem; padding-block: 1.75rem; border-bottom: 1px solid var(--rule); } .archive-row__date { font-family: var(--sans); font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.02em; margin: 0; } .archive-row__title { font-size: var(--step-2); margin-bottom: 0.35rem; } .archive-row__title a { text-decoration: none; } .archive-row__title a:hover { text-decoration: underline; } .archive-row__standfirst { color: var(--ink-soft); font-size: var(--step-0); margin-bottom: 0.5rem; } .archive-row__meta a { text-decoration: none; border-bottom: 1px solid var(--rule); } @media (min-width: 48rem) { .archive-row { grid-template-columns: var(--margin-col) minmax(0, 1fr); gap: 0.35rem var(--margin-gap); } .archive-row__date { text-align: right; padding-top: 0.4rem; } } .empty { color: var(--ink-faint); font-style: italic; padding-bottom: 4rem; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--rule); background: var(--paper-sunk); } .site-footer__inner { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); padding-block: 3rem 3.5rem; } .site-footer__tagline { font-size: var(--step-0); color: var(--ink-soft); max-width: 28ch; margin: 0; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Theme toggle ---------- A disc with one half inked. Switching swings the inked half around, so the control shows the state rather than a symbol for it, and it stays legible at 17px where finer ideas turn to mud. On browsers with view transitions the incoming theme sweeps out from the button itself. */ .theme-toggle { -webkit-appearance: none; appearance: none; background: none; border: 1px solid var(--rule); border-radius: 50%; width: 2.125rem; height: 2.125rem; padding: 0; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink-soft); transition: border-color 0.2s ease, color 0.2s ease; flex: none; } .theme-toggle:hover { border-color: var(--red); color: var(--red); } .theme-toggle svg { width: 1.125rem; height: 1.125rem; display: block; overflow: visible; } .dial__ring { fill: none; stroke: currentColor; stroke-width: 1.6; } .dial__half { fill: currentColor; transform-origin: 12px 12px; transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); } :root[data-theme="dark"] .dial__half { transform: rotate(180deg); } /* The sweep: paint the incoming theme over the outgoing one */ ::view-transition-old(root) { animation: none; z-index: 0; } ::view-transition-new(root) { animation: none; z-index: 1; } @media (prefers-reduced-motion: reduce) { .dial__half { transition: none; } } /* ---------- The strip ---------- A signature derived from the article's own structure: one frame per block, sized by that block's weight. It doubles as a position map, so a reader can see how long a hard thing lasts before committing to it. Hidden below the margin breakpoint, where there is no margin to hang it in. */ .strip { display: none; } @media (min-width: 64rem) { .strip { display: block; margin-top: 2rem; } } .strip__label { margin-bottom: 0.55rem; } .strip__track { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; display: block; margin-left: auto; cursor: pointer; line-height: 0; color: var(--ink); } .strip__svg { width: 30px; height: auto; max-height: 46vh; overflow: visible; } .strip__para { fill: var(--ink-soft); } .strip__quote { fill: var(--ink-faint); opacity: 0.75; } .strip__list { fill: var(--ink-soft); opacity: 0.6; } .strip__heading{ fill: var(--ink); } .strip__break { fill: var(--ink-faint); } .strip__note { fill: var(--red); } .strip__perf { fill: var(--rule); } /* The gate: the frame currently in front of the reader, clasped top and bottom, with a caret pointing off the strip toward the text. */ .strip__gate { transition: opacity 0.2s ease; } .strip__gate-fill { fill: var(--ink); opacity: 0.18; transition: y 0.14s ease, height 0.14s ease; } .strip__gate-bar { stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; fill: none; } /* Ink, not red: red is the content note marker and means one thing only. No pointer aims off the strip at the text: the strip is a compressed map, so the paragraph beside the gate is not the paragraph you are reading. */ .strip__readout { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-faint); text-align: right; margin: 0.7rem 0 0; min-height: 1em; } .strip__track:hover .strip__para { fill: var(--ink); } .strip__track:hover .strip__perf { fill: var(--ink-faint); } .strip__track:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; } @media (prefers-reduced-motion: reduce) { .strip__gate, .strip__gate-fill { transition: none; } } /* ---------- The reading instrument ---------- The publication's argument is accommodation, so the reader's controls are a visible piece of the design rather than a settings menu. Every control here writes a custom property; nothing is hardcoded downstream. */ :root { --reading-font: var(--serif); --reading-size: var(--step-1); --leading: 1.7; } /* Size, spacing, measure: set by the console, defaulted here */ :root[data-size="s"] { --reading-size: 1rem; } :root[data-size="l"] { --reading-size: 1.3125rem; } :root[data-size="xl"] { --reading-size: 1.5rem; } :root[data-leading="tight"] { --leading: 1.5; } :root[data-leading="open"] { --leading: 1.95; } :root[data-measure="narrow"] { --measure: 27rem; } :root[data-measure="wide"] { --measure: 42rem; } :root[data-font="sans"] { --reading-font: var(--sans); } :root[data-font="hyper"] { --reading-font: "Atkinson Hyperlegible", var(--sans); } /* Paper tint. Warm and cool shift the ground only, never the text contrast. */ :root[data-tint="warm"] { --paper: #f4f1e8; --paper-sunk: #ebe6da; } :root[data-tint="cool"] { --paper: #eef1f1; --paper-sunk: #e3e8e8; } :root[data-theme="dark"][data-tint="warm"] { --paper: #12100c; --paper-sunk: #1a1712; } :root[data-theme="dark"][data-tint="cool"] { --paper: #0d1011; --paper-sunk: #151a1b; } /* Quiet mode: the accent stands down and the strip steps out */ :root[data-quiet="on"] { --red: var(--ink-soft); } :root[data-quiet="on"] .strip { display: none; } .article__body, .prose { font-family: var(--reading-font); font-size: var(--reading-size); line-height: var(--leading); } /* ---- the panel ---- */ .console { position: fixed; right: max(1rem, calc((100vw - 74rem) / 2)); top: 4.75rem; z-index: 40; width: min(20rem, calc(100vw - 2rem)); background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 1.25rem; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.13); font-family: var(--sans); max-height: calc(100vh - 6rem); overflow-y: auto; } .console[hidden] { display: none; } .console__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .console__title { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; margin: 0; } .console__close { background: none; border: 0; padding: 0 0 0 0.5rem; font-size: 1.35rem; line-height: 1; cursor: pointer; color: var(--ink-faint); } .console__close:hover { color: var(--red); } .console__note { font-size: 0.75rem; color: var(--ink-faint); margin: 0.4rem 0 1.25rem; line-height: 1.5; } .control { border: 0; margin: 0 0 1.15rem; padding: 0; } .control__label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); padding: 0; margin-bottom: 0.45rem; } /* Segmented control with detents: notches sit between the stops */ .segmented { display: flex; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; background: var(--paper-sunk); } .segmented__opt { flex: 1 1 0; display: block; position: relative; min-width: 0; } .segmented__opt + .segmented__opt { border-left: 1px solid var(--rule); } .segmented__opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .segmented__opt span { display: block; text-align: center; padding: 0.45rem 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s ease, color 0.15s ease; } .segmented__opt input:checked + span { background: var(--ink); color: var(--paper); } .segmented__opt input:focus-visible + span { outline: 2px solid var(--red); outline-offset: -2px; } .segmented__opt:hover input:not(:checked) + span { color: var(--ink); } .segmented--dial .segmented__opt span { font-variant-numeric: tabular-nums; } /* Switch */ .control--switch { margin-bottom: 1.35rem; } .switch { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch__track { flex: none; width: 2.1rem; height: 1.15rem; border: 1px solid var(--rule); background: var(--paper-sunk); border-radius: 1rem; position: relative; transition: background 0.18s ease, border-color 0.18s ease; margin-top: 0.1rem; } .switch__knob { position: absolute; top: 0.15rem; left: 0.18rem; width: 0.75rem; height: 0.75rem; background: var(--ink-soft); border-radius: 50%; transition: transform 0.18s cubic-bezier(0.65, 0, 0.35, 1), background 0.18s ease; } .switch input:checked + .switch__track { background: var(--ink); border-color: var(--ink); } .switch input:checked + .switch__track .switch__knob { transform: translateX(0.9rem); background: var(--paper); } .switch input:focus-visible + .switch__track { outline: 2px solid var(--red); outline-offset: 2px; } .switch__name { display: block; font-size: 0.8125rem; font-weight: 600; } .switch__hint { display: block; font-size: 0.6875rem; color: var(--ink-faint); line-height: 1.45; margin-top: 0.1rem; } .console__reset { background: none; border: 0; padding: 0; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--rule); cursor: pointer; } .console__reset:hover { color: var(--red); border-color: var(--red); } /* The trigger sits beside the theme dial */ .reading-toggle { -webkit-appearance: none; appearance: none; background: none; border: 1px solid var(--rule); border-radius: 50%; width: 2.125rem; height: 2.125rem; padding: 0; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink-soft); font-family: var(--serif); font-size: 0.9375rem; line-height: 1; transition: border-color 0.2s ease, color 0.2s ease; flex: none; } .reading-toggle:hover { border-color: var(--red); color: var(--red); } .reading-toggle[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); } @media (prefers-reduced-motion: reduce) { .switch__knob, .segmented__opt span { transition: none; } }