{
  "id": "v1-ci-6775",
  "long_id": "v1.cinematic.landing.s06.p07.t07.u05",
  "name": "Cinematic festival",
  "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 music festival or club night between 2015 and 2026: a violet-black page, a bar of ruled cells across the top, and one rounded frame holding the night scene, a ring of magenta light standing on the water with beams fanning out of it, the festival's name in huge lowercase geometric letters low at the left. Under it the names run as one poster, the nights stand side by side as lists of times, and everything that is not type is a rounded cell with a faint glow. It was the common look of festival, club and line-up sites in the late 2010s and the 2020s.",
  "url": "https://chrono.skin/s/v1-ci-6775",
  "preview_url": "https://chrono.skin/s/v1-ci-6775/specimen.html",
  "files": {
    "STYLE.md": "# Cinematic festival\n\n## Summary\n\nThis is the site of a music festival or club night between 2015 and 2026: a violet-black page, a bar of ruled cells across the top, and one rounded frame holding the night scene, a ring of magenta light standing on the water with beams fanning out of it, the festival's name in huge lowercase geometric letters low at the left. Under it the names run as one poster, the nights stand side by side as lists of times, and everything that is not type is a rounded cell with a faint glow. It was the common look of festival, club and line-up sites in the late 2010s and 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` (1400px) wide with `--space-6` side padding (`--space-4` on a phone). Sections pad themselves with `--space-8` (84px), `--tight` with `--space-7`.\n- Navigation is `.ds-nav`, a bar of ruled cells `--size-nav` (58px) tall on the page colour: the brand, then one equal cell to each of four links, then the word Menu (a `.ds-menu` sheet) and a small button. The current cell is tinted and stands on an accent mark.\n- The home view stacks: `.ds-hero`, the scene as one rounded frame `--size-scene` (800px) tall, inset from the window by `--space-4`, with a badge and a mono label across its head (`.ds-hero__top`), the two-line title low at the left and `.ds-hero__foot`, three cells of glass: the lead, the passes sold as a `.ds-progress`, and two buttons; a section with the `.ds-poster` of names in two sizes; a section with `.ds-days`, three `.ds-day` boxes side by side, each a `.ds-list` of times; a section with the `.ds-carousel` of wide `.ds-plate` pictures, one and a part of the next to a screen; then the `.ds-stat` box, the `.ds-grid` of four stages and the `.ds-band` as a rounded slab.\n- Inner pages have no hero. Each opens inside `.ds-wrap` with `.ds-top` (the breadcrumb) and the `.ds-page-header`, a box of two cells, 7 to 5: the title alone at the left, one line of text and at most two buttons at the right. Type alone; where a page has a picture (the night's) it is a full `.ds-plate--wide` at the top of `.ds-main`. Then `.ds-cols`: a column `--size-side` (280px) with the `.ds-sidebar` and a wide one; `--night` is 7 to 5, `--even` two halves. Tabs sit in a `.ds-toolbar` at the top of the wide column with a switch at its right end.\n- Views. The specimen is the site of a festival of three nights. `home` is the festival. `lineup` has the stages as a sidebar and an empty state at the left, and tabs with a switch, two notices, the timetable as a table with badges and a tooltip, and the pagination at the right. `night` shows one night: the plate of its stage, notes as prose and links at the left; a panel of facts, the two hosts as avatars and an accordion at the right. `tickets` has three passes as panels, each with a price and a progress line, then the form with its error and all four buttons beside a panel of three switches and the open dialog.\n- Below 1100px the days, the passes and the columns stack, the hero's foot goes to two rows and the grid and the figures go two by two; below 800px the navigation becomes two rows (brand and menu, then the link cells), the page header stacks, the ring grows against the narrower frame and a wide table scrolls inside `.ds-table__wrap`; below 520px grids are one column and plates are 4 to 3. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (stripes of the water, tab inset), `--space-2` 8px (label to text), `--space-3` 12px (between buttons, list rows, hero cells), `--space-4` 16px (panel and cell padding, grid gaps, the hero's inset), `--space-5` 22px (column gap, poster gap), `--space-6` 32px (page gutter, stack gap, the hero's padding), `--space-7` 52px (section head to content, tight sections), `--space-8` 84px (sections, the beacon's glow), `--space-9` 120px. `--space-track` 1px is the tracking of labels.\n- Other sizes: `--size-mark` 28px, `--size-control` 44px, `--size-dialog` 460px.\n- On a phone (800px and below) `.ds-nav__inner` has two rows: the `.ds-brand` and `.ds-nav__actions` (the `.ds-menu` and a button) above, `.ds-nav__links` below on a hairline, one row of cells that scrolls sideways without a scrollbar; the current cell stays tinted on its accent mark. At 520px and below the button in `.ds-nav__actions` is not shown and the `.ds-menu` stays.\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 (a picture, and the bars of a frame around it) stands on the bar: `--fill-bar` or `--color-bar`, and carries only `--color-bar-text`. The footer stands on `--fill-bar-alt` and carries `--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 picture `--color-bar` is the darkness and every solid shape (a tower, a roof, a column, a chair) is a silhouette in it; `--color-accent` is the light (lit windows, the underside of a roof, the end of a tunnel); `--color-accent-alt` is the second light (one far lamp, a sign); `--color-fill-1` to `--color-fill-4` are the tones between (far blocks, walls, hills, a floor); `--color-bar-text` is the hottest point of a light. The grain of a picture comes from `--fill-bar`, which shows wherever the sky or a wall is left open.\n- Nothing assumes that a palette is dark. A picture is as dark as `--color-bar`, the page as dark as `--color-page`; with a pale bar colour the pictures turn into prints.\n- `--color-fill-1` to `--color-fill-4` are also the grounds of grid cells and carry `--color-text` and `--color-heading`.\n- Buttons by ground. On the page, panels and fills: `.ds-button` and `.ds-button--secondary`. On a picture or a frame only `.ds-button--onscene` (fill `--color-bar-text`, text `--color-bar`) and `.ds-button--ghost`. On the inverted block only `.ds-button--inverse` and `.ds-button--ghost`. The destructive button is `--color-danger` with `--color-button-text`.\n- `--color-heading-alt` is the colour of kickers, list numbers, panel and sidebar titles and h3 in prose.\n- The label is the second voice: `--font-ui` at `--text-small` or `--text-ui`, `--ui-transform`, tracked by `--space-track` (a layout token, 2px). Years, timecodes, counts and plate numbers are labels in `--font-mono`.\n- The default badge is `--fill-accent` with `--color-accent-text`. Status badges are never fills: the status colour is text, outline and a small dot on a transparent ground. `.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 and cells, `--color-border-strong` above the list, a table and each figure and under the page header, `--color-border-muted` inside boxes, `--color-input-border` around fields. `--border-width-strong` marks the current item (navigation, sidebar, tabs, pagination), the progress line and the notice edge.\n- Radii: `--radius-control` for buttons, fields and carousel arrows; `--radius-panel` for panels, notices, the dialog, the menu and tooltips; `--radius-pill` for badges, switches and avatars; `--radius-page` for stills and grid cells. A still that fills a frame has no radius. Shapes inside a drawing use percentages and `clip-path`, never a radius token.\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.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: lights are a light token mixed with `transparent` at 10 to 90%; hairlines on a picture are `--color-bar-text` at 22 to 60%; the shade under the reel's title is `--color-bar` at 66 to 70%; the hovered list row is washed with `--color-accent` at 12%; the display size steps down as `--text-display` times 0.7, 0.46 and 0.3 at 1100px, 800px and 520px, with `--display-tracking` scaled by the same factors, and `--text-h1` times 0.6 and 0.46; the page title is `--text-h1` times 1.3. Opacity 0.7 to 0.86 dims secondary text on pictures and far shapes.\n- Here: graphite page, near-black pictures, silver text. The light `--color-accent` is silver, so buildings are lit without colour; the one warm tone, `--color-accent-alt` and `--color-heading-alt`, is the lamp on the mast, the sign, the small labels, the focus ring and the hovered button. The fills are three greys and one warm dark. The primary button is brushed silver with dark text; the inverted block is a sheet of silver.\n- Three families. `--font-heading` and `--font-ui` are one light condensed grotesque (Barlow Condensed, Avenir Next Condensed, Roboto Condensed, Arial Narrow; the references used commercial condensed faces): titles at `--weight-heading` 300 and `--weight-display` 200, always in capitals, labels at `--weight-ui` 500. `--font-body` is IBM Plex Sans at `--text-base` 15px and `--line-body` 1.55. `--font-mono` (IBM Plex Mono, Menlo) sets figures.\n- `--text-display` 208px with `--line-display` 0.86 and `--display-tracking` -1px (the hero title); `--text-h1` 88px (list titles, figures, the reel's title, the band, the footer line; the page title is 1.3 times that); `--text-h2` 46px (section and cell titles, the next project); `--text-h3` 24px (table titles, dialog title); `--text-large` 19px (leads).\n- Surface: hairlines of 1px and marks of 2px; corners of 2px on controls and panels and 3px on pictures, pills for badges; buttons and badges are brushed metal (a vertical gradient with a light upper edge), panels sink a little towards the bottom; the page carries fine vertical brush lines and `--fill-bar` a denser brush with one slanted sheen; a slow eased `--transition`; a dashed focus ring; no blur. Links in running text are underlined; navigation and titles are not.\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. 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. `.ds-linkrow` lays links in a row.\n- `.ds-button`: a label in a box. Variants: `--secondary`, `--danger` (destructive actions only), `--onscene` (pictures), `--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.\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 from the picture colours; `--2` lit from the left with `--color-accent-alt`, `--3` from above; `--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 line 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, `.ds-band__inner` inside. Only `.ds-button--inverse` and `.ds-button--ghost` on it.\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-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 name 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-section`: a block of the page; `--tight`. `.ds-section__head` holds a `.ds-section__kicker`, the `.ds-section__title` and an arrow link at the right.\n- `.ds-figure`: one standing person in a long coat seen from behind, a silhouette in `--color-bar` with a rim of light; it stands inside a picture and is placed by that picture.\n- `.ds-scene`: the picture of the shore, a positioned box on `--fill-bar` in `--color-bar-text` whose first children are empty layers, in this order: `.ds-scene__sky` (night sky with a few stars, lit at the horizon), `.ds-scene__beams` (thin beams fanning out of the ring), `.ds-scene__skyline` (a far town), `.ds-scene__tower` and `.ds-scene__lamp` (a beacon and its light), `.ds-scene__water` (the water, the ring's broken reflection and the two paths of light), `.ds-scene__ring` (the ring and its glow), `.ds-scene__pier` (the near pier and its posts), `.ds-scene__shade` (darkness under the text) and `.ds-scene__grain`. One per site.\n- `.ds-plate`: one wide picture (16 to 9; `--wide` 21 to 8), a single box of gradients in `.ds-plate__set` with `.ds-scene__grain` over it, `.ds-plate__label` (two mono labels across the head) and `.ds-plate__caption` (a `.ds-plate__title` and a label along the foot). Plates: the default is a lamp on a mast throwing two beams over the stacks of a stage; `--2` the ring far off over a wide water; `--3` three tents against a glow under a string of bulbs.\n- `.ds-nav`: the bar of cells. `.ds-nav__inner` holds the brand, `.ds-nav__links` of `.ds-nav__link` cells (the current one tinted on an accent mark, `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 bar: `.ds-menu__toggle` (an accent dot and the word) and `.ds-menu__list` of `.ds-menu__item` in the heading face with a mono number, a rounded sheet with a strong outline and a glow. Closed until clicked.\n- `.ds-hero`: the full scene of the home view: `.ds-hero__top`, `.ds-hero__title` of two lines, and `.ds-hero__foot` of three `.ds-hero__cell` (translucent, blurred): `.ds-hero__lead`, a progress line, `.ds-hero__actions` with `--onscene` and `--ghost` buttons. One per site.\n- `.ds-poster`: the names as one running block in the heading face at `--text-h1`: `.ds-poster__name` items parted by accent dots, every other one `--outline` (a text stroke); `.ds-poster--second` is the smaller second block.\n- `.ds-days`: three `.ds-day` boxes side by side; each has a `.ds-day__head` (the `.ds-day__name` and a date or badge) and a `.ds-list`.\n- `.ds-list`: the acts of one night: each `.ds-list__item` is a mono `.ds-list__time`, a `.ds-list__title` and a `.ds-list__meta` label for the stage; a hovered row is tinted.\n- `.ds-carousel`: `.ds-carousel__track` of `.ds-carousel__slide`, each one `.ds-plate`, the next showing at the edge; then `.ds-carousel__nav` with a count, `.ds-carousel__dots` of round `.ds-carousel__dot` (the current one a short pill) and two `.ds-carousel__arrow`.\n- `.ds-stat`: four cells in one rounded ruled box; each `.ds-stat__item` is a `.ds-stat__figure` over a `.ds-stat__label`.\n- `.ds-grid`: four rounded cells, one on each fill and each with a glow in a different corner; a `.ds-grid__cell` is a link with a mono label at the top and `.ds-grid__title` and `.ds-grid__text` at the bottom.\n- `.ds-band`: here a rounded slab inside the column, `.ds-band__title` beside one button.\n- `.ds-top`: the line that opens an inner page, with the breadcrumb.\n- `.ds-page-header`: head of an inner page, a rounded box of two cells: `.ds-page-header__main` with the `.ds-page-header__title`; `.ds-page-header__side` with one line of `.ds-page-header__text` and `.ds-page-header__actions` (ordinary buttons, since it stands on a panel).\n- `.ds-cols`: narrow and wide column; `--night`, `--even`. `.ds-toolbar` sets the tabs and a switch on one line. `.ds-passes` lays three panels side by side; `.ds-price` is a pass's price in the heading face. `.ds-people` lays two `.ds-person` side by side.\n- `.ds-sidebar`: a rounded panel with a `.ds-sidebar__title` label and a `.ds-sidebar__list` of `.ds-sidebar__item` in the heading face with a `.ds-sidebar__count`; the current one is a tinted rounded row.\n- `.ds-tabs`: one rounded strip of segments; the current `.ds-tabs__tab` (`is-current`) is filled with `--fill-accent`.\n- `.ds-footer`: the closing block on `--fill-bar-alt`: `.ds-footer__cols` of four ruled `.ds-footer__col` (the brand with a `.ds-footer__about` line, then three of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`), `.ds-footer__word`, the site's name as one large pale word, and `.ds-footer__legal`.\n\n## Never\n\n- `font-size >= 12px`: labels are the smallest text.\n- `font-size <= 208px`: the hero title is the largest.\n- `font-weight <= 600`: titles are light; only `strong` is heavier.\n- `font-families <= 3`: one condensed face for titles and labels, one sans-serif for reading, one monospace for figures.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `text-shadow = none`: type is flat, also on pictures.\n- `border-radius <= 2px`: corners are barely eased; only circles are round.\n- `border-width <= 3px`: a hairline is 1px and the strong rule, a pair of lines, 3px.\n- `box-shadow-blur <= 70px`: the widest shadow, under the dialog, ends at 70px.\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; picture; inverted block; footer) and take the text token and the buttons of that ground; never put a primary button on a picture or `--color-bar-text` on a fill. A new picture is built the way the existing ones are: it needs a subject that reduces to light and silhouette (a room, a doorway, a horizon, a figure against light, a lamp on an object), several layers of depth, one clear source of light and a frame or caption that says it is a picture; the bar colour for the ground 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, hard gradient stops and `clip-path`, and `.ds-scene__grain` last. An inner page gets a real picture or none: type alone is right, a wash of colour is not. Do not load an image and do not write a colour. If the installing project has photographs or film, they replace the drawn layers and the captions, labels and type stay. 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: 1400px;\n  --size-nav: 58px;\n  --size-mark: 28px;\n  --size-control: 44px;\n  --size-dialog: 460px;\n  --size-scene: 800px;\n  --size-side: 280px;\n  --space-track: 1px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 22px;\n  --space-6: 32px;\n  --space-7: 52px;\n  --space-8: 84px;\n  --space-9: 120px;\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--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--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, var(--color-accent) 24%, transparent);\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, the light is the accent, the second light the alternate\n   accent, the fills are the tones between, and everything solid is a\n   silhouette in the bar 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/* grain: the texture of the bar fill alone (the fill less its own\n   colour), laid over the finished picture, so it shows on dark and on\n   pale grounds alike */\n.ds-scene__grain {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background: linear-gradient(var(--color-bar), var(--color-bar)), var(--fill-bar);\n  background-blend-mode: difference, normal, normal, normal;\n  mix-blend-mode: difference;\n  pointer-events: none;\n}\n/* figure: one standing person in a long coat, seen from behind, with a\n   rim of light on the side of the lamp */\n.ds-figure {\n  position: absolute;\n  bottom: 9%;\n  left: 50%;\n  z-index: -1;\n  height: 56%;\n  aspect-ratio: 0.3;\n  transform: translateX(-50%);\n  filter: drop-shadow(calc(var(--border-width) * 2) 0 0 color-mix(in srgb, var(--color-accent) 70%, var(--color-bar-text)));\n  pointer-events: none;\n}\n.ds-figure::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--color-bar);\n  clip-path: polygon(43% 0, 57% 0, 63% 3%, 64% 8%, 59% 12%, 58% 14%, 80% 17%, 86% 24%, 90% 52%, 81% 53%, 77% 30%, 75% 50%, 88% 90%, 63% 91%, 62% 100%, 52% 100%, 50% 91%, 48% 100%, 38% 100%, 37% 91%, 12% 90%, 25% 50%, 23% 30%, 19% 53%, 10% 52%, 14% 24%, 20% 17%, 42% 14%, 41% 12%, 36% 8%, 37% 3%);\n}\n\n/* band: the inverted block */\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.ds-stack {\n  display: grid;\n  gap: var(--space-6);\n  min-width: 0;\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.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/* section head: a kicker, a large title and a link at the right */\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  color: var(--color-heading-alt);\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/* the shore: night on the water. A ring of light stands on the horizon\n   and lies broken in the water under it; thin beams fan out of it; a far\n   skyline and a beacon stand behind, a pier with its posts runs out from\n   the near bank. */\n.ds-scene__sky,\n.ds-scene__beams,\n.ds-scene__skyline,\n.ds-scene__tower,\n.ds-scene__lamp,\n.ds-scene__ring,\n.ds-scene__water,\n.ds-scene__pier,\n.ds-scene__shade {\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n}\n.ds-scene__sky {\n  inset: 0 0 40% 0;\n  background:\n    radial-gradient(circle, var(--color-bar-text) 0 var(--border-width), transparent var(--border-width-strong)) var(--space-4) var(--space-3) / 23% 37%,\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-text) 50%, transparent) 0 var(--border-width), transparent var(--border-width-strong)) var(--space-8) var(--space-7) / 31% 29%,\n    linear-gradient(to bottom, var(--color-bar) 0, var(--color-fill-4) 42%, var(--color-fill-2) 74%, color-mix(in srgb, var(--color-accent) 44%, var(--color-fill-3)) 100%);\n}\n.ds-scene__beams {\n  inset: 0 0 40% 0;\n  background: repeating-conic-gradient(from 3deg at 70% 66%, transparent 0deg 8.4deg, color-mix(in srgb, var(--color-accent-alt) 56%, transparent) 8.4deg 9deg);\n  -webkit-mask-image: radial-gradient(circle at 70% 66%, currentColor 12%, transparent 72%);\n  mask-image: radial-gradient(circle at 70% 66%, currentColor 12%, transparent 72%);\n}\n.ds-scene__skyline {\n  inset: 54% 0 40% 0;\n  background: color-mix(in srgb, var(--color-bar) 72%, var(--color-fill-4));\n  clip-path: polygon(0 100%, 0 35%, 0.8% 35%, 0.8% 85%, 3.2% 85%, 3.2% 60%, 4.4% 60%, 4.4% 80%, 6.2% 80%, 6.2% 65%, 8% 65%, 8% 60%, 10.4% 60%, 10.4% 25%, 12.2% 25%, 12.2% 65%, 15% 70%, 15% 35%, 18% 35%, 18% 65%, 21.6% 65%, 21.6% 60%, 23.4% 60%, 23.4% 50%, 25.2% 50%, 25.2% 80%, 28.2% 80%, 28.2% 50%, 30% 50%, 30% 75%, 34.2% 85%, 34.2% 50%, 36% 50%, 36% 15%, 37.8% 15%, 37.8% 80%, 40.2% 80%, 40.2% 30%, 42.6% 30%, 42.6% 50%, 44.4% 50%, 44.4% 65%, 46.8% 65%, 46.8% 35%, 49.2% 35%, 49.2% 80%, 52% 80%, 52% 45%, 54.4% 45%, 54.4% 75%, 57.4% 75%, 57.4% 60%, 59.2% 60%, 59.2% 85%, 81.4% 85%, 81.4% 55%, 82.2% 55%, 82.2% 65%, 85.2% 65%, 85.2% 75%, 88.4% 80%, 88.4% 55%, 91.4% 55%, 91.4% 75%, 95.8% 75%, 95.8% 40%, 98.2% 40%, 98.2% 70%, 100% 70%, 100% 100%);\n}\n.ds-scene__tower {\n  bottom: 40%;\n  left: 17%;\n  width: 1.5%;\n  height: 27%;\n  background: var(--color-bar);\n  clip-path: polygon(38% 0, 62% 0, 62% 7%, 74% 9%, 100% 100%, 0 100%, 26% 9%, 38% 7%);\n}\n.ds-scene__lamp {\n  top: 33%;\n  left: 17.75%;\n  width: var(--space-8);\n  aspect-ratio: 1;\n  background: radial-gradient(closest-side, var(--color-bar-text) 0 7%, var(--color-accent-alt) 15%, color-mix(in srgb, var(--color-accent-alt) 40%, transparent) 38%, transparent 100%);\n  transform: translate(-50%, -50%);\n}\n.ds-scene__ring {\n  bottom: 37.4%;\n  left: 70%;\n  width: 26%;\n  aspect-ratio: 1;\n  border-radius: 50%;\n  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 12%, transparent) 0 78%, color-mix(in srgb, var(--color-accent) 70%, transparent) 84%, var(--color-bar-text) 87% 89.5%, var(--color-accent) 92.5%, color-mix(in srgb, var(--color-accent) 40%, transparent) 96%, transparent 100%);\n  transform: translateX(-50%);\n}\n.ds-scene__ring::before {\n  content: \"\";\n  position: absolute;\n  inset: -46%;\n  border-radius: 50%;\n  background: radial-gradient(closest-side, transparent 0 40%, color-mix(in srgb, var(--color-accent) 30%, transparent) 66%, transparent 100%);\n}\n.ds-scene__water {\n  inset: 60% 0 0 0;\n  overflow: hidden;\n  background:\n    radial-gradient(ellipse 9% 100% at 70% 0, color-mix(in srgb, var(--color-accent) 60%, transparent), transparent 100%),\n    radial-gradient(ellipse 3% 46% at 17.75% 0, color-mix(in srgb, var(--color-accent-alt) 60%, transparent), transparent 100%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 40%, var(--color-fill-3)) 0, var(--color-fill-1) 20%, var(--color-bar) 100%);\n}\n.ds-scene__water::before {\n  content: \"\";\n  position: absolute;\n  top: -6.5%;\n  left: 70%;\n  width: 26%;\n  aspect-ratio: 1 / 1.3;\n  border-radius: 50%;\n  background: radial-gradient(closest-side, transparent 0 80%, color-mix(in srgb, var(--color-accent) 60%, transparent) 84%, var(--color-bar-text) 87% 89.5%, var(--color-accent) 92.5%, transparent 100%);\n  transform: translateX(-50%);\n  opacity: 0.8;\n}\n.ds-scene__water::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(to bottom, transparent 10%, var(--color-bar) 86%),\n    repeating-linear-gradient(to bottom, transparent 0 var(--space-1), color-mix(in srgb, var(--color-bar) 82%, transparent) var(--space-1) calc(var(--space-1) + var(--space-2)));\n}\n.ds-scene__pier {\n  inset: 0;\n  background: var(--color-bar);\n  clip-path: polygon(0 100%, 0 84%, 4% 82.61%, 4% 73.61%, 5.3% 73.16%, 5.3% 82.16%, 13% 79.49%, 13% 71.89%, 14.1% 71.51%, 14.1% 79.11%, 21% 76.72%, 21% 70.32%, 21.95% 69.99%, 21.95% 76.39%, 28.5% 74.12%, 28.5% 68.82%, 29.3% 68.54%, 29.3% 73.84%, 35% 71.86%, 35% 67.46%, 35.7% 67.22%, 35.7% 71.62%, 40.5% 69.96%, 40.5% 66.36%, 41.1% 66.15%, 41.1% 69.75%, 45.5% 68.22%, 45.5% 65.32%, 46% 65.15%, 46% 68.05%, 49.8% 66.73%, 49.8% 64.43%, 50.22% 64.29%, 50.22% 66.59%, 53.4% 65.48%, 53.4% 63.68%, 53.76% 63.56%, 53.76% 65.36%, 56.4% 64.44%, 56.4% 63.04%, 56.7% 62.94%, 56.7% 64.34%, 62% 62.5%, 63.2% 62.9%, 24% 100%);\n}\n.ds-scene__shade {\n  inset: 0;\n  background:\n    linear-gradient(to top, color-mix(in srgb, var(--color-bar) 86%, transparent) 0, transparent 34%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 70%, transparent) 0, transparent 16%);\n}\n\n/* plate: one wide frame, a single box of gradients; three of them */\n.ds-plate {\n  position: relative;\n  isolation: isolate;\n  display: block;\n  aspect-ratio: 16 / 9;\n  overflow: hidden;\n  border-radius: var(--radius-page);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  text-decoration: none;\n}\n.ds-plate--wide {\n  aspect-ratio: 21 / 8;\n}\n/* the mast: a lamp on a pole throws two beams over the stacks of a stage */\n.ds-plate__set {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background:\n    linear-gradient(to top, var(--color-bar) 0 13%, transparent 13%),\n    linear-gradient(var(--color-bar), var(--color-bar)) 79% 100% / 9% 40% no-repeat,\n    linear-gradient(var(--color-bar), var(--color-bar)) 90% 100% / 6% 30% no-repeat,\n    linear-gradient(var(--color-bar), var(--color-bar)) 66% 100% / 5% 24% no-repeat,\n    radial-gradient(ellipse 5% 9% at 30.3% 18%, var(--color-bar-text) 0 16%, var(--color-accent) 34%, color-mix(in srgb, var(--color-accent) 50%, transparent) 60%, transparent 100%),\n    linear-gradient(var(--color-bar), var(--color-bar)) 30% 100% / 0.7% 82% no-repeat,\n    linear-gradient(var(--color-bar), var(--color-bar)) 30% 26% / 5% 1.4% no-repeat,\n    conic-gradient(from 98deg at 30.3% 18%, transparent 0deg, color-mix(in srgb, var(--color-accent) 66%, transparent) 2deg, transparent 20deg, transparent 142deg, color-mix(in srgb, var(--color-accent-alt) 60%, transparent) 146deg, transparent 162deg, transparent 360deg),\n    radial-gradient(ellipse 60% 30% at 70% 88%, color-mix(in srgb, var(--color-accent) 46%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-bar), var(--color-fill-4) 56%, var(--color-fill-2) 87%);\n}\n/* the gate: the ring far off over a wide water */\n.ds-plate--2 .ds-plate__set {\n  background:\n    repeating-linear-gradient(to bottom, transparent 0 1.6%, color-mix(in srgb, var(--color-bar) 76%, transparent) 1.6% 3.2%) 0 100% / 100% 40% no-repeat,\n    radial-gradient(ellipse 5% 38% at 50% 60%, color-mix(in srgb, var(--color-accent) 80%, transparent), transparent 100%),\n    linear-gradient(to top, var(--color-bar) 0, color-mix(in srgb, var(--color-accent) 30%, var(--color-fill-1)) 40%, transparent 40%),\n    radial-gradient(ellipse 9% 16% at 50% 45%, transparent 0 76%, var(--color-bar-text) 80% 85%, var(--color-accent) 91%, transparent 100%),\n    radial-gradient(ellipse 22% 40% at 50% 45%, color-mix(in srgb, var(--color-accent) 40%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-bar), var(--color-fill-4) 40%, color-mix(in srgb, var(--color-accent) 36%, var(--color-fill-3)) 60%);\n}\n/* the tents: three peaks against the glow, a string of bulbs above */\n.ds-plate--3 .ds-plate__set {\n  background:\n    radial-gradient(circle, var(--color-bar-text) 0 var(--border-width), color-mix(in srgb, var(--color-accent) 70%, transparent) var(--border-width-strong), transparent var(--space-1)) 0 30% / var(--space-6) var(--space-3) repeat-x,\n    linear-gradient(to top, var(--color-bar) 0 16%, transparent 16%),\n    linear-gradient(to top right, var(--color-bar) 0 50%, transparent 50.4%) 8% 100% / 20% 62% no-repeat,\n    linear-gradient(to top left, var(--color-bar) 0 50%, transparent 50.4%) 33% 100% / 20% 62% no-repeat,\n    linear-gradient(to top right, var(--color-bar) 0 50%, transparent 50.4%) 50.6% 100% / 16% 48% no-repeat,\n    linear-gradient(to top left, var(--color-bar) 0 50%, transparent 50.4%) 69.7% 100% / 16% 48% no-repeat,\n    linear-gradient(to top right, var(--color-bar) 0 50%, transparent 50.4%) 83% 100% / 12% 38% no-repeat,\n    linear-gradient(to top left, var(--color-bar) 0 50%, transparent 50.4%) 97% 100% / 12% 38% no-repeat,\n    radial-gradient(ellipse 40% 60% at 28% 100%, color-mix(in srgb, var(--color-accent) 80%, transparent), transparent 100%),\n    radial-gradient(ellipse 30% 44% at 76% 100%, color-mix(in srgb, var(--color-accent-alt) 80%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-bar), var(--color-fill-4) 70%, var(--color-fill-3));\n}\n.ds-plate__caption {\n  position: absolute;\n  right: var(--space-5);\n  bottom: var(--space-4);\n  left: var(--space-5);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n}\n.ds-plate__title {\n  display: block;\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-plate__label {\n  position: absolute;\n  top: var(--space-4);\n  right: var(--space-5);\n  left: var(--space-5);\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n\n/* nav: a bar of ruled cells. The brand, one cell to a link, the menu,\n   and the ticket button filling the last cell. */\n.ds-nav {\n  position: relative;\n  z-index: 5;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-heading);\n}\n.ds-nav__inner {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: stretch;\n  min-height: var(--size-nav);\n}\n.ds-nav__inner > .ds-brand {\n  padding: 0 var(--space-6);\n}\n.ds-nav__links {\n  display: flex;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__links > li {\n  display: flex;\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-nav__link {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-nav);\n  padding: 0 var(--space-4);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\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: var(--link-decoration-quiet);\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  background: var(--color-surface);\n  color: var(--color-heading);\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(#lineup:target) .ds-nav__link[href=\"#lineup\"],\n.ds-page:has(#night:target) .ds-nav__link[href=\"#night\"],\n.ds-page:has(#tickets:target) .ds-nav__link[href=\"#tickets\"] {\n  background: var(--color-surface-alt);\n  color: var(--color-heading);\n  box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent);\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: stretch;\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__actions > .ds-button {\n  align-self: center;\n  margin: 0 var(--space-4);\n}\n\n/* menu: a sheet of glass under the word, the views in the heading face */\n.ds-menu {\n  position: relative;\n  display: flex;\n}\n.ds-menu__toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: 0 var(--space-5);\n  border-right: var(--border-width) var(--border-style) var(--color-border);\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-2);\n  height: var(--space-2);\n  border-radius: 50%;\n  background: var(--color-accent);\n}\n.ds-menu__list {\n  position: absolute;\n  top: calc(100% + var(--space-2));\n  right: 0;\n  z-index: 8;\n  width: calc(var(--size-side) * 1.3);\n  max-width: 90vw;\n  margin: 0;\n  padding: var(--space-4) var(--space-5);\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  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 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: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover {\n  color: var(--color-heading-alt);\n}\n\n/* hero: the shore as one rounded frame inset from the window, the title\n   low at the left, three cells of glass along its foot */\n.ds-hero {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  min-height: var(--size-scene);\n  margin: var(--space-4);\n  padding: var(--space-6);\n  border-radius: var(--radius-page);\n}\n.ds-hero__top {\n  position: absolute;\n  top: var(--space-5);\n  right: var(--space-6);\n  left: var(--space-6);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  margin: 0;\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__foot {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);\n  gap: var(--space-3);\n  margin-top: var(--space-6);\n}\n.ds-hero__cell {\n  display: grid;\n  align-content: space-between;\n  gap: var(--space-4);\n  min-width: 0;\n  padding: var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 24%, transparent);\n  border-radius: var(--radius-panel);\n  background: color-mix(in srgb, var(--color-bar) 56%, transparent);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-hero__lead {\n  max-width: 44ch;\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: 1.3;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* section */\n.ds-section {\n  padding: var(--space-8) 0;\n}\n.ds-section--tight {\n  padding: var(--space-7) 0;\n}\n\n/* poster: the names, set as one running block */\n.ds-poster {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 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: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  list-style: none;\n}\n.ds-poster__name {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-5);\n}\n.ds-poster__name::after {\n  content: \"\";\n  flex: none;\n  width: var(--space-3);\n  height: var(--space-3);\n  border-radius: 50%;\n  background: var(--color-accent);\n}\n.ds-poster__name--outline {\n  color: transparent;\n  -webkit-text-stroke: var(--border-width) var(--color-heading);\n}\n.ds-poster--second {\n  margin-top: var(--space-5);\n  color: var(--color-text);\n  font-size: var(--text-h2);\n}\n.ds-poster--second .ds-poster__name::after {\n  width: var(--space-2);\n  height: var(--space-2);\n  background: var(--color-accent-alt);\n}\n\n/* days: one column to a night, each a list of times */\n.ds-days {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n.ds-day {\n  min-width: 0;\n  overflow: hidden;\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-day__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-day__name {\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: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: baseline;\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-muted);\n  transition: var(--transition);\n}\n.ds-list__item:last-child {\n  border-bottom: 0;\n}\n.ds-list__item:hover,\n.ds-list__item.is-hover {\n  background: var(--color-surface-strong);\n}\n.ds-list__time {\n  color: var(--color-heading-alt);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  font-variant-numeric: tabular-nums;\n}\n.ds-list__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: var(--line-heading);\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\n/* carousel: one wide plate to a slide, the next one showing at the edge */\n.ds-carousel {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  gap: var(--space-4);\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  flex: 0 0 68%;\n  min-width: 0;\n  scroll-snap-align: start;\n}\n.ds-carousel__nav {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-heading);\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-2);\n  height: var(--space-2);\n  border-radius: 50%;\n  background: var(--color-border);\n}\n.ds-carousel__dot.is-current {\n  width: var(--space-6);\n  border-radius: var(--radius-pill);\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) var(--color-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-panel);\n  color: inherit;\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  text-decoration: none;\n  transition: var(--transition);\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:hover,\n.ds-carousel__arrow.is-hover {\n  border-color: var(--color-border-strong);\n}\n.ds-carousel__arrow.is-disabled {\n  opacity: 0.4;\n}\n\n/* stats: four cells in one ruled box */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  margin: 0;\n  overflow: hidden;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-stat__item {\n  display: grid;\n  gap: var(--space-2);\n  padding: var(--space-5);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\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(--heading-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* grid: the four stages, each a rounded cell on a fill with its own glow */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\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  height: 100%;\n  padding: var(--space-4);\n  overflow: hidden;\n  border-radius: var(--radius-page);\n  background:\n    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--color-accent) 50%, transparent) 0, transparent 46%),\n    var(--color-fill-1);\n  color: var(--color-text);\n  text-decoration: none;\n  box-shadow: var(--shadow-panel);\n  transition: var(--transition);\n}\n.ds-grid > :nth-child(2) .ds-grid__cell {\n  background:\n    radial-gradient(circle at 20% 24%, color-mix(in srgb, var(--color-accent-alt) 56%, transparent) 0, transparent 50%),\n    var(--color-fill-2);\n}\n.ds-grid > :nth-child(3) .ds-grid__cell {\n  background:\n    radial-gradient(circle at 60% 0%, color-mix(in srgb, var(--color-accent) 44%, transparent) 0, transparent 54%),\n    var(--color-fill-3);\n}\n.ds-grid > :nth-child(4) .ds-grid__cell {\n  background:\n    radial-gradient(circle at 90% 40%, color-mix(in srgb, var(--color-accent-alt) 50%, transparent) 0, transparent 50%),\n    var(--color-fill-4);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n  box-shadow: var(--shadow-control-hover);\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 as a rounded slab inside the column */\n.ds-band {\n  border-radius: var(--radius-page);\n}\n.ds-band__inner {\n  padding: var(--space-6);\n}\n.ds-band__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\n/* inner pages: type alone, in a box of two cells */\n.ds-top {\n  padding: var(--space-5) 0 var(--space-4);\n  color: var(--color-text-muted);\n}\n.ds-page-header {\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  overflow: hidden;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  background: var(--fill-panel);\n}\n.ds-page-header__main {\n  min-width: 0;\n  padding: var(--space-6) var(--space-5);\n}\n.ds-page-header__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-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__side {\n  display: grid;\n  align-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-5);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__text {\n  margin: 0;\n  color: var(--color-text);\n  font-size: var(--text-large);\n  line-height: 1.3;\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-5) 0 var(--space-8);\n}\n.ds-cols {\n  display: grid;\n  grid-template-columns: var(--size-side) minmax(0, 1fr);\n  align-items: start;\n  gap: var(--space-5);\n}\n.ds-cols--night {\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n}\n.ds-cols--even {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-passes {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n.ds-price {\n  margin: 0 0 var(--space-3);\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(--heading-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-panel__body > .ds-progress,\n.ds-panel__body > .ds-button {\n  margin-top: var(--space-4);\n}\n.ds-people {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n\n/* sidebar: a rounded box of links */\n.ds-sidebar {\n  display: grid;\n  gap: var(--space-3);\n  padding: var(--space-4);\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-sidebar__title {\n  margin: 0;\n  color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n  display: grid;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\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-2) var(--space-3);\n  border-radius: var(--radius-control);\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: var(--line-heading);\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  color: var(--color-heading);\n}\n.ds-sidebar__item.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\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: one rounded strip of segments, the current one filled */\n.ds-tabs {\n  display: inline-flex;\n  max-width: 100%;\n  gap: var(--space-1);\n  margin: 0;\n  padding: var(--space-1);\n  overflow-x: auto;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-panel);\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-2) var(--space-4);\n  border-radius: calc(var(--radius-control) - var(--space-1));\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  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-tabs__tab.is-current .ds-badge--quiet {\n  border-color: currentColor;\n  color: inherit;\n}\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-5);\n}\n.ds-toolbar .ds-switch {\n  padding: 0;\n  border-bottom: 0;\n}\n\n/* footer: ruled cells, then the name as one large pale word */\n.ds-footer {\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  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-footer__col {\n  padding: var(--space-6) var(--space-5);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-footer__col:first-child {\n  border-left: 0;\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: 0;\n  padding: var(--space-4) var(--space-5) 0;\n  color: color-mix(in srgb, var(--color-bar-alt-text) 34%, 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}\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: var(--space-4) var(--space-5);\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-footer__word {\n    font-size: calc(var(--text-display) * 0.7);\n  }\n  .ds-hero__foot {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  }\n  .ds-hero__foot > :first-child {\n    grid-column: 1 / -1;\n  }\n  .ds-days,\n  .ds-passes,\n  .ds-cols,\n  .ds-cols--night {\n    grid-template-columns: minmax(0, 1fr);\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    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-footer__cols {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .ds-footer__col:first-child {\n    grid-column: 1 / -1;\n    border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-footer__col:nth-child(2) {\n    border-left: 0;\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    grid-template-columns: minmax(0, 1fr) auto;\n  }\n  .ds-nav__inner > .ds-brand {\n    padding: 0 var(--space-4);\n  }\n  .ds-nav__links {\n    grid-row: 2;\n    grid-column: 1 / -1;\n    overflow-x: auto;\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n    scrollbar-width: none;\n  }\n  .ds-nav__links > li:first-child .ds-nav__link {\n    border-left: 0;\n  }\n  .ds-nav__link {\n    min-height: calc(var(--size-nav) - var(--space-3));\n    padding: 0 var(--space-3);\n  }\n  .ds-menu__toggle {\n    padding: 0 var(--space-4);\n  }\n  .ds-hero {\n    min-height: calc(var(--size-scene) * 0.86);\n    margin: var(--space-2);\n    padding: var(--space-4);\n  }\n  .ds-hero__top {\n    right: var(--space-4);\n    left: var(--space-4);\n  }\n  .ds-hero__title,\n  .ds-footer__word {\n    font-size: calc(var(--text-display) * 0.46);\n    letter-spacing: calc(var(--display-tracking) * 0.46);\n  }\n  .ds-section__title,\n  .ds-page-header__title,\n  .ds-band__title,\n  .ds-poster,\n  .ds-price,\n  .ds-stat__figure {\n    font-size: calc(var(--text-h1) * 0.6);\n  }\n  .ds-poster--second {\n    font-size: calc(var(--text-h2) * 0.8);\n  }\n  .ds-hero__foot,\n  .ds-cols--even,\n  .ds-page-header {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-page-header__side {\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n    border-left: 0;\n  }\n  .ds-section,\n  .ds-section--tight {\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-carousel__slide {\n    flex-basis: 86%;\n  }\n  .ds-plate__title {\n    font-size: var(--text-h3);\n  }\n  .ds-scene__ring,\n  .ds-scene__water::before {\n    width: 44%;\n  }\n  .ds-scene__ring {\n    bottom: 38.6%;\n  }\n}\n@media (max-width: 520px) {\n  .ds-hero__title,\n  .ds-footer__word {\n    font-size: calc(var(--text-display) * 0.34);\n    letter-spacing: calc(var(--display-tracking) * 0.34);\n  }\n  .ds-section__title,\n  .ds-page-header__title,\n  .ds-band__title,\n  .ds-poster,\n  .ds-price,\n  .ds-stat__figure {\n    font-size: calc(var(--text-h1) * 0.46);\n  }\n  .ds-hero__lead,\n  .ds-page-header__text {\n    font-size: var(--text-base);\n  }\n  .ds-grid,\n  .ds-people,\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-grid__cell {\n    gap: var(--space-6);\n  }\n  .ds-stat__item {\n    padding: var(--space-4);\n  }\n  .ds-footer__cols {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-footer__col {\n    padding: var(--space-5) var(--space-4);\n    border-bottom: var(--border-width) var(--border-style) var(--color-border);\n    border-left: 0;\n  }\n  .ds-nav__actions > .ds-button {\n    display: none;\n  }\n  .ds-plate {\n    aspect-ratio: 4 / 3;\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  #lineup .ds-table th:nth-child(4),\n  #lineup .ds-table td:nth-child(4) {\n    display: none;\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 festival 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\">Festival</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#lineup\">Line-up</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#night\">Saturday</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#tickets\">Tickets</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=\"#home\">after dark <span class=\"ds-label ds-label--mono\">01</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#lineup\">the line-up <span class=\"ds-label ds-label--mono\">02</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#night\">saturday night <span class=\"ds-label ds-label--mono\">03</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#tickets\">passes <span class=\"ds-label ds-label--mono\">04</span></a></li>\n        </ul>\n      </details>\n      <a class=\"ds-button ds-button--small\" href=\"#tickets\">Get a pass</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__sky\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__beams\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__skyline\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__tower\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__lamp\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__water\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__ring\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__pier\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__shade\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__grain\" aria-hidden=\"true\"></span>\n    <p class=\"ds-hero__top\"><span class=\"ds-badge\">Passes on sale</span><span class=\"ds-label ds-label--mono\">Three nights on the water, 17 to 19 July 2026</span></p>\n    <h1 class=\"ds-hero__title\"><span>after</span><span>dark</span></h1>\n    <div class=\"ds-hero__foot\">\n      <div class=\"ds-hero__cell\">\n        <p class=\"ds-hero__lead\">Forty acts on four stages at the old ferry pier. The gates open at six and the ring goes dark at sunrise.</p>\n      </div>\n      <div class=\"ds-hero__cell\">\n        <div class=\"ds-progress\">\n          <p class=\"ds-progress__head\"><span>Weekend passes gone</span><span class=\"ds-progress__value\">82%</span></p>\n          <progress class=\"ds-progress__bar\" value=\"82\" max=\"100\">82%</progress>\n        </div>\n        <p class=\"ds-label ds-label--mono\">2,160 of 12,000 left</p>\n      </div>\n      <div class=\"ds-hero__cell\">\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--onscene\" href=\"#tickets\">Get a pass</a>\n          <a class=\"ds-button ds-button--ghost\" href=\"#lineup\">Line-up</a>\n        </div>\n      </div>\n    </div>\n  </div>\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\">Who plays</p>\n        <h2 class=\"ds-section__title\">the line-up</h2>\n        <a class=\"ds-link ds-link--arrow\" href=\"#lineup\">All forty acts</a>\n      </div>\n      <ul class=\"ds-poster\">\n        <li class=\"ds-poster__name\">live modular</li>\n        <li class=\"ds-poster__name ds-poster__name--outline\">tape loops</li>\n        <li class=\"ds-poster__name\">the string quartet</li>\n        <li class=\"ds-poster__name ds-poster__name--outline\">two drummers</li>\n        <li class=\"ds-poster__name\">a choir of eight</li>\n        <li class=\"ds-poster__name ds-poster__name--outline\">the late set</li>\n      </ul>\n      <ul class=\"ds-poster ds-poster--second\">\n        <li class=\"ds-poster__name\">the resident</li>\n        <li class=\"ds-poster__name\">brass on the pier</li>\n        <li class=\"ds-poster__name\">four hands, one piano</li>\n        <li class=\"ds-poster__name\">the sunrise set</li>\n        <li class=\"ds-poster__name\">field recordings</li>\n        <li class=\"ds-poster__name\">a secret guest</li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--tight\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">Night by night</p>\n        <h2 class=\"ds-section__title\">three nights</h2>\n        <a class=\"ds-link ds-link--arrow\" href=\"#lineup\">The full timetable</a>\n      </div>\n      <div class=\"ds-days\">\n        <div class=\"ds-day\">\n          <div class=\"ds-day__head\"><h3 class=\"ds-day__name\">friday</h3><span class=\"ds-label ds-label--mono\">17.07</span></div>\n          <ul class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item\"><span class=\"ds-list__time\">18:00</span><a class=\"ds-list__title\" href=\"#lineup\">field recordings</a><span class=\"ds-label ds-list__meta\">Pier</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__time\">20:30</span><a class=\"ds-list__title\" href=\"#lineup\">the string quartet</a><span class=\"ds-label ds-list__meta\">Ring</span></li>\n            <li class=\"ds-list__item is-hover\"><span class=\"ds-list__time\">23:00</span><a class=\"ds-list__title\" href=\"#lineup\">live modular</a><span class=\"ds-label ds-list__meta\">Ring</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__time\">02:00</span><a class=\"ds-list__title\" href=\"#lineup\">the resident</a><span class=\"ds-label ds-list__meta\">Hangar</span></li>\n          </ul>\n        </div>\n        <div class=\"ds-day\">\n          <div class=\"ds-day__head\"><h3 class=\"ds-day__name\">saturday</h3><span class=\"ds-badge ds-badge--warning\">Few left</span></div>\n          <ul class=\"ds-list\">\n            <li class=\"ds-list__item\"><span class=\"ds-list__time\">18:00</span><a class=\"ds-list__title\" href=\"#night\">brass on the pier</a><span class=\"ds-label ds-list__meta\">Pier</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__time\">21:00</span><a class=\"ds-list__title\" href=\"#night\">two drummers</a><span class=\"ds-label ds-list__meta\">Ring</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__time\">23:30</span><a class=\"ds-list__title\" href=\"#night\">tape loops</a><span class=\"ds-label ds-list__meta\">Tents</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__time\">03:00</span><a class=\"ds-list__title\" href=\"#night\">the late set</a><span class=\"ds-label ds-list__meta\">Hangar</span></li>\n          </ul>\n        </div>\n        <div class=\"ds-day\">\n          <div class=\"ds-day__head\"><h3 class=\"ds-day__name\">sunday</h3><span class=\"ds-label ds-label--mono\">19.07</span></div>\n          <ul class=\"ds-list\">\n            <li class=\"ds-list__item\"><span class=\"ds-list__time\">17:00</span><a class=\"ds-list__title\" href=\"#lineup\">four hands, one piano</a><span class=\"ds-label ds-list__meta\">Tents</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__time\">20:00</span><a class=\"ds-list__title\" href=\"#lineup\">a choir of eight</a><span class=\"ds-label ds-list__meta\">Ring</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__time\">23:00</span><a class=\"ds-list__title\" href=\"#lineup\">a secret guest</a><span class=\"ds-label ds-list__meta\">Ring</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__time\">04:30</span><a class=\"ds-list__title\" href=\"#lineup\">the sunrise set</a><span class=\"ds-label ds-list__meta\">Pier</span></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--tight\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">The grounds</p>\n        <h2 class=\"ds-section__title\">where it happens</h2>\n        <a class=\"ds-link ds-link--arrow\" href=\"#night\">Saturday in full</a>\n      </div>\n      <div class=\"ds-carousel\">\n        <ul class=\"ds-carousel__track\">\n          <li class=\"ds-carousel__slide\"><a class=\"ds-plate\" href=\"#night\"><span class=\"ds-plate__set\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-plate__label ds-label ds-label--mono\"><span>Plate 01</span><span>22:40</span></span><span class=\"ds-plate__caption\"><span class=\"ds-plate__title\">the mast</span><span class=\"ds-label\">Hangar stage, 3,000 standing</span></span></a></li>\n          <li class=\"ds-carousel__slide\"><a class=\"ds-plate ds-plate--2\" href=\"#night\"><span class=\"ds-plate__set\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-plate__label ds-label ds-label--mono\"><span>Plate 02</span><span>01:15</span></span><span class=\"ds-plate__caption\"><span class=\"ds-plate__title\">the ring</span><span class=\"ds-label\">Main stage, on the water</span></span></a></li>\n          <li class=\"ds-carousel__slide\"><a class=\"ds-plate ds-plate--3\" href=\"#night\"><span class=\"ds-plate__set\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-plate__label ds-label ds-label--mono\"><span>Plate 03</span><span>23:30</span></span><span class=\"ds-plate__caption\"><span class=\"ds-plate__title\">the tents</span><span class=\"ds-label\">Three small rooms</span></span></a></li>\n        </ul>\n        <div class=\"ds-carousel__nav\">\n          <span class=\"ds-label ds-label--mono\">01 / 03</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>\n          <a class=\"ds-carousel__arrow is-disabled\" href=\"#home\" aria-label=\"Previous plate\"></a>\n          <a class=\"ds-carousel__arrow\" href=\"#night\" aria-label=\"Next plate\"></a>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--tight\">\n    <div class=\"ds-wrap ds-stack\">\n      <div class=\"ds-stat\" data-component=\"stats\">\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">40</p><p class=\"ds-label ds-stat__label\">Acts</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">04</p><p class=\"ds-label ds-stat__label\">Stages</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">03</p><p class=\"ds-label ds-stat__label\">Nights</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">05:12</p><p class=\"ds-label ds-stat__label\">Sunrise</p></div>\n      </div>\n      <ul class=\"ds-grid\" data-component=\"grid\">\n        <li><a class=\"ds-grid__cell\" href=\"#night\"><span class=\"ds-label ds-label--mono\">Stage 01</span><span><span class=\"ds-grid__title\">the ring</span><span class=\"ds-grid__text\">On a barge, forty metres out.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#night\"><span class=\"ds-label ds-label--mono\">Stage 02</span><span><span class=\"ds-grid__title\">the hangar</span><span class=\"ds-grid__text\">Indoors, loud, open until five.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#night\"><span class=\"ds-label ds-label--mono\">Stage 03</span><span><span class=\"ds-grid__title\">the tents</span><span class=\"ds-grid__text\">Three small rooms for listening.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#night\"><span class=\"ds-label ds-label--mono\">Stage 04</span><span><span class=\"ds-grid__title\">the pier</span><span class=\"ds-grid__text\">Acoustic sets at dusk and dawn.</span></span></a></li>\n      </ul>\n      <div class=\"ds-band\">\n        <div class=\"ds-band__inner\">\n          <h2 class=\"ds-band__title\">the gates open at six</h2>\n          <a class=\"ds-button ds-button--inverse\" href=\"#tickets\">Get a pass</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"lineup\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Festival</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#lineup\">Line-up</a></li>\n        <li class=\"ds-breadcrumb__current\">Saturday</li>\n      </ol>\n    </div>\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">the timetable</h1>\n      </div>\n      <div class=\"ds-page-header__side\">\n        <p class=\"ds-page-header__text\">Forty acts over three nights. Times can move by a quarter of an hour.</p>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button\" href=\"#tickets\">Get a pass</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\">Stages</p>\n          <div class=\"ds-sidebar__list\">\n            <a class=\"ds-sidebar__item is-current\" href=\"#lineup\">all stages <span class=\"ds-sidebar__count\">14</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#lineup\">the ring <span class=\"ds-sidebar__count\">04</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#lineup\">the hangar <span class=\"ds-sidebar__count\">05</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#lineup\">the tents <span class=\"ds-sidebar__count\">03</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#lineup\">the pier <span class=\"ds-sidebar__count\">02</span></a>\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 picks yet</p>\n          <p class=\"ds-empty__text\">Mark the acts you want to see and they are kept here, in order.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#night\">Start with Saturday</a>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-toolbar\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab\" href=\"#lineup\">Friday</a></li>\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#lineup\">Saturday <span class=\"ds-badge ds-badge--quiet\">14</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#lineup\">Sunday</a></li>\n          </ul>\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 ds-label\">Only my picks</span></label>\n        </div>\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Ferry</span>The last boat back leaves the pier at 05:40, after the sunrise set.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Moved</span>The choir of eight moves from Saturday to Sunday at 20:00.</p>\n        </div>\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th>Time</th><th>Act</th><th>Stage</th><th class=\"ds-table__num\">Minutes</th><th>Status</th></tr>\n            </thead>\n            <tbody>\n              <tr><td class=\"ds-label ds-label--mono\">18:00</td><td><a class=\"ds-table__title\" href=\"#night\">brass on the pier</a></td><td>The pier</td><td class=\"ds-table__num\">50</td><td><span class=\"ds-badge ds-badge--success\">On time</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">19:30</td><td><a class=\"ds-table__title\" href=\"#night\">four hands, one piano</a></td><td>The tents</td><td class=\"ds-table__num\">60</td><td><span class=\"ds-badge ds-badge--success\">On time</span></td></tr>\n              <tr class=\"is-hover\"><td class=\"ds-label ds-label--mono\">21:00</td><td><a class=\"ds-table__title\" href=\"#night\">two drummers</a></td><td>The ring</td><td class=\"ds-table__num\">75</td><td><span class=\"ds-badge\" data-component=\"badge\">Headline</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">23:30</td><td><a class=\"ds-table__title\" href=\"#night\">tape loops</a></td><td>The tents</td><td class=\"ds-table__num\">90</td><td><span class=\"ds-badge ds-badge--warning\">15 late</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">01:00</td><td><a class=\"ds-table__title\" href=\"#night\">live modular</a></td><td>The hangar</td><td class=\"ds-table__num\">120</td><td><span class=\"ds-badge ds-badge--danger\">Full</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">03:00</td><td><a class=\"ds-table__title\" href=\"#night\">the late set</a></td><td>The hangar</td><td class=\"ds-table__num\">120</td><td><span class=\"ds-tooltip ds-tooltip--end ds-label ds-label--muted\" tabindex=\"0\">Back to back<span class=\"ds-tooltip__tip\">Two players share the desk for the whole set, record for record.</span></span></td></tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"ds-table__foot\">\n          <span class=\"ds-label\">Showing 6 of 14 acts</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#lineup\">Prev</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#lineup\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#lineup\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#lineup\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#lineup\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"night\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Festival</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#lineup\">Line-up</a></li>\n        <li class=\"ds-breadcrumb__current\">Saturday night</li>\n      </ol>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">saturday night</h1>\n      </div>\n      <div class=\"ds-page-header__side\">\n        <p class=\"ds-page-header__text\">Fourteen acts from six in the evening until the ferry. The hangar runs latest.</p>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button\" href=\"#tickets\">Saturday pass</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#lineup\">Timetable</a>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-stack\">\n      <span class=\"ds-plate ds-plate--wide\"><span class=\"ds-plate__set\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-plate__label ds-label ds-label--mono\"><span>The hangar stage</span><span>18.07, 22:40</span></span><span class=\"ds-plate__caption\"><span class=\"ds-plate__title\">one lamp, two beams</span><span class=\"ds-label\">Plate 01</span></span></span>\n      <div class=\"ds-cols ds-cols--night\">\n        <div class=\"ds-stack\">\n          <div class=\"ds-prose\" data-component=\"typography\">\n            <h1>how the night runs</h1>\n            <p class=\"ds-prose__lead\">It starts with brass on the pier while the light goes, and it ends in the hangar with the doors open to the water.</p>\n            <p>Nothing overlaps on the ring. Between sets the stage goes dark for <strong>exactly ten minutes</strong> and the only light on the site is the lamp on the mast.</p>\n            <h2>getting between stages</h2>\n            <p>Four minutes on foot from the ring to the hangar. Your pass carries the code <code>SAT 18</code> and opens every gate.</p>\n            <h3>Bring</h3>\n            <ul>\n              <li>Something warm for after two</li>\n              <li>Ear plugs; we hand them out as well</li>\n              <li>A bottle, to fill at the taps</li>\n            </ul>\n          </div>\n          <ul class=\"ds-linkrow\" data-component=\"links\">\n            <li><a class=\"ds-link\" href=\"#lineup\">The timetable</a></li>\n            <li><a class=\"ds-link is-visited\" href=\"#night\">The site map (seen)</a></li>\n            <li><a class=\"ds-link is-hover\" href=\"#tickets\">Saturday passes</a></li>\n            <li><a class=\"ds-link is-active\" href=\"#tickets\">Ferry times</a></li>\n            <li><a class=\"ds-link ds-link--quiet\" href=\"#home\">Back to the festival</a></li>\n          </ul>\n        </div>\n\n        <div class=\"ds-stack\">\n          <div class=\"ds-panel\" data-component=\"panel\">\n            <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">The night in short</h2><span class=\"ds-badge ds-badge--quiet\">18.07</span></div>\n            <div class=\"ds-panel__body\">\n              <dl class=\"ds-facts\">\n                <dt>Gates</dt><dd>18:00</dd>\n                <dt>Headline</dt><dd>21:00, the ring</dd>\n                <dt>Last set</dt><dd>03:00, the hangar</dd>\n                <dt>Last ferry</dt><dd>05:40</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 resident</span><span class=\"ds-person__role\">Opens the hangar</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 guest</span><span class=\"ds-person__role\">Closes it</span></span></div>\n          </div>\n          <div class=\"ds-accordion\">\n            <details class=\"ds-accordion__item\" open>\n              <summary class=\"ds-accordion__head\">Getting there</summary>\n              <p class=\"ds-accordion__body\">A ferry every twenty minutes from the town quay, free with a pass. No cars on the pier.</p>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">What stays outside</summary>\n              <p class=\"ds-accordion__body\">Glass, flares and anything with a motor.</p>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">If it rains</summary>\n              <p class=\"ds-accordion__body\">The ring plays on. The pier sets move into the tents.</p>\n            </details>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"tickets\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Festival</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#tickets\">Tickets</a></li>\n        <li class=\"ds-breadcrumb__current\">Passes</li>\n      </ol>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">passes</h1>\n      </div>\n      <div class=\"ds-page-header__side\">\n        <p class=\"ds-page-header__text\">One night or all three. Every pass includes the ferry both ways.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-stack\">\n      <div class=\"ds-passes\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">One night</h2><span class=\"ds-badge ds-badge--success\">On sale</span></div>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-price\">48.00</p>\n            <p class=\"ds-panel__text\">Friday, Saturday or Sunday, from six until the last ferry.</p>\n            <div class=\"ds-progress\">\n              <p class=\"ds-progress__head\"><span>Sold</span><span class=\"ds-progress__value\">61%</span></p>\n              <progress class=\"ds-progress__bar\" value=\"61\" max=\"100\">61%</progress>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">The weekend</h2><span class=\"ds-badge ds-badge--warning\">Few left</span></div>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-price\">112.00</p>\n            <p class=\"ds-panel__text\">All three nights and a place on the first ferry out.</p>\n            <div class=\"ds-progress\">\n              <p class=\"ds-progress__head\"><span>Sold</span><span class=\"ds-progress__value\">82%</span></p>\n              <progress class=\"ds-progress__bar\" value=\"82\" max=\"100\">82%</progress>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Weekend and berth</h2><span class=\"ds-badge ds-badge--danger\">Sold out</span></div>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-price\">190.00</p>\n            <p class=\"ds-panel__text\">The weekend pass and a bunk on the moored boat.</p>\n            <div class=\"ds-progress\">\n              <p class=\"ds-progress__head\"><span>Sold</span><span class=\"ds-progress__value\">100%</span></p>\n              <progress class=\"ds-progress__bar\" value=\"100\" max=\"100\">100%</progress>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-cols ds-cols--even\">\n        <form class=\"ds-form\" data-component=\"form\" action=\"#tickets\">\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 hold your pass.</p>\n          </div>\n          <div class=\"ds-form__row\">\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"pass-name\">Name on the pass</label>\n              <input class=\"ds-form__input\" id=\"pass-name\" type=\"text\" value=\"A. Visitor\">\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"pass-kind\">Pass</label>\n              <select class=\"ds-form__select\" id=\"pass-kind\">\n                <option>The weekend, 112.00</option>\n                <option>One night, Saturday, 48.00</option>\n                <option>One night, Sunday, 48.00</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"pass-mail\">E-mail address</label>\n            <input class=\"ds-form__input is-error\" id=\"pass-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=\"pass-note\">Anything we should know</label>\n            <textarea class=\"ds-form__textarea\" id=\"pass-note\" placeholder=\"Access needs, a group of more than six\"></textarea>\n            <p class=\"ds-form__hint\">Passes are sent by e-mail and scanned at the quay.</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\">Hold my pass</button>\n            <a class=\"ds-button ds-button--secondary\" href=\"#lineup\">See who plays</a>\n            <button class=\"ds-button ds-button--danger\" type=\"button\">Release my pass</button>\n            <button class=\"ds-button is-disabled\" type=\"button\" disabled>Pass 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\">Add to the pass</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\">The early ferry<small>17:20 from the town quay</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\">A locker on the pier<small>6.00 a night</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\">Tell me when times move<small>By message, on the night</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=\"pass-title\">\n              <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"pass-title\">release this pass?</h2><a class=\"ds-dialog__close\" href=\"#tickets\" aria-label=\"Close\"></a></div>\n              <div class=\"ds-dialog__body\"><p>Your weekend pass goes back on sale at once. The 112.00 is returned within five days.</p></div>\n              <div class=\"ds-dialog__actions\">\n                <a class=\"ds-button ds-button--danger\" href=\"#home\">Release it</a>\n                <a class=\"ds-button ds-button--secondary\" href=\"#tickets\">Keep it</a>\n              </div>\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-footer__cols\">\n    <div class=\"ds-footer__col\">\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\">chronoskin after dark: three nights of music at the old ferry pier, 17 to 19 July 2026.</p>\n    </div>\n    <div class=\"ds-footer__col\">\n      <p class=\"ds-label ds-footer__title\">Festival</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#lineup\">Line-up</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#night\">Saturday night</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">The grounds</a></li>\n      </ul>\n    </div>\n    <div class=\"ds-footer__col\">\n      <p class=\"ds-label ds-footer__title\">Come</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#tickets\">Passes</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#night\">The ferry</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#night\">Access</a></li>\n      </ul>\n    </div>\n    <div class=\"ds-footer__col\">\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=\"#tickets\">Contact</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#tickets\">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-footer__legal ds-label\">\n    <span>2026 chronoskin. All rights reserved.</span>\n    <span>17 to 19.07.2026</span>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.cinematic.landing.s06.p07.t07.u05\",\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-6775\",\n  \"short\": \"v1-ci-6775\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #0c0d0e;\n  --color-canvas: #0c0d0e;\n  --color-surface: #131516;\n  --color-surface-alt: #191b1d;\n  --color-surface-strong: #25282b;\n  --color-bar: #060707;\n  --color-bar-text: #e6e8ea;\n  --color-bar-alt: #101112;\n  --color-bar-alt-text: #8e9399;\n  --color-inverse: #d5d8db;\n  --color-inverse-text: #0c0d0e;\n  --color-text: #b6babf;\n  --color-text-muted: #7b8087;\n  --color-heading: #eceef0;\n  --color-heading-alt: #e39a52;\n  --color-link: #eceef0;\n  --color-link-quiet: #9da2a8;\n  --color-link-visited: #a9adb2;\n  --color-link-hover: #ffb46b;\n  --color-link-active: #e39a52;\n  --color-border: #2a2d30;\n  --color-border-strong: #8f949a;\n  --color-border-muted: #1b1d1f;\n  --color-accent: #cfd3d7;\n  --color-accent-text: #0c0d0e;\n  --color-accent-alt: #e39a52;\n  --color-fill-1: #17191b;\n  --color-fill-2: #202326;\n  --color-fill-3: #2c3034;\n  --color-fill-4: #1d1a16;\n  --color-button: #d5d8db;\n  --color-button-text: #0c0d0e;\n  --color-button-hover-text: #0c0d0e;\n  --color-button-secondary: #0c0d0e;\n  --color-button-secondary-text: #eceef0;\n  --color-input: #101112;\n  --color-input-text: #eceef0;\n  --color-input-border: #3c4044;\n  --color-disabled: #1b1d1f;\n  --color-disabled-text: #5b6066;\n  --color-danger: #e0705c;\n  --color-danger-surface: #2a1512;\n  --color-success: #8fbf9a;\n  --color-warning: #d9b25e;\n  --color-notice: #17191b;\n  --color-notice-text: #d5d8db;\n  --color-focus: #e39a52;\n  --color-shadow: rgb(0 0 0 / 0.7);\n  --color-overlay: rgb(6 7 7 / 0.72);\n}\n\n/* @part type */\n:root {\n  --font-body: \"IBM Plex Sans\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-heading: \"Barlow Condensed\", \"Avenir Next Condensed\", \"Roboto Condensed\", \"Arial Narrow\", sans-serif;\n  --font-ui: \"Barlow Condensed\", \"Avenir Next Condensed\", \"Roboto Condensed\", \"Arial Narrow\", sans-serif;\n  --font-mono: \"IBM Plex Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --text-base: 15px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 19px;\n  --text-display: 208px;\n  --text-h1: 88px;\n  --text-h2: 46px;\n  --text-h3: 24px;\n  --line-body: 1.55;\n  --line-heading: 1.02;\n  --line-display: 0.86;\n  --weight-body: 400;\n  --weight-bold: 600;\n  --weight-heading: 300;\n  --weight-display: 200;\n  --weight-ui: 500;\n  --heading-transform: uppercase;\n  --heading-tracking: 1px;\n  --display-tracking: -1px;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: underline;\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: double;\n  --radius-control: 2px;\n  --radius-panel: 2px;\n  --radius-pill: 2px;\n  --radius-page: 0;\n  --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 7%, transparent);\n  --shadow-control: inset 0 1px 0 color-mix(in srgb, white 30%, transparent), 0 1px 2px var(--color-shadow);\n  --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 40%, transparent), 0 6px 18px var(--color-shadow);\n  --shadow-control-pressed: inset 0 2px 4px var(--color-shadow);\n  --shadow-dialog: 0 30px 70px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: linear-gradient(180deg, color-mix(in srgb, var(--color-page) 92%, white), var(--color-page) 640px);\n  --fill-bar: repeating-linear-gradient(0deg, color-mix(in srgb, white 6%, transparent) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, color-mix(in srgb, black 24%, transparent) 0 1px, transparent 1px 3px), var(--color-bar);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: linear-gradient(180deg, color-mix(in srgb, var(--color-inverse) 94%, white), var(--color-inverse) 40%, color-mix(in srgb, var(--color-inverse) 88%, black));\n  --fill-accent: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 84%, white), var(--color-accent));\n  --fill-panel: var(--color-surface);\n  --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 80%, white), var(--color-button) 52%, color-mix(in srgb, var(--color-button) 86%, black));\n  --fill-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 66%, white), color-mix(in srgb, var(--color-button) 92%, white));\n  --fill-button-secondary: color-mix(in srgb, var(--color-button-secondary) 60%, transparent);\n  --fill-input: var(--color-input);\n  --focus-ring: 1px dotted var(--color-focus);\n  --transition: all 0.4s ease-in-out;\n  --backdrop-blur: 0px;\n}\n"
  }
}