{ "id": "v1-mp-6535", "long_id": "v1.modern-product.blog.s06.p05.t03.u05", "name": "Modern brand newsroom", "era": { "slug": "modern-product", "code": "mp", "name": "Modern product", "years": [ 2020, 2026 ], "description": "The big-brand product page of 2020 to 2026: very large tight headlines, full-bleed sections that alternate black, white and one saturated colour, generous rounded cards and pill buttons, product shown huge and centred, and motion on scroll: sections that fade and slide in, sticky stories, numbers that reveal." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "This is the newsroom and careers site of a big consumer brand between 2020 and 2026: a loud editorial page in one sunny yellow and black, with very large condensed capitals for headlines, the lead story as a full-bleed block of the brand colour, and stories as cards whose pictures are flat art made of a few plain shapes. A masthead of two rows names the section, article pages are set in very large type beside a narrow column, and open roles are a table under filter chips. It was the common look of the press, story and jobs sites of finance, device and delivery brands in the first half of the 2020s.", "url": "https://chrono.skin/s/v1-mp-6535", "preview_url": "https://chrono.skin/s/v1-mp-6535/specimen.html", "files": { "STYLE.md": "# Modern brand newsroom\n\n## Summary\n\nThis is the newsroom and careers site of a big consumer brand between 2020 and 2026: a loud editorial page in one sunny yellow and black, with very large condensed capitals for headlines, the lead story as a full-bleed block of the brand colour, and stories as cards whose pictures are flat art made of a few plain shapes. A masthead of two rows names the section, article pages are set in very large type beside a narrow column, and open roles are a table under filter chips. It was the common look of the press, story and jobs sites of finance, device and delivery brands in the first half of the 2020s.\n\n## Layout\n\n- The page is fluid and designed at 1440px. Content sits in `.ds-wrap`, centred, at most `--size-page` (1280px) wide with `--space-5` side padding; sections are full bleed and pad themselves with `--space-8` (88px, `.ds-section--tight`, the usual rhythm of this layout) or `--space-9` (136px).\n- Navigation is `.ds-nav`, a masthead of two rows on the bar colour. The first, `--size-nav` (76px) tall, holds the brand in `--text-h3`, the name of the section after a rule, and one small primary button at the right; it scrolls away. The second, `--size-links` (52px) tall under a hairline, holds four links in `--text-large` at the left and the date at the right, and stays at the top of the window (`position: sticky` with a negative `top` of `--size-nav`). The current link is underlined with `--border-width-strong`.\n- The home view stacks: `.ds-hero`, the lead story, full bleed on the accent fill, 7 to 5 (kicker, a display headline, a lead and two buttons; a `.ds-poster`); the `.ds-marquee` as a ticker of short news; a section with a `.ds-headrow` and `.ds-grid`, five story cards on three columns, the first two columns wide; a full-bleed inverse section with the `.ds-stat` figures over strong rules; `.ds-cols` (7 to 5) with press releases as a dated list beside a media-contact panel and a notice; and a `.ds-tone--alt` band with `.ds-cta`.\n- Inner pages have no hero. Inside `.ds-wrap` they open with `.ds-page-header` (breadcrumb, a large title, one line of text, at most one button at the right) on the page colour; then the working components. A story's header is `.ds-page-header--story`, whose title is set in display size. Tabs are a pill switch at the left of `.ds-tabsrow`, with the filter chips at its right, directly above the table panel. Content is `.ds-article` (8 to 3: the story; a column that stays in place), one full-width table panel over `.ds-cols--even`, or `.ds-cols` (7 to 5).\n- Views. The specimen is the newsroom of a device maker. `home` is the news front. `story` is an article: a poster, the text in large type, a pull quote and links to the previous and next story, with topics and a reading list in the side column. `jobs` has the switch between teams and the place chips, the table of roles with its pagination, the hiring steps, an empty saved-roles box and the badge key. `apply` is the application form with its notices and buttons, the facts of the role and the open withdraw dialog.\n- Below 900px the lead story and the article stack and cards go two to a row; below 640px the masthead keeps brand and section, its `.ds-nav__links` spread across the row and scroll sideways when they do not fit, the date (`.ds-nav__date`) and the small button are hidden, cards and figures stack, dated rows put the date above the title and a wide table scrolls inside `.ds-table__wrap`. Below 640px a `.ds-tooltip__tip` takes the width of its paragraph, so it never leaves the window. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (hairline gaps, chip padding), `--space-2` 8px (between chips, rise of a hovered card), `--space-3` 12px (between buttons, the ticker's padding), `--space-4` 16px (form rows, list rows, art to kicker), `--space-5` 24px (panel padding, page gutter, column gap of the cards), `--space-6` 36px (row gap of the cards, head to content, between navigation links), `--space-7` 56px (hero column gap, a story's foot, rise of the scroll animation), `--space-8` 88px (sections, the hero's padding, gap of the article), `--space-9` 136px (the widest sections).\n- Other sizes: `--size-mark` 34px, `--size-icon` 48px, `--size-control` 40px, `--size-art` 240px (height of a card's art), `--size-lead` 440px (least height of the lead story's poster), `--size-dialog` 480px.\n- Motion, in CSS only. (1) Scroll: an element with `.ds-reveal` fades in and rises by `--space-7` as it enters the window (`@keyframes ds-rise`, `animation-timeline: view()`, `animation-range: entry 0% entry 80%`); `.ds-reveal--2` and `.ds-reveal--3` start later, for the second and third item of a row; `.ds-reveal--zoom` also grows from 94%. Put it on section heads, tiles, cards, figures and feature columns, never on the navigation, the hero copy, a whole full-bleed section or the footer. (2) Hover and press: buttons rise by 2px and shrink to 97% when pressed; tiles rise by 4 to 8px; all through `--transition`. (3) Ambient: only the `.ds-marquee` ticker sliding left (40s, linear). A card's art rises by 8px when the card is hovered. Every animation is declared inside `@media (prefers-reduced-motion: no-preference)`, the scroll ones also inside `@supports (animation-timeline: view())`. The keyframes state only the start (`from`), so the resting state of every rule is the finished, visible page: without support, or with reduced motion, nothing is hidden. Lengths in keyframes are `--space-*` tokens.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThese are the conventions of the era; every layout and every token set keeps them.\n\n- A block stands on one of four grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. An inverse block (`--fill-inverse`, class `.ds-tone--inverse`) carries only `--color-inverse-text`. An accent block (`--fill-accent`, class `.ds-tone--accent`) carries only `--color-accent-text`. The navigation (`--fill-bar`) carries `--color-bar-text`; the footer (`--fill-bar-alt`) carries `--color-bar-alt-text`.\n- A palette may be light or dark. Nothing assumes that the page is light: the inverse block is black on a white palette and off-white on a black one, and full-bleed sections alternate page, inverse, accent and `--color-surface-alt`.\n- `--color-fill-1` to `--color-fill-4` are tile grounds that carry running text in `--color-text` and `--color-heading`: tints on a light palette, deep tones on a dark one. They never carry `--color-inverse-text`.\n- Buttons by ground. On the page, panels and fills: `.ds-button` (`--fill-button`, `--color-button-text`) and `.ds-button--secondary` (`--fill-button-secondary`, text and outline in `--color-button-secondary-text`). On an inverse block only `.ds-button--inverse` (fill `--color-inverse-text`, text `--color-inverse`) and `.ds-button--ghost`. On an accent block only `.ds-button--onaccent` (fill `--color-accent-text`, text `--color-accent`) and `.ds-button--ghost`. The ghost button takes outline and text from the block it stands on.\n- `--color-inverse` is also the body of a drawn device and `--color-accent` the face of a drawn payment card, so a device is drawn on the page, a fill or the accent, never on an inverse block.\n- `--fill-bar` is translucent (the bar colour mixed with `transparent` in the surface part) and the navigation blurs what scrolls under it by `--backdrop-blur`.\n- `--color-heading-alt` is the kicker above a title, the sidebar title and h3 in prose. On inverse and accent blocks the kicker inherits the block's text colour.\n- `--fill-accent` with `--color-accent-text` is the default badge. `.ds-badge--alt` and the status badges are tints: the colour mixed at 16 to 24% into `--color-surface`, the text mixed from the colour and `--color-heading`, so they hold on light and dark palettes.\n- `--color-notice` with `--color-notice-text` is the information notice; the error notice is `--color-danger` on `--color-danger-surface`. The destructive button is `--color-danger` with `--color-button-text`.\n- Borders are hairlines: `--border-width` in `--color-border-muted` around panels and between rows, `--color-border` under a table head, `--color-input-border` around fields. `--border-width-strong` in `--color-border` frames the empty state.\n- Radii: `--radius-control` for buttons, fields, tabs and the current row of a sidebar; `--radius-panel` for panels, the dialog and the empty state (half of it for notices and the textarea); `--radius-page` for the largest blocks (hero, tiles, stages); `--radius-pill` for badges and meters.\n- Shadows: `--shadow-panel` on panels, `--shadow-control` on buttons and the current tab, `--shadow-control-hover` on a hovered button or tile, `--shadow-dialog` on the dialog and on drawn products.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: washes of `currentColor` or a text token at 7 to 22% for hover grounds, hairlines and stages on coloured blocks; tinted badges; the error notice's edge (`--color-danger` at 35%); the footer rule (`--color-bar-alt-text` at 25%). Opacity 0.6 to 0.8 dims secondary text on inverse and accent blocks.\n- Here: `--color-page` soft off-white `#f4f1ea`, `--color-surface` white, `--color-inverse` deep aubergine `#260a2f` (also `--color-heading` and the footer), `--color-accent` and `--color-button` violet `#5b3df5`. The fills are four pastels: lilac, peach, mint and straw.\n- One rounded family for everything (`--font-body`: Nunito, Varela Round, the system rounded face; the references used custom rounded and geometric faces), `--font-mono` for code and the card number. `--text-base` 18px at `--line-body` 1.6; `--text-ui` 16px (buttons, navigation, tile names); `--text-small` 14px (meta, badges, labels); `--text-large` 22px (leads); `--text-display` 84px (the balance, scaled down with `clamp()` and `vw` to `--text-h1`); `--text-h1` 54px (page titles and tile figures); `--text-h2` 34px (block titles, pot sums); `--text-h3` 21px (panel titles).\n- Weights are friendly, not heavy: `--weight-display` 700, `--weight-heading` 600, `--weight-ui` and `--weight-bold` 700. Nothing is uppercase and links are never underlined.\n- Surface: controls are rounded rectangles (`--radius-control` 16px), panels 28px, the largest blocks 36px, badges pills. `--shadow-panel` is a soft two-layer shadow tinted with the brand colour; buttons have a faint shadow that grows on hover and turns inward when pressed. `--fill-inverse` is a radial light from the top left corner; `--fill-button` a shallow vertical gradient. `--border-width-strong` is 3px. `--transition` is 0.25s; `--backdrop-blur` 28px.\n\n## Components\n\n- `.ds-page`: on ``. Sets font, text colour and `--fill-page`.\n- `.ds-tone--inverse`, `.ds-tone--accent`, `.ds-tone--alt`: put a block on the inverse fill, the accent fill or `--color-surface-alt` and set its text colour; titles, kickers, leads and figures inside inherit it.\n- `.ds-brand`: the site's mark and name, first in the navigation and again in the footer. `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-section`: a full-width block; `--tight` with less padding, `--flush` without top padding. `.ds-section__head` centres a `.ds-section__kicker`, a `.ds-section__title` and a `.ds-section__lead`; `--left` aligns it left.\n- `.ds-reveal`: the scroll animation described under Layout; `--2`, `--3`, `--zoom`.\n- `.ds-glow`: one soft round light in `currentColor` behind a product, drifting slowly; give its parent `position: relative` and `overflow: hidden`.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__main` holds the breadcrumb, the `.ds-page-header__title` and one line of `.ds-page-header__text`; `.ds-page-header__actions` sits at the right, on the baseline of the text.\n- `.ds-cols`: main and side column, 7 to 5; `--side` 1 to 3 for a sidebar; `--even` two equal columns. `.ds-stack` stacks blocks one `--space-5` apart.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--more` appends a small arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: the button, in `--font-ui`. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse` (inverse blocks), `--onaccent` (accent blocks), `--ghost` (both), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: data table without fills: a small quiet head, hairlines between rows, no vertical lines; `is-hover` tints a row. `.ds-table__num` right-aligns numbers; `.ds-table__title` is a row's link. Wrap it in `.ds-table__wrap` so that it scrolls sideways on a phone; `.ds-table__foot` is a last strip for a count and the pagination.\n- `.ds-list`: rows parted by hairlines. `.ds-list__item` holds a `.ds-list__title` (alone or in a `.ds-list__head` with a badge or figure at the right), an optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: the large rounded card. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge or link; `.ds-panel__body` is padded; `.ds-panel__text` is a paragraph.\n- `.ds-tabs`: a pill switch: `.ds-tabs__tab` on a capsule of `--color-surface-strong`, the current one (`is-current`) raised on `--fill-panel`. `.ds-tabsrow` places it above what it changes.\n- `.ds-badge`: small label on `--fill-accent`. `--alt` tinted, `--quiet` grey. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a block of links: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` with an optional `.ds-sidebar__count`; the current row (`is-current`) is filled with `--color-surface-strong`.\n- `.ds-notice`: tinted rounded message; `--error` in the danger colours. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` pills; `is-current` is filled with `--fill-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` parted by small arrows; the last is `.ds-breadcrumb__current`. It sits above the page title.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`, a panel in `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, a round `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions` with the main action first.\n- `.ds-empty`: a centred message in a frame of `--border-width-strong`: `.ds-empty__icon` (a circle of `--color-fill-1`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-wrap`: the centred content column.\n- `.ds-nav`: the masthead. `.ds-nav__inner` is the first row: the brand, `.ds-nav__section` (the section's name) and one `.ds-button--small`. `.ds-nav__row` is the second: `.ds-nav__links` of `.ds-nav__link` (the current one underlined, `is-current`) and `.ds-nav__date`. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the lead story of the home view, full bleed on `--fill-accent`: `.ds-hero__inner` holds `.ds-hero__copy` (`.ds-hero__kicker` with a badge and the date, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` with one `--onaccent` and one `--ghost` button at the foot of the column) and a `.ds-poster`. One per site.\n- `.ds-poster`: flat art: a rounded block holding two to four `.ds-shape` pieces: `--disc`, `--half`, `--bar`, `--ring`, `--block`, each with a fixed place; `--accent`, `--page` and `--soft` change the colour. `.ds-poster--flip` mirrors the composition. No text goes inside.\n- `.ds-marquee`: the ticker: short news set as text in a `.ds-marquee__track` of `.ds-marquee__name`, written twice so that the row can slide by half its width without a seam; a rule under it.\n- `.ds-headrow`: a left-aligned section head with one link at its right, on the title's baseline.\n- `.ds-grid`: story cards three to a row; `.ds-grid__cell--wide` spans two. Each `.ds-grid__cell` is a link: `.ds-grid__art` (a `.ds-poster` on one of the four fills in turn, which rises on hover), a `.ds-kicker`, `.ds-grid__title` and `.ds-grid__text`.\n- `.ds-kicker`: the category above a title, in `--color-heading-alt`, with the date in `.ds-kicker__date`.\n- `.ds-stat`: the row of three figures; each `.ds-stat__item` is a `.ds-stat__figure` in display size over a `.ds-stat__label`, under a rule of `--border-width-strong`.\n- `.ds-list--dated`: rows with the date in a narrow first column and the title and one line beside it.\n- `.ds-cta`: the closing band inside a `.ds-tone--alt` section: a section title at the left, a button row at the right.\n- `.ds-page-header--story`: the head of an article; its title is set in display size.\n- `.ds-article`: the story page: `.ds-article__main` (a `.ds-poster`, the text, a `.ds-pull` quote with an accent edge, and `.ds-story-nav`, the links to the previous and next story over a rule) and `.ds-article__side`, a column that is `position: sticky` under the links row. `.ds-prose--large` sets the text in `--text-large` with larger headings. `.ds-linkrow--stack` lists links one under the other.\n- `.ds-tabsrow`: the tab switch at the left and `.ds-chips` at the right, above the table they filter.\n- `.ds-chips`: filter chips after a `.ds-chips__label`: each `.ds-chip` is an outlined pill, `is-current` filled like the primary button.\n- `.ds-table--jobs`: sets a row's `.ds-table__title` in heading type.\n- `.ds-list--steps`: numbers the items of a list with large figures in `--color-heading-alt`.\n- `.ds-facts`: facts as a `dl` of `.ds-facts__row`, the term in grey at the left, the value bold at the right.\n- `.ds-footer`: the closing band on `--fill-bar-alt`: `.ds-footer__cols` with the brand and a `.ds-footer__about` line, then four columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal` under a rule.\n- `.ds-menu`: a navigation item with a drop-down. `.ds-menu__toggle` is the item, with a small caret; `.ds-menu__panel` is the panel under it, shown on hover, on focus or with `is-open`, with a `.ds-menu__title` and a `.ds-menu__list` of `.ds-menu__link` per column. Below 1000px the panel is not shown and the item is a plain link.\n- `.ds-accordion`: questions that open and close. Each `.ds-accordion__item` is a `
` with a `.ds-accordion__head` summary and a `.ds-accordion__body`. Use it for the questions under a price or a product, never for navigation.\n- `.ds-tooltip`: a dotted-underlined term holding a `.ds-tooltip__tip`, a small inverse box above it that shows on hover, on focus or with `is-open`. Use it for one term that needs a sentence.\n- `.ds-switch`: an on and off control drawn over ``. `.ds-toggle` is the label that holds it with its words, beside the tabs of a price or filter row.\n- `.ds-progress`: a thin bar; `.ds-progress__bar` with `--20`, `--40`, `--60`, `--70`, `--80`, `--100` sets how far; `.ds-progress__label` above it has a bold name and a quiet remark. Use it for a step of a flow or a share used.\n- `.ds-avatar`: initials in a circle on a fill (`--2`, `--3`, `--large`). `.ds-person` puts it beside a `.ds-person__name` and `.ds-person__meta`.\n\n## Never\n\n- `font-weight <= 700`: type is bold at most, never black.\n- `font-size >= 14px`: meta, badges and labels are the smallest text.\n- `font-size <= 84px`: the balance is the largest text.\n- `font-families <= 2`: one rounded sans-serif family, plus monospace for code and card numbers.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `uppercase-text <= 0%`: navigation, buttons and labels are in sentence case.\n- `underlined-links <= 0%`: links are told apart by colour and weight.\n- `text-shadow = none`: text is flat on every ground.\n- `border-width <= 1px`: every border is a hairline.\n- `border-radius <= 30px`: controls are 10px, panels 18px, tiles 24px and a drawn watch a little more; only pills and circles are rounder.\n- `box-shadow-blur <= 48px`: panels rest on a 12px shadow; devices, the price bar and the dialog on one of 48px.\n- `gradient-fills <= 5%`: fills are flat; only drawn screens and the drifting light are gradients.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. First decide which ground it stands on (page, panel or fill; inverse; accent) and take the text token and the buttons of that ground; do not put a primary button on an inverse or accent block, or `--color-inverse-text` on a fill. A new block of the news front is a `.ds-section--tight`, with a tone class when it is not on the page colour, and a `.ds-headrow`; a new story is another `.ds-grid__cell` with a poster on the next fill; anything that holds data is a `.ds-panel`. Compose a new poster from the given shapes and colours only, and keep headlines short enough for capitals at display size. Give new tiles and cards `.ds-reveal`, staggered with `--2` and `--3` along a row, and a hover state through `--transition`; add no animation that leaves an element hidden when it does not run. Keep corners, shadows and borders on their tokens, spacing on the `--space-*` scale, type sizes on the `--text-*` tokens (large titles through `clamp()` between two of them), and note any one-off `color-mix()` shade next to its rule.\n", "components.css": ":root {\n --size-page: 1280px;\n --size-nav: 76px;\n --size-links: 52px;\n --size-mark: 34px;\n --size-icon: 48px;\n --size-control: 40px;\n --size-dialog: 480px;\n --size-menu: 660px;\n --size-avatar: 40px;\n --size-tip: 240px;\n --size-art: 240px;\n --size-lead: 440px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 36px;\n --space-7: 56px;\n --space-8: 88px;\n --space-9: 136px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n margin: 0;\n padding: 0;\n min-height: 100vh;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-wrap {\n width: 100%;\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n\n/* tones: the three grounds a block can stand on besides the page.\n Each sets its own text colour; headings inside inherit it. */\n.ds-tone--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-tone--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-tone--alt {\n background: var(--color-surface-alt);\n color: var(--color-text);\n}\n.ds-tone--inverse .ds-section__title,\n.ds-tone--accent .ds-section__title,\n.ds-tone--inverse .ds-section__kicker,\n.ds-tone--accent .ds-section__kicker,\n.ds-tone--inverse .ds-section__lead,\n.ds-tone--accent .ds-section__lead,\n.ds-tone--inverse .ds-feature__title,\n.ds-tone--accent .ds-feature__title,\n.ds-tone--inverse .ds-feature__text,\n.ds-tone--accent .ds-feature__text,\n.ds-tone--inverse .ds-stat__figure,\n.ds-tone--accent .ds-stat__figure,\n.ds-tone--inverse .ds-stat__label,\n.ds-tone--accent .ds-stat__label {\n color: inherit;\n}\n\n/* motion. The resting state of every rule is the finished page; the\n animations below only run where scroll-driven timelines exist and\n the visitor has not asked for less motion. */\n@keyframes ds-rise {\n from {\n opacity: 0;\n transform: translateY(var(--space-7));\n }\n}\n@keyframes ds-zoom {\n from {\n opacity: 0;\n transform: translateY(var(--space-6)) scale(0.94);\n }\n}\n@keyframes ds-drift {\n from {\n transform: translate(calc(var(--space-8) * -1), 0) scale(1);\n }\n to {\n transform: translate(var(--space-8), var(--space-6)) scale(1.15);\n }\n}\n@keyframes ds-marquee {\n to {\n transform: translateX(-50%);\n }\n}\n@media (prefers-reduced-motion: no-preference) {\n @supports (animation-timeline: view()) {\n .ds-reveal {\n animation: ds-rise linear both;\n animation-timeline: view();\n animation-range: entry 0% entry 80%;\n }\n .ds-reveal--2 {\n animation-range: entry 15% entry 95%;\n }\n .ds-reveal--3 {\n animation-range: entry 30% entry 110%;\n }\n .ds-reveal--zoom {\n animation-name: ds-zoom;\n }\n }\n .ds-glow {\n animation: ds-drift 16s ease-in-out infinite alternate;\n }\n .ds-marquee__track {\n animation: ds-marquee 40s linear infinite;\n }\n}\n\n/* brand: the mark on a tile dressed like the primary button */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: inherit;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n max-width: 68ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h2);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h3);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n letter-spacing: 0;\n text-transform: var(--ui-transform);\n}\n.ds-prose p {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n color: var(--color-heading);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--more::after {\n content: \" \\203A\";\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n\n/* buttons: pills whose shadow grows on hover and that shrink a little when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-3) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n background: var(--fill-button);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: scale(0.97);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n}\n.ds-button--onaccent,\n.ds-button--onaccent:hover,\n.ds-button--onaccent.is-hover {\n background: var(--color-accent-text);\n color: var(--color-accent);\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n border-color: currentColor;\n background: transparent;\n color: inherit;\n box-shadow: none;\n}\n.ds-button--small {\n padding: var(--space-2) var(--space-4);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled,\n.ds-button.is-disabled:hover {\n border-color: transparent;\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n box-shadow: none;\n text-shadow: none;\n transform: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: var(--space-9);\n border-radius: calc(var(--radius-panel) / 2);\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text);\n font-size: var(--text-base);\n}\n.ds-form__checkbox {\n flex: none;\n width: var(--space-4);\n height: var(--space-4);\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-top: var(--space-2);\n}\n\n/* table: no fills, hairlines between rows, a small quiet head */\n.ds-table__wrap {\n max-width: 100%;\n overflow-x: auto;\n}\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-align: left;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table td {\n padding: var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__title {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n border-bottom: 0;\n}\n.ds-list__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-list__title {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text);\n}\n.ds-list__meta {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: the large rounded card */\n.ds-panel {\n min-width: 0;\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-5) var(--space-5) 0;\n}\n.ds-panel__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.8;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n vertical-align: middle;\n}\n.ds-badge--alt {\n background: color-mix(in srgb, var(--color-accent-alt) 24%, var(--color-surface));\n color: color-mix(in srgb, var(--color-accent-alt) 40%, var(--color-heading));\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));\n color: color-mix(in srgb, var(--color-success) 60%, var(--color-heading));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n color: color-mix(in srgb, var(--color-warning) 50%, var(--color-heading));\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n color: color-mix(in srgb, var(--color-danger) 70%, var(--color-heading));\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* sidebar block */\n.ds-sidebar {\n min-width: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-size: var(--text-base);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-sidebar__item.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* notice */\n.ds-notice {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: calc(var(--radius-panel) / 2);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice--error {\n border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n color: var(--color-text-muted);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__item::after {\n content: \"\\203A\";\n margin-left: var(--space-2);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n\n/* page header: the head of an inner page */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-7) 0 var(--space-6);\n}\n.ds-page-header__main {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 6vw, var(--text-h1));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n max-width: 56ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n/* dialog: shown open in the page flow on its dimmed backdrop */\n.ds-dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-7) var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n border-radius: 50%;\n background: var(--color-surface-strong);\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__body {\n padding: var(--space-3) 0 var(--space-5);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-7) var(--space-5);\n border: var(--border-width-strong) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: 50%;\n background: var(--color-fill-1);\n color: var(--color-heading);\n}\n.ds-empty__icon svg {\n width: 50%;\n height: 50%;\n}\n.ds-empty__title {\n margin: var(--space-2) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n max-width: 44ch;\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* tabs: a pill switch */\n.ds-tabs {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n max-width: 100%;\n margin: 0;\n padding: var(--space-1);\n border-radius: var(--radius-control);\n background: var(--color-surface-strong);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n border-radius: var(--radius-control);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-panel);\n color: var(--color-heading);\n box-shadow: var(--shadow-control);\n}\n\n/* sections and their heads */\n.ds-section {\n padding: var(--space-9) 0;\n}\n.ds-section--tight {\n padding: var(--space-8) 0;\n}\n.ds-section__head {\n max-width: 90ch;\n margin: 0 auto var(--space-7);\n text-align: center;\n}\n.ds-section__head--left {\n margin-left: 0;\n text-align: left;\n}\n.ds-section__kicker {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 6vw, var(--text-h1));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-wrap: balance;\n}\n.ds-section__lead {\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n text-wrap: balance;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n align-items: start;\n gap: var(--space-5);\n}\n.ds-cols--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n/* stats: big numbers. .ds-stat is the row, .ds-stat__item one figure */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n}\n.ds-stat__item {\n min-width: 0;\n}\n.ds-stat__figure {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h1), 7vw, var(--text-display));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n max-width: 24ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n\n/* glow: one soft light behind a product, drifting slowly */\n.ds-glow {\n position: absolute;\n top: 20%;\n left: 20%;\n width: 60%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: radial-gradient(closest-side, currentColor, transparent);\n opacity: 0.28;\n pointer-events: none;\n}\n\n/* marquee: a row of names set as text, sliding slowly */\n.ds-marquee {\n overflow: hidden;\n}\n.ds-marquee__track {\n display: flex;\n gap: var(--space-8);\n width: max-content;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-marquee__name {\n color: var(--color-text-muted);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n white-space: nowrap;\n}\n\n/* footer: small grey link columns */\n.ds-footer {\n padding: var(--space-8) 0 var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));\n gap: var(--space-6);\n}\n.ds-footer__about {\n max-width: 30ch;\n margin: var(--space-4) 0 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-footer__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n opacity: 0.8;\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n opacity: 1;\n text-decoration: var(--link-decoration-hover);\n}\n.ds-footer__legal {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-7) 0 0;\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 25%, transparent);\n opacity: 0.8;\n}\n\n@media (max-width: 900px) {\n .ds-cols,\n .ds-cols--side,\n .ds-cols--even {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-5);\n }\n .ds-footer__cols {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-section {\n padding: var(--space-8) 0;\n }\n}\n@media (max-width: 640px) {\n .ds-wrap {\n padding: 0 var(--space-4);\n }\n .ds-section,\n .ds-section--tight {\n padding: var(--space-7) 0;\n }\n .ds-section__head {\n margin-bottom: var(--space-6);\n }\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-2);\n }\n .ds-table {\n font-size: var(--text-small);\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-page-header {\n padding: var(--space-6) 0 var(--space-5);\n }\n .ds-marquee__track {\n gap: var(--space-6);\n }\n}\n.ds-view > .ds-wrap:last-child {\n padding-bottom: var(--space-8);\n}\n\n/* ---- components of the period beyond the checklist ---- */\n\n/* menu: a wide drop-down under a navigation item, shown on hover or focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle::after {\n content: \"\";\n display: inline-block;\n width: var(--space-2);\n height: var(--space-2);\n margin-left: var(--space-2);\n border-right: var(--border-width-strong) var(--border-style) currentColor;\n border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n transform: translateY(-35%) rotate(45deg);\n opacity: 0.6;\n}\n.ds-menu__panel {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n width: var(--size-menu);\n max-width: 92vw;\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-ui);\n text-transform: none;\n box-shadow: var(--shadow-dialog);\n opacity: 0;\n visibility: hidden;\n transform: translateY(calc(var(--space-2) * -1));\n transition: var(--transition);\n}\n.ds-menu:hover .ds-menu__panel,\n.ds-menu:focus-within .ds-menu__panel,\n.ds-menu.is-open .ds-menu__panel {\n opacity: 1;\n visibility: visible;\n transform: none;\n}\n.ds-menu__title {\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-menu__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-menu__link {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-decoration: none;\n white-space: normal;\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-menu__link small {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* accordion: questions that open and close, built on details */\n.ds-accordion {\n min-width: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n list-style: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::after {\n content: \"\";\n display: block;\n flex: none;\n width: var(--space-6);\n height: var(--space-6);\n border-radius: 50%;\n background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n linear-gradient(currentColor, currentColor) center / calc(var(--space-1) / 2) round(var(--space-6) * 0.4, var(--space-1)) no-repeat,\n var(--color-surface-strong);\n color: var(--color-heading);\n font-size: var(--text-large);\n}\n.ds-accordion__item[open] .ds-accordion__head::after,\n.ds-accordion__item.is-open .ds-accordion__head::after {\n background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n color: var(--color-link-hover);\n}\n.ds-accordion__head:focus-visible,\n.ds-accordion__head.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n max-width: 62ch;\n padding: 0 0 var(--space-5);\n color: var(--color-text);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n\n/* tooltip: a hint over its trigger, shown on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n color: inherit;\n text-decoration: underline dotted;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 50%;\n z-index: 15;\n width: max-content;\n max-width: var(--size-tip);\n margin-bottom: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-radius: calc(var(--radius-panel) / 2.5);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: 0;\n text-align: left;\n text-transform: none;\n white-space: normal;\n opacity: 0;\n visibility: hidden;\n transform: translate(-50%, var(--space-1));\n transition: var(--transition);\n pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n opacity: 1;\n visibility: visible;\n transform: translate(-50%, 0);\n}\n\n/* carousel: a row of slides, one showing, moved by scroll snapping */\n.ds-carousel__dot.is-current {\n width: var(--space-5);\n opacity: 1;\n}\n\n/* switch: an on and off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--space-7);\n height: calc(var(--space-5) + var(--space-1));\n margin: 0;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: calc(var(--space-5) - var(--space-2));\n height: calc(var(--space-5) - var(--space-2));\n border-radius: 50%;\n background: var(--color-heading);\n transform: translateY(-50%);\n transition: var(--transition);\n}\n.ds-switch:checked,\n.ds-switch.is-on {\n border-color: transparent;\n background: var(--fill-button);\n}\n.ds-switch:checked::after,\n.ds-switch.is-on::after {\n left: calc(100% - var(--space-5));\n background: var(--color-button-text);\n}\n.ds-switch:focus-visible,\n.ds-switch.is-focus {\n outline: var(--focus-ring);\n}\n.ds-switch:disabled,\n.ds-switch.is-disabled {\n background: var(--color-disabled);\n cursor: default;\n}\n\n/* progress: a bar that shows how far something is */\n.ds-progress {\n display: block;\n height: var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n border-radius: var(--radius-pill);\n background: var(--fill-button);\n}\n.ds-progress__bar--60 { width: 60%; }\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-progress__label strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* avatar: a person drawn as initials in a circle, alone or beside a name */\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n border-radius: 50%;\n background: var(--color-fill-3);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n letter-spacing: 0;\n text-decoration: none;\n}\n.ds-person {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-person__name {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-person__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* voice: what a customer says, the slide of a carousel that shows two and a bit */\n/* toggle: a switch with its label, beside the tabs of a pricing or filter row */\n.ds-toggle {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n cursor: pointer;\n}\n.ds-tabsrow:has(.ds-toggle) {\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-5);\n}\n.ds-progress--gap {\n margin: var(--space-3) 0 var(--space-5);\n}\n.ds-accordion--gap {\n margin-top: var(--space-5);\n}\n.ds-person--gap {\n margin-top: var(--space-4);\n}\n@media (max-width: 1000px) {\n .ds-menu__panel {\n display: none;\n }\n .ds-menu__toggle::after {\n display: none;\n }\n}\n\n/* ---- layout: newsroom and careers site of a consumer brand ---- */\n\n/* nav: a masthead of two rows. The first, with the large brand and the\n name of the section, scrolls away; the row of links stays at the top\n of the window */\n.ds-nav {\n position: sticky;\n top: calc(var(--size-nav) * -1);\n z-index: 10;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-nav__inner,\n.ds-nav__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__inner {\n height: var(--size-nav);\n}\n.ds-nav__row {\n min-height: var(--size-links);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n}\n.ds-nav .ds-brand {\n font-size: var(--text-h3);\n}\n.ds-nav__section {\n flex: 1;\n margin: 0;\n padding-left: var(--space-5);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n font-size: var(--text-large);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n text-transform: var(--ui-transform);\n opacity: 0.7;\n}\n.ds-nav__links {\n display: flex;\n gap: var(--space-6);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: inherit;\n font-size: var(--text-large);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n border-bottom-color: color-mix(in srgb, var(--color-bar-text) 35%, transparent);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#story:target) .ds-nav__links .ds-nav__link[href=\"#story\"],\n.ds-page:has(#jobs:target) .ds-nav__links .ds-nav__link[href=\"#jobs\"],\n.ds-page:has(#apply:target) .ds-nav__links .ds-nav__link[href=\"#apply\"] {\n border-bottom-color: currentColor;\n}\n.ds-nav__date {\n margin: 0;\n font-family: var(--font-body);\n font-size: var(--text-small);\n white-space: nowrap;\n opacity: 0.7;\n}\n\n/* hero: the lead story, a full-bleed block of the accent colour with the\n headline at the left and flat art at the right */\n.ds-hero {\n padding: var(--space-8) 0;\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-hero__inner {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n align-items: stretch;\n gap: var(--space-7);\n}\n.ds-hero__copy {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n}\n.ds-hero__kicker,\n.ds-kicker {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2) var(--space-3);\n margin: 0 0 var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-kicker {\n color: var(--color-heading-alt);\n}\n.ds-kicker__date {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-transform: none;\n}\n.ds-hero__kicker .ds-badge {\n background: var(--color-accent-text);\n color: var(--color-accent);\n}\n.ds-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: clamp(var(--text-h2), 8.4vw, var(--text-display));\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-wrap: balance;\n}\n.ds-hero__lead {\n max-width: 38ch;\n margin: var(--space-5) 0 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin-top: auto;\n padding-top: var(--space-6);\n}\n\n/* poster: flat colour art made of a few plain shapes */\n.ds-poster {\n position: relative;\n min-height: var(--size-lead);\n border-radius: var(--radius-page);\n background: color-mix(in srgb, currentColor 10%, transparent);\n overflow: hidden;\n}\n.ds-poster--flip {\n transform: scaleX(-1);\n}\n.ds-shape {\n position: absolute;\n display: block;\n background: currentColor;\n}\n.ds-shape--disc {\n bottom: -18%;\n left: 8%;\n height: 78%;\n aspect-ratio: 1;\n border-radius: 50%;\n}\n.ds-shape--half {\n top: 0;\n right: 10%;\n height: 34%;\n aspect-ratio: 2;\n border-radius: 0 0 50vw 50vw;\n}\n.ds-shape--bar {\n top: 14%;\n right: 12%;\n bottom: 0;\n width: 16%;\n border-radius: 50vw 50vw 0 0;\n}\n.ds-shape--ring {\n top: 12%;\n left: 12%;\n height: 46%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: radial-gradient(closest-side, transparent 71%, currentColor 73%);\n}\n.ds-shape--block {\n right: 0;\n bottom: 0;\n width: 46%;\n height: 46%;\n border-radius: var(--radius-page) 0 0 0;\n}\n.ds-shape--accent { color: var(--color-accent); }\n.ds-shape--page { color: var(--color-page); }\n.ds-shape--soft { opacity: 0.35; }\n\n/* ticker: one line of short news sliding under the lead story */\n.ds-marquee {\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-marquee__name {\n font-size: var(--text-large);\n text-transform: var(--heading-transform);\n}\n\n/* grid: story cards, three to a row, the first two columns wide; each\n has flat art on one of the four fills */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6) var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n color: var(--color-text);\n text-decoration: none;\n}\n.ds-grid__cell--wide {\n grid-column: span 2;\n}\n.ds-grid__art {\n min-height: var(--size-art);\n margin-bottom: var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--color-fill-1);\n color: var(--color-heading);\n transition: var(--transition);\n}\n.ds-grid__cell:nth-child(4n + 2) .ds-grid__art { background: var(--color-fill-2); }\n.ds-grid__cell:nth-child(4n + 3) .ds-grid__art { background: var(--color-fill-3); }\n.ds-grid__cell:nth-child(4n + 4) .ds-grid__art { background: var(--color-fill-4); }\n.ds-grid__cell:hover .ds-grid__art,\n.ds-grid__cell.is-hover .ds-grid__art {\n transform: translateY(calc(var(--space-2) * -1));\n box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-wrap: balance;\n}\n.ds-grid__cell--wide .ds-grid__title {\n font-size: var(--text-h2);\n}\n.ds-grid__text {\n margin: var(--space-2) 0 0;\n}\n\n/* section head with a link at its right */\n.ds-headrow {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4);\n margin-bottom: var(--space-6);\n}\n.ds-headrow .ds-section__head {\n margin: 0;\n}\n\n/* stats: figures over a strong rule */\n.ds-stat__item {\n padding-top: var(--space-4);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-tone--inverse .ds-stat__label,\n.ds-tone--accent .ds-stat__label {\n opacity: 0.8;\n}\n\n/* press list: dated rows */\n.ds-list--dated .ds-list__item {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);\n gap: var(--space-4);\n align-items: baseline;\n}\n.ds-list--dated .ds-list__meta {\n margin: 0;\n}\n\n/* call to action: a band with the title at the left, the action right */\n.ds-cta {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-6);\n}\n.ds-cta .ds-section__title {\n max-width: 14ch;\n}\n\n/* article: very large reading type beside a narrow column */\n.ds-page-header--story .ds-page-header__title {\n max-width: 16ch;\n font-size: clamp(var(--text-h2), 8vw, var(--text-display));\n letter-spacing: var(--display-tracking);\n}\n.ds-article {\n display: grid;\n grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);\n align-items: start;\n gap: var(--space-8);\n}\n.ds-article__main {\n min-width: 0;\n}\n.ds-article .ds-poster {\n min-height: var(--size-art);\n margin-bottom: var(--space-6);\n background: var(--color-fill-1);\n color: var(--color-heading);\n}\n.ds-prose--large {\n font-size: var(--text-large);\n}\n.ds-prose--large h1 {\n font-size: clamp(var(--text-h2), 6vw, var(--text-h1));\n}\n.ds-prose--large h2 {\n font-size: var(--text-h2);\n}\n.ds-prose--large .ds-prose__lead {\n font-size: var(--text-h3);\n}\n.ds-pull {\n margin: var(--space-6) 0;\n padding-left: var(--space-5);\n border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-article__side {\n position: sticky;\n top: calc(var(--size-links) + var(--space-5));\n}\n.ds-linkrow--stack {\n flex-direction: column;\n}\n.ds-story-nav {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-top: var(--space-7);\n padding-top: var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* jobs: filter chips above the table */\n.ds-tabsrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-5);\n}\n.ds-chips {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-chips__label {\n margin-right: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-chip {\n display: inline-block;\n padding: var(--space-1) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-chip:hover,\n.ds-chip.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-chip.is-current {\n border-color: transparent;\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-table--jobs .ds-table__title {\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-list--steps {\n counter-reset: ds-step;\n}\n.ds-list--steps .ds-list__item {\n position: relative;\n padding-left: var(--space-7);\n counter-increment: ds-step;\n}\n.ds-list--steps .ds-list__item::before {\n content: counter(ds-step);\n position: absolute;\n left: 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: 1;\n}\n.ds-facts {\n margin: 0;\n}\n.ds-facts__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-facts__row:last-child {\n border-bottom: 0;\n}\n.ds-facts__row dt {\n color: var(--color-text-muted);\n}\n.ds-facts__row dd {\n margin: 0;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n\n@media (max-width: 900px) {\n .ds-hero {\n padding: var(--space-7) 0;\n }\n .ds-hero__inner,\n .ds-article {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-6);\n }\n .ds-poster {\n min-height: var(--size-art);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-article__side {\n position: static;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__inner,\n .ds-nav__row {\n padding: 0 var(--space-4);\n }\n .ds-nav__section {\n padding-left: var(--space-3);\n font-size: var(--text-ui);\n }\n .ds-nav__inner .ds-button {\n display: none;\n }\n .ds-nav__links {\n gap: var(--space-5);\n overflow-x: auto;\n }\n .ds-nav__link {\n font-size: var(--text-ui);\n }\n .ds-nav__date {\n display: none;\n }\n .ds-hero__title,\n .ds-page-header--story .ds-page-header__title,\n .ds-stat__figure {\n letter-spacing: var(--heading-tracking);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid__cell--wide {\n grid-column: auto;\n }\n .ds-grid__art {\n min-height: calc(var(--size-art) * 0.7);\n }\n .ds-list--dated .ds-list__item {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-1);\n }\n .ds-pull {\n font-size: var(--text-h3);\n }\n .ds-stat__item {\n padding-top: var(--space-3);\n }\n}\n\n/* phone: a tooltip takes the width of its paragraph, so it never leaves the window */\n@media (max-width: 640px) {\n .ds-page :has(> .ds-tooltip) {\n position: relative;\n }\n .ds-tooltip {\n position: static;\n }\n .ds-tooltip__tip {\n right: 0;\n left: 0;\n width: auto;\n max-width: none;\n transform: translateY(var(--space-1));\n }\n .ds-tooltip:hover .ds-tooltip__tip,\n .ds-tooltip:focus .ds-tooltip__tip,\n .ds-tooltip:focus-within .ds-tooltip__tip,\n .ds-tooltip.is-open .ds-tooltip__tip {\n transform: none;\n }\n}\n\n/* phone navigation: the four sections spread from edge to edge of the bar */\n@media (max-width: 640px) {\n .ds-nav__links {\n flex: 1;\n justify-content: space-between;\n gap: var(--space-3);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: modern brand newsroom specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n

Newsroom

\n 42 open roles\n
\n
\n \n

Tuesday, 7 October 2025

\n
\n
\n\n
\n
\n
\n
\n

Announcement 7 October 2025

\n

Every phone we ever made can now be repaired.

\n

Parts, tools and manuals for eleven years of devices go on sale today, at cost.

\n
\n Read the story\n Join the repair team\n
\n
\n
\n
\n
\n\n
\n
    \n
  • Repair shops open in nine more cities
  • Phone Mini returns in spring
  • Annual report: packaging is now plastic-free
  • Design school places double for 2026
  • Watch software 5 is out today
  • Trade-in passes two million devices
  • Repair shops open in nine more cities
  • Phone Mini returns in spring
  • Annual report: packaging is now plastic-free
  • Design school places double for 2026
  • Watch software 5 is out today
  • Trade-in passes two million devices
    • \n
\n
\n\n
\n
\n
\n
\n

More stories

\n
\n All stories\n
\n
\n \n \n

Product 2 October 2025

\n

The watch that learned to wait

\n

Why the new sport mode says nothing at all until you have finished the length.

\n \n \n \n

Company 29 September 2025

\n

Nine cities get a repair shop

\n

Screens and batteries changed while you have a coffee.

\n \n \n \n

Design 24 September 2025

\n

A typeface for small screens

\n

Drawn for the wrist first and everything else second.

\n \n \n \n

Environment 18 September 2025

\n

The box lost its plastic

\n

Every wrap, tray and tab is now paper.

\n \n \n \n

People 11 September 2025

\n

Forty apprentices, one workshop

\n

A year inside the repair programme.

\n \n
\n
\n
\n\n
\n
\n
\n

The year so far

\n

Made to last, counted.

\n
\n
\n

2.1m

devices repaired instead of replaced

\n

11 yrs

of models with parts on the shelf

\n

94%

recycled aluminium in every case

\n
\n
\n
\n\n
\n
\n
\n
\n
\n

Press releases

\n
\n Archive\n
\n \n
\n
\n
\n

Media contact

Journalists only
\n
\n

The press office answers on working days from 08:00 to 18:00, Lisbon time.

\n
\n Write to the press office\n Images and logos\n
\n
\n
\n

Results day. The annual report is published on 12 November at 08:00.

\n
\n
\n
\n\n
\n
\n

Come and build the next one.

\n
\n See 42 open roles\n Send an open application\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Newsroom
    3. \n
  3. Stories
    4. \n
\n

Every phone we ever made can now be repaired.

\n

7 October 2025. Six minutes to read.

\n
IVInes VargaNewsroom, repairs and materials
\n
\n
\n Copy the link\n
\n
\n
\n
\n
\n
\n

A drawer full of old phones

\n

Most of us have one. From today, each of ours can be opened, mended and used again, by you or by us.

\n

Parts for every model since 2014 are on the shelf: screens, batteries, cameras and the small grey gasket that keeps the rain out. Each kit carries a code such as KIT-P14-BAT and a manual written for people who have never held the tool.

\n

What it costs

\n

Parts are sold at what they cost us to make and send. A battery kit for a five-year-old phone is 29.

\n

What is in a kit

\n
    \n
  • The part, tested, with a two-year guarantee.
    • \n
  • Every screw and seal you will disturb on the way in.
    • \n
  • A prepaid bag to send the old part back for recycling.
    • \n
\n
\n

A phone you can mend is a phone you keep.

\n
\n Previous: The box lost its plastic\n Next: Nine cities get a repair shop\n
\n
\n \n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Careers
    3. \n
  3. Open roles
    4. \n
\n

42 open roles.

\n

In design, engineering, the shops and the workshop. Most can be done from anywhere in Europe.

\n
\n
\n Send an open application\n
\n
\n\n
\n \n \n \n
\n\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
RoleTeamPlaceOpeningsStatus
Product designer, repairsDesignLisbon or remote2Open
Firmware engineer, watchEngineeringRotterdam3Open
Shop leadShopsLisbon1Closing soon
Writer, newsroomCommunicationsRemote1Open
Supply plannerOperationsRotterdam2Closing soon
Materials researcherEngineeringRotterdam1Closed
\n
\n
\n
\n 1 to 6 of 42 roles\n \n
\n
\n
\n\n
\n
\n
\n

How we hire

About three weeks
\n
\n
    \n
  1. You apply

    A person reads every application within five working days

    2. \n
  2. We talk

    Forty minutes with the person you would work for

    3. \n
  3. A paid day

    You work with the team on something real

    4. \n
\n
\n
\nIs the paid day really paid?\n

Yes, at the day rateOne working day of the salary the role is advertised at. of the role, whatever we decide.

\n
\n
\nDo you help with a move?\n

For Lisbon and Rotterdam, with the paperwork and the first month of rent.

\n
\n
\nCan I apply for two roles?\n

Yes. One person reads both and tells you which fits.

\n
\n
\n
\n
\n
\n
\n \n

No saved roles

\n

Roles you save appear here, and we tell you before they close.

\n Browse all teams\n
\n
\n New\n Part time\n Full time\n Open\n Closing soon\n Closed\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Careers
    3. \n
  3. Product designer, repairs
    4. \n
\n

Product designer, repairs.

\n

Design the kits, the manuals and the tools that let anyone mend a phone.

\n
\n
\n All open roles\n
\n
\n
\n
\n

Your application

\n
\n

Step 2 of 3Your work

\n\n
\n
\n

No cover letter needed. Three sentences on why this role is enough.

\n

Not sent. The link to your work does not open.

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n The address needs to start with its protocol.\n
\n
\n \n \n We read every application. You hear from us within five working days.\n
\n \n
\n \n Save for later\n \n \n
\n
\n
\n
\n
\n
\n

The role

Open
\n
\n
\n
Team
Design
\n
Place
Lisbon or remote
\n
Hours
Full time, 36 a week
\n
Salary
58,000 to 72,000
\n
Closes
31 October 2025
\n
\n
\n
\n
\n
\n

Withdraw your application?

×
\n

What you have written is deleted. You can apply again until the role closes.

\n
\n Withdraw\n Keep it\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.modern-product.blog.s06.p05.t03.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"modern-product\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-mp-6535\",\n \"short\": \"v1-mp-6535\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f5f5f7;\n --color-canvas: #f5f5f7;\n --color-surface: #ffffff;\n --color-surface-alt: #e8e8ed;\n --color-surface-strong: #d9d9df;\n --color-bar: #f5f5f7;\n --color-bar-text: #2d2d30;\n --color-bar-alt: #e8e8ed;\n --color-bar-alt-text: #66666b;\n --color-inverse: #1c1c1e;\n --color-inverse-text: #ededf0;\n --color-text: #333336;\n --color-text-muted: #707075;\n --color-heading: #1c1c1e;\n --color-heading-alt: #707075;\n --color-link: #0066cc;\n --color-link-quiet: #4a4a4f;\n --color-link-visited: #4b5fa8;\n --color-link-hover: #004499;\n --color-link-active: #003377;\n --color-border: #d0d0d5;\n --color-border-strong: #8a8a8f;\n --color-border-muted: #e5e5ea;\n --color-accent: #0071e3;\n --color-accent-text: #ffffff;\n --color-accent-alt: #bf4800;\n --color-fill-1: #e3e9f2;\n --color-fill-2: #ffffff;\n --color-fill-3: #e9e4dc;\n --color-fill-4: #dcdce2;\n --color-button: #0071e3;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #e8e8ed;\n --color-button-secondary-text: #1c1c1e;\n --color-input: #ffffff;\n --color-input-text: #1c1c1e;\n --color-input-border: #c7c7cc;\n --color-disabled: #e5e5ea;\n --color-disabled-text: #a5a5aa;\n --color-danger: #c9252d;\n --color-danger-surface: #fbeaea;\n --color-success: #2a8540;\n --color-warning: #b25e00;\n --color-notice: #e8e8ed;\n --color-notice-text: #333336;\n --color-focus: #0071e3;\n --color-shadow: rgb(0 0 0 / 0.08);\n --color-overlay: rgb(50 50 55 / 0.48);\n}\n\n/* @part type */\n:root {\n --font-body: Nunito, \"Varela Round\", ui-rounded, \"SF Pro Rounded\", \"Arial Rounded MT Bold\", \"Helvetica Neue\", sans-serif;\n --font-heading: Nunito, \"Varela Round\", ui-rounded, \"SF Pro Rounded\", \"Arial Rounded MT Bold\", \"Helvetica Neue\", sans-serif;\n --font-ui: Nunito, \"Varela Round\", ui-rounded, \"SF Pro Rounded\", \"Arial Rounded MT Bold\", \"Helvetica Neue\", sans-serif;\n --font-mono: \"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 18px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 22px;\n --text-display: 84px;\n --text-h1: 54px;\n --text-h2: 34px;\n --text-h3: 21px;\n --line-body: 1.6;\n --line-heading: 1.3;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 600;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: -0.3px;\n --display-tracking: -2px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 10px;\n --radius-panel: 18px;\n --radius-pill: 999px;\n --radius-page: 24px;\n --shadow-panel: 2px 4px 12px var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: 0 4px 16px var(--color-shadow);\n --shadow-control-pressed: inset 0 1px 3px var(--color-shadow);\n --shadow-dialog: 0 0 0 1px var(--color-border-muted), 0 12px 48px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar) 80%, transparent);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 90%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 4px solid color-mix(in srgb, var(--color-focus) 30%, transparent);\n --transition: color 0.18s ease-in-out, background-color 0.18s ease-in-out, border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out, opacity 0.18s ease-in-out, transform 0.18s ease-in-out, visibility 0.18s ease-in-out;\n --backdrop-blur: 24px;\n}\n" } }