{
  "id": "v1-ci-1528",
  "long_id": "v1.cinematic.landing.s01.p05.t02.u08",
  "name": "Cinematic tour site",
  "era": {
    "slug": "cinematic",
    "code": "ci",
    "name": "Cinematic",
    "years": [
      2015,
      2026
    ],
    "description": "The immersive site of 2015 to 2026 for a band, a film, a fashion house or a game: one scene to a screen, edge to edge and mostly dark, enormous condensed capitals set tight, almost no chrome, thin rules and small tracked labels, one colour used like a light."
  },
  "archetype": "landing",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "This is the site of a band on tour between 2015 and 2026: every screen opens with a dark stage drawn edge to edge, the tour's name in enormous condensed capitals over it, half of it only an outline, and almost no chrome, only a thin line of small tracked labels across the top. Below the picture the page is black with a fine grain, tour dates are a huge ruled list, numbers are set as graphics and one hot colour is used like a stage lamp: in the beams, under the current navigation item, on the one badge. It was the common look of official artist, tour and festival sites in the second half of the 2010s and the first half of the 2020s.",
  "url": "https://chrono.skin/s/v1-ci-1528",
  "preview_url": "https://chrono.skin/s/v1-ci-1528/specimen.html",
  "files": {
    "STYLE.md": "# Cinematic tour site\n\n## Summary\n\nThis is the site of a band on tour between 2015 and 2026: every screen opens with a dark stage drawn edge to edge, the tour's name in enormous condensed capitals over it, half of it only an outline, and almost no chrome, only a thin line of small tracked labels across the top. Below the picture the page is black with a fine grain, tour dates are a huge ruled list, numbers are set as graphics and one hot colour is used like a stage lamp: in the beams, under the current navigation item, on the one badge. It was the common look of official artist, tour and festival sites in the second half of the 2010s and 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` (1320px) wide with `--space-6` side padding (`--space-4` on a phone). Sections pad themselves with `--space-9` (128px), `--tight` and scene sections with `--space-8`.\n- Navigation is `.ds-nav`, one line `--size-nav` (72px) tall laid over the top of the scene that opens every view: brand at the left, four label links at the right, then the word Menu (a `.ds-menu` that drops a list in the corner) and a small ghost button. A hairline of the scene's text colour runs under it.\n- The home view stacks: `.ds-hero`, a scene `--size-scene` (860px) tall with the kicker, the two-line title and a foot of three columns (lead, two buttons, a countdown `.ds-progress`); a `.ds-ticker` of city names; a section with the `.ds-list` of the next five nights; the `.ds-stat` row; a scene section holding the `.ds-carousel` of records; the `.ds-grid` of four cells; the `.ds-band`; the footer with the site's name as one outlined word.\n- Inner pages have no hero. Each opens with `.ds-strip`, a low block on the bar fill `--size-strip` (420px) tall that carries the breadcrumb and the `.ds-page-header` (large title, one line of text, at most two buttons at the right, all in the scene's text colour). A strip holds either a real small picture (the tour's is a bank of lamps, `.ds-scene--lamps`) or type alone on the grain with one outlined word, never a wash of colour; then `.ds-main` with `.ds-cols`: a narrow column with the `.ds-sidebar` and a wide one (1 to 3), `--wide` (5 to 7) or `--even`. Tabs sit at the top of the wide column, above the notices and the table.\n- Views. The specimen is the site of a band on tour. `home` is the landing page. `tour` has the legs of the tour as a sidebar with two progress lines and an empty state for festivals, then tabs, two notices, the table of dates with badges and a tooltip, and the pagination. `records` shows one record: its sleeve, a panel of details, the four players as avatars, the running order, notes as prose, links and an accordion of formats. `club` is the sign-up: the form with its error and all four buttons, a panel of three switches and the open dialog.\n- Below 1100px the columns stack and the grid and the figures go two by two; below 800px the navigation becomes two rows (links scroll sideways), the hero's foot stacks, a list row keeps only date, city and badge, and a wide table scrolls inside `.ds-table__wrap`; below 520px the grid is one column. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (dots of the LED screen, hairline gaps), `--space-2` 8px (label to text), `--space-3` 12px (between buttons, table cells), `--space-4` 16px (list rows, panel padding), `--space-5` 24px (cell padding, column gaps in rows), `--space-6` 32px (page gutter, stack gap), `--space-7` 48px (section head to content, columns), `--space-8` 80px (tight sections), `--space-9` 128px (sections). `--space-track` 2px is the tracking of labels.\n- Other sizes: `--size-mark` 28px, `--size-control` 44px, `--size-dialog` 480px, `--size-sleeve` 420px (a record cover, and the least height of a grid cell less `--space-7`), `--size-date` 132px (the date column of the list).\n- On a phone (800px and below) `.ds-nav__inner` has two rows: the `.ds-brand` and `.ds-nav__actions` (the `.ds-menu` and the button) above, `.ds-nav__links` below on a hairline, one row that scrolls sideways without a scrollbar; the current link keeps its accent mark. At 520px and below the button in `.ds-nav__actions` is not shown, the `.ds-menu` stays, and the links spread over the row instead of scrolling.\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 five 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`. A scene (the picture of a screen) stands on the bar: `--fill-bar` or `--color-bar`, and carries only `--color-bar-text`. The footer and other quiet strips stand on `--fill-bar-alt` and carry `--color-bar-alt-text`. The inverted block (`--fill-inverse`, class `.ds-band`) carries only `--color-inverse-text`. Accent elements (`--fill-accent`: badges) carry `--color-accent-text`.\n- Pictures are drawn, never loaded. In a scene `--color-bar` is the darkness and every solid shape (a crowd, a ridge, a figure, an object) is a silhouette in it; `--color-accent` is the light (a beam, the sun, a lamp); `--color-accent-alt` is the second light (a flare, a rim, a far lamp); `--color-fill-1` to `--color-fill-4` are the tones between dark and light (haze, sky, walls, far hills); `--color-bar-text` is the hottest point of a light and the colour of an outlined word. The grain or scan lines of a scene come from `--fill-bar`, so a surface set changes the texture of every picture and a palette changes its light.\n- Nothing assumes that a palette is dark. The scene is as dark as `--color-bar`, the page as dark as `--color-page`; `--color-inverse` is the opposite of the page.\n- `--color-fill-1` to `--color-fill-4` are also the grounds of grid cells and carry `--color-text` and `--color-heading`; they never carry `--color-inverse-text` or `--color-bar-text` as running 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 a scene only `.ds-button--onscene` (fill `--color-bar-text`, text `--color-bar`) and `.ds-button--ghost`. On the inverted block only `.ds-button--inverse` (fill `--color-inverse-text`, text `--color-inverse`) and `.ds-button--ghost`. The ghost button takes outline and text from the block it stands on. The destructive button is `--color-danger` with `--color-button-text`.\n- `--color-heading-alt` is the colour of kickers, numbers used as labels, panel and sidebar titles and h3 in prose. On a scene a kicker inherits `--color-bar-text`.\n- The label is the second voice of the era: `--font-ui` at `--text-small` or `--text-ui`, `--ui-transform`, tracked by `--space-track` (a layout token, 2px; the type vocabulary has no positive tracking for labels). Dates, timecodes, coordinates, prices and counts are labels in `--font-mono`.\n- The default badge is `--fill-accent` with `--color-accent-text`. Status badges are never fills: the status colour (`--color-success`, `--color-warning`, `--color-danger`) is text, outline and a small dot on a transparent ground, so they hold on any palette. `.ds-badge--quiet` is an outline in `--color-border`.\n- `--color-notice` with `--color-notice-text` is the information notice, with a left edge of `--border-width-strong` in `--color-accent`; the error notice is `--color-danger` on `--color-danger-surface`.\n- Borders are hairlines: `--border-width` in `--color-border` between rows and around panels, `--color-border-strong` above a table or list and around the dialog, `--color-border-muted` inside boxes, `--color-input-border` around fields. `--border-width-strong` is the mark of the current item (navigation, tabs, pagination), the progress line and the notice edge.\n- Radii: `--radius-control` for buttons, fields, tabs and carousel arrows; `--radius-panel` for panels, notices, the dialog, the empty state, textareas and tooltips; `--radius-pill` for badges, switches and small avatars; `--radius-page` for the largest boxes (stills, plates, sleeves, grid cells). Shapes inside a drawing use percentages and `clip-path`, never a radius token, so a surface set cannot bend a silhouette.\n- Shadows: `--shadow-panel` on panels and grid cells, `--shadow-control` on buttons and the brand tile, `--shadow-control-hover` on hovered buttons and cells, `--shadow-dialog` on the dialog and an open menu. `--backdrop-blur` blurs what lies behind the dialog's veil and behind an open overlay menu.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: lights and haze are a light token mixed with `transparent` at 20 to 90%; hairlines on a scene are `--color-bar-text` at 20 to 30%; outlined words are a text stroke of `--border-width` in the block's text colour at 26 to 70%; the display size steps down as `--text-display` times 0.7, 0.46 and 0.3 at 1100px, 800px and 520px, and `--text-h1` times 0.6 and 0.5, so every type set shrinks in proportion to itself. Opacity 0.6 to 0.86 dims secondary text on scenes.\n- Here: the page is a warm near-black `#12100d`, scenes are darker still, text is bone white, and the one colour is the sand gold `--color-accent`, with an ember orange `--color-accent-alt` for flares and far lamps. The fills are four browns from umber to dry earth. The primary button is bone with dark text; the inverted block is bone.\n- Three families. `--font-heading` is a high-contrast serif (Playfair Display, Bodoni Moda, Didot, Bodoni 72; the references used commercial display faces) for titles and figures, in capitals at weight 400. `--font-body` and `--font-ui` are one geometric sans (Avenir Next, Jost, Century Gothic): text at `--text-base` 16px and `--line-body` 1.7, labels at 11px and weight 500. `--font-mono` (Courier Prime, Courier New) sets dates, timecodes and counts.\n- `--text-display` 168px with `--line-display` 0.9 and `--display-tracking` -3px (the film's title); `--text-h1` 84px (page titles, figures, the band's sentence); `--text-h2` 44px (section titles, the statement, the overlay menu); `--text-h3` 22px (titles of notes, panels, table rows, the dialog); `--text-large` 22px (leads).\n- Surface: pill buttons, fields and tabs (`--radius-control` 999px), panels almost square (2px), stills with 4px corners, hairlines only (both border widths are 1px). No resting shadows; the dialog and the open menu cast a wide soft one, a hovered button a small one. `--fill-page` is a slow vignette, `--fill-bar` carries a fine film grain that lies over every still, `--fill-bar-alt` and `--fill-panel` are translucent and `--backdrop-blur` is 14px, so the dialog's veil and the overlay menu blur what is behind them. Links are not underlined until hovered. `--transition` is slow, 0.5s.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets font, text colour and `--fill-page`.\n- `.ds-wrap`: the centred content column, `--size-page` wide.\n- `.ds-label`: the small tracked line. `--muted`, `--accent` (in `--color-heading-alt`), `--mono` for figures.\n- `.ds-brand`: the site's mark and name, 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, set as a label. Name and mark are placeholders for the installing project's own name and logo.\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; `--arrow` is a label led by a hairline that grows on hover, used for \"all dates\" and \"read\". `.ds-linkrow` lays links in a row.\n- `.ds-button`: a flat box with a tracked label. Variants: `--secondary`, `--danger` (destructive actions only), `--onscene` (scenes), `--inverse` (the inverted block), `--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-badge`: small tracked label on `--fill-accent`. `--quiet` outlined. Status variants: `--success`, `--warning`, `--danger`, each an outline with a dot. `.ds-badgerow` for several.\n- `.ds-notice`: a ruled message with a strong left edge; `--error` in the danger colours. `.ds-notice__title` is the tracked lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` labels; `is-current` is underlined with `--color-accent`, `is-disabled` is grey. Page numbers are written with two digits.\n- `.ds-breadcrumb`: a label trail of `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a block of `--color-overlay` (blurring by `--backdrop-blur`) centring `.ds-dialog__box`, a panel with a strong outline and `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, a drawn cross `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions` with the main action first.\n- `.ds-empty`: a hairline box with a short accent rule (`.ds-empty__icon`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-switch`: an on/off control over a checkbox: `.ds-switch__input` (invisible, covers the row), `.ds-switch__track` with its knob, `.ds-switch__label` with an optional `small` line. On is `is-on` or `:checked`: outline and knob in `--color-accent`.\n- `.ds-tooltip`: a dotted-underlined trigger holding `.ds-tooltip__tip`, a small inverted box shown on hover, focus or `is-open`; `--end` aligns it to the right edge.\n- `.ds-avatar`: a person drawn as a backlit head and shoulders: dark shapes in `--color-bar` on a lit copy of themselves, a light in the corner, a fill behind. `--2` is lit from the left with `--color-accent-alt`, `--3` from above with `--color-bar-text`; `--large` doubles it. `.ds-person` sets one beside `.ds-person__name` and `.ds-person__role`.\n- `.ds-progress`: `.ds-progress__head` (a label and a `.ds-progress__value` in mono) over `.ds-progress__bar`, a `<progress>` drawn as a hairline of `--border-width-strong` with the value in `--color-accent`.\n- `.ds-accordion`: ruled `<details>`: `.ds-accordion__item` with a `.ds-accordion__head` label that ends in a plus (a cross when open) and a `.ds-accordion__body`.\n- `.ds-band`: the inverted block. Only `.ds-button--inverse` and `.ds-button--ghost` inside.\n- `.ds-stack`: stacks blocks one step apart; `--tight` closer. `.ds-main` is the body of an inner page. `.ds-facts` is a `dl` of label and value pairs inside a panel.\n- `.ds-scene`: the picture. A positioned box on `--fill-bar` in `--color-bar-text` whose first children are empty layers: `.ds-scene__light` (four beams from lamps above the frame and the glow of the stage), `.ds-scene__haze` (smoke in two fills), `.ds-scene__rig` (the truss under the navigation and two towers of lamps), `.ds-scene__stage` (the edge of the stage and the gear on it in silhouette: stacks, microphones, monitors, drums, a keyboard), `.ds-scene__screen` (a dot matrix over everything, like a LED wall), `.ds-scene__shade` (a vignette and the dark foot that carries text) and `.ds-scene__word` (one enormous outlined word). Variants are other pictures: `--back` (a column of light from below, behind the records) and `--lamps` (a framed bank of eighteen lamps on its stand, for a strip; it needs only the light layer). Use all layers for the hero. A scene with no layers but `.ds-scene__word` is type alone on the grain.\n- `.ds-nav`: the thin line over the scene. `.ds-nav__inner` holds the brand, `.ds-nav__links` of `.ds-nav__link` (the current one fully bright with an accent mark under it, `is-current`) and `.ds-nav__actions`. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-menu`: a `<details>` in the navigation: `.ds-menu__toggle` (two short lines and the word) and `.ds-menu__list` of `.ds-menu__item`, a hairline box that drops in the corner. Closed until clicked.\n- `.ds-hero`: the full scene of the home view: `.ds-hero__side` (a vertical label on the left edge), `.ds-hero__kicker` (a badge and two mono labels), `.ds-hero__title` of two lines, the second with `.ds-hero__outline`, and `.ds-hero__foot` with `.ds-hero__lead`, `.ds-hero__actions` and `.ds-hero__next`. One per site.\n- `.ds-ticker`: a strip of names on `--fill-bar-alt`, each `.ds-ticker__item` followed by a small accent square; it is cut off at the right edge.\n- `.ds-section`: a block of the page; `--tight`, `--scene` (padding for a scene used as a section). `.ds-section__head` holds a `.ds-section__kicker`, the `.ds-section__title` and an arrow link at the right.\n- `.ds-list`: the huge ruled list of dates. Each `.ds-list__item` is a row of `.ds-list__date` (day in the heading face, month as a `small` label), `.ds-list__title` (the city), `.ds-list__meta`, a status badge and an arrow link; a hovered row is washed with the accent from the left.\n- `.ds-stat`: the row of four figures between two hairlines; each `.ds-stat__item` is a `.ds-stat__figure` over a `.ds-stat__label`, parted by vertical hairlines.\n- `.ds-carousel`: one record to a slide: `.ds-carousel__track` of `.ds-carousel__slide` (a `.ds-sleeve` beside `.ds-carousel__copy` with an outlined `.ds-carousel__number`, `.ds-carousel__title`, `.ds-carousel__text` and a button), then `.ds-carousel__nav` with a count, `.ds-carousel__dots` of `.ds-carousel__dot` and two `.ds-carousel__arrow`.\n- `.ds-sleeve`: a square record cover drawn from the scene colours (grooves around an accent disc); `--2` a sun over lines, `--3` diagonal bars, `--4` a turning cone. `.ds-sleeve__label` sets two mono labels across its top.\n- `.ds-grid`: four tall cells joined by hairlines, one on each fill and each lit from a different corner; a `.ds-grid__cell` is a link with a number label at the top and `.ds-grid__title` and `.ds-grid__text` at the bottom.\n- `.ds-strip`: the low block that opens an inner page; it holds a `.ds-wrap` with the breadcrumb and the page header, over one small picture or over the grain and an outlined word.\n- `.ds-page-header`: head of an inner page, inside `.ds-strip`: `.ds-page-header__main` with the `.ds-page-header__title` and one line of `.ds-page-header__text`; `.ds-page-header__actions` at the right with `--onscene` and `--ghost` buttons.\n- `.ds-cols`: narrow and wide column; `--wide`, `--even`.\n- `.ds-sidebar`: `.ds-sidebar__title` label and a `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows in the heading face with a `.ds-sidebar__count`; the current row is bright with an accent rule under it.\n- `.ds-tabs`: labels on a hairline; the current `.ds-tabs__tab` (`is-current`) is underlined with the accent.\n- `.ds-table`: a ruled table: a label head under a strong rule, hairlines between rows, no vertical lines; `is-hover` tints a row. `.ds-table__num` right-aligns figures in mono; `.ds-table__title` is the row's link in the heading face. Wrap it in `.ds-table__wrap`; `.ds-table__foot` holds a count and the pagination.\n- `.ds-panel`: a hairline box: `.ds-panel__head` with a label `.ds-panel__title` and an optional badge, and `.ds-panel__body`; `.ds-panel__text` is a paragraph.\n- `.ds-tracks`: a numbered running order: `.ds-tracks__item` rows of `.ds-tracks__number`, `.ds-tracks__title` and `.ds-tracks__time`. `.ds-people` lays four `.ds-person` two by two.\n- `.ds-footer`: the closing strip on `--fill-bar-alt`: `.ds-footer__cols` with the brand and a `.ds-footer__about` line, three columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__word`, the site's name as one outlined word in display size; `.ds-footer__legal`.\n\n## Never\n\n- `font-size >= 11px`: labels are the smallest text.\n- `font-size <= 168px`: the film's title is the largest text.\n- `font-families <= 3`: a display serif, one sans-serif for reading and labels, one monospace for figures.\n- `font-weight <= 600`: the display face is set at regular weight.\n- `line-height <= 1.7`: body text is set at 1.7.\n- `underlined-links <= 10%`: links are told apart by colour; only a hovered link is underlined.\n- `border-radius <= 14px`: corners are soft, not round; circles are kept for nodes, the play ring and the carousel's controls.\n- `border-width <= 3px`: rules are hairlines; 3px marks the current item and heads a page.\n- `text-shadow = none`: type is flat, also on pictures.\n- `animation = none`: nothing moves by itself.\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; scene; inverted block; footer strip) and take the text token and the buttons of that ground; never put a primary button on a scene or `--color-bar-text` on a fill. A new picture is built the way the existing ones are: the bar colour for darkness and every solid shape, the accent for the light, the alternate accent for a second light, the fills for the tones between, shapes from percentages, gradients with hard stops and `clip-path`, and the grain from `--fill-bar`; do not load an image and do not write a colour. If the installing project has photographs or film, they replace the drawn layers of a scene and everything else (the shade under the text, the labels, the type) stays. Keep type on the `--text-*` tokens, the largest sizes stepped down with the same factors as the specimen, labels tracked by `--space-track`, spacing on the `--space-*` scale, and note any one-off `color-mix()` shade next to its rule.\n",
    "components.css": ":root {\n  --size-page: 1320px;\n  --size-nav: 72px;\n  --size-mark: 28px;\n  --size-control: 44px;\n  --size-dialog: 480px;\n  --size-scene: 860px;\n  --size-strip: 420px;\n  --size-sleeve: 420px;\n  --size-date: 132px;\n  --space-track: 2px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 32px;\n  --space-7: 48px;\n  --space-8: 80px;\n  --space-9: 128px;\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  position: relative;\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-6);\n}\n\n/* label: the small tracked line of the era. Dates, numbers, credits,\n   coordinates and every caption are set in it. */\n.ds-label {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-label--muted {\n  color: var(--color-text-muted);\n}\n.ds-label--accent {\n  color: var(--color-heading-alt);\n}\n.ds-label--mono {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* brand: the mark on a small tile dressed like the primary button */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\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: 64ch;\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-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\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 li::marker {\n  color: var(--color-heading-alt);\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: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\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: 1.35;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: var(--space-1);\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  outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-link--arrow {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-link--arrow:visited {\n  color: inherit;\n}\n.ds-link--arrow::before {\n  content: \"\";\n  width: var(--space-6);\n  height: var(--border-width);\n  background: currentColor;\n  transition: var(--transition);\n}\n.ds-link--arrow:hover::before,\n.ds-link--arrow.is-hover::before {\n  width: var(--space-7);\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}\n\n/* buttons: flat labels in a box. The filled one is the single bright\n   object of a screen. */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) 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  letter-spacing: var(--space-track);\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  opacity: 0.8;\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\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  box-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: color-mix(in srgb, var(--color-button-secondary-text) 14%, transparent);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  border-color: var(--color-danger);\n  background: var(--color-danger);\n  color: var(--color-button-text);\n  box-shadow: none;\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--ghost:hover,\n.ds-button--ghost.is-hover {\n  background: color-mix(in srgb, currentColor 16%, transparent);\n}\n.ds-button--onscene,\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover {\n  border-color: var(--color-bar-text);\n  background: var(--color-bar-text);\n  color: var(--color-bar);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  border-color: var(--color-inverse-text);\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n  box-shadow: none;\n}\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  opacity: 0.86;\n}\n.ds-button--small {\n  min-height: calc(var(--size-control) - var(--space-3));\n  padding: var(--space-1) var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: transparent;\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  box-shadow: none;\n  opacity: 1;\n  cursor: not-allowed;\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: grid;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: grid;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-form__label {\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  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) 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  line-height: var(--line-heading);\n  box-shadow: none;\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(var(--size-control) * 3);\n  padding: var(--space-3) var(--space-4);\n  border-radius: var(--radius-panel);\n  line-height: var(--line-body);\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\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  outline-offset: 0;\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n}\n.ds-form__hint {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\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: var(--space-1) 0 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* badge: a tracked word in a hairline box; status variants are the\n   status colour as text and outline, never as a fill */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n  border: var(--border-width) var(--border-style) transparent;\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;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-badge--quiet {\n  border-color: var(--color-border);\n  background: transparent;\n  color: var(--color-text-muted);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  border-color: currentColor;\n  background: transparent;\n}\n.ds-badge--success {\n  color: var(--color-success);\n}\n.ds-badge--warning {\n  color: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-danger);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n  content: \"\";\n  width: var(--space-1);\n  height: var(--space-1);\n  border-radius: 50%;\n  background: currentColor;\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* notice: a ruled line of text with a strong left edge */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  font-size: var(--text-base);\n}\n.ds-notice--error {\n  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n  border-left-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-notice__title {\n  margin-right: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-noticerow {\n  display: grid;\n  gap: var(--space-2);\n}\n\n/* pagination: numbers as labels, the current one underlined by the light */\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  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: calc(var(--size-control) - var(--space-2));\n  height: calc(var(--size-control) - var(--space-2));\n  padding: 0 var(--space-2);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\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  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: inherit;\n  opacity: 0.72;\n}\n.ds-breadcrumb__item a {\n  color: inherit;\n  text-decoration: none;\n}\n.ds-breadcrumb__item::after {\n  content: \"/\";\n  opacity: 0.6;\n}\n.ds-breadcrumb__current {\n  color: inherit;\n}\n\n/* dialog: shown open in the page flow, on the overlay colour */\n.ds-dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-7) var(--space-4);\n  background: var(--color-overlay);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\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-4);\n  padding: var(--space-5) var(--space-5) 0;\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  position: relative;\n  flex: none;\n  width: var(--space-5);\n  height: var(--space-5);\n  color: var(--color-heading);\n}\n.ds-dialog__close::before,\n.ds-dialog__close::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: var(--border-width);\n  background: currentColor;\n  transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n  transform: rotate(-45deg);\n}\n.ds-dialog__body {\n  padding: var(--space-3) var(--space-5) 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  padding: var(--space-4) var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n  display: grid;\n  justify-items: start;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  color: var(--color-text);\n}\n.ds-empty__icon {\n  width: var(--space-7);\n  height: var(--border-width-strong);\n  background: var(--color-accent);\n}\n.ds-empty__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-empty__text {\n  max-width: 44ch;\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* switch */\n.ds-switch {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  order: 2;\n  width: calc(var(--space-5) * 2);\n  height: var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  background: var(--fill-input);\n  transition: var(--transition);\n}\n.ds-switch__track::after {\n  content: \"\";\n  position: absolute;\n  top: var(--space-1);\n  bottom: var(--space-1);\n  left: var(--space-1);\n  width: calc(var(--space-5) - var(--space-2) - var(--border-width) * 2);\n  border-radius: var(--radius-pill);\n  background: var(--color-text-muted);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n  left: calc(100% - var(--space-5) + var(--space-1) + var(--border-width) * 2);\n  background: var(--color-accent);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-switch__label {\n  color: var(--color-heading);\n}\n.ds-switch__label small {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* tooltip: a dotted label; the hint appears on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  border-bottom: var(--border-width) dotted currentColor;\n  cursor: help;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 6;\n  display: none;\n  width: max-content;\n  max-width: min(32ch, 60vw);\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-panel);\n  background: var(--fill-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-body);\n  letter-spacing: 0;\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n}\n.ds-tooltip--end .ds-tooltip__tip {\n  right: 0;\n  left: auto;\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  display: block;\n}\n\n/* avatar: a backlit head and shoulders, drawn from the scene colours.\n   Each dark shape lies on a lit copy of itself, moved a little towards\n   the light, which leaves a rim. */\n.ds-avatar {\n  position: relative;\n  display: inline-block;\n  flex: none;\n  width: var(--size-control);\n  height: var(--size-control);\n  overflow: hidden;\n  border-radius: var(--radius-pill);\n  background:\n    radial-gradient(ellipse 15% 19% at 50% 41%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 15% 19% at 52% 40%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 50% 60%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 50% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 52% 99%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 60% 50% at 86% 14%, color-mix(in srgb, var(--color-accent) 80%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-4), var(--color-bar));\n}\n.ds-avatar--2 {\n  background:\n    radial-gradient(ellipse 14% 19% at 47% 41%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 14% 19% at 45% 40%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-bar-text)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 47% 60%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 40% 29% at 46% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 40% 29% at 44% 99%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-bar-text)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 60% 60% at 8% 20%, color-mix(in srgb, var(--color-accent-alt) 70%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-2), var(--color-bar));\n}\n.ds-avatar--3 {\n  background:\n    radial-gradient(ellipse 15% 20% at 54% 43%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 15% 20% at 54% 41%, color-mix(in srgb, var(--color-bar-text) 80%, var(--color-accent)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 54% 62%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 36% 28% at 54% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 36% 28% at 54% 98%, color-mix(in srgb, var(--color-bar-text) 80%, var(--color-accent)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 50% 46% at 54% 0%, color-mix(in srgb, var(--color-bar-text) 50%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-3), var(--color-bar));\n}\n.ds-avatar--large {\n  width: calc(var(--size-control) * 2);\n  height: calc(var(--size-control) * 2);\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}\n.ds-person__role {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n\n/* progress: a hairline with the light running along it */\n.ds-progress {\n  display: block;\n  min-width: 0;\n}\n.ds-progress__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-progress__value {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.ds-progress__bar {\n  display: block;\n  width: 100%;\n  height: var(--border-width-strong);\n  overflow: hidden;\n  appearance: none;\n  -webkit-appearance: none;\n  border: 0;\n  background: color-mix(in srgb, currentColor 24%, transparent);\n  color: var(--color-accent);\n}\n.ds-progress__bar::-webkit-progress-bar {\n  background: transparent;\n}\n.ds-progress__bar::-webkit-progress-value {\n  background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n  background: var(--color-accent);\n}\n\n/* accordion */\n.ds-accordion {\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-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__head::after {\n  content: \"\";\n  flex: none;\n  align-self: center;\n  display: inline-block;\n  width: calc(var(--space-2) * 1.25);\n  height: calc(var(--space-2) * 1.25);\n  background: currentColor;\n  clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n  color: var(--color-heading-alt);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after {\n  rotate: 45deg;\n}\n.ds-accordion__body {\n  max-width: 60ch;\n  margin: 0;\n  padding: 0 0 var(--space-4);\n  color: var(--color-text);\n}\n\n/* scene: the picture of a screen, drawn from tokens. The ground is the\n   bar fill (with its grain), the light is the accent, the second light\n   the alternate accent, and everything solid is a silhouette in the bar\n   colour. Text on a scene is the bar text colour. */\n.ds-scene {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-scene__light,\n.ds-scene__haze,\n.ds-scene__rig,\n.ds-scene__stage,\n.ds-scene__screen,\n.ds-scene__shade {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  pointer-events: none;\n}\n/* beams: narrow wedges falling from four lamps above the frame */\n.ds-scene__light {\n  background:\n    conic-gradient(from 150deg at 18% -6%, transparent 0deg, color-mix(in srgb, var(--color-accent) 70%, transparent) 7deg, transparent 15deg, transparent 360deg),\n    conic-gradient(from 168deg at 38% -6%, transparent 0deg, color-mix(in srgb, var(--color-accent-alt) 46%, transparent) 5deg, transparent 12deg, transparent 360deg),\n    conic-gradient(from 181deg at 62% -6%, transparent 0deg, color-mix(in srgb, var(--color-accent) 60%, transparent) 6deg, transparent 13deg, transparent 360deg),\n    conic-gradient(from 196deg at 84% -6%, transparent 0deg, color-mix(in srgb, var(--color-accent) 76%, transparent) 8deg, transparent 17deg, transparent 360deg),\n    radial-gradient(ellipse 84% 34% at 52% 76%, color-mix(in srgb, var(--color-accent) 92%, transparent), transparent 76%),\n    radial-gradient(ellipse 40% 12% at 52% 78%, color-mix(in srgb, var(--color-bar-text) 60%, transparent), transparent 70%);\n}\n/* haze: smoke lying over the stage, in two of the fill colours */\n.ds-scene__haze {\n  background:\n    radial-gradient(ellipse 46% 22% at 22% 70%, color-mix(in srgb, var(--color-fill-3) 90%, transparent), transparent 72%),\n    radial-gradient(ellipse 40% 18% at 82% 64%, color-mix(in srgb, var(--color-fill-1) 90%, transparent), transparent 70%),\n    radial-gradient(ellipse 70% 20% at 50% 78%, color-mix(in srgb, var(--color-accent-alt) 22%, transparent), transparent 70%);\n}\n/* rig: the truss across the top and two towers of lamps */\n.ds-scene__rig {\n  background:\n    linear-gradient(var(--color-bar), var(--color-bar)) 0 calc(var(--size-nav) + var(--space-5)) / 100% var(--space-2) no-repeat,\n    repeating-linear-gradient(90deg, var(--color-bar) 0 var(--border-width-strong), transparent var(--border-width-strong) var(--space-5)) 0 calc(var(--size-nav) + var(--space-2)) / 100% var(--space-5) no-repeat,\n    linear-gradient(var(--color-bar), var(--color-bar)) 0 var(--size-nav) / 100% var(--space-2) no-repeat;\n  opacity: 0.9;\n}\n.ds-scene__rig::before,\n.ds-scene__rig::after {\n  content: \"\";\n  position: absolute;\n  bottom: 22%;\n  left: 7%;\n  width: 9%;\n  height: 52%;\n  background:\n    repeating-linear-gradient(0deg, transparent 0 var(--space-3), var(--color-bar) var(--space-3) var(--space-4)),\n    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-accent-alt) 70%, transparent) 0 var(--space-1), var(--color-bar) var(--space-1) var(--space-3));\n  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);\n}\n.ds-scene__rig::after {\n  right: 9%;\n  left: auto;\n  width: 7%;\n  height: 44%;\n}\n/* stage: the edge of the stage and what stands on it, in silhouette\n   against the glow: two stacks, two microphones, two monitors, the\n   drums on their riser and a keyboard */\n.ds-scene__stage {\n  top: auto;\n  height: 46%;\n  background: linear-gradient(to bottom, var(--color-bar) 0 62%, color-mix(in srgb, var(--color-accent) 70%, var(--color-bar)) 62% 63.6%, var(--color-bar) 63.6%);\n  clip-path: polygon(0% 100%, 0% 62%, 3% 62%, 3% 30%, 9% 30%, 9% 62%, 14.6% 62%, 14.6% 60%, 15.2% 60%, 15.2% 24%, 14.7% 24%, 14.7% 20%, 16.1% 20%, 16.1% 24%, 15.6% 24%, 15.6% 60%, 16.2% 60%, 16.2% 62%, 19% 62%, 20.4% 49%, 24.2% 52%, 24.2% 62%, 29.4% 62%, 29.4% 60%, 30% 60%, 30% 16%, 29.5% 16%, 29.5% 11%, 30.9% 11%, 30.9% 16%, 30.4% 16%, 30.4% 60%, 31% 60%, 31% 62%, 37% 62%, 37% 52%, 41.8% 52%, 41.8% 26%, 39.6% 26%, 39.6% 24%, 44.4% 24%, 44.4% 26%, 42.2% 26%, 42.2% 40%, 44% 40%, 44% 36%, 46.6% 36%, 46.6% 40%, 47% 40%, 47% 33%, 53% 33%, 53% 40%, 53.4% 40%, 53.4% 36%, 56% 36%, 56% 40%, 57.6% 40%, 57.6% 22%, 55.4% 22%, 55.4% 20%, 60.2% 20%, 60.2% 22%, 58% 22%, 58% 52%, 63% 52%, 63% 62%, 69.8% 62%, 69.8% 52%, 73.6% 49%, 75% 62%, 79.6% 62%, 79.6% 61%, 82% 61%, 82% 43%, 79.4% 43%, 79.4% 39%, 88.6% 39%, 88.6% 43%, 86% 43%, 86% 61%, 88.4% 61%, 88.4% 62%, 91% 62%, 91% 26%, 97% 26%, 97% 62%, 100% 62%, 100% 100%);\n}\n/* screen: a dot matrix laid over the whole picture, like a LED wall */\n.ds-scene__screen {\n  z-index: -1;\n  background:\n    radial-gradient(circle at 50% 50%, transparent 0 34%, color-mix(in srgb, var(--color-bar) 58%, transparent) 36%) 0 0 / var(--space-1) var(--space-1);\n}\n/* shade: the vignette and the dark foot that carries the text */\n.ds-scene__shade {\n  background:\n    linear-gradient(to top, var(--color-bar) 0, color-mix(in srgb, var(--color-bar) 40%, transparent) 16%, transparent 40%),\n    radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, color-mix(in srgb, var(--color-bar) 80%, transparent) 100%);\n}\n/* word: one enormous outlined word, used as part of the picture */\n.ds-scene__word {\n  position: absolute;\n  top: var(--space-5);\n  right: calc(var(--space-5) * -1);\n  z-index: -1;\n  margin: 0;\n  color: transparent;\n  font-family: var(--font-heading);\n  font-size: calc(var(--text-display) * 1.5);\n  font-weight: var(--weight-display);\n  line-height: 0.74;\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n  white-space: nowrap;\n  -webkit-text-stroke: var(--border-width) color-mix(in srgb, var(--color-bar-text) 26%, transparent);\n  pointer-events: none;\n}\n/* variants: other pictures on the same ground */\n/* lamps: a bank of eighteen lamps in its frame, burning into the haze */\n.ds-scene--lamps .ds-scene__light {\n  background:\n    radial-gradient(ellipse 46% 110% at 58% 52%, color-mix(in srgb, var(--color-accent) 56%, transparent), transparent 100%),\n    radial-gradient(ellipse 80% 40% at 60% 100%, color-mix(in srgb, var(--color-accent-alt) 22%, transparent), transparent 100%);\n}\n.ds-scene--lamps .ds-scene__light::before {\n  content: \"\";\n  position: absolute;\n  inset: 25% 29% 17% 45%;\n  border: var(--border-width-strong) solid var(--color-bar);\n  background:\n    linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--color-bar) 62%, transparent) 100%),\n    radial-gradient(circle at 50% 50%, var(--color-bar-text) 0 14%, var(--color-accent) 30%, color-mix(in srgb, var(--color-accent) 40%, var(--color-bar)) 44%, var(--color-bar) 47%) 0 0 / 16.666% 33.333%;\n}\n.ds-scene--lamps .ds-scene__light::after {\n  content: \"\";\n  position: absolute;\n  top: 83%;\n  right: 36%;\n  bottom: 0;\n  left: 52%;\n  background: linear-gradient(90deg, var(--color-bar) 0 6%, transparent 6% 94%, var(--color-bar) 94%);\n}\n.ds-scene--back .ds-scene__light {\n  background:\n    radial-gradient(ellipse 30% 90% at 70% 100%, color-mix(in srgb, var(--color-accent) 74%, transparent), transparent 70%),\n    radial-gradient(ellipse 8% 60% at 70% 100%, color-mix(in srgb, var(--color-bar-text) 60%, transparent), transparent 70%),\n    conic-gradient(from 300deg at 70% 104%, transparent 0deg, color-mix(in srgb, var(--color-accent-alt) 36%, transparent) 20deg, transparent 44deg, transparent 76deg, color-mix(in srgb, var(--color-accent-alt) 36%, transparent) 100deg, transparent 120deg, transparent 360deg);\n}\n/* nav: one thin line across the top of the scene */\n.ds-nav {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 5;\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n  color: var(--color-bar-text);\n}\n.ds-nav__inner {\n  display: flex;\n  align-items: center;\n  gap: var(--space-6);\n  min-height: var(--size-nav);\n  padding: 0 var(--space-6);\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1 1 auto;\n  justify-content: flex-end;\n  gap: var(--space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  height: var(--size-nav);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: var(--link-decoration-quiet);\n  white-space: nowrap;\n  opacity: 0.74;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  opacity: 1;\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#tour:target) .ds-nav__link[href=\"#tour\"],\n.ds-page:has(#records:target) .ds-nav__link[href=\"#records\"],\n.ds-page:has(#club:target) .ds-nav__link[href=\"#club\"] {\n  opacity: 1;\n  box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent);\n}\n.ds-nav__actions {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n/* menu: a corner list under the word Menu, closed until asked for */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  height: var(--size-nav);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle::before {\n  content: \"\";\n  width: var(--space-4);\n  height: calc(var(--space-1) + var(--border-width) * 2);\n  border-top: var(--border-width) var(--border-style) currentColor;\n  border-bottom: var(--border-width) var(--border-style) currentColor;\n}\n.ds-menu__list {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  z-index: 8;\n  min-width: calc(var(--size-control) * 5);\n  margin: 0;\n  padding: var(--space-2) 0;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  list-style: none;\n}\n.ds-menu__item {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding: var(--space-2) var(--space-4);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n\n/* hero: the full scene of the home view */\n.ds-hero {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  min-height: var(--size-scene);\n  padding: calc(var(--size-nav) + var(--space-8)) var(--space-6) var(--space-6);\n}\n.ds-hero__side {\n  position: absolute;\n  top: 50%;\n  left: var(--space-5);\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  transform: rotate(-90deg) translateX(-50%);\n  transform-origin: 0 0;\n  opacity: 0.7;\n}\n.ds-hero__side::after {\n  content: \"\";\n  width: var(--space-7);\n  height: var(--border-width);\n  background: currentColor;\n}\n.ds-hero__kicker {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-5);\n  margin: 0 0 var(--space-4);\n}\n.ds-hero__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: 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}\n.ds-hero__title span {\n  display: block;\n}\n.ds-hero__outline {\n  color: transparent;\n  -webkit-text-stroke: var(--border-width-strong) var(--color-bar-text);\n}\n.ds-hero__foot {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);\n  align-items: end;\n  gap: var(--space-6);\n  margin-top: var(--space-6);\n  padding-top: var(--space-5);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n}\n.ds-hero__lead {\n  max-width: 44ch;\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: 1.35;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n.ds-hero__next {\n  display: grid;\n  gap: var(--space-2);\n}\n\n/* ticker: a strip of names under the scene */\n.ds-ticker {\n  display: flex;\n  gap: var(--space-6);\n  margin: 0;\n  padding: var(--space-3) var(--space-6);\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  list-style: none;\n  white-space: nowrap;\n}\n.ds-ticker__item {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-6);\n}\n.ds-ticker__item::after {\n  content: \"\";\n  width: var(--space-1);\n  height: var(--space-1);\n  background: var(--color-accent);\n}\n\n/* the word of a page strip starts under the bar, not behind its links */\n.ds-strip > .ds-scene__word {\n  top: calc(var(--size-nav) + var(--space-4));\n}\n\n/* section */\n.ds-section {\n  padding: var(--space-9) 0;\n}\n.ds-section--tight {\n  padding: var(--space-8) 0;\n}\n.ds-section--scene {\n  padding: var(--space-8) 0;\n}\n.ds-section__head {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: var(--space-3) var(--space-6);\n  margin-bottom: var(--space-7);\n}\n.ds-section__kicker {\n  grid-column: 1 / -1;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-heading-alt);\n}\n.ds-section__kicker::before {\n  content: \"\";\n  width: var(--space-6);\n  height: var(--border-width);\n  background: currentColor;\n}\n.ds-section__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-scene .ds-section__title,\n.ds-scene .ds-section__kicker,\n.ds-band .ds-section__title {\n  color: inherit;\n}\n\n/* list: tour dates as a huge ruled list */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n  list-style: none;\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: var(--size-date) minmax(0, 5fr) minmax(0, 3fr) auto auto;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-4) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  transition: var(--transition);\n}\n.ds-list__item:hover,\n.ds-list__item.is-hover {\n  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 60%);\n}\n.ds-list__date {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-2);\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: 1;\n  letter-spacing: var(--heading-tracking);\n}\n.ds-list__date small {\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-list__title {\n  margin: 0;\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: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n}\n.ds-list__meta {\n  color: var(--color-text-muted);\n}\n.ds-list__item > .ds-badge {\n  justify-self: start;\n}\n\n/* stats: figures as graphics, parted by hairlines */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  margin: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n  display: grid;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n  padding-left: 0;\n  border-left: 0;\n}\n.ds-stat__figure {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\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  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* carousel: one record to a slide */\n.ds-carousel {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  gap: var(--space-6);\n  margin: 0;\n  padding: 0;\n  overflow-x: auto;\n  list-style: none;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n}\n.ds-carousel__slide {\n  display: grid;\n  flex: 0 0 100%;\n  grid-template-columns: var(--size-sleeve) minmax(0, 1fr);\n  align-items: end;\n  gap: var(--space-7);\n  min-width: 0;\n  scroll-snap-align: start;\n}\n.ds-carousel__copy {\n  display: grid;\n  gap: var(--space-4);\n  justify-items: start;\n  padding-bottom: var(--space-2);\n}\n.ds-carousel__number {\n  color: transparent;\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  -webkit-text-stroke: var(--border-width) color-mix(in srgb, var(--color-bar-text) 70%, transparent);\n}\n.ds-carousel__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-carousel__text {\n  max-width: 46ch;\n  margin: 0;\n  opacity: 0.8;\n}\n.ds-carousel__nav {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding-top: var(--space-4);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, currentColor 26%, transparent);\n}\n.ds-carousel__nav > .ds-label {\n  flex: none;\n  white-space: nowrap;\n}\n.ds-carousel__dots {\n  display: flex;\n  flex: 1 1 auto;\n  gap: var(--space-2);\n}\n.ds-carousel__dot {\n  width: var(--space-7);\n  height: var(--border-width-strong);\n  background: color-mix(in srgb, currentColor 30%, transparent);\n}\n.ds-carousel__dot.is-current {\n  background: var(--color-accent);\n}\n.ds-carousel__arrow {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control);\n  height: var(--size-control);\n  border: var(--border-width) var(--border-style) currentColor;\n  border-radius: var(--radius-control);\n  color: inherit;\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  text-decoration: none;\n}\n.ds-carousel__arrow::before {\n  content: \"\";\n  flex: none;\n  width: calc(var(--text-ui) * 0.5);\n  height: calc(var(--text-ui) * 0.5);\n  border-left: calc(var(--space-2) / 4) solid currentColor;\n  border-bottom: calc(var(--space-2) / 4) solid currentColor;\n  rotate: 45deg;\n  translate: 25% 0;\n}\n.ds-carousel__arrow + .ds-carousel__arrow::before {\n  rotate: -135deg;\n  translate: -25% 0;\n}\n.ds-carousel__arrow.is-disabled {\n  opacity: 0.35;\n}\n\n/* sleeve: a record cover drawn from the scene colours */\n.ds-sleeve {\n  position: relative;\n  display: block;\n  width: 100%;\n  max-width: var(--size-sleeve);\n  aspect-ratio: 1;\n  overflow: hidden;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 24%, transparent);\n  border-radius: var(--radius-page);\n  background:\n    radial-gradient(circle at 50% 50%, var(--color-bar) 0 5%, transparent 6%),\n    repeating-radial-gradient(circle at 50% 50%, transparent 0 var(--space-3), color-mix(in srgb, var(--color-bar) 70%, transparent) var(--space-3) calc(var(--space-3) + var(--border-width-strong))),\n    radial-gradient(circle at 50% 50%, var(--color-accent) 0 36%, var(--color-fill-3) 37% 100%);\n  color: var(--color-bar-text);\n}\n.ds-sleeve--2 {\n  background:\n    linear-gradient(to top, var(--color-bar) 0 30%, transparent 30%),\n    radial-gradient(circle at 50% 70%, var(--color-accent-alt) 0 24%, transparent 25%),\n    repeating-linear-gradient(0deg, transparent 0 var(--space-2), var(--color-bar) var(--space-2) var(--space-3)) 0 100% / 100% 50% no-repeat,\n    linear-gradient(to top, var(--color-accent), var(--color-fill-1) 70%);\n}\n.ds-sleeve__label {\n  position: absolute;\n  top: var(--space-3);\n  left: var(--space-3);\n  right: var(--space-3);\n  display: flex;\n  justify-content: space-between;\n  mix-blend-mode: difference;\n}\n\n/* grid: four tall cells on the four fills, each lit from a corner */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--border-width);\n  margin: 0;\n  padding: 0;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-border);\n  list-style: none;\n}\n.ds-grid__cell {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: var(--space-8);\n  min-height: calc(var(--size-sleeve) - var(--space-7));\n  padding: var(--space-5);\n  overflow: hidden;\n  border-radius: var(--radius-page);\n  background:\n    radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--color-accent) 34%, transparent), transparent 70%),\n    var(--color-fill-1);\n  color: var(--color-text);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-grid > :nth-child(2) .ds-grid__cell {\n  background:\n    radial-gradient(ellipse 70% 50% at 0% 100%, color-mix(in srgb, var(--color-accent-alt) 26%, transparent), transparent 70%),\n    var(--color-fill-2);\n}\n.ds-grid > :nth-child(3) .ds-grid__cell {\n  background:\n    radial-gradient(ellipse 60% 80% at 50% 110%, color-mix(in srgb, var(--color-accent) 44%, transparent), transparent 70%),\n    var(--color-fill-3);\n}\n.ds-grid > :nth-child(4) .ds-grid__cell {\n  background:\n    radial-gradient(ellipse 60% 50% at 0% 0%, color-mix(in srgb, var(--color-heading) 14%, transparent), transparent 70%),\n    var(--color-fill-4);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n  color: var(--color-heading);\n}\n.ds-grid__title {\n  display: block;\n  margin: 0 0 var(--space-2);\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-grid__text {\n  display: block;\n  margin: 0;\n}\n\n/* band: the inverted block, one line and one button */\n.ds-band {\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n}\n.ds-band__inner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding-top: var(--space-7);\n  padding-bottom: var(--space-7);\n}\n\n/* inner pages: a low scene carries the breadcrumb and the page header */\n.ds-strip {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  min-height: var(--size-strip);\n  padding: calc(var(--size-nav) + var(--space-7)) 0 var(--space-6);\n}\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  margin-top: var(--space-4);\n}\n.ds-page-header__main {\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: 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  font-size: var(--text-large);\n  line-height: 1.35;\n  opacity: 0.84;\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n.ds-main {\n  padding: var(--space-7) 0 var(--space-9);\n}\n.ds-cols {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n  align-items: start;\n  gap: var(--space-7);\n}\n.ds-cols--even {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-cols--wide {\n  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n}\n.ds-stack {\n  display: grid;\n  gap: var(--space-6);\n  min-width: 0;\n}\n.ds-stack--tight {\n  gap: var(--space-4);\n}\n\n/* sidebar */\n.ds-sidebar {\n  display: grid;\n  gap: var(--space-3);\n}\n.ds-sidebar__title {\n  margin: 0;\n  color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: baseline;\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);\n  color: var(--color-link-quiet);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover,\n.ds-sidebar__item.is-current {\n  color: var(--color-heading);\n}\n.ds-sidebar__item.is-current {\n  border-bottom-color: var(--color-accent);\n}\n.ds-sidebar__count {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  letter-spacing: 0;\n}\n\n/* tabs: labels on a hairline, the current one lit */\n.ds-tabs {\n  display: flex;\n  gap: var(--space-6);\n  margin: 0;\n  padding: 0;\n  overflow-x: auto;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  list-style: none;\n  scrollbar-width: none;\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\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  letter-spacing: var(--space-track);\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  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n\n/* table */\n.ds-table__wrap {\n  overflow-x: auto;\n}\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-table th {\n  padding: var(--space-3) var(--space-3) var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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  letter-spacing: var(--space-track);\n  text-align: left;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-table td {\n  padding: var(--space-3) var(--space-3) var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  vertical-align: middle;\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  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n.ds-table td.ds-table__num {\n  font-size: var(--text-ui);\n}\n.ds-table__title {\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: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\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-top: var(--space-4);\n  color: var(--color-text-muted);\n}\n\n/* panel */\n.ds-panel {\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__title {\n  margin: 0;\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  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-panel__body {\n  padding: var(--space-4);\n}\n.ds-panel__text {\n  margin: 0;\n}\n\n/* facts: label and value pairs inside a panel */\n.ds-facts {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n}\n.ds-facts dt {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-facts dd {\n  margin: 0;\n  color: var(--color-heading);\n  text-align: right;\n}\n\n/* tracks: a numbered running order */\n.ds-tracks {\n  margin: 0;\n  padding: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n  list-style: none;\n}\n.ds-tracks__item {\n  display: grid;\n  grid-template-columns: var(--space-7) minmax(0, 1fr) auto;\n  align-items: baseline;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tracks__number {\n  color: var(--color-heading-alt);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n}\n.ds-tracks__title {\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: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-tracks__time {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n}\n.ds-people {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n\n/* footer */\n.ds-footer {\n  position: relative;\n  overflow: hidden;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n.ds-footer__cols {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n  gap: var(--space-6);\n  padding-top: var(--space-7);\n  padding-bottom: var(--space-6);\n}\n.ds-footer__about {\n  max-width: 34ch;\n  margin: var(--space-4) 0 0;\n}\n.ds-footer__title {\n  margin: 0 0 var(--space-3);\n  opacity: 0.7;\n}\n.ds-footer__list {\n  display: grid;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: underline;\n}\n.ds-footer__word {\n  margin: var(--space-4) 0 0;\n  padding: 0 var(--space-5) var(--space-4);\n  color: transparent;\n  font-family: var(--font-heading);\n  font-size: 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  white-space: nowrap;\n  -webkit-text-stroke: var(--border-width) color-mix(in srgb, var(--color-bar-alt-text) 50%, transparent);\n}\n.ds-footer__legal {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-5);\n  padding-top: var(--space-4);\n  padding-bottom: var(--space-4);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 26%, transparent);\n}\n\n/* narrower windows: the type steps down with the display size itself */\n@media (max-width: 1100px) {\n  .ds-hero__title,\n  .ds-carousel__number,\n  .ds-footer__word {\n    font-size: calc(var(--text-display) * 0.7);\n  }\n  /* the word ends at the window's edge instead of running past it */\n  .ds-scene__word {\n    right: 0;\n    font-size: var(--text-display);\n  }\n  .ds-list__item {\n    grid-template-columns: var(--size-date) minmax(0, 1fr) auto auto;\n  }\n  .ds-list__meta {\n    display: none;\n  }\n  .ds-grid,\n  .ds-stat {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat__item:nth-child(3) {\n    padding-left: 0;\n    border-left: 0;\n  }\n  .ds-stat__item:nth-child(n + 3) {\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-cols,\n  .ds-cols--wide {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n@media (max-width: 800px) {\n  .ds-wrap {\n    padding-right: var(--space-4);\n    padding-left: var(--space-4);\n  }\n  .ds-nav__inner {\n    flex-wrap: wrap;\n    gap: 0 var(--space-4);\n    padding: 0 var(--space-4);\n  }\n  .ds-nav__inner .ds-brand {\n    flex: 1 1 auto;\n    min-height: calc(var(--size-nav) - var(--space-4));\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: 1 1 100%;\n    justify-content: flex-start;\n    gap: var(--space-5);\n    overflow-x: auto;\n    border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n    scrollbar-width: none;\n  }\n  .ds-nav__link,\n  .ds-menu__toggle {\n    height: calc(var(--size-nav) - var(--space-5));\n  }\n  .ds-hero {\n    min-height: calc(var(--size-scene) - var(--space-9));\n    padding: calc(var(--size-nav) * 2) var(--space-4) var(--space-5);\n  }\n  .ds-hero__side {\n    display: none;\n  }\n  .ds-hero__title,\n  .ds-carousel__number,\n  .ds-footer__word {\n    font-size: calc(var(--text-display) * 0.46);\n  }\n  .ds-scene__word {\n    font-size: calc(var(--text-display) * 0.7);\n  }\n  .ds-section__title,\n  .ds-page-header__title,\n  .ds-carousel__title,\n  .ds-stat__figure {\n    font-size: calc(var(--text-h1) * 0.6);\n  }\n  .ds-hero__foot,\n  .ds-cols--even,\n  .ds-carousel__slide,\n  .ds-footer__cols {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-carousel__slide {\n    gap: var(--space-5);\n  }\n  .ds-section,\n  .ds-section--tight,\n  .ds-section--scene {\n    padding: var(--space-7) 0;\n  }\n  .ds-section__head {\n    grid-template-columns: minmax(0, 1fr);\n    margin-bottom: var(--space-5);\n  }\n  .ds-scene--lamps .ds-scene__light::before,\n  .ds-scene--lamps .ds-scene__light::after {\n    opacity: 0.3;\n  }\n  .ds-strip {\n    min-height: calc(var(--size-strip) - var(--space-7));\n    padding-top: calc(var(--size-nav) * 2);\n  }\n  .ds-main {\n    padding: var(--space-6) 0 var(--space-8);\n  }\n  .ds-list__item {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: var(--space-2) var(--space-4);\n  }\n  .ds-list__title,\n  .ds-list__date {\n    font-size: calc(var(--text-h2) * 0.7);\n  }\n  .ds-list__item > .ds-link--arrow {\n    display: none;\n  }\n  .ds-list__title {\n    text-align: right;\n  }\n  .ds-section--scene > .ds-wrap {\n    padding: 0 var(--space-4);\n  }\n}\n@media (max-width: 520px) {\n  .ds-hero__title,\n  .ds-carousel__number,\n  .ds-footer__word {\n    font-size: calc(var(--text-display) * 0.3);\n  }\n  .ds-scene__word {\n    font-size: calc(var(--text-display) * 0.5);\n  }\n  .ds-section__title,\n  .ds-page-header__title,\n  .ds-carousel__title,\n  .ds-stat__figure {\n    font-size: calc(var(--text-h1) * 0.5);\n  }\n  .ds-hero__lead,\n  .ds-page-header__text {\n    font-size: var(--text-base);\n  }\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-grid__cell {\n    min-height: 0;\n    gap: var(--space-7);\n  }\n  .ds-form__row,\n  .ds-people {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-stat__item {\n    padding: var(--space-4) var(--space-3);\n  }\n  .ds-stat__item:nth-child(odd) {\n    padding-left: 0;\n  }\n  .ds-nav__actions .ds-button {\n    display: none;\n  }\n  /* the outlined word stays inside the window and clear of the bar */\n  .ds-scene__word {\n    right: var(--space-4);\n    font-size: calc(var(--text-display) * 0.3);\n  }\n  .ds-strip > .ds-scene__word {\n    top: calc(var(--size-nav) * 2 - var(--space-6));\n  }\n}\n\n/* Phones: the table keeps the columns that matter, so its last one is in view. */\n@media (max-width: 520px) {\n  #tour .ds-table th:nth-child(3),\n  #tour .ds-table td:nth-child(3),\n  #tour .ds-table th:nth-child(4),\n  #tour .ds-table td:nth-child(4) {\n    display: none;\n  }\n}\n\n/* Phones: one quiet row of links spread across the bar. */\n@media (max-width: 520px) {\n  .ds-nav__links {\n    justify-content: space-between;\n    gap: var(--space-3);\n  }\n}\n\n/* Phones: a long badge in the table wraps inside its cell. */\n@media (max-width: 520px) {\n  #tour .ds-table .ds-badge {\n    white-space: normal;\n    text-align: center;\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: cinematic tour site specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" aria-hidden=\"true\"><path d=\"M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5\"/><circle cx=\"12\" cy=\"12\" r=\"4.5\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Stage</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#tour\">Tour</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#records\">Records</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#club\">Club</a></li>\n    </ul>\n    <div class=\"ds-nav__actions\">\n      <details class=\"ds-menu\">\n        <summary class=\"ds-menu__toggle\">Menu</summary>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__item\" href=\"#tour\">Tour dates <span>42</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#records\">Records <span>04</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#records\">The band <span>04</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#club\">Presale club</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#club\">Press and contact</a></li>\n        </ul>\n      </details>\n      <a class=\"ds-button ds-button--ghost ds-button--small\" href=\"#tour\">Tickets</a>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-hero ds-scene\" data-component=\"hero\">\n    <span class=\"ds-scene__light\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__haze\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__rig\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__stage\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__screen\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__shade\" aria-hidden=\"true\"></span>\n    <p class=\"ds-label ds-hero__side\">Scroll for dates</p>\n    <p class=\"ds-hero__kicker\"><span class=\"ds-badge\">On sale now</span><span class=\"ds-label ds-label--mono\">14.11.2026 to 02.08.2027</span><span class=\"ds-label ds-label--mono\">42 nights, 19 countries</span></p>\n    <h1 class=\"ds-hero__title\"><span>Low light</span><span class=\"ds-hero__outline\">Tour 2026</span></h1>\n    <div class=\"ds-hero__foot\">\n      <p class=\"ds-hero__lead\">Two hours, four people, one wall of lamps. The new record played in full, then everything you came for.</p>\n      <div class=\"ds-hero__actions\">\n        <a class=\"ds-button ds-button--onscene\" href=\"#tour\">Find your night</a>\n        <a class=\"ds-button ds-button--ghost\" href=\"#records\">Hear the record</a>\n      </div>\n      <div class=\"ds-hero__next\">\n        <div class=\"ds-progress\">\n          <p class=\"ds-progress__head\"><span>First night in 38 days</span><span class=\"ds-progress__value\">62%</span></p>\n          <progress class=\"ds-progress__bar\" value=\"62\" max=\"100\">62%</progress>\n        </div>\n        <p class=\"ds-label ds-label--mono\">Lisbon, 38.72 N 9.14 W</p>\n      </div>\n    </div>\n  </div>\n\n  <ul class=\"ds-ticker ds-label\" aria-label=\"Cities on this tour\">\n    <li class=\"ds-ticker__item\">Lisbon</li>\n    <li class=\"ds-ticker__item\">Madrid</li>\n    <li class=\"ds-ticker__item\">Lyon</li>\n    <li class=\"ds-ticker__item\">Milan</li>\n    <li class=\"ds-ticker__item\">Vienna</li>\n    <li class=\"ds-ticker__item\">Prague</li>\n    <li class=\"ds-ticker__item\">Berlin</li>\n    <li class=\"ds-ticker__item\">Copenhagen</li>\n    <li class=\"ds-ticker__item\">Oslo</li>\n    <li class=\"ds-ticker__item\">Glasgow</li>\n    <li class=\"ds-ticker__item\">Dublin</li>\n    <li class=\"ds-ticker__item\">Montreal</li>\n    <li class=\"ds-ticker__item\">Chicago</li>\n    <li class=\"ds-ticker__item\">Mexico City</li>\n  </ul>\n\n  <div class=\"ds-section\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">01 Live</p>\n        <h2 class=\"ds-section__title\">Next nights</h2>\n        <a class=\"ds-link ds-link--arrow\" href=\"#tour\">All 42 dates</a>\n      </div>\n      <ul class=\"ds-list\" data-component=\"list\">\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__date\">14 <small>Nov</small></span>\n          <a class=\"ds-list__title\" href=\"#tour\">Lisbon</a>\n          <span class=\"ds-label ds-list__meta\">Riverside arena, Portugal</span>\n          <span class=\"ds-badge ds-badge--warning\">Last tickets</span>\n          <a class=\"ds-link ds-link--arrow\" href=\"#tour\">Tickets</a>\n        </li>\n        <li class=\"ds-list__item is-hover\">\n          <span class=\"ds-list__date\">17 <small>Nov</small></span>\n          <a class=\"ds-list__title\" href=\"#tour\">Madrid</a>\n          <span class=\"ds-label ds-list__meta\">Old bullring, Spain</span>\n          <span class=\"ds-badge ds-badge--success\">On sale</span>\n          <a class=\"ds-link ds-link--arrow\" href=\"#tour\">Tickets</a>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__date\">21 <small>Nov</small></span>\n          <a class=\"ds-list__title\" href=\"#tour\">Lyon</a>\n          <span class=\"ds-label ds-list__meta\">Exhibition hall 3, France</span>\n          <span class=\"ds-badge ds-badge--success\">On sale</span>\n          <a class=\"ds-link ds-link--arrow\" href=\"#tour\">Tickets</a>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__date\">24 <small>Nov</small></span>\n          <a class=\"ds-list__title\" href=\"#tour\">Milan</a>\n          <span class=\"ds-label ds-list__meta\">Ice palace, Italy</span>\n          <span class=\"ds-badge ds-badge--danger\">Sold out</span>\n          <a class=\"ds-link ds-link--arrow\" href=\"#club\">Waiting list</a>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__date\">28 <small>Nov</small></span>\n          <a class=\"ds-list__title\" href=\"#tour\">Vienna</a>\n          <span class=\"ds-label ds-list__meta\">Gasworks, Austria</span>\n          <span class=\"ds-badge ds-badge--success\">On sale</span>\n          <a class=\"ds-link ds-link--arrow\" href=\"#tour\">Tickets</a>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-wrap\">\n    <div class=\"ds-stat\" data-component=\"stats\">\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">42</p><p class=\"ds-label ds-stat__label\">Nights</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">19</p><p class=\"ds-label ds-stat__label\">Countries</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">611K</p><p class=\"ds-label ds-stat__label\">Tickets</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">2:10</p><p class=\"ds-label ds-stat__label\">Hours on stage</p></div>\n    </div>\n  </div>\n\n  <div class=\"ds-section\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-scene ds-scene--back ds-section--scene\">\n        <span class=\"ds-scene__light\" aria-hidden=\"true\"></span>\n        <span class=\"ds-scene__screen\" aria-hidden=\"true\"></span>\n        <p class=\"ds-scene__word\" aria-hidden=\"true\">Records</p>\n        <div class=\"ds-wrap\">\n          <div class=\"ds-section__head\">\n            <p class=\"ds-label ds-section__kicker\">02 Records</p>\n            <h2 class=\"ds-section__title\">Out now</h2>\n            <a class=\"ds-link ds-link--arrow\" href=\"#records\">All four records</a>\n          </div>\n          <div class=\"ds-carousel\">\n            <ul class=\"ds-carousel__track\">\n              <li class=\"ds-carousel__slide\">\n                <span class=\"ds-sleeve\"><span class=\"ds-sleeve__label ds-label ds-label--mono\"><span>CS 004</span><span>33 RPM</span></span></span>\n                <div class=\"ds-carousel__copy\">\n                  <span class=\"ds-carousel__number\">04</span>\n                  <h3 class=\"ds-carousel__title\">Low light</h3>\n                  <p class=\"ds-carousel__text\">Eleven songs recorded at night in a closed swimming hall. Out on double vinyl and everywhere you listen.</p>\n                  <a class=\"ds-button ds-button--onscene\" href=\"#records\">Listen and order</a>\n                </div>\n              </li>\n              <li class=\"ds-carousel__slide\">\n                <span class=\"ds-sleeve ds-sleeve--2\"><span class=\"ds-sleeve__label ds-label ds-label--mono\"><span>CS 003</span><span>33 RPM</span></span></span>\n                <div class=\"ds-carousel__copy\">\n                  <span class=\"ds-carousel__number\">03</span>\n                  <h3 class=\"ds-carousel__title\">Salt road</h3>\n                  <p class=\"ds-carousel__text\">The third record, remastered for its fifth year.</p>\n                  <a class=\"ds-button ds-button--onscene\" href=\"#records\">Listen and order</a>\n                </div>\n              </li>\n            </ul>\n            <div class=\"ds-carousel__nav\">\n              <span class=\"ds-label ds-label--mono\">01 / 04</span>\n              <span class=\"ds-carousel__dots\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></span>\n              <a class=\"ds-carousel__arrow is-disabled\" href=\"#records\" aria-label=\"Previous record\"></a>\n              <a class=\"ds-carousel__arrow\" href=\"#records\" aria-label=\"Next record\"></a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-wrap\">\n    <ul class=\"ds-grid\" data-component=\"grid\">\n      <li><a class=\"ds-grid__cell\" href=\"#tour\"><span class=\"ds-label ds-label--accent\">01</span><span><span class=\"ds-grid__title\">The show</span><span class=\"ds-grid__text\">Stage times, doors and what you may bring.</span></span></a></li>\n      <li><a class=\"ds-grid__cell\" href=\"#records\"><span class=\"ds-label ds-label--accent\">02</span><span><span class=\"ds-grid__title\">The film</span><span class=\"ds-grid__text\">Ninety minutes shot over three nights. In cinemas in March.</span></span></a></li>\n      <li><a class=\"ds-grid__cell\" href=\"#club\"><span class=\"ds-label ds-label--accent\">03</span><span><span class=\"ds-grid__title\">The club</span><span class=\"ds-grid__text\">Presale codes two days before everyone else.</span></span></a></li>\n      <li><a class=\"ds-grid__cell\" href=\"#records\"><span class=\"ds-label ds-label--accent\">04</span><span><span class=\"ds-grid__title\">The band</span><span class=\"ds-grid__text\">Four people and a room of machines.</span></span></a></li>\n    </ul>\n  </div>\n\n  <div class=\"ds-section ds-section--tight\">\n    <div class=\"ds-band\">\n      <div class=\"ds-wrap ds-band__inner\">\n        <h2 class=\"ds-section__title\">Be first in the room</h2>\n        <a class=\"ds-button ds-button--inverse\" href=\"#club\">Join the presale club</a>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"tour\">\n  <div class=\"ds-strip ds-scene ds-scene--lamps\">\n    <span class=\"ds-scene__light\" aria-hidden=\"true\"></span>\n    <div class=\"ds-wrap\">\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Stage</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#tour\">Tour</a></li>\n        <li class=\"ds-breadcrumb__current\">Europe, winter</li>\n      </ol>\n      <div class=\"ds-page-header\" data-component=\"page-header\">\n        <div class=\"ds-page-header__main\">\n          <h1 class=\"ds-page-header__title\">Tour dates</h1>\n          <p class=\"ds-page-header__text\">Forty-two nights from November to August. Doors open two hours before stage time.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--onscene\" href=\"#club\">Enter a presale code</a>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-sidebar\" data-component=\"sidebar\">\n          <p class=\"ds-label ds-sidebar__title\">Legs of the tour</p>\n          <div class=\"ds-sidebar__list\">\n            <a class=\"ds-sidebar__item is-current\" href=\"#tour\">Europe, winter <span class=\"ds-sidebar__count\">16</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#tour\">North America <span class=\"ds-sidebar__count\">12</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#tour\">Latin America <span class=\"ds-sidebar__count\">06</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#tour\">Europe, open air <span class=\"ds-sidebar__count\">08</span></a>\n          </div>\n        </div>\n        <div class=\"ds-stack ds-stack--tight\">\n          <div class=\"ds-progress\">\n            <p class=\"ds-progress__head\"><span>Europe, winter sold</span><span class=\"ds-progress__value\">88%</span></p>\n            <progress class=\"ds-progress__bar\" value=\"88\" max=\"100\">88%</progress>\n          </div>\n          <div class=\"ds-progress\">\n            <p class=\"ds-progress__head\"><span>North America sold</span><span class=\"ds-progress__value\">54%</span></p>\n            <progress class=\"ds-progress__bar\" value=\"54\" max=\"100\">54%</progress>\n          </div>\n        </div>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <span class=\"ds-empty__icon\" aria-hidden=\"true\"></span>\n          <p class=\"ds-empty__title\">No festival dates yet</p>\n          <p class=\"ds-empty__text\">Summer festivals are announced in January. Club members hear first.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#club\">Tell me first</a>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#tour\">Upcoming <span class=\"ds-badge ds-badge--quiet\">16</span></a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#tour\">Festivals</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#tour\">Played</a></li>\n        </ul>\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Doors</span>Tickets are personal. Bring the card you paid with and a photo ID.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Moved</span>The Prague night moves from 2 to 3 December. Tickets stay valid.</p>\n        </div>\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th>Date</th><th>City</th><th>Venue</th><th class=\"ds-table__num\">Capacity</th><th class=\"ds-table__num\">From</th><th>Status</th></tr>\n            </thead>\n            <tbody>\n              <tr><td class=\"ds-label ds-label--mono\">14.11.26</td><td><a class=\"ds-table__title\" href=\"#club\">Lisbon</a></td><td>Riverside arena</td><td class=\"ds-table__num\">18,500</td><td class=\"ds-table__num\">64.00</td><td><span class=\"ds-badge ds-badge--warning\">Last tickets</span></td></tr>\n              <tr class=\"is-hover\"><td class=\"ds-label ds-label--mono\">17.11.26</td><td><a class=\"ds-table__title\" href=\"#club\">Madrid</a></td><td>Old bullring</td><td class=\"ds-table__num\">21,000</td><td class=\"ds-table__num\">68.00</td><td><span class=\"ds-badge ds-badge--success\">On sale</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">21.11.26</td><td><a class=\"ds-table__title\" href=\"#club\">Lyon</a></td><td>Exhibition hall 3</td><td class=\"ds-table__num\">14,200</td><td class=\"ds-table__num\">59.00</td><td><span class=\"ds-badge ds-badge--success\">On sale</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">24.11.26</td><td><a class=\"ds-table__title\" href=\"#club\">Milan</a></td><td>Ice palace</td><td class=\"ds-table__num\">12,700</td><td class=\"ds-table__num\">72.00</td><td><span class=\"ds-badge ds-badge--danger\">Sold out</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">28.11.26</td><td><a class=\"ds-table__title\" href=\"#club\">Vienna</a></td><td>Gasworks</td><td class=\"ds-table__num\">16,000</td><td class=\"ds-table__num\">66.00</td><td><span class=\"ds-badge ds-badge--success\">On sale</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">03.12.26</td><td><a class=\"ds-table__title\" href=\"#club\">Prague</a></td><td>Trade fair palace</td><td class=\"ds-table__num\">15,300</td><td class=\"ds-table__num\">55.00</td><td><span class=\"ds-badge\" data-component=\"badge\">New date</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">06.12.26</td><td><a class=\"ds-table__title\" href=\"#club\">Berlin</a></td><td>Velodrome</td><td class=\"ds-table__num\">12,000</td><td class=\"ds-table__num\">70.00</td><td><span class=\"ds-tooltip ds-tooltip--end ds-label ds-label--muted\" tabindex=\"0\">Presale only<span class=\"ds-tooltip__tip\">Club members buy from 1 October. General sale opens two days later.</span></span></td></tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"ds-table__foot\">\n          <span class=\"ds-label\">Showing 7 of 16 nights</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#tour\">Prev</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#tour\">01</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#tour\">02</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#tour\">03</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#tour\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"records\">\n  <div class=\"ds-strip ds-scene\">\n    <p class=\"ds-scene__word\" aria-hidden=\"true\">04</p>\n    <div class=\"ds-wrap\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Stage</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#records\">Records</a></li>\n        <li class=\"ds-breadcrumb__current\">Low light</li>\n      </ol>\n      <div class=\"ds-page-header\">\n        <div class=\"ds-page-header__main\">\n          <h1 class=\"ds-page-header__title\">Low light</h1>\n          <p class=\"ds-page-header__text\">The fourth record. Eleven songs, forty-six minutes, out now.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--onscene\" href=\"#club\">Order the vinyl</a>\n          <a class=\"ds-button ds-button--ghost\" href=\"#tour\">Hear it live</a>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols ds-cols--wide\">\n      <div class=\"ds-stack\">\n        <span class=\"ds-sleeve\"><span class=\"ds-sleeve__label ds-label ds-label--mono\"><span>CS 004</span><span>33 RPM</span></span></span>\n        <div class=\"ds-panel\" data-component=\"panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Release details</h2><span class=\"ds-badge ds-badge--quiet\">CS 004</span></div>\n          <div class=\"ds-panel__body\">\n            <dl class=\"ds-facts\">\n              <dt>Released</dt><dd>2 October 2026</dd>\n              <dt>Length</dt><dd>46 min 12 s</dd>\n              <dt>Formats</dt><dd>Double vinyl, cassette, digital</dd>\n              <dt>Recorded</dt><dd>A closed swimming hall, at night</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"ds-people\">\n          <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The singer</span><span class=\"ds-person__role\">Voice, words</span></span></div>\n          <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--2 ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The guitarist</span><span class=\"ds-person__role\">Six and twelve strings</span></span></div>\n          <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--3 ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The drummer</span><span class=\"ds-person__role\">Drums, sheet metal</span></span></div>\n          <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--2 ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The programmer</span><span class=\"ds-person__role\">Machines, tape</span></span></div>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <ol class=\"ds-tracks\">\n          <li class=\"ds-tracks__item\"><span class=\"ds-tracks__number\">01</span><span class=\"ds-tracks__title\">Doors</span><span class=\"ds-tracks__time\">2:14</span></li>\n          <li class=\"ds-tracks__item\"><span class=\"ds-tracks__number\">02</span><span class=\"ds-tracks__title\">Low light</span><span class=\"ds-tracks__time\">4:41</span></li>\n          <li class=\"ds-tracks__item\"><span class=\"ds-tracks__number\">03</span><span class=\"ds-tracks__title\">Night bus north</span><span class=\"ds-tracks__time\">3:58</span></li>\n          <li class=\"ds-tracks__item\"><span class=\"ds-tracks__number\">04</span><span class=\"ds-tracks__title\">Sheet metal</span><span class=\"ds-tracks__time\">5:07</span></li>\n          <li class=\"ds-tracks__item\"><span class=\"ds-tracks__number\">05</span><span class=\"ds-tracks__title\">The deep end</span><span class=\"ds-tracks__time\">4:20</span></li>\n          <li class=\"ds-tracks__item\"><span class=\"ds-tracks__number\">06</span><span class=\"ds-tracks__title\">Everything you came for</span><span class=\"ds-tracks__time\">6:32</span></li>\n        </ol>\n        <div class=\"ds-prose\" data-component=\"typography\">\n          <h1>Notes on the record</h1>\n          <p class=\"ds-prose__lead\">We wanted a record that sounds like the last hour before the lights come up.</p>\n          <p>The hall had been closed for nine years. The pool was empty, the tiles were still there, and every sound came back <strong>four seconds late</strong>. We set up in the deep end and played to the echo.</p>\n          <h2>How it was made</h2>\n          <p>Nothing was recorded before ten at night. Catalogue number <code>CS 004</code>; the first pressing is numbered by hand.</p>\n          <h3>In the box</h3>\n          <ul>\n            <li>Two records, 180 gram, cut at 33 RPM</li>\n            <li>A booklet of sixteen pages with the words</li>\n            <li>A code for the digital record</li>\n          </ul>\n        </div>\n        <ul class=\"ds-linkrow\" data-component=\"links\">\n          <li><a class=\"ds-link\" href=\"#records\">Read the words</a></li>\n          <li><a class=\"ds-link is-visited\" href=\"#records\">Watch the film (seen)</a></li>\n          <li><a class=\"ds-link is-hover\" href=\"#tour\">Hear it live</a></li>\n          <li><a class=\"ds-link is-active\" href=\"#club\">Order the vinyl</a></li>\n          <li><a class=\"ds-link ds-link--quiet\" href=\"#records\">Earlier records</a></li>\n        </ul>\n        <div class=\"ds-accordion\">\n          <details class=\"ds-accordion__item\" open>\n            <summary class=\"ds-accordion__head\">Double vinyl</summary>\n            <p class=\"ds-accordion__body\">Two black records in a gatefold sleeve. Ships within five working days.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Cassette</summary>\n            <p class=\"ds-accordion__body\">Chrome tape, one side per half of the record.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Digital</summary>\n            <p class=\"ds-accordion__body\">Lossless files, yours to keep.</p>\n          </details>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"club\">\n  <div class=\"ds-strip ds-scene\">\n    <p class=\"ds-scene__word\" aria-hidden=\"true\">Club</p>\n    <div class=\"ds-wrap\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Stage</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#club\">Club</a></li>\n        <li class=\"ds-breadcrumb__current\">Join</li>\n      </ol>\n      <div class=\"ds-page-header\">\n        <div class=\"ds-page-header__main\">\n          <h1 class=\"ds-page-header__title\">Presale club</h1>\n          <p class=\"ds-page-header__text\">Codes two days early, one letter a month, nothing else.</p>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols ds-cols--even\">\n      <form class=\"ds-form\" data-component=\"form\" action=\"#club\">\n        <div class=\"ds-noticerow\">\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Check</span>One field needs another look before we can add you.</p>\n        </div>\n        <div class=\"ds-form__row\">\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"club-name\">Name</label>\n            <input class=\"ds-form__input\" id=\"club-name\" type=\"text\" value=\"A. Visitor\">\n          </div>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"club-city\">Nearest night</label>\n            <select class=\"ds-form__select\" id=\"club-city\">\n              <option>Lisbon, 14 November</option>\n              <option>Madrid, 17 November</option>\n              <option>Lyon, 21 November</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"ds-form__field\">\n          <label class=\"ds-form__label\" for=\"club-mail\">E-mail address</label>\n          <input class=\"ds-form__input is-error\" id=\"club-mail\" type=\"email\" value=\"visitor@example\">\n          <p class=\"ds-form__error\">This address is missing its ending, for example .org.</p>\n        </div>\n        <div class=\"ds-form__field\">\n          <label class=\"ds-form__label\" for=\"club-note\">Anything we should know</label>\n          <textarea class=\"ds-form__textarea\" id=\"club-note\" placeholder=\"Access needs, a group of more than six\"></textarea>\n          <p class=\"ds-form__hint\">We read every note before the presale opens.</p>\n        </div>\n        <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> I have read how my address is used.</label>\n        <div class=\"ds-form__actions\" data-component=\"buttons\">\n          <button class=\"ds-button\" type=\"submit\">Join the club</button>\n          <a class=\"ds-button ds-button--secondary\" href=\"#tour\">See the dates first</a>\n          <button class=\"ds-button ds-button--danger\" type=\"button\">Leave the club</button>\n          <button class=\"ds-button is-disabled\" type=\"button\" disabled>Code sent</button>\n        </div>\n      </form>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">What we send</h2></div>\n          <div class=\"ds-panel__body\">\n            <label class=\"ds-switch is-on\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Presale codes<small>Two days before general sale</small></span></label>\n            <label class=\"ds-switch is-on\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">New dates near me<small>Within 300 km of my nearest night</small></span></label>\n            <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">The monthly letter<small>Studio notes and photographs</small></span></label>\n          </div>\n        </div>\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"leave-title\">\n            <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"leave-title\">Leave the club?</h2><a class=\"ds-dialog__close\" href=\"#club\" aria-label=\"Close\"></a></div>\n            <div class=\"ds-dialog__body\"><p>You will lose your place in the Milan waiting list and no more codes will be sent.</p></div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--danger\" href=\"#home\">Leave</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#club\">Stay</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-wrap ds-footer__cols\">\n    <div>\n      <a class=\"ds-brand\" href=\"#home\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" aria-hidden=\"true\"><path d=\"M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5\"/><circle cx=\"12\" cy=\"12\" r=\"4.5\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n      </a>\n      <p class=\"ds-footer__about\">The official site of chronoskin. Tickets bought anywhere else are not ours.</p>\n    </div>\n    <div>\n      <p class=\"ds-label ds-footer__title\">Live</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#tour\">Tour dates</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#tour\">Doors and access</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#club\">Presale club</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-label ds-footer__title\">Listen</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#records\">Low light</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#records\">All records</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#records\">The band</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-label ds-footer__title\">Small print</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#club\">Contact</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#club\">Privacy</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">Imprint</a></li>\n      </ul>\n    </div>\n  </div>\n  <p class=\"ds-footer__word\" aria-hidden=\"true\">chronoskin</p>\n  <div class=\"ds-wrap ds-footer__legal\">\n    <span class=\"ds-label\">2026 chronoskin. All rights reserved.</span>\n    <span class=\"ds-label\">38.72 N 9.14 W</span>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.cinematic.landing.s01.p05.t02.u08\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"cinematic\",\n    \"years\": [\n      2015,\n      2026\n    ]\n  },\n  \"archetype\": \"landing\",\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-ci-1528\",\n  \"short\": \"v1-ci-1528\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #0b1410;\n  --color-canvas: #0b1410;\n  --color-surface: #101c16;\n  --color-surface-alt: #15261d;\n  --color-surface-strong: #1f3529;\n  --color-bar: #050b08;\n  --color-bar-text: #f2ebd8;\n  --color-bar-alt: #0e1913;\n  --color-bar-alt-text: #9ba894;\n  --color-inverse: #e9dfc6;\n  --color-inverse-text: #0b1410;\n  --color-text: #c2cbbc;\n  --color-text-muted: #80907f;\n  --color-heading: #f2ebd8;\n  --color-heading-alt: #d1a93a;\n  --color-link: #dfbd5c;\n  --color-link-quiet: #9ba894;\n  --color-link-visited: #b39a5f;\n  --color-link-hover: #f5dc8c;\n  --color-link-active: #9fd6b4;\n  --color-border: #263a2e;\n  --color-border-strong: #d1a93a;\n  --color-border-muted: #16261d;\n  --color-accent: #d1a93a;\n  --color-accent-text: #0b1410;\n  --color-accent-alt: #9fd6b4;\n  --color-fill-1: #13291d;\n  --color-fill-2: #1c3b2b;\n  --color-fill-3: #2a2513;\n  --color-fill-4: #265040;\n  --color-button: #d1a93a;\n  --color-button-text: #0b1410;\n  --color-button-hover-text: #0b1410;\n  --color-button-secondary: #0b1410;\n  --color-button-secondary-text: #e9dfc6;\n  --color-input: #08100c;\n  --color-input-text: #f2ebd8;\n  --color-input-border: #3b5445;\n  --color-disabled: #15261d;\n  --color-disabled-text: #57675b;\n  --color-danger: #e8785f;\n  --color-danger-surface: #2b1410;\n  --color-success: #7fcf8f;\n  --color-warning: #e3c064;\n  --color-notice: #13291d;\n  --color-notice-text: #dfe6d4;\n  --color-focus: #f5dc8c;\n  --color-shadow: rgb(0 0 0 / 0.55);\n  --color-overlay: rgb(4 9 7 / 0.72);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Avenir Next\", Jost, \"Century Gothic\", \"Gill Sans\", sans-serif;\n  --font-heading: \"Playfair Display\", \"Bodoni Moda\", Didot, \"Bodoni 72\", \"Bodoni MT\", Georgia, serif;\n  --font-ui: \"Avenir Next\", Jost, \"Century Gothic\", \"Gill Sans\", sans-serif;\n  --font-mono: \"Courier Prime\", \"Courier New\", Courier, monospace;\n  --text-base: 16px;\n  --text-small: 11px;\n  --text-ui: 11px;\n  --text-large: 22px;\n  --text-display: 168px;\n  --text-h1: 84px;\n  --text-h2: 44px;\n  --text-h3: 22px;\n  --line-body: 1.7;\n  --line-heading: 1.05;\n  --line-display: 0.9;\n  --weight-body: 400;\n  --weight-bold: 600;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 500;\n  --heading-transform: uppercase;\n  --heading-tracking: 1px;\n  --display-tracking: -3px;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 3px;\n  --border-style: solid;\n  --radius-control: 6px;\n  --radius-panel: 10px;\n  --radius-pill: 6px;\n  --radius-page: 14px;\n  --shadow-panel: 0 1px 2px var(--color-shadow), 0 14px 30px -14px var(--color-shadow);\n  --shadow-control: 0 1px 2px var(--color-shadow);\n  --shadow-control-hover: 0 8px 18px -6px var(--color-shadow);\n  --shadow-control-pressed: inset 0 1px 3px var(--color-shadow);\n  --shadow-dialog: 0 40px 80px -20px var(--color-shadow), 0 2px 6px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: linear-gradient(180deg, color-mix(in srgb, var(--color-page) 50%, white), var(--color-page) 520px);\n  --fill-bar: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='white'%3E%3Cpath opacity='.34' d='M29 4h1M218 7h1M164 8h1M68 9h1M138 10h1M155 17h1M208 17h1M8 22h1M11 22h1M66 25h1M153 25h1M183 25h1M169 28h1M101 30h1M96 33h1M109 35h1M206 37h1M49 38h1M214 44h1M87 57h1M231 60h1M35 64h1M108 66h1M135 73h1M17 74h1M113 74h1M3 76h1M41 77h1M96 77h1M50 80h1M14 87h1M97 88h1M56 89h1M38 92h1M142 92h1M134 93h1M58 95h1M212 97h1M116 100h1M53 103h1M212 104h1M35 105h1M104 107h1M228 107h1M145 112h1M144 115h1M104 122h1M22 125h1M117 125h1M215 127h1M22 128h1M207 130h1M68 134h1M195 134h1M179 140h1M126 147h1M53 149h1M220 149h1M20 151h1M98 159h1M128 160h1M91 165h1M231 167h1M44 169h1M130 169h1M27 170h1M29 170h1M42 170h1M60 177h1M136 177h1M5 180h1M80 180h1M125 180h1M49 181h1M213 181h1M97 186h1M116 187h1M59 195h1M40 196h1M203 196h1M51 197h1M18 207h1M231 220h1M218 225h1M149 226h1M49 230h1M132 231h1M62 233h1M129 234h1M230 234h1'/%3E%3Cpath opacity='.7' d='M48 5h1M53 16h1M154 17h1M30 22h1M97 32h1M165 33h1M233 36h1M181 39h1M202 40h1M148 45h1M45 87h1M76 90h1M83 94h1M87 99h1M184 113h1M110 114h1M184 116h1M237 121h1M207 122h1M129 125h1M57 128h1M213 128h1M168 147h1M27 149h1M51 155h1M224 159h1M0 166h1M23 184h1M131 186h1M30 191h1M222 195h1M39 207h1M206 210h1M8 227h1'/%3E%3Cpath opacity='.5' stroke-width='2' d='M232 6h2M28 28h2M13 51h2M116 58h2M209 93h2M167 94h2M144 101h2M212 111h2M12 115h2M153 157h2M1 182h2M54 186h2'/%3E%3C/g%3E%3C/svg%3E\") var(--color-bar);\n  --fill-bar-alt: linear-gradient(180deg, color-mix(in srgb, var(--color-bar-alt) 70%, white), var(--color-bar-alt));\n  --fill-inverse: linear-gradient(180deg, color-mix(in srgb, var(--color-inverse) 92%, white), 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: var(--color-accent);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 3px solid color-mix(in srgb, var(--color-focus) 50%, transparent);\n  --transition: all 0.2s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}