{
  "id": "v1-ci-5243",
  "long_id": "v1.cinematic.portal.s05.p02.t04.u03",
  "name": "Cinematic exhibition",
  "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": "portal",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "This is the site of a museum's exhibition between 2015 and 2026: a deep green page, a masthead with the house's name in the middle, and one picture edge to edge, a row of dark rooms seen through their doorways with a single lit painting at the end, carrying nothing but its captions. The title stands under the picture in a large display serif, works hang as framed canvases under their own lamps, and the one colour is brass, on rules, frames and buttons. It was a common look for exhibition and collection sites of museums and galleries in the late 2010s and the 2020s.",
  "url": "https://chrono.skin/s/v1-ci-5243",
  "preview_url": "https://chrono.skin/s/v1-ci-5243/specimen.html",
  "files": {
    "STYLE.md": "# Cinematic exhibition\n\n## Summary\n\nThis is the site of a museum's exhibition between 2015 and 2026: a deep green page, a masthead with the house's name in the middle, and one picture edge to edge, a row of dark rooms seen through their doorways with a single lit painting at the end, carrying nothing but its captions. The title stands under the picture in a large display serif, works hang as framed canvases under their own lamps, and the one colour is brass, on rules, frames and buttons. It was a common look for exhibition and collection sites of museums and galleries 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` (1200px) wide with `--space-6` side padding (`--space-4` on a phone). Sections pad themselves with `--space-8` (96px), `--tight` with `--space-7`.\n- Navigation is `.ds-nav`, a masthead on the page colour in two lines: on the first the day's hours at the left, the brand in the middle with its name in the heading face, and the word Menu (a `.ds-menu` sheet) and a small ticket button at the right; on the second, under a hairline, four label links centred, `--size-nav` (56px) tall. A strong rule closes it and a strong accent mark stands under the current link.\n- The home view stacks: `.ds-hero`, which is `.ds-hero__picture`, the scene `--size-scene` (640px) tall from edge to edge with a hairline frame and four captions and no other text, then `.ds-hero__copy` on the page: the kicker and the title across the whole column, and under a hairline one row with the lead, the run of the exhibition as a `.ds-progress` and two buttons; a `.ds-split` section whose head stays at the left while the `.ds-list` of rooms runs at the right; `.ds-wall`, a stretch of gallery wall holding the `.ds-carousel` of framed works; the `.ds-stat` row; the `.ds-grid` of four cards for the visit; the `.ds-band`.\n- Inner pages have no hero and no picture at their head: type alone, centred. Each opens inside `.ds-wrap` with `.ds-top` (the breadcrumb) and the `.ds-page-header`: the title, one line of text and at most two buttons, all centred, on a strong rule. Then `.ds-main` with `.ds-cols`: a wide column and the `.ds-sidebar` `--size-side` (300px) wide at the right; `--work` and `--even` are two halves. Tabs sit at the top of the wide column, above the notices.\n- Views. The specimen is the site of one exhibition. `home` is the exhibition. `rooms` shows one room: tabs, two notices, six works in a grid of three with badges and a tooltip, and the pagination; the rooms as a sidebar and an empty state at the right. `work` shows one work: `.ds-hang`, the work on its wall under a lamp, and the curator as an avatar at the left; a panel of facts, notes as prose, links and an accordion at the right. `visit` has the table of hours, a panel with the day's places as a progress line and two switches at the left, and the booking form with its error and all four buttons and the open dialog at the right.\n- Below 1100px the row under the title, the split section and the columns stack and the grid and the figures go two by two; below 800px the masthead loses the hours and its links scroll sideways, the picture is lower, works go two by two and a wide table scrolls inside `.ds-table__wrap`; below 520px the grid is one column. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px, `--space-2` 8px (label to text, sidebar rows), `--space-3` 14px (between buttons, a work's mount), `--space-4` 20px (rows, panel padding, grid gap), `--space-5` 28px (column gaps in rows, cell padding), `--space-6` 40px (page gutter, stack gap, columns), `--space-7` 60px (section head to content, split columns, between hung works), `--space-8` 96px (sections, the wall), `--space-9` 150px. `--space-track` 2.5px is the tracking of labels.\n- Other sizes: `--size-mark` 30px, `--size-control` 44px, `--size-dialog` 500px, `--size-work` 340px (the width of a hung work).\n- On a phone (800px and below) `.ds-nav__hours` is not shown and `.ds-nav__links`, the second line of the masthead, is one row that scrolls sideways without a scrollbar. At 520px and below the button in `.ds-nav__actions` is not shown, the `.ds-menu` stays, the links spread over the row, and a tooltip in a work opens as a full-width note above its line.\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\n- These are the conventions of the era, kept from its first layout. 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) 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`, `.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 ground and every solid shape is a silhouette in it; `--color-accent` is the light; `--color-accent-alt` is the second light; `--color-fill-1` to `--color-fill-4` are the tones between; `--color-bar-text` is the hottest point of a light. The texture of a picture comes from `--fill-bar`: `.ds-scene__grain` takes that fill less its own colour (two background layers blended by difference) and lays it over the finished picture, so a surface set changes the texture of every picture and it shows on a dark and on a pale ground alike.\n- Nothing assumes that a palette is dark. A picture is as dark as `--color-bar`, the page as dark as `--color-page`; `--color-inverse` is the opposite of the page.\n- The fills are also the grounds of grid cells and carry `--color-text` and `--color-heading`, never `--color-bar-text` or `--color-inverse-text` as running text.\n- Buttons by ground. On the page, panels and fills: `.ds-button` (`--fill-button`, `--color-button-text`) and `.ds-button--secondary` (`--fill-button-secondary`, text and outline in `--color-button-secondary-text`). On a scene only `.ds-button--onscene` (fill `--color-bar-text`, text `--color-bar`) and `.ds-button--ghost`. On the inverted block only `.ds-button--inverse` and `.ds-button--ghost`. The destructive button is `--color-danger` with `--color-button-text`.\n- `--color-heading-alt` is the colour of kickers, numbers used as labels, panel and sidebar titles and h3 in prose. The label is the second voice: `--font-ui` at `--text-small` or `--text-ui`, `--ui-transform`, tracked by `--space-track` (a layout token; the type vocabulary has no positive tracking for labels). Dates, times, prices and counts are labels in `--font-mono`.\n- The default badge is `--fill-accent` with `--color-accent-text`. Status badges are never fills: the status colour 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: `--border-width` in `--color-border` between rows and around panels, `--color-border-strong` for the rules that open a table, a list or a page, `--color-border-muted` inside boxes, `--color-input-border` around fields. `--border-width-strong` marks the current item (navigation, tabs, pagination), the progress line and the notice edge. Every border takes `--border-style`.\n- Radii: `--radius-control` for buttons, fields and carousel arrows; `--radius-panel` for panels, notices, the dialog, the empty state and tooltips; `--radius-pill` for badges, switches and avatars; `--radius-page` for the largest boxes (pictures, grid cells). 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 and haze are a light token mixed with `transparent` or with a fill; hairlines on a picture are `currentColor` at 24 to 40%; the rim of light on a figure is a `drop-shadow` of twice `--border-width` in the accent; the largest type steps down as a share of its own token at 1100px, 800px and 520px, so every type set shrinks in proportion to itself.\n- Here: the page is bone `#ece9e2`, pictures stand on a slightly darker paper and are printed in one blue, text is near-black, and the one colour is the blue `--color-accent`, with a navy `--color-accent-alt` as its deeper shade. Because the bar is pale here, a picture reads as a print: the shapes are paper, the light is ink. The fills are four tints of paper and blue grey. The primary button is black with bone text and turns blue when hovered; the inverted block is black.\n- Three families. `--font-heading` and `--font-ui` are one tight grotesque (Inter Tight, Neue Haas Grotesk, Helvetica Neue) for titles in capitals at weight 500 and for labels; `--font-body` is a text serif (Newsreader, Source Serif, Times New Roman) at `--text-base` 17px and `--line-body` 1.5; `--font-mono` (IBM Plex Mono, Menlo) sets numbers and dates.\n- `--text-display` 200px with `--line-display` 0.82 and `--display-tracking` -9px (the hero title only); `--text-h1` 104px (section and page titles, figures, the show's date); `--text-h2` 40px (list and cell titles); `--text-h3` 22px (look names, table names, the index menu, dialog title); `--text-large` 24px (leads).\n- Surface: no radius except pills (badges, switches, avatars), hairlines of 1px and heavy bars of 4px (`--border-width-strong`: over the figures, under the page title, under the current link and tab, the progress line), no resting shadows, and a hard offset block in `--color-shadow` behind a hovered button, a hovered cell and the dialog. `--fill-bar` is a halftone of fine dots that lies over every picture; `--fill-bar-alt` darkens the footer's top edge. Links in running text are underlined. No blur.\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 enfilade, a positioned box on `--fill-bar` in `--color-bar-text` whose first children are empty layers, in this order: `.ds-scene__far` (the far room: wall, floor and the daylight from above), `.ds-scene__spot` (the lamp's cone), `.ds-scene__art` (the lit painting), `.ds-figure` (one visitor), `.ds-scene__wall` and `.ds-scene__wall--2` (two walls, each with its doorway cut out, darker the nearer), `.ds-scene__floor` (the light running out along the floor), `.ds-scene__bench`, `.ds-scene__wall--1` (the nearest doorway, in the bar colour), `.ds-scene__jambs` (the lit thickness of each doorway), `.ds-scene__grain`, `.ds-scene__frame` (a hairline inside the edge) and two `.ds-scene__caption` lines of labels (`--foot` for the lower one). One per site.\n- `.ds-work`: a painting in its frame: the strong border is the frame, the padding the mount, `.ds-work__canvas` the canvas (4 to 5; `--wide` 5 to 4), one box of gradients with the weave over it. Canvases: the default is a small sun over a dark sea; `--2` two soft fields; `--3` an arch with a lit door and a moon; `--4` rain as fine lines; `--5` a disc on a turning ground; `--6` a diagonal front. `.ds-work__title` is its name in the heading face.\n- `.ds-hang`: a `.ds-scene` used as a stretch of wall for one work: `.ds-hang__light` (wall, skirting and the lamp's cone), `.ds-scene__grain`, the `.ds-work` and a label.\n- `.ds-nav`: the masthead. `.ds-nav__inner` holds `.ds-nav__hours` (a label led by a dot in `--color-success`), the brand and `.ds-nav__actions`; `.ds-nav__links` is the second line of `.ds-nav__link` (the current one in the heading colour on a strong accent mark, `is-current`). 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 masthead: `.ds-menu__toggle` (a small lozenge and the word) and `.ds-menu__list` of centred `.ds-menu__item` in the heading face, a sheet with the strong outline. Closed until clicked.\n- `.ds-hero`: `.ds-hero__picture` (the `.ds-scene`) and `.ds-hero__copy`: `.ds-hero__kicker` (a badge and a label), `.ds-hero__title` with an `em`, and `.ds-hero__side`, a row with `.ds-hero__lead`, a progress line and `.ds-hero__actions`. One per site.\n- `.ds-split`: a section in two columns, 4 to 8: `.ds-split__head` (kicker, title, `.ds-split__text` and an arrow link) stays in the window while the content at the right scrolls.\n- `.ds-list`: the rooms as ruled rows under a strong rule: each `.ds-list__item` is an italic `.ds-list__number`, a `.ds-list__title` with a `.ds-list__text` under it, and a `.ds-list__meta` label; a hovered row is washed from the middle.\n- `.ds-wall`: a `.ds-scene` used as a section: `.ds-wall__light` (wall and skirting) and `.ds-scene__grain`, then the content in `--color-bar-text`.\n- `.ds-carousel`: works hung on one line: `.ds-carousel__track` of `.ds-carousel__slide` (`--wide`, `--small`), each a `.ds-work` under the cone of its own lamp with a `.ds-carousel__caption` beneath, then `.ds-carousel__nav` with a count, `.ds-carousel__dots` of lozenge `.ds-carousel__dot` and two round `.ds-carousel__arrow`.\n- `.ds-stat`: the row of four centred figures between two strong rules; each `.ds-stat__item` is a `.ds-stat__figure` over a `.ds-stat__label`, parted by hairlines.\n- `.ds-grid`: four cards, one on each fill and each lit from above; a `.ds-grid__cell` is a centred link with a label at the top and `.ds-grid__title` and `.ds-grid__text` at the bottom.\n- `.ds-band`: here centred, `.ds-band__title` beside one button.\n- `.ds-top`: the line that opens an inner page, with the breadcrumb centred.\n- `.ds-page-header`: head of an inner page, centred: `.ds-page-header__main` with the `.ds-page-header__title` and one line of `.ds-page-header__text`; `.ds-page-header__actions` under it with ordinary buttons, since it stands on the page.\n- `.ds-cols`: wide column and sidebar; `--work`, `--even`. `.ds-works` is the grid of three `.ds-works__item` (a work over its title and a badge or label).\n- `.ds-sidebar`: a panel with a centred `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` in the heading face with a `.ds-sidebar__count`; the current one is italic on an accent line.\n- `.ds-tabs`: labels on a hairline; the current `.ds-tabs__tab` (`is-current`) stands on the strong accent rule.\n- `.ds-footer`: the closing block on `--fill-bar-alt`, centred: `.ds-footer__head` with the brand and a `.ds-footer__about` line, `.ds-footer__cols` of three `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal`.\n\n## Never\n\n- `font-size >= 11px`: labels are the smallest text.\n- `font-size <= 200px`: the season's name is the largest text.\n- `font-weight <= 700`: titles are set at 500; bold is for emphasis in text only.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `text-shadow = none`: type is flat, also on pictures.\n- `border-radius <= 12px`: boxes are square and badges eased by 2px; the only rounder corners are the shoulders of a drawn flask.\n- `border-width <= 3px`: rules are hairlines; 3px marks the current item and the progress line.\n- `box-shadow-blur <= 80px`: shadows are glows, and the widest, around the dialog, ends at 80px.\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: 1200px;\n  --size-nav: 56px;\n  --size-mark: 30px;\n  --size-control: 44px;\n  --size-dialog: 500px;\n  --size-scene: 640px;\n  --size-side: 300px;\n  --size-work: 340px;\n  --space-track: 2.5px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 14px;\n  --space-4: 20px;\n  --space-5: 28px;\n  --space-6: 40px;\n  --space-7: 60px;\n  --space-8: 96px;\n  --space-9: 150px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n  position: relative;\n  margin: 0;\n  padding: 0;\n  min-height: 100vh;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n.ds-wrap {\n  width: 100%;\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 var(--space-6);\n}\n\n/* label: the small tracked line of the era. Dates, numbers, credits,\n   coordinates and every caption are set in it. */\n.ds-label {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-label--muted {\n  color: var(--color-text-muted);\n}\n.ds-label--accent {\n  color: var(--color-heading-alt);\n}\n.ds-label--mono {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* brand: the mark on a small tile dressed like the primary button */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  padding: var(--space-1);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n  max-width: 64ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  font-size: var(--text-h2);\n}\n.ds-prose h2 {\n  margin-top: var(--space-6);\n  font-size: var(--text-h3);\n}\n.ds-prose h3 {\n  margin-top: var(--space-5);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-prose p {\n  margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: var(--space-3) 0 0;\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-top: var(--space-1);\n}\n.ds-prose li::marker {\n  color: var(--color-heading-alt);\n}\n.ds-prose strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  line-height: 1.35;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: var(--space-1);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-link--arrow {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-link--arrow:visited {\n  color: inherit;\n}\n.ds-link--arrow::before {\n  content: \"\";\n  width: var(--space-6);\n  height: var(--border-width);\n  background: currentColor;\n  transition: var(--transition);\n}\n.ds-link--arrow:hover::before,\n.ds-link--arrow.is-hover::before {\n  width: var(--space-7);\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* buttons: flat labels in a box. The filled one is the single bright\n   object of a screen. */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n  opacity: 0.8;\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  box-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: color-mix(in srgb, var(--color-button-secondary-text) 14%, transparent);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  border-color: var(--color-danger);\n  background: var(--color-danger);\n  color: var(--color-button-text);\n  box-shadow: none;\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  border-color: currentColor;\n  background: transparent;\n  color: inherit;\n  box-shadow: none;\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  background: color-mix(in srgb, currentColor 16%, transparent);\n}\n.ds-button--onscene,\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover {\n  border-color: var(--color-bar-text);\n  background: var(--color-bar-text);\n  color: var(--color-bar);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  border-color: var(--color-inverse-text);\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n  box-shadow: none;\n}\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  opacity: 0.86;\n}\n.ds-button--small {\n  min-height: calc(var(--size-control) - var(--space-3));\n  padding: var(--space-1) var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: transparent;\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  box-shadow: none;\n  opacity: 1;\n  cursor: not-allowed;\n}\n.ds-buttonrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: grid;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-form__label {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-heading);\n  box-shadow: none;\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(var(--size-control) * 3);\n  padding: var(--space-3) var(--space-4);\n  border-radius: var(--radius-panel);\n  line-height: var(--line-body);\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n  outline-offset: 0;\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n}\n.ds-form__hint {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-form__checkbox {\n  flex: none;\n  width: var(--space-4);\n  height: var(--space-4);\n  margin: var(--space-1) 0 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* badge: a tracked word in a hairline box; status variants are the\n   status colour as text and outline, never as a fill */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-badge--quiet {\n  border-color: var(--color-border);\n  background: transparent;\n  color: var(--color-text-muted);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  border-color: currentColor;\n  background: transparent;\n}\n.ds-badge--success {\n  color: var(--color-success);\n}\n.ds-badge--warning {\n  color: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-danger);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n  content: \"\";\n  width: var(--space-1);\n  height: var(--space-1);\n  border-radius: 50%;\n  background: currentColor;\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* notice: a ruled line of text with a strong left edge */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  font-size: var(--text-base);\n}\n.ds-notice--error {\n  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n  border-left-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-notice__title {\n  margin-right: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-noticerow {\n  display: grid;\n  gap: var(--space-2);\n}\n\n/* pagination: numbers as labels, the current one underlined by the light */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: calc(var(--size-control) - var(--space-2));\n  height: calc(var(--size-control) - var(--space-2));\n  padding: 0 var(--space-2);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: inherit;\n  opacity: 0.72;\n}\n.ds-breadcrumb__item a {\n  color: inherit;\n  text-decoration: none;\n}\n.ds-breadcrumb__item::after {\n  content: \"/\";\n  opacity: 0.6;\n}\n.ds-breadcrumb__current {\n  color: inherit;\n}\n\n/* dialog: shown open in the page flow, on the overlay colour */\n.ds-dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-7) var(--space-4);\n  background: var(--color-overlay);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-5) var(--space-5) 0;\n}\n.ds-dialog__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n  position: relative;\n  flex: none;\n  width: var(--space-5);\n  height: var(--space-5);\n  color: var(--color-heading);\n}\n.ds-dialog__close::before,\n.ds-dialog__close::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: var(--border-width);\n  background: currentColor;\n  transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n  transform: rotate(-45deg);\n}\n.ds-dialog__body {\n  padding: var(--space-3) var(--space-5) var(--space-5);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n  display: grid;\n  justify-items: start;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  color: var(--color-text);\n}\n.ds-empty__icon {\n  width: var(--space-7);\n  height: var(--border-width-strong);\n  background: var(--color-accent);\n}\n.ds-empty__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  max-width: 44ch;\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* switch */\n.ds-switch {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  order: 2;\n  width: calc(var(--space-5) * 2);\n  height: var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  background: var(--fill-input);\n  transition: var(--transition);\n}\n.ds-switch__track::after {\n  content: \"\";\n  position: absolute;\n  top: var(--space-1);\n  bottom: var(--space-1);\n  left: var(--space-1);\n  width: calc(var(--space-5) - var(--space-2) - var(--border-width) * 2);\n  border-radius: var(--radius-pill);\n  background: var(--color-text-muted);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n  left: calc(100% - var(--space-5) + var(--space-1) + var(--border-width) * 2);\n  background: var(--color-accent);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-switch__label {\n  color: var(--color-heading);\n}\n.ds-switch__label small {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* tooltip: a dotted label; the hint appears on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  border-bottom: var(--border-width) dotted currentColor;\n  cursor: help;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 6;\n  display: none;\n  width: max-content;\n  max-width: min(32ch, 60vw);\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-panel);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  letter-spacing: 0;\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n}\n.ds-tooltip: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--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 enfilade: a row of rooms seen through their doorways. The far\n   room is lit and holds one painting under a lamp and one visitor; each\n   wall nearer to us is darker, and the light runs out along the floor. */\n.ds-scene__far,\n.ds-scene__spot,\n.ds-scene__art,\n.ds-scene__wall,\n.ds-scene__jambs,\n.ds-scene__floor,\n.ds-scene__bench {\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n}\n.ds-scene__far {\n  inset: 0;\n  background:\n    linear-gradient(to top, color-mix(in srgb, var(--color-bar) 40%, var(--color-fill-3)) 0 34%, transparent 34%),\n    radial-gradient(ellipse 16% 40% at 50% 14%, color-mix(in srgb, var(--color-accent-alt) 60%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-4), var(--color-fill-2));\n}\n.ds-scene__spot {\n  inset: 16% 38% 30% 38%;\n  background:\n    conic-gradient(from 159deg at 50% -12%, transparent 0deg, color-mix(in srgb, var(--color-accent) 44%, transparent) 5deg, color-mix(in srgb, var(--color-accent) 30%, transparent) 37deg, transparent 42deg, transparent 360deg),\n    radial-gradient(ellipse 40% 44% at 50% 46%, color-mix(in srgb, var(--color-accent) 50%, transparent), transparent 100%);\n}\n.ds-scene__art {\n  top: 29%;\n  left: 50%;\n  width: 6.4%;\n  height: 22%;\n  border: var(--border-width-strong) solid var(--color-bar);\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0, var(--color-accent) 56%, color-mix(in srgb, var(--color-accent) 50%, var(--color-bar)) 57%, color-mix(in srgb, var(--color-accent) 80%, var(--color-fill-3)) 100%);\n  transform: translateX(-50%);\n}\n.ds-scene > .ds-figure {\n  bottom: 29.5%;\n  left: 56.6%;\n  height: 25%;\n  filter: drop-shadow(calc(var(--border-width) * -2) 0 0 color-mix(in srgb, var(--color-accent) 70%, var(--color-bar-text)));\n}\n.ds-scene__wall {\n  inset: 0;\n  background:\n    radial-gradient(ellipse 26% 60% at 50% 46%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 100%),\n    color-mix(in srgb, var(--color-bar) 40%, var(--color-fill-2));\n  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 38% 16%, 38% 72%, 62% 72%, 62% 16%, 38% 16%);\n}\n.ds-scene__wall--2 {\n  background:\n    radial-gradient(ellipse 30% 70% at 50% 46%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 100%),\n    color-mix(in srgb, var(--color-bar) 70%, var(--color-fill-1));\n  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 30% 9%, 30% 80%, 70% 80%, 70% 9%, 30% 9%);\n}\n.ds-scene__wall--1 {\n  background: var(--color-bar);\n  clip-path: polygon(0 0, 20% 0, 20% 90%, 80% 90%, 80% 0, 100% 0, 100% 100%, 0 100%);\n}\n/* jambs: the lit thickness of each doorway, two sides and a lintel */\n.ds-scene__jambs {\n  inset: 0;\n  background:\n    linear-gradient(color-mix(in srgb, var(--color-accent) 30%, var(--color-fill-4)), color-mix(in srgb, var(--color-accent) 30%, var(--color-fill-4))) 20.24% 0 / 1.2% 90% no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 30%, var(--color-fill-4)), color-mix(in srgb, var(--color-accent) 30%, var(--color-fill-4))) 79.76% 0 / 1.2% 90% no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 46%, var(--color-fill-4)), color-mix(in srgb, var(--color-accent) 46%, var(--color-fill-4))) 30.27% 31.03% / 0.9% 71% no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 46%, var(--color-fill-4)), color-mix(in srgb, var(--color-accent) 46%, var(--color-fill-4))) 69.73% 31.03% / 0.9% 71% no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 30%, var(--color-fill-2)), color-mix(in srgb, var(--color-accent) 30%, var(--color-fill-2))) 50% 9.13% / 40% 1.4% no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 64%, var(--color-fill-4)), color-mix(in srgb, var(--color-accent) 64%, var(--color-fill-4))) 38.23% 36.36% / 0.6% 56% no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 64%, var(--color-fill-4)), color-mix(in srgb, var(--color-accent) 64%, var(--color-fill-4))) 61.77% 36.36% / 0.6% 56% no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 40%, var(--color-fill-2)), color-mix(in srgb, var(--color-accent) 40%, var(--color-fill-2))) 50% 16.16% / 24% 1% no-repeat;\n}\n.ds-scene__floor {\n  inset: 0;\n  background:\n    linear-gradient(var(--color-bar), var(--color-bar)) 0 80.4% / 100% 0.5% no-repeat,\n    linear-gradient(90deg, transparent 34%, color-mix(in srgb, var(--color-accent) 60%, transparent) 50%, transparent 66%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-3) 70%, var(--color-accent)) 72%, color-mix(in srgb, var(--color-bar) 80%, var(--color-fill-3)) 90%);\n  clip-path: polygon(20% 90%, 38% 72%, 62% 72%, 80% 90%);\n}\n.ds-scene__bench {\n  top: 81%;\n  left: 50%;\n  width: 11%;\n  height: 4.6%;\n  background: var(--color-bar);\n  clip-path: polygon(0 0, 100% 0, 100% 36%, 95% 36%, 95% 100%, 91% 100%, 91% 36%, 9% 36%, 9% 100%, 5% 100%, 5% 36%, 0 36%);\n  transform: translateX(-50%);\n}\n/* frame: a hairline inside the edge and two captions say it is a picture */\n.ds-scene__frame {\n  position: absolute;\n  inset: var(--space-3);\n  z-index: -1;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, currentColor 30%, transparent);\n  pointer-events: none;\n}\n.ds-scene__caption {\n  position: absolute;\n  top: var(--space-5);\n  right: var(--space-5);\n  left: var(--space-5);\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0;\n}\n.ds-scene__caption--foot {\n  top: auto;\n  bottom: var(--space-5);\n}\n\n/* work: a painting in its frame. The frame is the strong border, the\n   mount a panel, the canvas one box of gradients; six canvases. */\n.ds-work {\n  display: block;\n  padding: var(--space-3);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-work__canvas {\n  position: relative;\n  display: block;\n  aspect-ratio: 4 / 5;\n  overflow: hidden;\n  background:\n    radial-gradient(circle at 68% 50%, var(--color-bar-text) 0 3%, var(--color-accent) 7%, color-mix(in srgb, var(--color-accent) 40%, transparent) 16%, transparent 36%),\n    linear-gradient(to bottom, var(--color-fill-4) 0, var(--color-fill-2) 55%, var(--color-bar) 55.5%, var(--color-fill-3) 100%);\n}\n.ds-work__canvas::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\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}\n.ds-work--wide .ds-work__canvas {\n  aspect-ratio: 5 / 4;\n}\n.ds-work--2 .ds-work__canvas {\n  background:\n    linear-gradient(to bottom, transparent 0 7%, color-mix(in srgb, var(--color-accent) 80%, var(--color-bar)) 11% 44%, transparent 49% 54%, var(--color-fill-4) 59% 89%, transparent 94%) 50% 0 / 84% 100% no-repeat,\n    var(--color-fill-3);\n}\n.ds-work--3 .ds-work__canvas {\n  background:\n    radial-gradient(ellipse 17% 12% at 50% 56%, var(--color-accent) 0 98%, transparent 100%),\n    linear-gradient(var(--color-accent), color-mix(in srgb, var(--color-accent) 50%, var(--color-bar-text))) 50% 100% / 34% 44% no-repeat,\n    radial-gradient(ellipse 29% 21% at 50% 50%, var(--color-bar) 0 98%, transparent 100%),\n    linear-gradient(var(--color-bar), var(--color-bar)) 50% 100% / 58% 50% no-repeat,\n    radial-gradient(circle at 76% 18%, var(--color-accent-alt) 0 5%, transparent 5.6%),\n    linear-gradient(to bottom, var(--color-fill-2), var(--color-fill-1));\n}\n.ds-work--4 .ds-work__canvas {\n  background:\n    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-bar-text) 50%, transparent) 0 var(--border-width), transparent var(--border-width) var(--space-3)),\n    linear-gradient(to top, var(--color-accent), var(--color-fill-4) 56%, var(--color-bar));\n}\n.ds-work--5 .ds-work__canvas {\n  background:\n    radial-gradient(circle at 50% 50%, var(--color-accent) 0 29%, transparent 29.6%),\n    conic-gradient(from 40deg at 50% 50%, var(--color-fill-1), var(--color-fill-4), var(--color-fill-2), var(--color-bar), var(--color-fill-1));\n}\n.ds-work--6 .ds-work__canvas {\n  background: linear-gradient(135deg, var(--color-bar) 0 33%, var(--color-accent) 33% 36%, var(--color-fill-4) 36% 62%, var(--color-accent-alt) 62% 64%, var(--color-fill-3) 64%);\n}\n.ds-work__title {\n  display: block;\n  margin: 0 0 var(--space-1);\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\n/* hang: a stretch of gallery wall with one work under its lamp */\n.ds-hang {\n  display: grid;\n  justify-items: center;\n  gap: var(--space-5);\n  padding: var(--space-8) var(--space-6) var(--space-6);\n  border-radius: var(--radius-page);\n}\n.ds-hang__light {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background:\n    linear-gradient(to top, var(--color-bar) 0, color-mix(in srgb, var(--color-bar) 50%, var(--color-fill-3)) 12%, transparent 12%),\n    conic-gradient(from 160deg at 50% -40%, transparent 0deg, color-mix(in srgb, var(--color-accent) 34%, transparent) 3deg, color-mix(in srgb, var(--color-accent) 20%, transparent) 37deg, transparent 40deg, transparent 360deg),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 50%, var(--color-fill-2)), color-mix(in srgb, var(--color-bar) 30%, var(--color-fill-1)));\n}\n.ds-hang > .ds-work {\n  width: 100%;\n  max-width: var(--size-work);\n}\n.ds-hang > .ds-label {\n  margin-bottom: var(--space-7);\n}\n\n/* nav: a masthead on the page. Hours, the brand and the ticket button on\n   the first line; the links centred on the second. */\n.ds-nav {\n  position: relative;\n  z-index: 5;\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  color: var(--color-heading);\n}\n.ds-nav__inner {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-4) var(--space-6);\n}\n.ds-nav__hours {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--color-text-muted);\n}\n.ds-nav__hours::before {\n  content: \"\";\n  width: var(--space-2);\n  height: var(--space-2);\n  border-radius: 50%;\n  background: var(--color-success);\n}\n.ds-nav .ds-brand__name {\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-4);\n}\n.ds-nav__links {\n  display: flex;\n  justify-content: center;\n  gap: var(--space-7);\n  margin: 0;\n  padding: 0 var(--space-6);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  list-style: none;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  height: var(--size-nav);\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  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(#rooms:target) .ds-nav__link[href=\"#rooms\"],\n.ds-page:has(#work:target) .ds-nav__link[href=\"#work\"],\n.ds-page:has(#visit:target) .ds-nav__link[href=\"#visit\"] {\n  color: var(--color-heading);\n  box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent);\n}\n\n/* menu: a sheet under the word Menu with the whole plan of the house */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\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: var(--border-width) var(--border-style) currentColor;\n  transform: rotate(45deg);\n}\n.ds-menu[open] > .ds-menu__toggle::before {\n  background: var(--color-accent);\n}\n.ds-menu__list {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  z-index: 8;\n  width: var(--size-side);\n  max-width: 86vw;\n  margin: 0;\n  padding: var(--space-3) var(--space-5);\n  border: var(--border-width-strong) 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  text-align: center;\n}\n.ds-menu__item {\n  display: block;\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\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-menu__list > :last-child .ds-menu__item {\n  border-bottom: 0;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover {\n  color: var(--color-link-hover);\n}\n\n/* hero: the picture edge to edge with only its captions; the title and\n   the wall text stand under it on the page */\n.ds-hero {\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-hero__picture {\n  min-height: var(--size-scene);\n}\n.ds-hero__copy {\n  display: grid;\n  gap: var(--space-6);\n  padding-top: var(--space-7);\n  padding-bottom: var(--space-7);\n}\n.ds-hero__kicker {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n  margin: 0 0 var(--space-4);\n  color: var(--color-text-muted);\n}\n.ds-hero__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: min(var(--text-display), 13vw);\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 em {\n  color: var(--color-heading-alt);\n  font-style: italic;\n}\n.ds-hero__side {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) auto;\n  align-items: end;\n  gap: var(--space-4) var(--space-7);\n  padding-top: var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-hero__lead {\n  margin: 0;\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n\n/* section: the head stands at the left and stays while its content,\n   at the right, scrolls past */\n.ds-section {\n  padding: var(--space-8) 0;\n}\n.ds-section--ruled {\n  border-top: 0;\n}\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);\n  align-items: start;\n  gap: var(--space-7);\n}\n.ds-split__head {\n  position: sticky;\n  top: var(--space-5);\n  display: grid;\n  justify-items: start;\n  gap: var(--space-3);\n}\n.ds-split__text {\n  max-width: 34ch;\n  margin: 0 0 var(--space-3);\n}\n\n/* list: the rooms, each a numeral, a name with a line of text, a count */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  list-style: none;\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: var(--space-8) minmax(0, 1fr) auto;\n  align-items: baseline;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  transition: var(--transition);\n}\n.ds-list__item:hover,\n.ds-list__item.is-hover {\n  background: linear-gradient(90deg, transparent, var(--color-surface-alt) 20%, var(--color-surface-alt) 80%, transparent);\n}\n.ds-list__number {\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-style: italic;\n  line-height: 1;\n}\n.ds-list__title {\n  display: block;\n  margin: 0 0 var(--space-1);\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-list__text {\n  display: block;\n  color: var(--color-text);\n}\n.ds-list__meta {\n  color: var(--color-text-muted);\n}\n\n/* carousel: a wall of the gallery. Works of different sizes hang on one\n   line, each under its own lamp, with its label beneath. */\n.ds-wall {\n  padding: var(--space-8) 0;\n}\n.ds-wall__light {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background:\n    linear-gradient(to top, var(--color-bar) 0, color-mix(in srgb, var(--color-bar) 60%, var(--color-fill-3)) 9%, transparent 9%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 60%, var(--color-fill-2)), color-mix(in srgb, var(--color-bar) 40%, var(--color-fill-1)));\n}\n.ds-carousel {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--space-6);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-7);\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  position: relative;\n  display: grid;\n  flex: 0 0 var(--size-work);\n  gap: var(--space-4);\n  min-width: 0;\n  padding-top: var(--space-6);\n  scroll-snap-align: start;\n}\n.ds-carousel__slide--wide {\n  flex-basis: calc(var(--size-work) * 1.3);\n}\n.ds-carousel__slide--small {\n  flex-basis: calc(var(--size-work) * 0.76);\n  padding-top: var(--space-8);\n}\n.ds-carousel__slide::before {\n  content: \"\";\n  position: absolute;\n  inset: 0 calc(var(--space-6) * -1) 20%;\n  background: conic-gradient(from 161deg at 50% -50%, transparent 0deg, color-mix(in srgb, var(--color-accent) 30%, transparent) 3deg, color-mix(in srgb, var(--color-accent) 16%, transparent) 35deg, transparent 38deg, transparent 360deg);\n  pointer-events: none;\n}\n.ds-carousel__slide > * {\n  position: relative;\n}\n.ds-carousel__caption {\n  display: grid;\n  gap: var(--space-1);\n  padding-left: var(--space-3);\n  border-left: var(--border-width) var(--border-style) color-mix(in srgb, currentColor 40%, transparent);\n}\n.ds-carousel__nav {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\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  align-items: center;\n  gap: var(--space-2);\n}\n.ds-carousel__dot {\n  width: var(--space-2);\n  height: var(--space-2);\n  border: var(--border-width) var(--border-style) currentColor;\n  transform: rotate(45deg);\n}\n.ds-carousel__dot.is-current {\n  border-color: var(--color-accent);\n  background: var(--color-accent);\n}\n.ds-carousel__arrow {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control);\n  height: var(--size-control);\n  border: var(--border-width) var(--border-style) currentColor;\n  border-radius: 50%;\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  background: color-mix(in srgb, currentColor 16%, transparent);\n}\n.ds-carousel__arrow.is-disabled {\n  opacity: 0.35;\n}\n\n/* stats: centred figures between two strong rules */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  margin: 0;\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__item {\n  display: grid;\n  justify-items: center;\n  gap: var(--space-2);\n  padding: var(--space-6) var(--space-3);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n  text-align: center;\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: lining-nums;\n}\n.ds-stat__label {\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* grid: four cards for the visit, one on each fill, lit from above */\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  display: grid;\n  align-content: space-between;\n  justify-items: center;\n  gap: var(--space-7);\n  height: 100%;\n  padding: var(--space-5) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  background:\n    radial-gradient(ellipse 70% 50% at 50% 0, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 100%),\n    var(--color-fill-1);\n  color: var(--color-text);\n  text-align: center;\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(ellipse 70% 50% at 50% 0, color-mix(in srgb, var(--color-accent-alt) 22%, transparent), transparent 100%),\n    var(--color-fill-2);\n}\n.ds-grid > :nth-child(3) .ds-grid__cell {\n  background:\n    radial-gradient(ellipse 70% 50% at 50% 0, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 100%),\n    var(--color-fill-3);\n}\n.ds-grid > :nth-child(4) .ds-grid__cell {\n  background:\n    radial-gradient(ellipse 70% 50% at 50% 0, color-mix(in srgb, var(--color-accent-alt) 26%, transparent), transparent 100%),\n    var(--color-fill-4);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n  border-color: var(--color-border-strong);\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/* inner pages: type alone, centred, on a strong rule */\n.ds-top {\n  display: flex;\n  justify-content: center;\n  padding-top: var(--space-6);\n  color: var(--color-text-muted);\n}\n.ds-page-header {\n  display: grid;\n  justify-items: center;\n  gap: var(--space-4);\n  padding: var(--space-4) 0 var(--space-6);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  text-align: center;\n}\n.ds-page-header__main {\n  min-width: 0;\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__text {\n  max-width: 52ch;\n  margin: var(--space-3) auto 0;\n  color: var(--color-text);\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-3);\n}\n.ds-main {\n  padding: var(--space-6) 0 var(--space-8);\n}\n.ds-cols {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-side);\n  align-items: start;\n  gap: var(--space-6);\n}\n.ds-cols--work {\n  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);\n}\n.ds-cols--even {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-works {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  align-items: end;\n  gap: var(--space-6) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-works__item {\n  display: grid;\n  gap: var(--space-3);\n  color: var(--color-text);\n  text-decoration: none;\n}\n.ds-works__item .ds-work__title {\n  color: var(--color-heading);\n}\n\n/* sidebar: a framed list of the rooms */\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  text-align: center;\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\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.ds-sidebar__item.is-current {\n  color: var(--color-heading);\n}\n.ds-sidebar__item.is-current {\n  font-style: italic;\n  border-bottom-color: var(--color-accent);\n}\n.ds-sidebar__count {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  font-style: normal;\n  letter-spacing: 0;\n}\n\n/* tabs: labels on a hairline, the current one on the strong rule */\n.ds-tabs {\n  display: flex;\n  gap: var(--space-5);\n  margin: 0;\n  padding: 0;\n  overflow-x: auto;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  list-style: none;\n  scrollbar-width: none;\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n\n/* footer: centred, the brand over the address and three short lists */\n.ds-footer {\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  text-align: center;\n}\n.ds-footer__head {\n  display: grid;\n  justify-items: center;\n  gap: var(--space-3);\n  padding-top: var(--space-7);\n}\n.ds-footer__about {\n  max-width: 44ch;\n  margin: 0;\n}\n.ds-footer__cols {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-5);\n  padding-top: var(--space-6);\n  padding-bottom: var(--space-6);\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__legal {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-5);\n  padding-top: var(--space-4);\n  padding-bottom: var(--space-4);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 30%, transparent);\n}\n.ds-band__inner {\n  justify-content: center;\n  text-align: center;\n}\n.ds-band__title {\n  margin: 0;\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\n/* narrower windows: the type steps down with the display size itself */\n@media (max-width: 1100px) {\n  .ds-hero__title {\n    font-size: min(calc(var(--text-display) * 0.7), 13vw);\n  }\n  .ds-hero__picture {\n    min-height: calc(var(--size-scene) * 0.8);\n  }\n  .ds-hero__side {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  }\n  .ds-hero__side > :first-child {\n    grid-column: 1 / -1;\n  }\n  .ds-split,\n  .ds-cols,\n  .ds-cols--work {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-split__head {\n    position: static;\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}\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    padding: var(--space-3) var(--space-4);\n  }\n  .ds-nav__hours {\n    display: none;\n  }\n  .ds-nav__links {\n    justify-content: flex-start;\n    gap: var(--space-5);\n    padding: 0 var(--space-4);\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n  .ds-nav__link {\n    height: calc(var(--size-nav) - var(--space-3));\n  }\n  .ds-hero__picture {\n    min-height: calc(var(--size-scene) * 0.56);\n  }\n  .ds-hero__copy {\n    gap: var(--space-5);\n    padding-top: var(--space-6);\n    padding-bottom: var(--space-6);\n  }\n  .ds-hero__side {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-hero__title {\n    font-size: min(calc(var(--text-display) * 0.46), 13vw);\n    letter-spacing: calc(var(--display-tracking) * 0.46);\n  }\n  .ds-section__title,\n  .ds-page-header__title,\n  .ds-stat__figure {\n    font-size: calc(var(--text-h1) * 0.6);\n  }\n  .ds-cols--even,\n  .ds-footer__cols {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-section,\n  .ds-section--tight,\n  .ds-wall {\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__track {\n    gap: var(--space-5);\n  }\n  .ds-carousel__slide,\n  .ds-carousel__slide--wide {\n    flex-basis: 70%;\n  }\n  .ds-carousel__slide--small {\n    flex-basis: 54%;\n  }\n  .ds-works {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-5) var(--space-4);\n  }\n  .ds-list__item {\n    grid-template-columns: var(--space-7) minmax(0, 1fr);\n  }\n  .ds-list__meta {\n    grid-column: 2;\n  }\n  .ds-list__title,\n  .ds-list__number {\n    font-size: calc(var(--text-h2) * 0.76);\n  }\n  .ds-hang {\n    padding: var(--space-7) var(--space-4) var(--space-4);\n  }\n  .ds-scene__art {\n    border-width: var(--border-width);\n  }\n}\n@media (max-width: 520px) {\n  .ds-hero__title {\n    font-size: min(calc(var(--text-display) * 0.36), 13vw);\n    letter-spacing: calc(var(--display-tracking) * 0.36);\n  }\n  .ds-section__title,\n  .ds-page-header__title,\n  .ds-stat__figure {\n    font-size: calc(var(--text-h1) * 0.52);\n  }\n  .ds-hero__lead,\n  .ds-page-header__text {\n    font-size: var(--text-base);\n  }\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-grid__cell {\n    gap: var(--space-5);\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-nav__actions .ds-button {\n    display: none;\n  }\n  .ds-nav__links {\n    justify-content: space-between;\n    gap: var(--space-2);\n  }\n  .ds-scene__caption {\n    white-space: nowrap;\n  }\n  .ds-scene__caption--foot {\n    justify-content: flex-end;\n  }\n  .ds-scene__caption--foot > span:first-child {\n    display: none;\n  }\n}\n\n/* Phones: a tip spans its card instead of leaving the window. */\n@media (max-width: 520px) {\n  .ds-works__item {\n    position: relative;\n  }\n  .ds-works__item .ds-tooltip {\n    position: static;\n  }\n  .ds-works__item .ds-tooltip__tip {\n    top: auto;\n    right: 0;\n    bottom: auto;\n    left: 0;\n    align-self: flex-start;\n    width: auto;\n    max-width: none;\n    transform: translateY(calc(-100% - var(--space-2)));\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 exhibition 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    <span class=\"ds-label ds-nav__hours\">Open today, 10 to 18</span>\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    <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\">The exhibition</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#rooms\">Seven rooms</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#work\">One work</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#visit\">Hours and tickets</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#visit\">Members</a></li>\n        </ul>\n      </details>\n      <a class=\"ds-button ds-button--small\" href=\"#visit\">Tickets</a>\n    </div>\n  </div>\n  <ul class=\"ds-nav__links\">\n    <li><a class=\"ds-nav__link\" href=\"#home\">Exhibition</a></li>\n    <li><a class=\"ds-nav__link\" href=\"#rooms\">Rooms</a></li>\n    <li><a class=\"ds-nav__link\" href=\"#work\">One work</a></li>\n    <li><a class=\"ds-nav__link\" href=\"#visit\">Visit</a></li>\n  </ul>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <div class=\"ds-hero__picture ds-scene\">\n      <span class=\"ds-scene__far\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__spot\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__art\" aria-hidden=\"true\"></span>\n      <span class=\"ds-figure\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__wall\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__wall ds-scene__wall--2\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__floor\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__bench\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__wall ds-scene__wall--1\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__jambs\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__grain\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__frame\" aria-hidden=\"true\"></span>\n      <p class=\"ds-scene__caption ds-label\"><span>Rooms I to IV, looking east</span><span>Plate 01</span></p>\n      <p class=\"ds-scene__caption ds-scene__caption--foot ds-label\"><span>East wing, upper floor</span><span>14.03 to 21.06.2026</span></p>\n    </div>\n    <div class=\"ds-wrap ds-hero__copy\">\n      <div>\n        <p class=\"ds-hero__kicker\"><span class=\"ds-badge\">Now showing</span><span class=\"ds-label\">An exhibition in seven rooms</span></p>\n        <h1 class=\"ds-hero__title\">Rooms of <em>weather</em></h1>\n      </div>\n      <div class=\"ds-hero__side\">\n        <p class=\"ds-hero__lead\">Sixty-four paintings of sky, hung from dawn to night. Walk them in order; it takes an hour and twenty minutes.</p>\n        <div class=\"ds-progress\">\n          <p class=\"ds-progress__head\"><span>Day 41 of 100</span><span class=\"ds-progress__value\">41%</span></p>\n          <progress class=\"ds-progress__bar\" value=\"41\" max=\"100\">41%</progress>\n        </div>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button\" href=\"#visit\">Book a time</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#rooms\">Walk the rooms</a>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--ruled\">\n    <div class=\"ds-wrap ds-split\">\n      <div class=\"ds-split__head\">\n        <p class=\"ds-label ds-section__kicker\">The plan</p>\n        <h2 class=\"ds-section__title\">Seven rooms</h2>\n        <p class=\"ds-split__text\">Each room is one hour of one day. The doors stand in a line, so the last room is in sight from the first.</p>\n        <a class=\"ds-link ds-link--arrow\" href=\"#rooms\">All rooms and works</a>\n      </div>\n      <ul class=\"ds-list\" data-component=\"list\">\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__number\">I</span>\n          <span><a class=\"ds-list__title\" href=\"#rooms\">First light</a><span class=\"ds-list__text\">Small panels, painted out of doors before six.</span></span>\n          <span class=\"ds-label ds-list__meta\">9 works</span>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__number\">II</span>\n          <span><a class=\"ds-list__title\" href=\"#rooms\">Morning haze</a><span class=\"ds-list__text\">River views and the first large canvases.</span></span>\n          <span class=\"ds-label ds-list__meta\">11 works</span>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__number\">III</span>\n          <span><a class=\"ds-list__title\" href=\"#rooms\">Noon</a><span class=\"ds-list__text\">Flat light, hard shadow, almost no cloud.</span></span>\n          <span class=\"ds-label ds-list__meta\">8 works</span>\n        </li>\n        <li class=\"ds-list__item is-hover\">\n          <span class=\"ds-list__number\">IV</span>\n          <span><a class=\"ds-list__title\" href=\"#rooms\">Storm</a><span class=\"ds-list__text\">The largest room, kept cool and nearly dark.</span></span>\n          <span class=\"ds-label ds-list__meta\">12 works</span>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__number\">V</span>\n          <span><a class=\"ds-list__title\" href=\"#rooms\">Dusk</a><span class=\"ds-list__text\">Works on paper; the lamps come on.</span></span>\n          <span class=\"ds-label ds-list__meta\">10 works</span>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-wall ds-scene\">\n    <span class=\"ds-wall__light\" aria-hidden=\"true\"></span>\n    <span class=\"ds-scene__grain\" aria-hidden=\"true\"></span>\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">On the wall</p>\n        <h2 class=\"ds-section__title\">Stand before these</h2>\n        <a class=\"ds-link ds-link--arrow\" href=\"#rooms\">All 64 works</a>\n      </div>\n      <div class=\"ds-carousel\">\n        <ul class=\"ds-carousel__track\">\n          <li class=\"ds-carousel__slide\">\n            <a class=\"ds-work\" href=\"#work\"><span class=\"ds-work__canvas\"></span></a>\n            <div class=\"ds-carousel__caption\"><span class=\"ds-work__title\">Sea, first light</span><span class=\"ds-label\">Oil on linen, 1961. Room I</span></div>\n          </li>\n          <li class=\"ds-carousel__slide ds-carousel__slide--small\">\n            <a class=\"ds-work ds-work--3\" href=\"#work\"><span class=\"ds-work__canvas\"></span></a>\n            <div class=\"ds-carousel__caption\"><span class=\"ds-work__title\">The gate at night</span><span class=\"ds-label\">Tempera on board, 1948. Room VI</span></div>\n          </li>\n          <li class=\"ds-carousel__slide ds-carousel__slide--wide\">\n            <a class=\"ds-work ds-work--2 ds-work--wide\" href=\"#work\"><span class=\"ds-work__canvas\"></span></a>\n            <div class=\"ds-carousel__caption\"><span class=\"ds-work__title\">Two weathers</span><span class=\"ds-label\">Oil on canvas, 1957. Room IV</span></div>\n          </li>\n          <li class=\"ds-carousel__slide\">\n            <a class=\"ds-work ds-work--5\" href=\"#work\"><span class=\"ds-work__canvas\"></span></a>\n            <div class=\"ds-carousel__caption\"><span class=\"ds-work__title\">Noon sun</span><span class=\"ds-label\">Oil on linen, 1963. Room III</span></div>\n          </li>\n        </ul>\n        <div class=\"ds-carousel__nav\">\n          <span class=\"ds-label ds-label--mono\">01 to 03 / 12</span>\n          <span class=\"ds-carousel__dots\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></span>\n          <a class=\"ds-carousel__arrow is-disabled\" href=\"#home\" aria-label=\"Earlier works\"></a>\n          <a class=\"ds-carousel__arrow\" href=\"#rooms\" aria-label=\"Later works\"></a>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section\">\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\">64</p><p class=\"ds-label ds-stat__label\">Works</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">7</p><p class=\"ds-label ds-stat__label\">Rooms</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">100</p><p class=\"ds-label ds-stat__label\">Days</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">1:20</p><p class=\"ds-label ds-stat__label\">The walk</p></div>\n      </div>\n      <ul class=\"ds-grid\" data-component=\"grid\">\n        <li><a class=\"ds-grid__cell\" href=\"#visit\"><span class=\"ds-label ds-label--accent\">Hours</span><span><span class=\"ds-grid__title\">Ten to six</span><span class=\"ds-grid__text\">Late on Fridays, closed on Mondays.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#visit\"><span class=\"ds-label ds-label--accent\">Tickets</span><span><span class=\"ds-grid__title\">By the hour</span><span class=\"ds-grid__text\">Forty visitors enter every thirty minutes.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#visit\"><span class=\"ds-label ds-label--accent\">Tours</span><span><span class=\"ds-grid__title\">With a curator</span><span class=\"ds-grid__text\">Thursdays at five, twelve places.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#visit\"><span class=\"ds-label ds-label--accent\">Access</span><span><span class=\"ds-grid__title\">Step free</span><span class=\"ds-grid__text\">Lifts to every floor and stools in each room.</span></span></a></li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap ds-band__inner\">\n      <h2 class=\"ds-band__title\">Members walk in without a ticket.</h2>\n      <a class=\"ds-button ds-button--inverse\" href=\"#visit\">Become a member</a>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"rooms\">\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\">Exhibition</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#rooms\">Rooms</a></li>\n        <li class=\"ds-breadcrumb__current\">Room IV</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\">Room IV, storm</h1>\n        <p class=\"ds-page-header__text\">Twelve works made under heavy weather, hung low and lit one by one.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#visit\">Book a time</a>\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        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#rooms\">All works <span class=\"ds-badge ds-badge--quiet\">12</span></a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#rooms\">Paintings</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#rooms\">On paper</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#rooms\">Objects</a></li>\n        </ul>\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Cool room</span>Room IV is kept at 16 degrees. Bring a layer.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Away</span>Two works are with the conservator until 2 April.</p>\n        </div>\n        <ul class=\"ds-works\">\n          <li><a class=\"ds-works__item\" href=\"#work\"><span class=\"ds-work ds-work--2\"><span class=\"ds-work__canvas\"></span></span><span><span class=\"ds-work__title\">Two weathers</span><span class=\"ds-badgerow\"><span class=\"ds-badge\" data-component=\"badge\">New hang</span><span class=\"ds-label ds-label--muted\">1957</span></span></span></a></li>\n          <li><a class=\"ds-works__item\" href=\"#work\"><span class=\"ds-work ds-work--wide\"><span class=\"ds-work__canvas\"></span></span><span><span class=\"ds-work__title\">Sea, first light</span><span class=\"ds-badgerow\"><span class=\"ds-badge ds-badge--success\">On view</span><span class=\"ds-label ds-label--muted\">1961</span></span></span></a></li>\n          <li><a class=\"ds-works__item\" href=\"#work\"><span class=\"ds-work ds-work--4\"><span class=\"ds-work__canvas\"></span></span><span><span class=\"ds-work__title\">Rain on the plain</span><span class=\"ds-badgerow\"><span class=\"ds-badge ds-badge--warning\">Leaves 2 April</span><span class=\"ds-label ds-label--muted\">1952</span></span></span></a></li>\n          <li><a class=\"ds-works__item\" href=\"#work\"><span class=\"ds-work ds-work--6 ds-work--wide\"><span class=\"ds-work__canvas\"></span></span><span><span class=\"ds-work__title\">Front, moving east</span><span class=\"ds-badgerow\"><span class=\"ds-badge ds-badge--danger\">Away</span><span class=\"ds-label ds-label--muted\">1959</span></span></span></a></li>\n          <li><a class=\"ds-works__item\" href=\"#work\"><span class=\"ds-work ds-work--5\"><span class=\"ds-work__canvas\"></span></span><span><span class=\"ds-work__title\">Sun through smoke</span><span class=\"ds-label ds-label--muted\">1963</span></span></a></li>\n          <li><span class=\"ds-works__item\"><span class=\"ds-work ds-work--3\"><span class=\"ds-work__canvas\"></span></span><span><span class=\"ds-work__title\">The gate at night</span><span class=\"ds-tooltip ds-label ds-label--muted\" tabindex=\"0\">On loan<span class=\"ds-tooltip__tip\">Lent by a private collection for the length of the exhibition.</span></span></span></span></li>\n        </ul>\n        <div class=\"ds-table__foot\">\n          <span class=\"ds-label\">Works 1 to 6 of 12</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#rooms\">Prev</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#rooms\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#rooms\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#rooms\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-sidebar\" data-component=\"sidebar\">\n          <p class=\"ds-label ds-sidebar__title\">The rooms</p>\n          <div class=\"ds-sidebar__list\">\n            <a class=\"ds-sidebar__item\" href=\"#rooms\">I. First light <span class=\"ds-sidebar__count\">9</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#rooms\">II. Morning haze <span class=\"ds-sidebar__count\">11</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#rooms\">III. Noon <span class=\"ds-sidebar__count\">8</span></a>\n            <a class=\"ds-sidebar__item is-current\" href=\"#rooms\">IV. Storm <span class=\"ds-sidebar__count\">12</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#rooms\">V. Dusk <span class=\"ds-sidebar__count\">10</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#rooms\">VI. Night <span class=\"ds-sidebar__count\">14</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\">Room VII is not hung yet</p>\n          <p class=\"ds-empty__text\">The last room opens on 4 April. Members see it the evening before.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#visit\">Tell me when</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"work\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Exhibition</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#rooms\">Room I</a></li>\n        <li class=\"ds-breadcrumb__current\">Sea, first light</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\">Sea, first light</h1>\n        <p class=\"ds-page-header__text\">Oil on linen, 1961. The first work you meet, and the smallest sun in the building.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#visit\">See it in Room I</a>\n        <a class=\"ds-button ds-button--secondary\" href=\"#rooms\">Next work</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols ds-cols--work\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-hang ds-scene\">\n          <span class=\"ds-hang__light\" aria-hidden=\"true\"></span>\n          <span class=\"ds-scene__grain\" aria-hidden=\"true\"></span>\n          <span class=\"ds-work\"><span class=\"ds-work__canvas\"></span></span>\n          <p class=\"ds-label\">Room I, north wall. 46 by 37 cm</p>\n        </div>\n        <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">Chosen by the curator of painting</span><span class=\"ds-person__role\">Wall text and audio, stop 01</span></span></div>\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 work</h2><span class=\"ds-badge ds-badge--quiet\">Cat. 01</span></div>\n          <div class=\"ds-panel__body\">\n            <dl class=\"ds-facts\">\n              <dt>Made</dt><dd>1961, on the north coast</dd>\n              <dt>Medium</dt><dd>Oil on linen</dd>\n              <dt>Size</dt><dd>46 by 37 cm</dd>\n              <dt>Lent by</dt><dd>The city collection</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"ds-prose\" data-component=\"typography\">\n          <h1>A sun the size of a coin</h1>\n          <p class=\"ds-prose__lead\">Painted in forty minutes, standing in the water, before the light had a colour.</p>\n          <p>The horizon is drawn with the edge of a knife. Everything above it was laid in <strong>one wet layer</strong> and never touched again.</p>\n          <h2>Where to stand</h2>\n          <p>Two metres back, a little to the left. The catalogue number is <code>Cat. 01</code>; the audio guide begins here.</p>\n          <h3>Look for</h3>\n          <ul>\n            <li>The pencil line still showing under the sea</li>\n            <li>A thumbprint in the lower right corner</li>\n            <li>The date scratched into wet paint</li>\n          </ul>\n        </div>\n        <ul class=\"ds-linkrow\" data-component=\"links\">\n          <li><a class=\"ds-link\" href=\"#work\">The wall text</a></li>\n          <li><a class=\"ds-link is-visited\" href=\"#work\">The audio stop (heard)</a></li>\n          <li><a class=\"ds-link is-hover\" href=\"#rooms\">The rest of Room I</a></li>\n          <li><a class=\"ds-link is-active\" href=\"#visit\">Book a time</a></li>\n          <li><a class=\"ds-link ds-link--quiet\" href=\"#rooms\">All works</a></li>\n        </ul>\n        <div class=\"ds-accordion\">\n          <details class=\"ds-accordion__item\" open>\n            <summary class=\"ds-accordion__head\">Condition</summary>\n            <p class=\"ds-accordion__body\">Cleaned in 2019. The varnish is original and has yellowed a little at the edges.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Where it has hung</summary>\n            <p class=\"ds-accordion__body\">Four exhibitions since 1962, the last of them eleven years ago.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Reproductions</summary>\n            <p class=\"ds-accordion__body\">A print at full size is sold in the shop on the ground floor.</p>\n          </details>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"visit\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Exhibition</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#visit\">Visit</a></li>\n        <li class=\"ds-breadcrumb__current\">Book a time</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\">Plan your visit</h1>\n        <p class=\"ds-page-header__text\">Entry is by the half hour. Choose a time and stay as long as you like.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols ds-cols--even\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th>Day</th><th>Open</th><th>Last entry</th><th class=\"ds-table__num\">Adult</th><th>Today</th></tr>\n            </thead>\n            <tbody>\n              <tr><td><span class=\"ds-table__title\">Tuesday</span></td><td>10 to 18</td><td>17:00</td><td class=\"ds-table__num\">14.00</td><td><span class=\"ds-badge ds-badge--success\">Open</span></td></tr>\n              <tr><td><span class=\"ds-table__title\">Wednesday</span></td><td>10 to 18</td><td>17:00</td><td class=\"ds-table__num\">14.00</td><td></td></tr>\n              <tr class=\"is-hover\"><td><span class=\"ds-table__title\">Friday</span></td><td>10 to 21</td><td>20:00</td><td class=\"ds-table__num\">9.00</td><td><span class=\"ds-badge ds-badge--warning\">Late</span></td></tr>\n              <tr><td><span class=\"ds-table__title\">Saturday</span></td><td>10 to 19</td><td>18:00</td><td class=\"ds-table__num\">16.00</td><td></td></tr>\n              <tr><td><span class=\"ds-table__title\">Monday</span></td><td>Closed</td><td>None</td><td class=\"ds-table__num\">0.00</td><td><span class=\"ds-badge ds-badge--danger\">Closed</span></td></tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Today</h2><span class=\"ds-badge ds-badge--quiet\">8 October</span></div>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-progress\">\n              <p class=\"ds-progress__head\"><span>Places taken</span><span class=\"ds-progress__value\">412 / 640</span></p>\n              <progress class=\"ds-progress__bar\" value=\"412\" max=\"640\">64%</progress>\n            </div>\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\">Audio guide<small>Forty minutes, on your own telephone</small></span></label>\n            <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">The quiet hour<small>Tuesdays from ten, half the visitors</small></span></label>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n      <form class=\"ds-form\" data-component=\"form\" action=\"#visit\">\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 time.</p>\n        </div>\n        <div class=\"ds-form__row\">\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"visit-name\">Name</label>\n            <input class=\"ds-form__input\" id=\"visit-name\" type=\"text\" value=\"A. Visitor\">\n          </div>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"visit-time\">Time of entry</label>\n            <select class=\"ds-form__select\" id=\"visit-time\">\n              <option>Friday, 18:30</option>\n              <option>Friday, 19:00</option>\n              <option>Saturday, 10:00</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"ds-form__field\">\n          <label class=\"ds-form__label\" for=\"visit-mail\">E-mail address</label>\n          <input class=\"ds-form__input is-error\" id=\"visit-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=\"visit-note\">Anything we should know</label>\n          <textarea class=\"ds-form__textarea\" id=\"visit-note\" placeholder=\"A wheelchair, a school group, a guide dog\"></textarea>\n          <p class=\"ds-form__hint\">Tickets arrive by e-mail and are shown at the door.</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\">Book this time</button>\n          <a class=\"ds-button ds-button--secondary\" href=\"#rooms\">See the rooms first</a>\n          <button class=\"ds-button ds-button--danger\" type=\"button\">Give back my time</button>\n          <button class=\"ds-button is-disabled\" type=\"button\" disabled>Ticket sent</button>\n        </div>\n      </form>\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"slot-title\">\n            <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"slot-title\">Give back this time?</h2><a class=\"ds-dialog__close\" href=\"#visit\" aria-label=\"Close\"></a></div>\n            <div class=\"ds-dialog__body\"><p>Friday at 18:30 for two goes back on sale. The 18.00 you paid is returned within five days.</p></div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--danger\" href=\"#home\">Give it back</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#visit\">Keep it</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-wrap ds-footer__head\">\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 is a house for painting. East wing, upper floor; ten to six, closed on Mondays.</p>\n  </div>\n  <div class=\"ds-wrap ds-footer__cols\">\n    <div>\n      <p class=\"ds-label ds-footer__title\">See</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#home\">Rooms of weather</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#rooms\">Rooms and works</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#work\">One work</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-label ds-footer__title\">Visit</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#visit\">Hours and tickets</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#visit\">Tours</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#visit\">Members</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-label ds-footer__title\">Small print</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#visit\">Contact</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#visit\">Privacy</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">Imprint</a></li>\n      </ul>\n    </div>\n  </div>\n  <div class=\"ds-wrap ds-footer__legal ds-label\">\n    <span>2026 chronoskin. All rights reserved.</span>\n    <span>Plate 01 of 64</span>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.cinematic.portal.s05.p02.t04.u03\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"cinematic\",\n    \"years\": [\n      2015,\n      2026\n    ]\n  },\n  \"archetype\": \"portal\",\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-5243\",\n  \"short\": \"v1-ci-5243\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #12100d;\n  --color-canvas: #12100d;\n  --color-surface: #1a1713;\n  --color-surface-alt: #221e18;\n  --color-surface-strong: #2f2920;\n  --color-bar: #0a0806;\n  --color-bar-text: #efe6d6;\n  --color-bar-alt: #1a1713;\n  --color-bar-alt-text: #a39880;\n  --color-inverse: #e8dfcf;\n  --color-inverse-text: #17130e;\n  --color-text: #c9bfae;\n  --color-text-muted: #8d8372;\n  --color-heading: #efe6d6;\n  --color-heading-alt: #c8a273;\n  --color-link: #dcc09a;\n  --color-link-quiet: #a39880;\n  --color-link-visited: #b79f84;\n  --color-link-hover: #f4d8ae;\n  --color-link-active: #e0763a;\n  --color-border: #3a3329;\n  --color-border-strong: #8d7a5c;\n  --color-border-muted: #262119;\n  --color-accent: #c8a273;\n  --color-accent-text: #17130e;\n  --color-accent-alt: #e0763a;\n  --color-fill-1: #2b2219;\n  --color-fill-2: #3b2f22;\n  --color-fill-3: #1e1914;\n  --color-fill-4: #4b3a29;\n  --color-button: #e8dfcf;\n  --color-button-text: #17130e;\n  --color-button-hover-text: #17130e;\n  --color-button-secondary: #12100d;\n  --color-button-secondary-text: #e8dfcf;\n  --color-input: #1a1713;\n  --color-input-text: #efe6d6;\n  --color-input-border: #5a4f40;\n  --color-disabled: #262119;\n  --color-disabled-text: #6a6152;\n  --color-danger: #e2705a;\n  --color-danger-surface: #2e1712;\n  --color-success: #9ab87e;\n  --color-warning: #dbb25c;\n  --color-notice: #221e18;\n  --color-notice-text: #e8dfcf;\n  --color-focus: #f4d8ae;\n  --color-shadow: rgb(5 3 1 / 0.6);\n  --color-overlay: rgb(10 8 6 / 0.7);\n}\n\n/* @part type */\n:root {\n  --font-body: Newsreader, \"Source Serif 4\", \"Times New Roman\", Times, serif;\n  --font-heading: \"Inter Tight\", \"Neue Haas Grotesk Display\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-ui: \"Inter Tight\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-mono: \"IBM Plex Mono\", \"SF Mono\", Menlo, Consolas, monospace;\n  --text-base: 17px;\n  --text-small: 11px;\n  --text-ui: 12px;\n  --text-large: 24px;\n  --text-display: 200px;\n  --text-h1: 104px;\n  --text-h2: 40px;\n  --text-h3: 22px;\n  --line-body: 1.5;\n  --line-heading: 0.98;\n  --line-display: 0.82;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 500;\n  --weight-display: 500;\n  --weight-ui: 500;\n  --heading-transform: uppercase;\n  --heading-tracking: -1px;\n  --display-tracking: -9px;\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: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 2px;\n  --radius-page: 0;\n  --shadow-panel: inset 0 0 0 1px var(--color-shadow);\n  --shadow-control: 0 0 24px var(--color-shadow);\n  --shadow-control-hover: 0 0 44px var(--color-shadow);\n  --shadow-control-pressed: inset 0 0 12px var(--color-shadow);\n  --shadow-dialog: 0 0 80px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: linear-gradient(90deg, color-mix(in srgb, white 3%, transparent) 1px, transparent 1px) 0 0 / 120px 120px, var(--color-page);\n  --fill-bar: repeating-linear-gradient(0deg, color-mix(in srgb, white 5%, transparent) 0 1px, transparent 1px 4px), var(--color-bar);\n  --fill-bar-alt: linear-gradient(180deg, var(--color-bar-alt), color-mix(in srgb, var(--color-bar-alt) 70%, black));\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: linear-gradient(100deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 80%, white));\n  --fill-panel: linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--color-surface) 60%, transparent));\n  --fill-button: linear-gradient(100deg, var(--color-button), color-mix(in srgb, var(--color-button) 82%, white));\n  --fill-button-hover: linear-gradient(var(--color-button), var(--color-button));\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px dashed var(--color-focus);\n  --transition: all 0.25s ease-out;\n  --backdrop-blur: 0px;\n}\n"
  }
}