{
  "id": "v1-ci-7777",
  "long_id": "v1.cinematic.blog.s07.p07.t07.u07",
  "name": "Cinematic portfolio index",
  "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": "blog",
  "mode": "pure",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "This is the site of a small studio that films and photographs buildings at night, as such portfolios were built between 2015 and 2026: the home page is not a picture but an index, a ruled list of project titles set as large as the rows allow, each with its number, its year and one small framed still. Above it stands a colophon instead of a navigation bar and a title in very large, very light condensed capitals; below it the reel runs as one frame as wide as the window between two bars of captions. Everything is graphite and silver, the pictures are lit in silver too, and a single warm colour is kept for a far lamp, the small labels and the hovered button.",
  "url": "https://chrono.skin/s/v1-ci-7777",
  "preview_url": "https://chrono.skin/s/v1-ci-7777/specimen.html",
  "files": {
    "STYLE.md": "# Cinematic portfolio index\n\n## Summary\n\nThis is the site of a small studio that films and photographs buildings at night, as such portfolios were built between 2015 and 2026: the home page is not a picture but an index, a ruled list of project titles set as large as the rows allow, each with its number, its year and one small framed still. Above it stands a colophon instead of a navigation bar and a title in very large, very light condensed capitals; below it the reel runs as one frame as wide as the window between two bars of captions. Everything is graphite and silver, the pictures are lit in silver too, and a single warm colour is kept for a far lamp, the small labels and the hovered button.\n\n## Layout\n\n- The page is fluid and designed at 1440px. Content sits in `.ds-wrap`, centred, at most `--size-page` (1360px) wide with `--space-6` side padding (`--space-4` on a phone). Sections pad themselves with `--space-9` (136px), `--tight` with `--space-8`; `--flush` has no top padding and follows the hero directly.\n- Navigation is `.ds-nav`, a colophon on the page colour and not a bar: four columns (3, 4, 2, 3) at least `--size-nav` (132px) tall, holding the brand, a three-line note about the studio, the four views as a numbered vertical list, and at the right the word Fields (a `.ds-menu`) and a small secondary button. A hairline closes it. The current view is bright and a short accent rule grows after its name.\n- The home view stacks: `.ds-hero`, type alone on the page (a kicker line, the two-line title with its second line set in by 16%, and a foot of three columns: lead, two buttons, two labels at the right); the `.ds-list`, the index of five projects; a `.ds-frame` holding the `.ds-carousel`, the reel, edge to edge; a section with the `.ds-stat` row and the `.ds-grid` of four fields; the `.ds-band`; the footer.\n- Inner pages have no hero. Each opens inside `.ds-wrap` with `.ds-top` (the breadcrumb at the left, the page's number such as `02 / 04` at the right) and the `.ds-page-header`: a very large light title, one line of text under it, at most two buttons at the right, all on a strong hairline. Then `.ds-main` with `.ds-cols`: a narrow column `--size-side` (260px) with the `.ds-sidebar` and a wide one; `--wide` is 5 to 7, `--even` two halves. A project page puts its picture first: `.ds-main--frame` starts with a `.ds-frame` as wide as the window and the columns follow. Tabs sit in a `.ds-toolbar` at the top of the wide column, above the notices and the table.\n- Views. The specimen is the studio's site. `home` is the index. `archive` lists the films: the fields as a sidebar with two progress lines and an empty state, then tabs, two notices, the table with badges and a tooltip, and the pagination. `project` is one film: its frame with a scrubber, a panel of facts, the two people as avatars, an accordion of licences, notes as prose, links, three more stills and the next project. `contact` is the enquiry: the form with its error and all four buttons, a panel of three switches and the open dialog.\n- Below 1100px the columns stack, the list loses its middle column, the grid and the figures go two by two and the colophon loses its note; below 800px the colophon is the brand and the actions over one row of links that scrolls sideways, the hero's foot stacks, a list row is a still at the left and the title beside it, 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 (hairline gaps, dots), `--space-2` 8px (label to text), `--space-3` 12px (between buttons, list rows, grid gaps), `--space-4` 18px (panel padding, table cells), `--space-5` 24px (column gaps in rows, cell padding), `--space-6` 36px (page gutter, stack gap), `--space-7` 56px (page header to content, columns), `--space-8` 88px (tight sections, hero), `--space-9` 136px (sections). `--space-track` 2px is the tracking of labels.\n- Other sizes: `--size-mark` 26px, `--size-control` 42px, `--size-dialog` 460px, `--size-still` 208px (the still of a list row), `--size-number` 56px (the number column of the list, the section heads and the band).\n- On a phone (800px and below) `.ds-nav__inner` has two rows: the `.ds-brand` and `.ds-nav__actions` above, `.ds-nav__links` below on a hairline, one row that scrolls sideways without a scrollbar, the current link marked by an accent rule under it instead of after it; `.ds-nav__note` is not shown from 1100px down. At 520px and below the button in `.ds-nav__actions` is not shown, the links spread over the row and each stacks its number above its name.\n\n## Typography and colour roles\n\nThese are the conventions of the era; every layout and every token set keeps them.\n\n- A block stands on one of five grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. A scene (a picture, and the bars of a frame around it) stands on the bar: `--fill-bar` or `--color-bar`, and carries only `--color-bar-text`. The footer stands on `--fill-bar-alt` and carries `--color-bar-alt-text`. The inverted block (`--fill-inverse`, class `.ds-band`) carries only `--color-inverse-text`. Accent elements (`--fill-accent`: badges) carry `--color-accent-text`.\n- Pictures are drawn, never loaded. In a picture `--color-bar` is the darkness and every solid shape (a tower, a roof, a column, a chair) is a silhouette in it; `--color-accent` is the light (lit windows, the underside of a roof, the end of a tunnel); `--color-accent-alt` is the second light (one far lamp, a sign); `--color-fill-1` to `--color-fill-4` are the tones between (far blocks, walls, hills, a floor); `--color-bar-text` is the hottest point of a light. The grain of a picture comes from `--fill-bar`, which shows wherever the sky or a wall is left open.\n- Nothing assumes that a palette is dark. A picture is as dark as `--color-bar`, the page as dark as `--color-page`; with a pale bar colour the pictures turn into prints.\n- `--color-fill-1` to `--color-fill-4` are also the grounds of grid cells and carry `--color-text` and `--color-heading`.\n- Buttons by ground. On the page, panels and fills: `.ds-button` and `.ds-button--secondary`. On a picture or a frame only `.ds-button--onscene` (fill `--color-bar-text`, text `--color-bar`) and `.ds-button--ghost`. On the inverted block only `.ds-button--inverse` and `.ds-button--ghost`. The destructive button is `--color-danger` with `--color-button-text`.\n- `--color-heading-alt` is the colour of kickers, list numbers, panel and sidebar titles and h3 in prose.\n- The label is the second voice: `--font-ui` at `--text-small` or `--text-ui`, `--ui-transform`, tracked by `--space-track` (a layout token, 2px). Years, timecodes, counts and plate numbers are labels in `--font-mono`.\n- The default badge is `--fill-accent` with `--color-accent-text`. Status badges are never fills: the status colour is text, outline and a small dot on a transparent ground. `.ds-badge--quiet` is an outline in `--color-border`.\n- `--color-notice` with `--color-notice-text` is the information notice, with a left edge of `--border-width-strong` in `--color-accent`; the error notice is `--color-danger` on `--color-danger-surface`.\n- Borders are hairlines: `--border-width` in `--color-border` between rows and around panels and cells, `--color-border-strong` above the list, a table and each figure and under the page header, `--color-border-muted` inside boxes, `--color-input-border` around fields. `--border-width-strong` marks the current item (navigation, sidebar, tabs, pagination), the progress line and the notice edge.\n- Radii: `--radius-control` for buttons, fields and carousel arrows; `--radius-panel` for panels, notices, the dialog, the menu and tooltips; `--radius-pill` for badges, switches and avatars; `--radius-page` for stills and grid cells. A still that fills a frame has no radius. Shapes inside a drawing use percentages and `clip-path`, never a radius token.\n- Shadows: `--shadow-panel` on panels and grid cells, `--shadow-control` on buttons and the brand tile, `--shadow-control-hover` on hovered buttons and cells, `--shadow-dialog` on the dialog and an open menu. `--backdrop-blur` blurs what lies behind the dialog's veil.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: lights are a light token mixed with `transparent` at 10 to 90%; hairlines on a picture are `--color-bar-text` at 22 to 60%; the shade under the reel's title is `--color-bar` at 66 to 70%; the hovered list row is washed with `--color-accent` at 12%; the display size steps down as `--text-display` times 0.7, 0.46 and 0.3 at 1100px, 800px and 520px, with `--display-tracking` scaled by the same factors, and `--text-h1` times 0.6 and 0.46; the page title is `--text-h1` times 1.3. Opacity 0.7 to 0.86 dims secondary text on pictures and far shapes.\n- Here: graphite page, near-black pictures, silver text. The light `--color-accent` is silver, so buildings are lit without colour; the one warm tone, `--color-accent-alt` and `--color-heading-alt`, is the lamp on the mast, the sign, the small labels, the focus ring and the hovered button. The fills are three greys and one warm dark. The primary button is brushed silver with dark text; the inverted block is a sheet of silver.\n- Three families. `--font-heading` and `--font-ui` are one light condensed grotesque (Barlow Condensed, Avenir Next Condensed, Roboto Condensed, Arial Narrow; the references used commercial condensed faces): titles at `--weight-heading` 300 and `--weight-display` 200, always in capitals, labels at `--weight-ui` 500. `--font-body` is IBM Plex Sans at `--text-base` 15px and `--line-body` 1.55. `--font-mono` (IBM Plex Mono, Menlo) sets figures.\n- `--text-display` 208px with `--line-display` 0.86 and `--display-tracking` -1px (the hero title); `--text-h1` 88px (list titles, figures, the reel's title, the band, the footer line; the page title is 1.3 times that); `--text-h2` 46px (section and cell titles, the next project); `--text-h3` 24px (table titles, dialog title); `--text-large` 19px (leads).\n- Surface: hairlines of 1px and marks of 2px; corners of 2px on controls and panels and 3px on pictures, pills for badges; buttons and badges are brushed metal (a vertical gradient with a light upper edge), panels sink a little towards the bottom; the page carries fine vertical brush lines and `--fill-bar` a denser brush with one slanted sheen; a slow eased `--transition`; a dashed focus ring; no blur. Links in running text are underlined; navigation and titles are not.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets font, text colour and `--fill-page`.\n- `.ds-wrap`: the centred content column, `--size-page` wide.\n- `.ds-label`: the small tracked line. `--muted`, `--accent` (in `--color-heading-alt`), `--mono` for figures.\n- `.ds-brand`: the site's mark and name, in the colophon and again in the footer. `.ds-brand__mark` is a small tile dressed like the primary button holding the mark as inline SVG; `.ds-brand__name` is the name, set as a label. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--arrow` is a label led by a hairline that grows on hover. `.ds-linkrow` lays links in a row.\n- `.ds-button`: a small plate with a tracked label. Variants: `--secondary`, `--danger` (destructive actions only), `--onscene` (pictures and frames), `--inverse` (the inverted block), `--ghost` (both), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-badge`: small tracked label on `--fill-accent`. `--quiet` outlined. Status variants: `--success`, `--warning`, `--danger`, each an outline with a dot. `.ds-badgerow` for several.\n- `.ds-notice`: a ruled message with a strong left edge; `--error` in the danger colours. `.ds-notice__title` is the tracked lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` labels; `is-current` is underlined with `--color-accent`, `is-disabled` is grey. Page numbers are written with two digits.\n- `.ds-breadcrumb`: a label trail of `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a block of `--color-overlay` 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`, `.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` is lit from the left with `--color-accent-alt`, `--3` from above with `--color-bar-text`; `--large` doubles it. `.ds-person` sets one beside `.ds-person__name` and `.ds-person__role`; `.ds-people` lays them two by two.\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`. In a frame's lower bar it is the scrubber of the film.\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-still`: a picture, 16 to 9, with a hairline frame; it holds three empty layers, `.ds-still__back`, `.ds-still__mid` and `.ds-still__fore`, and is drawn in percentages, so one drawing serves as a thumbnail and as a frame. The variant is the picture: `--tower` (a waterfront, a tower with lit floors and a lamp on its mast, the light on the water), `--canopy` (a filling station under its lit roof, with a sign), `--tunnel` (an underpass with the light at its end), `--blinds` (a window behind a blind, its stripes on the floor, a chair), `--portico` (columns on three steps, lit from inside). A still always has a variant.\n- `.ds-frame`: a picture as wide as the window on `--fill-bar`: a `.ds-frame__bar` of labels above, `.ds-frame__picture` (the still, with a hairline safe area and four ticks drawn over it) and a second `.ds-frame__bar` below with the scrubber. Only bar text, `--onscene` and `--ghost` buttons inside.\n- `.ds-nav`: the colophon. `.ds-nav__inner` holds the brand, `.ds-nav__note`, `.ds-nav__links` of `.ds-nav__link` (a number in a `span`, then the name; `is-current` is bright with an accent rule after it) and `.ds-nav__actions`. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-menu`: a `<details>` in the colophon: `.ds-menu__toggle` (the word and a plus) and `.ds-menu__list` of `.ds-menu__item`, each with a count in a `span`; a small sheet under the word. Closed until clicked.\n- `.ds-hero`: the title of the home view, type alone: `.ds-hero__kicker`, `.ds-hero__title` of two `span` lines, and `.ds-hero__foot` with `.ds-hero__lead`, `.ds-hero__actions` and `.ds-hero__note`. One per site.\n- `.ds-section`: a block of the page; `--tight`, `--flush`. `.ds-section__head` holds a `.ds-section__kicker`, the `.ds-section__title` and an arrow link.\n- `.ds-list`: the index. Each `.ds-list__item` is a row of `.ds-list__number`, `.ds-list__title` (a link in the heading face at `--text-h1`), `.ds-list__meta` (two labels: kind, then subject), `.ds-list__year` and a `.ds-still`; a hovered row (`is-hover`) is washed with the accent, ruled with it, and its title moves in. `.ds-list__foot` holds a count and an arrow link.\n- `.ds-carousel`: the reel, inside a `.ds-frame`: `.ds-carousel__track` of `.ds-carousel__slide` (a `.ds-still` filling the slide, shaded at the foot, and `.ds-carousel__copy` with a mono label, `.ds-carousel__title`, `.ds-carousel__text` and an `--onscene` button), then in the lower bar `.ds-carousel__nav` with a count, `.ds-carousel__dots` of `.ds-carousel__dot` and two `.ds-carousel__arrow`.\n- `.ds-stat`: the row of four figures; each `.ds-stat__item` hangs from a strong hairline, the `.ds-stat__label` above the `.ds-stat__figure`.\n- `.ds-grid`: four cells with a gap, one on each fill and each lit along a different edge; a `.ds-grid__cell` is a link with `.ds-grid__head` (a letter and a count) at the top and `.ds-grid__title` and `.ds-grid__text` at the bottom.\n- `.ds-band`: the inverted block: `.ds-band__inner` with a mono label, `.ds-band__title` and one `--inverse` button.\n- `.ds-top`: the first line of an inner page: breadcrumb and page number.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__main` with the `.ds-page-header__title` and one line of `.ds-page-header__text`; `.ds-page-header__actions` at the right.\n- `.ds-main`: the body of an inner page; `--frame` when it starts with a `.ds-frame`. `.ds-cols`: narrow and wide column; `--wide`, `--even`. `.ds-stack` stacks blocks one step apart; `--tight` closer.\n- `.ds-sidebar`: `.ds-sidebar__title` label and a `.ds-sidebar__list` of ruled `.ds-sidebar__item` labels with a `.ds-sidebar__count`; the current row is bright, set in and marked at its left.\n- `.ds-toolbar`: the line above a table: `.ds-tabs` at the left, a label at the right.\n- `.ds-tabs`: labels on a hairline; the current `.ds-tabs__tab` (`is-current`) is underlined with the accent.\n- `.ds-table`: a ruled table: a label head under a strong rule, hairlines between rows, no vertical lines; `is-hover` tints a row. `.ds-table__num` right-aligns figures in mono; `.ds-table__title` is the row's link in the heading face. Wrap it in `.ds-table__wrap`; `.ds-table__foot` holds a count and the pagination.\n- `.ds-panel`: a hairline box: `.ds-panel__head` with a label `.ds-panel__title` and an optional badge, and `.ds-panel__body`; `.ds-panel__text` is a paragraph. `.ds-facts` is a `dl` of label and value pairs inside it.\n- `.ds-stills`: three more stills of a project in a row, each with a `.ds-stills__caption` of two labels.\n- `.ds-next`: the following project as one ruled link: a label, `.ds-next__title` and a small still.\n- `.ds-footer`: the closing strip on `--fill-bar-alt`: `.ds-footer__lead` with one large `.ds-footer__line` and an arrow link; `.ds-footer__cols`, the colophon again (brand, `.ds-footer__about`, two columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`); `.ds-footer__legal`.\n\n## Never\n\n- `font-size >= 12px`: labels are the smallest text.\n- `font-size <= 208px`: the hero title is the largest.\n- `font-weight <= 600`: titles are light; only `strong` is heavier.\n- `font-families <= 3`: one condensed face for titles and labels, one sans-serif for reading, one monospace for figures.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `border-radius <= 3px`: corners are machined, not rounded; pills are kept for badges and switches.\n- `border-width <= 2px`: rules are hairlines; 2px marks the current item.\n- `text-shadow = none`: type is flat, also on pictures.\n- `animation = none`: nothing moves by itself.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. First decide which ground it stands on (page, panel or fill; picture or frame; inverted block; footer strip) 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 a new variant of `.ds-still` built the way the existing ones are: the bar colour for darkness and every solid shape, the accent for the light, the alternate accent for one far lamp, the fills for the tones between, positions and sizes in percentages, gradients with hard stops and `clip-path`, and the sky left open so the grain of `--fill-bar` shows; do not load an image and do not write a colour. If the installing project has photographs or film, they replace the three layers of a still and everything around it (the frame's bars, the safe area, the labels, the list) stays. Keep type on the `--text-*` tokens, the largest sizes stepped down with the same factors as the specimen, labels tracked by `--space-track`, spacing on the `--space-*` scale, and note any one-off `color-mix()` shade next to its rule.\n",
    "components.css": ":root {\n  --size-page: 1360px;\n  --size-nav: 132px;\n  --size-mark: 26px;\n  --size-control: 42px;\n  --size-dialog: 460px;\n  --size-still: 208px;\n  --size-side: 260px;\n  --size-number: 56px;\n  --space-track: 2px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 18px;\n  --space-5: 24px;\n  --space-6: 36px;\n  --space-7: 56px;\n  --space-8: 88px;\n  --space-9: 136px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n  position: relative;\n  margin: 0;\n  padding: 0;\n  min-height: 100vh;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n.ds-wrap {\n  width: 100%;\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 var(--space-6);\n}\n\n/* label: the small tracked line of the era. Dates, numbers, credits,\n   coordinates and every caption are set in it. */\n.ds-label {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-label--muted {\n  color: var(--color-text-muted);\n}\n.ds-label--accent {\n  color: var(--color-heading-alt);\n}\n.ds-label--mono {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* brand: the mark on a small tile dressed like the primary button */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  padding: var(--space-1);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n  max-width: 64ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  font-size: var(--text-h2);\n}\n.ds-prose h2 {\n  margin-top: var(--space-6);\n  font-size: var(--text-h3);\n}\n.ds-prose h3 {\n  margin-top: var(--space-5);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-prose p {\n  margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: var(--space-3) 0 0;\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-top: var(--space-1);\n}\n.ds-prose li::marker {\n  color: var(--color-heading-alt);\n}\n.ds-prose strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  line-height: 1.35;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: var(--space-1);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-link--arrow {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-link--arrow:visited {\n  color: inherit;\n}\n.ds-link--arrow::before {\n  content: \"\";\n  width: var(--space-6);\n  height: var(--border-width);\n  background: currentColor;\n  transition: var(--transition);\n}\n.ds-link--arrow:hover::before,\n.ds-link--arrow.is-hover::before {\n  width: var(--space-7);\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* buttons: flat labels in a box. The filled one is the single bright\n   object of a screen. */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n  opacity: 0.8;\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  box-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: color-mix(in srgb, var(--color-button-secondary-text) 14%, transparent);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  border-color: var(--color-danger);\n  background: var(--color-danger);\n  color: var(--color-button-text);\n  box-shadow: none;\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  border-color: currentColor;\n  background: transparent;\n  color: inherit;\n  box-shadow: none;\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  background: color-mix(in srgb, currentColor 16%, transparent);\n}\n.ds-button--onscene,\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover {\n  border-color: var(--color-bar-text);\n  background: var(--color-bar-text);\n  color: var(--color-bar);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  border-color: var(--color-inverse-text);\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n  box-shadow: none;\n}\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  opacity: 0.86;\n}\n.ds-button--small {\n  min-height: calc(var(--size-control) - var(--space-3));\n  padding: var(--space-1) var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: transparent;\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  box-shadow: none;\n  opacity: 1;\n  cursor: not-allowed;\n}\n.ds-buttonrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: grid;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-form__label {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-heading);\n  box-shadow: none;\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(var(--size-control) * 3);\n  padding: var(--space-3) var(--space-4);\n  border-radius: var(--radius-panel);\n  line-height: var(--line-body);\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n  outline-offset: 0;\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n}\n.ds-form__hint {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-form__checkbox {\n  flex: none;\n  width: var(--space-4);\n  height: var(--space-4);\n  margin: var(--space-1) 0 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* badge: a tracked word in a hairline box; status variants are the\n   status colour as text and outline, never as a fill */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-badge--quiet {\n  border-color: var(--color-border);\n  background: transparent;\n  color: var(--color-text-muted);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  border-color: currentColor;\n  background: transparent;\n}\n.ds-badge--success {\n  color: var(--color-success);\n}\n.ds-badge--warning {\n  color: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-danger);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n  content: \"\";\n  width: var(--space-1);\n  height: var(--space-1);\n  border-radius: 50%;\n  background: currentColor;\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* notice: a ruled line of text with a strong left edge */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  font-size: var(--text-base);\n}\n.ds-notice--error {\n  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n  border-left-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-notice__title {\n  margin-right: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-noticerow {\n  display: grid;\n  gap: var(--space-2);\n}\n\n/* pagination: numbers as labels, the current one underlined by the light */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: calc(var(--size-control) - var(--space-2));\n  height: calc(var(--size-control) - var(--space-2));\n  padding: 0 var(--space-2);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: inherit;\n  opacity: 0.72;\n}\n.ds-breadcrumb__item a {\n  color: inherit;\n  text-decoration: none;\n}\n.ds-breadcrumb__item::after {\n  content: \"/\";\n  opacity: 0.6;\n}\n.ds-breadcrumb__current {\n  color: inherit;\n}\n\n/* dialog: shown open in the page flow, on the overlay colour */\n.ds-dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-7) var(--space-4);\n  background: var(--color-overlay);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-5) var(--space-5) 0;\n}\n.ds-dialog__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n  position: relative;\n  flex: none;\n  width: var(--space-5);\n  height: var(--space-5);\n  color: var(--color-heading);\n}\n.ds-dialog__close::before,\n.ds-dialog__close::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: var(--border-width);\n  background: currentColor;\n  transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n  transform: rotate(-45deg);\n}\n.ds-dialog__body {\n  padding: var(--space-3) var(--space-5) var(--space-5);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n  display: grid;\n  justify-items: start;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  color: var(--color-text);\n}\n.ds-empty__icon {\n  width: var(--space-7);\n  height: var(--border-width-strong);\n  background: var(--color-accent);\n}\n.ds-empty__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  max-width: 44ch;\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* switch */\n.ds-switch {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  order: 2;\n  width: calc(var(--space-5) * 2);\n  height: var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  background: var(--fill-input);\n  transition: var(--transition);\n}\n.ds-switch__track::after {\n  content: \"\";\n  position: absolute;\n  top: var(--space-1);\n  bottom: var(--space-1);\n  left: var(--space-1);\n  width: calc(var(--space-5) - var(--space-2) - var(--border-width) * 2);\n  border-radius: var(--radius-pill);\n  background: var(--color-text-muted);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n  left: calc(100% - var(--space-5) + var(--space-1) + var(--border-width) * 2);\n  background: var(--color-accent);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-switch__label {\n  color: var(--color-heading);\n}\n.ds-switch__label small {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* tooltip: a dotted label; the hint appears on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  border-bottom: var(--border-width) dotted currentColor;\n  cursor: help;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 6;\n  display: none;\n  width: max-content;\n  max-width: min(32ch, 60vw);\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-panel);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  letter-spacing: 0;\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n}\n.ds-tooltip--end .ds-tooltip__tip {\n  right: 0;\n  left: auto;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n\n/* avatar: a backlit head and shoulders, drawn from the scene colours.\n   Each dark shape lies on a lit copy of itself, moved a little towards\n   the light, which leaves a rim. */\n.ds-avatar {\n  position: relative;\n  display: inline-block;\n  flex: none;\n  width: var(--size-control);\n  height: var(--size-control);\n  overflow: hidden;\n  border-radius: var(--radius-pill);\n  background:\n    radial-gradient(ellipse 15% 19% at 50% 41%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 15% 19% at 52% 40%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 50% 60%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 50% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 52% 99%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 60% 50% at 86% 14%, color-mix(in srgb, var(--color-accent) 80%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-4), var(--color-bar));\n}\n.ds-avatar--2 {\n  background:\n    radial-gradient(ellipse 14% 19% at 47% 41%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 14% 19% at 45% 40%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-bar-text)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 47% 60%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 40% 29% at 46% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 40% 29% at 44% 99%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-bar-text)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 60% 60% at 8% 20%, color-mix(in srgb, var(--color-accent-alt) 70%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-2), var(--color-bar));\n}\n.ds-avatar--large {\n  width: calc(var(--size-control) * 2);\n  height: calc(var(--size-control) * 2);\n}\n.ds-person {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-person__name {\n  display: block;\n  color: var(--color-heading);\n}\n.ds-person__role {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n\n/* progress: a hairline with the light running along it */\n.ds-progress {\n  display: block;\n  min-width: 0;\n}\n.ds-progress__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-progress__value {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.ds-progress__bar {\n  display: block;\n  width: 100%;\n  height: var(--border-width-strong);\n  overflow: hidden;\n  appearance: none;\n  -webkit-appearance: none;\n  border: 0;\n  background: color-mix(in srgb, currentColor 24%, transparent);\n  color: var(--color-accent);\n}\n.ds-progress__bar::-webkit-progress-bar {\n  background: transparent;\n}\n.ds-progress__bar::-webkit-progress-value {\n  background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n  background: var(--color-accent);\n}\n\n/* accordion */\n.ds-accordion {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__head::after {\n  content: \"\";\n  flex: none;\n  align-self: center;\n  display: inline-block;\n  width: calc(var(--space-2) * 1.25);\n  height: calc(var(--space-2) * 1.25);\n  background: currentColor;\n  clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n  color: var(--color-heading-alt);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after {\n  rotate: 45deg;\n}\n.ds-accordion__body {\n  max-width: 60ch;\n  margin: 0;\n  padding: 0 0 var(--space-4);\n  color: var(--color-text);\n}\n\n/* still: a framed picture drawn from tokens, in percentages only, so the\n   same drawing is a thumbnail in a row and a frame as wide as the window.\n   The ground is the bar fill with its grain; the accent is the light, the\n   alternate accent the one far lamp; every solid shape is a silhouette in\n   the bar colour and the fills are the tones between. Three layers lie\n   back to front. */\n.ds-still {\n  position: relative;\n  isolation: isolate;\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  overflow: hidden;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n  border-radius: var(--radius-page);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-still__back,\n.ds-still__mid,\n.ds-still__fore,\n.ds-still::before,\n.ds-still::after {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  pointer-events: none;\n}\n/* tower: a waterfront at night. The glow of the city behind, a far row of\n   blocks, a near tower with its lit floors and a lamp on its mast, the\n   quay and the light lying on the water. */\n.ds-still--tower .ds-still__back {\n  background:\n    radial-gradient(ellipse 0.9% 1.6% at 45.8% 3.6%, var(--color-bar-text) 0 30%, var(--color-accent-alt) 62%, transparent 100%),\n    radial-gradient(ellipse 5% 9% at 45.8% 3.6%, color-mix(in srgb, var(--color-accent-alt) 54%, transparent), transparent 100%),\n    radial-gradient(ellipse 70% 62% at 46% 72%, color-mix(in srgb, var(--color-accent) 72%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 16%, color-mix(in srgb, var(--color-fill-3) 76%, transparent) 72%, transparent 72%);\n}\n.ds-still--tower .ds-still__mid {\n  background:\n    repeating-linear-gradient(0deg, transparent 0 3.4%, color-mix(in srgb, var(--color-accent) 16%, transparent) 3.4% 4%),\n    linear-gradient(to top, color-mix(in srgb, var(--color-fill-3) 60%, var(--color-fill-1)), var(--color-fill-3));\n  clip-path: polygon(0% 70%, 0% 49%, 3% 49%, 3% 43%, 8% 43%, 8% 53%, 11% 53%, 11% 37%, 16% 37%, 16% 47%, 20% 47%, 20% 30%, 23% 30%, 23% 55%, 31% 55%, 31% 44%, 39% 44%, 39% 26%, 42% 26%, 42% 60%, 53% 60%, 53% 39%, 58% 39%, 58% 19%, 61% 19%, 61% 17%, 64% 17%, 64% 48%, 72% 48%, 72% 33%, 77% 33%, 77% 41%, 83% 41%, 83% 28%, 88% 28%, 88% 45%, 96% 45%, 96% 36%, 100% 36%, 100% 70%);\n}\n.ds-still--tower .ds-still__fore {\n  background:\n    linear-gradient(to bottom, transparent 0 60%, var(--color-bar) 60%),\n    repeating-linear-gradient(0deg, var(--color-bar) 0 6%, transparent 6% 7.6%, var(--color-bar) 7.6% 17%, transparent 17% 18.6%, var(--color-bar) 18.6% 23%),\n    linear-gradient(90deg, var(--color-bar) 0 7%, transparent 7% 12%, var(--color-bar) 12% 25%, transparent 25% 27%, var(--color-bar) 27% 30%, transparent 30% 35.6%, var(--color-bar) 35.6% 57.4%, transparent 57.4% 60.6%, var(--color-bar) 60.6% 63.4%, transparent 63.4% 68.6%, var(--color-bar) 68.6% 79.4%, transparent 79.4% 84.6%, var(--color-bar) 84.6%),\n    repeating-linear-gradient(90deg, var(--color-bar) 0 0.4%, transparent 0.4% 1.2%),\n    linear-gradient(to top, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)));\n  clip-path: polygon(0% 72%, 0% 60%, 6% 60%, 6% 50%, 14% 50%, 14% 62%, 24% 62%, 24% 40%, 28% 40%, 28% 34%, 37% 34%, 37% 64%, 40% 64%, 40% 14%, 45.4% 14%, 45.4% 4.6%, 46.2% 4.6%, 46.2% 14%, 52% 14%, 52% 64%, 56% 64%, 56% 30%, 62% 30%, 62% 23%, 70% 23%, 70% 58%, 78% 58%, 78% 46%, 86% 46%, 86% 61%, 94% 61%, 94% 54%, 100% 54%, 100% 72%);\n}\n.ds-still--tower .ds-still__fore::before {\n  content: \"\";\n  position: absolute;\n  inset: 16% 48.6% 37% 40.6%;\n  background:\n    linear-gradient(90deg, transparent 0 62%, var(--color-bar) 62% 100%) 0 0 / 100% 22% no-repeat,\n    linear-gradient(90deg, var(--color-bar) 0 30%, transparent 30%) 0 78% / 100% 16% no-repeat,\n    repeating-linear-gradient(0deg, var(--color-bar) 0 3.4%, transparent 3.4% 5.6%),\n    repeating-linear-gradient(90deg, var(--color-bar) 0 4%, transparent 4% 12.5%),\n    linear-gradient(to top, color-mix(in srgb, var(--color-accent) 80%, var(--color-bar-text)), var(--color-accent));\n}\n.ds-still--tower::before {\n  content: \"\";\n  top: 72%;\n  background:\n    repeating-linear-gradient(0deg, var(--color-bar) 0 7%, transparent 7% 12%),\n    radial-gradient(ellipse 9% 100% at 46% 0%, color-mix(in srgb, var(--color-accent) 90%, transparent), transparent 100%),\n    radial-gradient(ellipse 50% 90% at 46% 0%, color-mix(in srgb, var(--color-accent) 44%, transparent), transparent 100%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-3) 70%, transparent), transparent);\n}\n/* canopy: a filling station on an empty road. The lit underside of the\n   roof is the light; two columns, two pumps, a sign on its pole with the\n   far lamp in it, low hills behind and the wet ground below. */\n.ds-still--canopy .ds-still__back {\n  background:\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 58%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent)) 50% 77.5% / 60% 46.6% no-repeat,\n    radial-gradient(ellipse 56% 60% at 50% 46%, color-mix(in srgb, var(--color-accent) 34%, transparent), transparent 100%),\n    radial-gradient(ellipse 44% 9% at 50% 88%, color-mix(in srgb, var(--color-bar-text) 50%, transparent), transparent 100%),\n    radial-gradient(ellipse 9% 16% at 88.5% 20%, color-mix(in srgb, var(--color-accent-alt) 60%, transparent), transparent 100%);\n}\n.ds-still--canopy .ds-still__mid {\n  background: linear-gradient(to bottom, var(--color-fill-3), var(--color-fill-1));\n  clip-path: polygon(0% 90%, 0% 80%, 9% 77%, 18% 79%, 30% 75%, 44% 78%, 57% 76%, 70% 79%, 84% 74%, 100% 77%, 100% 90%);\n  opacity: 0.7;\n}\n.ds-still--canopy .ds-still__fore {\n  background:\n    linear-gradient(to bottom, transparent 0 39.4%, color-mix(in srgb, var(--color-accent) 50%, var(--color-bar-text)) 39.4% 41.4%, transparent 41.4%) 50% 0 / 60% 100% no-repeat,\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-bar-text)), var(--color-accent-alt)) 90.6% 17.4% / 4.6% 6.6% no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 70%, var(--color-bar)), color-mix(in srgb, var(--color-accent) 70%, var(--color-bar))) 39.6% 76% / 1.4% 3% no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-accent) 70%, var(--color-bar)), color-mix(in srgb, var(--color-accent) 70%, var(--color-bar))) 60.6% 76% / 1.4% 3% no-repeat,\n    var(--color-bar);\n  clip-path: polygon(0% 90%, 0% 88%, 30% 88%, 30% 41.4%, 20% 41.4%, 20% 34%, 80% 34%, 80% 41.4%, 70% 41.4%, 70% 88%, 68% 88%, 68% 41.4%, 32% 41.4%, 32% 88%, 38% 88%, 38% 68%, 41.4% 68%, 41.4% 88%, 59% 88%, 59% 68%, 62.4% 68%, 62.4% 88%, 88% 88%, 88% 24.6%, 85.6% 24.6%, 85.6% 14.6%, 91.4% 14.6%, 91.4% 24.6%, 89% 24.6%, 89% 88%, 100% 88%, 100% 90%);\n}\n.ds-still--canopy::before {\n  content: \"\";\n  top: 90%;\n  background:\n    repeating-linear-gradient(0deg, transparent 0 14%, color-mix(in srgb, var(--color-bar) 70%, transparent) 14% 30%),\n    radial-gradient(ellipse 34% 130% at 50% 0%, color-mix(in srgb, var(--color-accent) 70%, transparent), transparent 100%);\n}\n/* tunnel: an underpass seen down its length. The light is the far end;\n   four faces in four tones, two ribs, a strip of lamps on the roof and\n   its mirror on the wet floor, and the dark mouth we stand in. */\n.ds-still--tunnel .ds-still__back {\n  background:\n    radial-gradient(ellipse 7% 12% at 50% 52%, var(--color-bar-text) 0 46%, var(--color-accent) 78%, transparent 100%),\n    radial-gradient(ellipse 40% 62% at 50% 52%, color-mix(in srgb, var(--color-accent) 60%, transparent), transparent 100%),\n    conic-gradient(from 0deg at 50% 52%, var(--color-fill-2) 0 59.7deg, var(--color-fill-1) 59.7deg 118.4deg, var(--color-fill-3) 118.4deg 241.6deg, var(--color-fill-1) 241.6deg 300.3deg, var(--color-fill-2) 300.3deg);\n}\n.ds-still--tunnel .ds-still__mid {\n  background:\n    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 70%, var(--color-bar-text)) 0 5%, transparent 5% 8%) 0 0 / 100% 46% no-repeat,\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 50%, transparent), color-mix(in srgb, var(--color-accent) 16%, transparent)) 0 100% / 100% 42% no-repeat;\n  clip-path: polygon(46.4% 0%, 53.6% 0%, 50.2% 46%, 50.2% 58%, 57% 100%, 43% 100%, 49.8% 58%, 49.8% 46%);\n}\n.ds-still--tunnel::before,\n.ds-still--tunnel::after {\n  content: \"\";\n  inset: 20.8% 20% 19.2% 20%;\n  z-index: -1;\n  border: var(--border-width-strong) solid color-mix(in srgb, var(--color-bar) 80%, transparent);\n}\n.ds-still--tunnel::after {\n  inset: 33.3% 32% 30.7% 32%;\n  border-width: var(--border-width);\n}\n.ds-still--tunnel .ds-still__fore {\n  background: linear-gradient(to bottom, var(--color-bar), color-mix(in srgb, var(--color-bar) 90%, var(--color-accent-alt)));\n  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 6% 8%, 6% 93%, 94% 93%, 94% 8%, 6% 8%);\n}\n/* blinds: a room at night with the blind down. The window is the light;\n   the slats cut it, their stripes lie across the floor and a chair stands\n   in them. */\n.ds-still--blinds .ds-still__back {\n  background:\n    linear-gradient(100deg, color-mix(in srgb, var(--color-accent) 70%, var(--color-bar-text)), var(--color-accent)) 21.9% 16.3% / 36% 56% no-repeat,\n    radial-gradient(ellipse 44% 60% at 32% 42%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 76%, color-mix(in srgb, var(--color-fill-2) 90%, transparent) 76%, color-mix(in srgb, var(--color-fill-1) 60%, transparent) 100%);\n}\n.ds-still--blinds .ds-still__mid {\n  background:\n    linear-gradient(90deg, transparent 0 31.4%, var(--color-bar) 31.4% 32.6%, transparent 32.6%),\n    repeating-linear-gradient(0deg, var(--color-bar) 0 3.2%, transparent 3.2% 5.6%);\n  clip-path: inset(14% 50% 30% 14%);\n}\n.ds-still--blinds .ds-still__fore {\n  background: repeating-linear-gradient(8deg, color-mix(in srgb, var(--color-accent) 62%, transparent) 0 2.6%, transparent 2.6% 5.8%);\n  clip-path: polygon(38% 79%, 97% 77%, 100% 97%, 26% 100%);\n}\n.ds-still--blinds::after {\n  content: \"\";\n  inset: 46% 20% 12% 66%;\n  background: var(--color-bar);\n  clip-path: polygon(8% 0%, 18% 0%, 18% 52%, 88% 52%, 88% 100%, 79% 100%, 79% 62%, 18% 62%, 18% 100%, 8% 100%);\n}\n/* portico: a row of columns at the top of three steps, lit from inside.\n   A second row stands further in, the lamp burns low between two columns\n   and the edges of the steps catch it. */\n.ds-still--portico .ds-still__back {\n  background:\n    radial-gradient(ellipse 7% 22% at 64.3% 70%, var(--color-bar-text) 0 20%, color-mix(in srgb, var(--color-accent) 90%, transparent) 50%, transparent 100%),\n    repeating-linear-gradient(90deg, transparent 0 1.4%, color-mix(in srgb, var(--color-fill-3) 94%, var(--color-bar)) 1.4% 3.8%, transparent 3.8% 7.1428%) 0 62% / 100% 46% no-repeat,\n    linear-gradient(to top, color-mix(in srgb, var(--color-accent) 84%, transparent), color-mix(in srgb, var(--color-accent) 28%, transparent)) 0 47.6% / 100% 58% no-repeat;\n}\n.ds-still--portico .ds-still__mid {\n  background:\n    repeating-linear-gradient(90deg, transparent 0 4.6%, var(--color-bar) 4.6% 9.7%, transparent 9.7% 14.2857%) 0 47.6% / 100% 58% no-repeat,\n    linear-gradient(to bottom, transparent 0 13%, var(--color-bar) 13% 20%, transparent 20% 78%, var(--color-bar) 78% 79%, color-mix(in srgb, var(--color-accent) 40%, var(--color-bar)) 79% 80%, var(--color-bar) 80% 86%, color-mix(in srgb, var(--color-accent) 26%, var(--color-bar)) 86% 87%, var(--color-bar) 87% 93%, color-mix(in srgb, var(--color-accent) 16%, var(--color-bar)) 93% 94%, var(--color-bar) 94%);\n}\n.ds-still--portico .ds-still__fore {\n  background: var(--color-bar);\n  clip-path: polygon(3% 13.4%, 50% 1%, 97% 13.4%);\n}\n\n/* frame: a picture as wide as the window, between two bars of captions */\n.ds-frame {\n  position: relative;\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-frame__bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n  min-height: var(--size-control);\n  padding: var(--space-2) var(--space-6);\n}\n.ds-frame__bar > .ds-label {\n  white-space: nowrap;\n}\n.ds-frame__bar > .ds-progress {\n  flex: 0 1 calc(var(--size-still) * 2);\n}\n.ds-frame__picture {\n  position: relative;\n}\n.ds-frame__picture > .ds-still {\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n/* the safe area: a hairline inside the picture, with its four ticks */\n.ds-frame__picture::after {\n  content: \"\";\n  position: absolute;\n  inset: var(--space-5) var(--space-6);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 26%, transparent);\n  background:\n    linear-gradient(color-mix(in srgb, var(--color-bar-text) 60%, transparent), color-mix(in srgb, var(--color-bar-text) 60%, transparent)) 50% 0 / var(--border-width) var(--space-3) no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-bar-text) 60%, transparent), color-mix(in srgb, var(--color-bar-text) 60%, transparent)) 50% 100% / var(--border-width) var(--space-3) no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-bar-text) 60%, transparent), color-mix(in srgb, var(--color-bar-text) 60%, transparent)) 0 50% / var(--space-3) var(--border-width) no-repeat,\n    linear-gradient(color-mix(in srgb, var(--color-bar-text) 60%, transparent), color-mix(in srgb, var(--color-bar-text) 60%, transparent)) 100% 50% / var(--space-3) var(--border-width) no-repeat;\n  pointer-events: none;\n}\n\n/* nav: a colophon of four columns on the page, not a bar: the brand, a\n   line about the studio, the views as a numbered list, and the actions */\n.ds-nav {\n  position: relative;\n  z-index: 5;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-text);\n}\n.ds-nav__inner {\n  display: grid;\n  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr);\n  align-items: start;\n  gap: var(--space-5);\n  min-height: var(--size-nav);\n  padding: var(--space-5) var(--space-6);\n}\n.ds-nav__inner > .ds-brand {\n  justify-self: start;\n  color: var(--color-heading);\n}\n.ds-nav__note {\n  max-width: 38ch;\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n.ds-nav__links {\n  display: grid;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-1) 0;\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  line-height: var(--line-heading);\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 span {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  letter-spacing: 0;\n}\n.ds-nav__link::after {\n  content: \"\";\n  width: 0;\n  height: var(--border-width-strong);\n  background: var(--color-accent);\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(#archive:target) .ds-nav__link[href=\"#archive\"],\n.ds-page:has(#project:target) .ds-nav__link[href=\"#project\"],\n.ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"] {\n  color: var(--color-heading);\n}\n.ds-nav__link.is-current::after,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"]::after,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"]::after,\n.ds-page:has(#archive:target) .ds-nav__link[href=\"#archive\"]::after,\n.ds-page:has(#project:target) .ds-nav__link[href=\"#project\"]::after,\n.ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"]::after {\n  width: var(--space-6);\n}\n.ds-nav__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-3) var(--space-5);\n}\n\n/* menu: the fields of work, a small sheet under its word */\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: calc(var(--size-control) - var(--space-3));\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-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle::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-menu[open] > .ds-menu__toggle::after {\n  rotate: 45deg;\n}\n.ds-menu__list {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  z-index: 8;\n  min-width: calc(var(--size-control) * 5);\n  margin: var(--space-1) 0 0;\n  padding: var(--space-2) 0;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  list-style: none;\n}\n.ds-menu__item {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding: var(--space-2) var(--space-4);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-menu__item span {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  letter-spacing: 0;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n\n/* hero: type alone on the page. The second line of the title is set in\n   from the left, as far as the number column and the first gap. */\n.ds-hero {\n  padding: var(--space-8) 0 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-5);\n  margin: 0 0 var(--space-5);\n}\n.ds-hero__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__title span {\n  display: block;\n}\n.ds-hero__title span + span {\n  padding-left: 10%;\n}\n.ds-hero__foot {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);\n  align-items: end;\n  gap: var(--space-6);\n  margin-top: var(--space-7);\n}\n.ds-hero__lead {\n  max-width: 46ch;\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.ds-hero__note {\n  display: grid;\n  gap: var(--space-2);\n  justify-items: end;\n  margin: 0;\n  color: var(--color-text-muted);\n  text-align: right;\n}\n\n/* section */\n.ds-section {\n  padding: var(--space-9) 0;\n}\n.ds-section--flush {\n  padding: 0 0 var(--space-8);\n}\n.ds-section__head {\n  display: grid;\n  grid-template-columns: var(--size-number) minmax(0, 1fr) auto;\n  align-items: baseline;\n  gap: var(--space-3) var(--space-5);\n  margin-bottom: var(--space-6);\n}\n.ds-section__kicker {\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-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/* list: the index. Every project is one ruled row: its number, its title\n   as large as the row, kind and place, the year, and a small still. */\n.ds-list {\n  display: grid;\n  grid-template-columns: var(--size-number) auto minmax(0, 1fr) auto var(--size-still);\n  column-gap: var(--space-5);\n  margin: 0;\n  padding: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n  list-style: none;\n}\n.ds-list__item {\n  position: relative;\n  display: grid;\n  grid-column: 1 / -1;\n  grid-template-columns: subgrid;\n  align-items: center;\n  padding: var(--space-3) 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  border-bottom-color: var(--color-accent);\n  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 12%, transparent) 70%, transparent);\n}\n.ds-list__number {\n  color: var(--color-heading-alt);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  font-variant-numeric: tabular-nums;\n}\n.ds-list__title {\n  min-width: 0;\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-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-list__item:hover .ds-list__title,\n.ds-list__item.is-hover .ds-list__title {\n  transform: translateX(var(--space-2));\n}\n.ds-list__meta {\n  display: grid;\n  gap: var(--space-2);\n  color: var(--color-text-muted);\n}\n.ds-list__meta .ds-label:first-child {\n  color: var(--color-text);\n}\n.ds-list__year {\n  color: var(--color-text);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  font-variant-numeric: tabular-nums;\n}\n.ds-list__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-5);\n  padding-top: var(--space-4);\n  color: var(--color-text-muted);\n}\n\n/* carousel: the reel. One frame to a slide, as wide as the window; the\n   title lies in the dark foot of the picture and the controls sit in the\n   bar under it. */\n.ds-carousel {\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\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  flex: 0 0 100%;\n  min-width: 0;\n  scroll-snap-align: start;\n}\n.ds-carousel__slide > .ds-still {\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n.ds-carousel__slide::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(to top, var(--color-bar) 0, color-mix(in srgb, var(--color-bar) 66%, transparent) 22%, transparent 52%),\n    linear-gradient(to right, color-mix(in srgb, var(--color-bar) 70%, transparent) 0, transparent 44%);\n  pointer-events: none;\n}\n.ds-carousel__copy {\n  position: absolute;\n  bottom: var(--space-6);\n  left: var(--space-6);\n  z-index: 1;\n  display: grid;\n  gap: var(--space-3);\n  justify-items: start;\n  max-width: 60%;\n}\n.ds-carousel__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-carousel__text {\n  max-width: 44ch;\n  margin: 0;\n  opacity: 0.84;\n}\n.ds-carousel__nav {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  flex: none;\n}\n.ds-carousel__dots {\n  display: flex;\n  gap: var(--space-1);\n}\n.ds-carousel__dot {\n  width: var(--space-5);\n  height: var(--border-width-strong);\n  background: color-mix(in srgb, currentColor 30%, transparent);\n}\n.ds-carousel__dot.is-current {\n  background: var(--color-accent);\n}\n.ds-carousel__arrow {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--size-control) - var(--space-3));\n  height: calc(var(--size-control) - var(--space-3));\n  border: var(--border-width) var(--border-style) color-mix(in srgb, currentColor 50%, transparent);\n  border-radius: var(--radius-control);\n  color: inherit;\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  text-decoration: none;\n}\n.ds-carousel__arrow::before {\n  content: \"\";\n  flex: none;\n  width: calc(var(--text-ui) * 0.5);\n  height: calc(var(--text-ui) * 0.5);\n  border-left: calc(var(--space-2) / 4) solid currentColor;\n  border-bottom: calc(var(--space-2) / 4) solid currentColor;\n  rotate: 45deg;\n  translate: 25% 0;\n}\n.ds-carousel__arrow + .ds-carousel__arrow::before {\n  rotate: -135deg;\n  translate: -25% 0;\n}\n.ds-carousel__arrow.is-disabled {\n  opacity: 0.35;\n}\n\n/* stats: four figures, each hanging from its own rule */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5);\n  margin: 0;\n}\n.ds-stat__item {\n  display: grid;\n  gap: var(--space-5);\n  padding-top: var(--space-3);\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__figure {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* grid: four fields of work, one on each fill, each lit along one edge */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__cell {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: var(--space-8);\n  height: 100%;\n  padding: var(--space-5);\n  overflow: hidden;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  background:\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 46%),\n    var(--color-fill-1);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-grid > :nth-child(2) .ds-grid__cell {\n  background:\n    linear-gradient(to right, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 50%),\n    var(--color-fill-2);\n}\n.ds-grid > :nth-child(3) .ds-grid__cell {\n  background:\n    linear-gradient(to top, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 46%),\n    var(--color-fill-3);\n}\n.ds-grid > :nth-child(4) .ds-grid__cell {\n  background:\n    linear-gradient(to left, color-mix(in srgb, var(--color-accent-alt) 22%, transparent), transparent 50%),\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  box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n.ds-grid__title {\n  display: block;\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n  display: block;\n  margin: 0;\n}\n\n/* band: the inverted block, one line and one button */\n.ds-band {\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n}\n.ds-band__inner {\n  display: grid;\n  grid-template-columns: var(--size-number) minmax(0, 1fr) auto;\n  align-items: center;\n  gap: var(--space-5);\n  padding-top: var(--space-7);\n  padding-bottom: var(--space-7);\n}\n.ds-band__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* inner pages: a line of breadcrumb and index, then the title on a rule */\n.ds-top {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-6) 0 var(--space-5);\n  color: var(--color-text-muted);\n}\n.ds-page-header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding-bottom: var(--space-6);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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: calc(var(--text-h1) * 1.3);\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-page-header__text {\n  max-width: 56ch;\n  margin: var(--space-4) 0 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  gap: var(--space-3);\n}\n.ds-main {\n  padding: var(--space-7) 0 var(--space-9);\n}\n.ds-main--frame {\n  padding-top: 0;\n}\n.ds-main--frame > .ds-frame {\n  margin-bottom: var(--space-7);\n}\n.ds-cols {\n  display: grid;\n  grid-template-columns: var(--size-side) minmax(0, 1fr);\n  align-items: start;\n  gap: var(--space-7);\n}\n.ds-cols--even {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-cols--wide {\n  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n}\n.ds-stack {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--space-6);\n  min-width: 0;\n}\n.ds-stack--tight {\n  gap: var(--space-4);\n}\n\n/* sidebar: the kinds of work as a list of labels with counts */\n.ds-sidebar {\n  display: grid;\n  gap: var(--space-3);\n}\n.ds-sidebar__title {\n  margin: 0;\n  color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n  display: grid;\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: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-link-quiet);\n  font-family: var(--font-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  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  padding-left: var(--space-3);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n}\n.ds-sidebar__count {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  letter-spacing: 0;\n}\n\n/* toolbar: tabs at the left, a count at the right, on one hairline */\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-5);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-text-muted);\n}\n.ds-toolbar > .ds-label {\n  padding-bottom: var(--space-3);\n}\n.ds-tabs {\n  display: flex;\n  gap: var(--space-6);\n  min-width: 0;\n  margin: 0 0 calc(var(--border-width) * -1);\n  padding: 0;\n  overflow-x: auto;\n  list-style: none;\n  scrollbar-width: none;\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n\n/* table: the archive. Titles in the heading face, figures in mono. */\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-4) 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-4) 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:last-child,\n.ds-table td:last-child {\n  padding-right: 0;\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  white-space: nowrap;\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  font-weight: var(--weight-ui);\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.ds-people {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n/* stills: three more frames of a project in a row, with captions */\n.ds-stills {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-stills__caption {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin-top: var(--space-2);\n  color: var(--color-text-muted);\n}\n/* next: the following project as one large ruled link */\n.ds-next {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) calc(var(--size-still) * 0.75);\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-4) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-heading);\n  text-decoration: none;\n}\n.ds-next__title {\n  display: block;\n  margin-top: var(--space-2);\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/* footer: one line to end on, then the colophon again */\n.ds-footer {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n.ds-footer__lead {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-4) var(--space-6);\n  padding-top: var(--space-7);\n  padding-bottom: var(--space-6);\n}\n.ds-footer__line {\n  max-width: 20ch;\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-footer__cols {\n  display: grid;\n  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr);\n  gap: var(--space-5);\n  padding-top: var(--space-5);\n  padding-bottom: var(--space-6);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 26%, transparent);\n}\n.ds-footer__about {\n  max-width: 38ch;\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: var(--line-body);\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  font-weight: var(--weight-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) 26%, transparent);\n}\n\n/* narrower windows: the type steps down with the display size itself,\n   and its tracking with it */\n@media (max-width: 1100px) {\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.7);\n    letter-spacing: calc(var(--display-tracking) * 0.7);\n  }\n  .ds-list {\n    grid-template-columns: var(--size-number) minmax(0, 1fr) auto var(--size-still);\n  }\n  .ds-list__meta {\n    display: none;\n  }\n  .ds-list__title,\n  .ds-page-header__title {\n    font-size: var(--text-h1);\n  }\n  .ds-grid,\n  .ds-stat {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-cols,\n  .ds-cols--wide {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-nav__inner,\n  .ds-footer__cols {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n  }\n  .ds-nav__note {\n    display: none;\n  }\n  .ds-footer__cols > :first-child {\n    grid-column: 1 / -1;\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    align-items: center;\n    gap: var(--space-3) var(--space-4);\n    min-height: 0;\n    padding: var(--space-3) var(--space-4) 0;\n  }\n  .ds-nav__links {\n    grid-column: 1 / -1;\n    grid-row: 2;\n    display: flex;\n    gap: var(--space-5);\n    overflow-x: auto;\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n    scrollbar-width: none;\n  }\n  .ds-nav__link {\n    padding: var(--space-3) 0;\n  }\n  .ds-nav__link::after {\n    display: none;\n  }\n  .ds-nav__link {\n    border-bottom: var(--border-width-strong) var(--border-style) transparent;\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(#archive:target) .ds-nav__link[href=\"#archive\"],\n  .ds-page:has(#project:target) .ds-nav__link[href=\"#project\"],\n  .ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"] {\n    border-bottom-color: var(--color-accent);\n  }\n  .ds-hero {\n    padding: var(--space-7) 0 var(--space-6);\n  }\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.46);\n    letter-spacing: calc(var(--display-tracking) * 0.46);\n  }\n  .ds-hero__title span + span {\n    padding-left: 0;\n  }\n  .ds-hero__foot,\n  .ds-cols--even {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-hero__foot {\n    margin-top: var(--space-6);\n  }\n  .ds-hero__note {\n    justify-items: start;\n    text-align: left;\n  }\n  .ds-section,\n  .ds-section--tight {\n    padding: var(--space-7) 0;\n  }\n  .ds-section--flush {\n    padding-bottom: var(--space-7);\n  }\n  .ds-section__head,\n  .ds-band__inner {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-list {\n    grid-template-columns: calc(var(--size-still) * 0.5) minmax(0, 1fr) auto;\n    column-gap: var(--space-4);\n  }\n  .ds-list__number {\n    display: none;\n  }\n  .ds-list__item > .ds-still {\n    order: -1;\n  }\n  .ds-list__title,\n  .ds-page-header__title,\n  .ds-stat__figure,\n  .ds-band__title,\n  .ds-carousel__title,\n  .ds-footer__line {\n    font-size: calc(var(--text-h1) * 0.6);\n    letter-spacing: calc(var(--display-tracking) * 0.4);\n  }\n  .ds-list__item:hover .ds-list__title,\n  .ds-list__item.is-hover .ds-list__title {\n    transform: none;\n  }\n  .ds-frame__bar {\n    padding: var(--space-2) var(--space-4);\n  }\n  .ds-frame__bar > .ds-label--mono:nth-child(n + 2) {\n    display: none;\n  }\n  .ds-frame__picture::after {\n    inset: var(--space-3) var(--space-4);\n  }\n  .ds-carousel__copy {\n    bottom: var(--space-4);\n    left: var(--space-4);\n    max-width: 80%;\n  }\n  .ds-carousel__text {\n    display: none;\n  }\n  .ds-carousel__dots {\n    display: none;\n  }\n  .ds-main {\n    padding: var(--space-6) 0 var(--space-8);\n  }\n  .ds-main--frame {\n    padding-top: 0;\n  }\n  .ds-main--frame > .ds-frame {\n    margin-bottom: var(--space-6);\n  }\n  .ds-footer__cols {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  }\n}\n@media (max-width: 520px) {\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.3);\n    letter-spacing: calc(var(--display-tracking) * 0.3);\n  }\n  .ds-hero__lead,\n  .ds-page-header__text {\n    font-size: var(--text-base);\n  }\n  .ds-list__title,\n  .ds-page-header__title,\n  .ds-stat__figure,\n  .ds-band__title,\n  .ds-carousel__title,\n  .ds-footer__line {\n    font-size: calc(var(--text-h1) * 0.46);\n  }\n  .ds-list__year {\n    display: none;\n  }\n  .ds-list {\n    grid-template-columns: calc(var(--size-still) * 0.5) minmax(0, 1fr);\n  }\n  .ds-carousel__copy > .ds-button,\n  .ds-carousel__copy > .ds-label {\n    display: none;\n  }\n  .ds-carousel__title {\n    font-size: calc(var(--text-h1) * 0.36);\n  }\n  .ds-grid,\n  .ds-form__row,\n  .ds-people {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-grid__cell {\n    gap: var(--space-6);\n  }\n  .ds-stills {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  }\n  .ds-nav__actions .ds-button {\n    display: none;\n  }\n  /* the numbers go so that all four links fit the strip */\n  .ds-frame__bar .ds-progress__value {\n    white-space: nowrap;\n  }\n  .ds-frame__bar {\n    flex-wrap: wrap;\n    gap: var(--space-2) var(--space-4);\n  }\n  .ds-frame__bar > .ds-progress {\n    flex: 1 1 100%;\n  }\n}\n\n/* Phones: the table keeps the columns that matter, so its last one is in view. */\n@media (max-width: 520px) {\n  #archive .ds-table th:nth-child(3),\n  #archive .ds-table td:nth-child(3),\n  #archive .ds-table th:nth-child(5),\n  #archive .ds-table td:nth-child(5) {\n    display: none;\n  }\n  #archive .ds-table .ds-table__title {\n    white-space: normal;\n  }\n}\n\n/* Phones: one row spread across the bar, each number above its word. */\n@media (max-width: 520px) {\n  .ds-nav__links {\n    justify-content: space-between;\n    gap: var(--space-3);\n  }\n  .ds-nav__link {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--space-1);\n  }\n}\n\n/* Phones: a wide face may break a title in the list instead of pushing the page. */\n@media (max-width: 520px) {\n  .ds-list__title {\n    white-space: normal;\n    overflow-wrap: anywhere;\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 portfolio index specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" aria-hidden=\"true\"><path d=\"M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5\"/><circle cx=\"12\" cy=\"12\" r=\"4.5\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <p class=\"ds-nav__note\">A studio for film and stills of buildings after dark. Two people, one van, a great deal of waiting for the right hour.</p>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\"><span>01</span>Index</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#archive\"><span>02</span>Archive</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#project\"><span>03</span>Latest</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#contact\"><span>04</span>Contact</a></li>\n    </ul>\n    <div class=\"ds-nav__actions\">\n      <details class=\"ds-menu\">\n        <summary class=\"ds-menu__toggle\">Fields</summary>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__item\" href=\"#archive\">Film <span>09</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#archive\">Stills <span>21</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#archive\">Print <span>04</span></a></li>\n          <li><a class=\"ds-menu__item\" href=\"#archive\">Talks <span>06</span></a></li>\n        </ul>\n      </details>\n      <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#contact\">Book a night</a>\n    </div>\n  </div>\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-wrap\">\n      <p class=\"ds-hero__kicker\"><span class=\"ds-label ds-label--accent\">Film and stills, 2015 to 2026</span><span class=\"ds-label ds-label--mono ds-label--muted\">40 projects, 5 shown</span></p>\n      <h1 class=\"ds-hero__title\"><span>Buildings</span><span>after dark</span></h1>\n      <div class=\"ds-hero__foot\">\n        <p class=\"ds-hero__lead\">We photograph and film architecture between dusk and first light, when a building shows what it is lit for.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button\" href=\"#project\">See the latest project</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#archive\">Whole archive</a>\n        </div>\n        <p class=\"ds-hero__note\"><span class=\"ds-label\">Booking from March 2027</span><span class=\"ds-label ds-label--mono\">Sunset today 18:12</span></p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--flush\">\n    <div class=\"ds-wrap\">\n      <ul class=\"ds-list\" data-component=\"list\">\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__number\">01</span>\n          <a class=\"ds-list__title\" href=\"#project\">Last pump</a>\n          <span class=\"ds-list__meta\"><span class=\"ds-label\">Film, 12 min</span><span class=\"ds-label\">A filling station on a closed road</span></span>\n          <span class=\"ds-list__year\">2026</span>\n          <span class=\"ds-still ds-still--canopy\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span>\n        </li>\n        <li class=\"ds-list__item is-hover\">\n          <span class=\"ds-list__number\">02</span>\n          <a class=\"ds-list__title\" href=\"#project\">The tower</a>\n          <span class=\"ds-list__meta\"><span class=\"ds-label\">Stills, 48 plates</span><span class=\"ds-label\">Forty floors on the waterfront</span></span>\n          <span class=\"ds-list__year\">2025</span>\n          <span class=\"ds-still ds-still--tower\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__number\">03</span>\n          <a class=\"ds-list__title\" href=\"#project\">Underpass</a>\n          <span class=\"ds-list__meta\"><span class=\"ds-label\">Film, 7 min</span><span class=\"ds-label\">Nine tunnels under one ring road</span></span>\n          <span class=\"ds-list__year\">2024</span>\n          <span class=\"ds-still ds-still--tunnel\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__number\">04</span>\n          <a class=\"ds-list__title\" href=\"#project\">Blinds</a>\n          <span class=\"ds-list__meta\"><span class=\"ds-label\">Stills, 30 plates</span><span class=\"ds-label\">Offices after the last shift</span></span>\n          <span class=\"ds-list__year\">2023</span>\n          <span class=\"ds-still ds-still--blinds\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__number\">05</span>\n          <a class=\"ds-list__title\" href=\"#project\">Portico</a>\n          <span class=\"ds-list__meta\"><span class=\"ds-label\">Print, one edition</span><span class=\"ds-label\">A closed library, lit for one night</span></span>\n          <span class=\"ds-list__year\">2021</span>\n          <span class=\"ds-still ds-still--portico\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span>\n        </li>\n      </ul>\n      <div class=\"ds-list__foot\">\n        <span class=\"ds-label\">Five of forty projects</span>\n        <a class=\"ds-link ds-link--arrow\" href=\"#archive\">Open the archive</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-frame\">\n    <div class=\"ds-frame__bar\">\n      <span class=\"ds-label\">Reel 2026</span>\n      <span class=\"ds-label ds-label--mono\">16:9, 25 fps</span>\n      <span class=\"ds-label ds-label--mono\">02 min 10 s</span>\n    </div>\n    <div class=\"ds-carousel\">\n      <ul class=\"ds-carousel__track\">\n        <li class=\"ds-carousel__slide ds-frame__picture\">\n          <span class=\"ds-still ds-still--tower\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span>\n          <div class=\"ds-carousel__copy\">\n            <span class=\"ds-label ds-label--mono\">02 / The tower, 2025</span>\n            <h2 class=\"ds-carousel__title\">Forty floors, one lamp</h2>\n            <p class=\"ds-carousel__text\">Four winter nights on the far quay, waiting for the cleaners to reach the top.</p>\n            <a class=\"ds-button ds-button--onscene\" href=\"#project\">Open the project</a>\n          </div>\n        </li>\n        <li class=\"ds-carousel__slide ds-frame__picture\">\n          <span class=\"ds-still ds-still--portico\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span>\n          <div class=\"ds-carousel__copy\">\n            <span class=\"ds-label ds-label--mono\">05 / Portico, 2021</span>\n            <h2 class=\"ds-carousel__title\">Lit for one night</h2>\n            <a class=\"ds-button ds-button--onscene\" href=\"#project\">Open the project</a>\n          </div>\n        </li>\n      </ul>\n      <div class=\"ds-frame__bar\">\n        <div class=\"ds-progress\">\n          <p class=\"ds-progress__head\"><span>Playing</span><span class=\"ds-progress__value\">00:42 / 02:10</span></p>\n          <progress class=\"ds-progress__bar\" value=\"32\" max=\"100\">32%</progress>\n        </div>\n        <div class=\"ds-carousel__nav\">\n          <span class=\"ds-label ds-label--mono\">01 / 05</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 class=\"ds-carousel__dot\"></span></span>\n          <a class=\"ds-carousel__arrow is-disabled\" href=\"#home\" aria-label=\"Previous frame\"></a>\n          <a class=\"ds-carousel__arrow\" href=\"#home\" aria-label=\"Next frame\"></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-label ds-stat__label\">Projects since 2015</p><p class=\"ds-stat__figure\">40</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-label ds-stat__label\">Nights on site</p><p class=\"ds-stat__figure\">612</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-label ds-stat__label\">Cities</p><p class=\"ds-stat__figure\">27</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-label ds-stat__label\">Longest exposure, min</p><p class=\"ds-stat__figure\">94</p></div>\n      </div>\n      <ul class=\"ds-grid\" data-component=\"grid\">\n        <li><a class=\"ds-grid__cell\" href=\"#archive\"><span class=\"ds-grid__head\"><span class=\"ds-label ds-label--accent\">A</span><span class=\"ds-label ds-label--mono\">09</span></span><span><span class=\"ds-grid__title\">Film</span><span class=\"ds-grid__text\">Short films of one building each, for architects and for the cinema.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#archive\"><span class=\"ds-grid__head\"><span class=\"ds-label ds-label--accent\">B</span><span class=\"ds-label ds-label--mono\">21</span></span><span><span class=\"ds-grid__title\">Stills</span><span class=\"ds-grid__text\">Large format plates, long exposures, no added light.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#archive\"><span class=\"ds-grid__head\"><span class=\"ds-label ds-label--accent\">C</span><span class=\"ds-label ds-label--mono\">04</span></span><span><span class=\"ds-grid__title\">Print</span><span class=\"ds-grid__text\">Books and editions, printed in one colour on grey board.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#contact\"><span class=\"ds-grid__head\"><span class=\"ds-label ds-label--accent\">D</span><span class=\"ds-label ds-label--mono\">06</span></span><span><span class=\"ds-grid__title\">Talks</span><span class=\"ds-grid__text\">An evening with the projector, for schools and offices.</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      <span class=\"ds-label ds-label--mono\">2027</span>\n      <h2 class=\"ds-band__title\">Three nights are still free</h2>\n      <a class=\"ds-button ds-button--inverse\" href=\"#contact\">Ask for one</a>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"archive\">\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\">Index</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#archive\">Archive</a></li>\n        <li class=\"ds-breadcrumb__current\">Film</li>\n      </ol>\n      <span class=\"ds-label ds-label--mono\">02 / 04</span>\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\">Archive</h1>\n        <p class=\"ds-page-header__text\">Every project since 2015, newest first. Films can be watched here; plates are shown small.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#contact\">Ask for a licence</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        <div class=\"ds-sidebar\" data-component=\"sidebar\">\n          <p class=\"ds-label ds-sidebar__title\">Field</p>\n          <div class=\"ds-sidebar__list\">\n            <a class=\"ds-sidebar__item is-current\" href=\"#archive\">Film <span class=\"ds-sidebar__count\">09</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#archive\">Stills <span class=\"ds-sidebar__count\">21</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#archive\">Print <span class=\"ds-sidebar__count\">04</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#archive\">Talks <span class=\"ds-sidebar__count\">06</span></a>\n          </div>\n        </div>\n        <div class=\"ds-stack ds-stack--tight\">\n          <div class=\"ds-progress\">\n            <p class=\"ds-progress__head\"><span>This year, delivered</span><span class=\"ds-progress__value\">3 / 5</span></p>\n            <progress class=\"ds-progress__bar\" value=\"60\" max=\"100\">60%</progress>\n          </div>\n          <div class=\"ds-progress\">\n            <p class=\"ds-progress__head\"><span>Archive scanned</span><span class=\"ds-progress__value\">82%</span></p>\n            <progress class=\"ds-progress__bar\" value=\"82\" max=\"100\">82%</progress>\n          </div>\n        </div>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <span class=\"ds-empty__icon\" aria-hidden=\"true\"></span>\n          <p class=\"ds-empty__title\">No installations yet</p>\n          <p class=\"ds-empty__text\">We have never shown the work in a room of its own. If you have one, write.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#contact\">Offer a room</a>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-toolbar\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#archive\">All films <span class=\"ds-badge ds-badge--quiet\">09</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#archive\">Commissions</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#archive\">Our own</a></li>\n          </ul>\n          <span class=\"ds-label\">Sorted by year</span>\n        </div>\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Sound</span>The films have sound recorded on site. Headphones help.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Offline</span>The 2019 film cannot be played while its scan is being redone.</p>\n        </div>\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th>No.</th><th>Title</th><th>Place</th><th class=\"ds-table__num\">Year</th><th class=\"ds-table__num\">Minutes</th><th>State</th></tr>\n            </thead>\n            <tbody>\n              <tr><td class=\"ds-label ds-label--mono\">F 09</td><td><a class=\"ds-table__title\" href=\"#project\">Last pump</a></td><td>A closed coast road</td><td class=\"ds-table__num\">2026</td><td class=\"ds-table__num\">12</td><td><span class=\"ds-badge\" data-component=\"badge\">New</span></td></tr>\n              <tr class=\"is-hover\"><td class=\"ds-label ds-label--mono\">F 08</td><td><a class=\"ds-table__title\" href=\"#project\">Underpass</a></td><td>A ring road</td><td class=\"ds-table__num\">2024</td><td class=\"ds-table__num\">7</td><td><span class=\"ds-badge ds-badge--success\">To watch</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">F 07</td><td><a class=\"ds-table__title\" href=\"#project\">Night school</a></td><td>A technical college</td><td class=\"ds-table__num\">2023</td><td class=\"ds-table__num\">18</td><td><span class=\"ds-badge ds-badge--success\">To watch</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">F 06</td><td><a class=\"ds-table__title\" href=\"#project\">Cold store</a></td><td>A harbour warehouse</td><td class=\"ds-table__num\">2022</td><td class=\"ds-table__num\">9</td><td><span class=\"ds-badge ds-badge--warning\">On request</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">F 05</td><td><a class=\"ds-table__title\" href=\"#project\">Car park, level 6</a></td><td>A shopping centre</td><td class=\"ds-table__num\">2020</td><td class=\"ds-table__num\">11</td><td><span class=\"ds-badge ds-badge--success\">To watch</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">F 04</td><td><a class=\"ds-table__title\" href=\"#project\">Pool hall</a></td><td>A public bath</td><td class=\"ds-table__num\">2019</td><td class=\"ds-table__num\">14</td><td><span class=\"ds-badge ds-badge--danger\">Offline</span></td></tr>\n              <tr><td class=\"ds-label ds-label--mono\">F 03</td><td><a class=\"ds-table__title\" href=\"#project\">Signal box</a></td><td>A freight yard</td><td class=\"ds-table__num\">2017</td><td class=\"ds-table__num\">6</td><td><span class=\"ds-tooltip ds-tooltip--end ds-label ds-label--muted\" tabindex=\"0\">Cinema only<span class=\"ds-tooltip__tip\">Shown from a 35 mm print. Ask us and we bring the projector.</span></span></td></tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"ds-table__foot\">\n          <span class=\"ds-label\">Showing 7 of 9 films</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#archive\">Prev</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#archive\">01</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#archive\">02</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#archive\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"project\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Index</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#archive\">Film</a></li>\n        <li class=\"ds-breadcrumb__current\">Last pump</li>\n      </ol>\n      <span class=\"ds-label ds-label--mono\">03 / 04</span>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Last pump</h1>\n        <p class=\"ds-page-header__text\">A filling station on a coast road that closed in 2019. The lights still come on at dusk.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#project\">Play the film</a>\n        <a class=\"ds-button ds-button--secondary\" href=\"#contact\">Screen it</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main ds-main--frame\">\n    <div class=\"ds-frame\">\n      <div class=\"ds-frame__bar\">\n        <span class=\"ds-label\">F 09 / Last pump</span>\n        <span class=\"ds-label ds-label--mono\">16:9, 25 fps</span>\n        <span class=\"ds-label ds-label--mono\">Plate 14 of 31</span>\n      </div>\n      <div class=\"ds-frame__picture\">\n        <span class=\"ds-still ds-still--canopy\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span>\n      </div>\n      <div class=\"ds-frame__bar\">\n        <div class=\"ds-progress\">\n          <p class=\"ds-progress__head\"><span>Paused</span><span class=\"ds-progress__value\">04:18 / 12:06</span></p>\n          <progress class=\"ds-progress__bar\" value=\"36\" max=\"100\">36%</progress>\n        </div>\n        <span class=\"ds-label ds-label--mono\">21:40, 4 degrees, no wind</span>\n      </div>\n    </div>\n\n    <div class=\"ds-wrap ds-cols ds-cols--wide\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\" data-component=\"panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Project sheet</h2><span class=\"ds-badge ds-badge--quiet\">F 09</span></div>\n          <div class=\"ds-panel__body\">\n            <dl class=\"ds-facts\">\n              <dt>Year</dt><dd>2026</dd>\n              <dt>Length</dt><dd>12 min 6 s</dd>\n              <dt>Shot</dt><dd>Nine nights in November</dd>\n              <dt>Format</dt><dd>Digital, one fixed lens</dd>\n              <dt>For</dt><dd>Our own archive</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"ds-people\">\n          <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The photographer</span><span class=\"ds-person__role\">Camera, edit</span></span></div>\n          <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--2 ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The recordist</span><span class=\"ds-person__role\">Sound, driving</span></span></div>\n        </div>\n        <div class=\"ds-accordion\">\n          <details class=\"ds-accordion__item\" open>\n            <summary class=\"ds-accordion__head\">Screening licence</summary>\n            <p class=\"ds-accordion__body\">One evening, one room, any number of people. We send the file a week before.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Stills for print</summary>\n            <p class=\"ds-accordion__body\">Thirty-one plates are cleared for editorial use with a credit.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Edition</summary>\n            <p class=\"ds-accordion__body\">Plate 14 as a print of 60 by 34 cm, twelve copies.</p>\n          </details>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-prose\" data-component=\"typography\">\n          <h1>Notes from the road</h1>\n          <p class=\"ds-prose__lead\">Nobody has bought fuel here for seven years, and nobody has told the timer.</p>\n          <p>The road was moved inland after the cliff went. The station stayed, and so did its supply. At <strong>17:50 in November</strong> the roof lights come on, the sign follows a minute later, and the forecourt is the brightest place for twenty kilometres.</p>\n          <h2>How it was shot</h2>\n          <p>One camera on one tripod, moved four times a night. The file names follow the pattern <code>F09_n3_p14</code>: film, night, plate.</p>\n          <h3>What is in the film</h3>\n          <ul>\n            <li>Dusk to full dark in one take of four minutes</li>\n            <li>Rain on the second night, with the forecourt as a mirror</li>\n            <li>The sign going out at 01:00</li>\n          </ul>\n        </div>\n        <ul class=\"ds-linkrow\" data-component=\"links\">\n          <li><a class=\"ds-link\" href=\"#project\">Read the shot list</a></li>\n          <li><a class=\"ds-link is-visited\" href=\"#project\">Watch the trailer (seen)</a></li>\n          <li><a class=\"ds-link is-hover\" href=\"#archive\">More films</a></li>\n          <li><a class=\"ds-link is-active\" href=\"#contact\">Screen it</a></li>\n          <li><a class=\"ds-link ds-link--quiet\" href=\"#archive\">Credits</a></li>\n        </ul>\n        <ul class=\"ds-stills\">\n          <li><span class=\"ds-still ds-still--tunnel\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span><p class=\"ds-label ds-stills__caption\"><span>Plate 03</span><span>The approach</span></p></li>\n          <li><span class=\"ds-still ds-still--blinds\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span><p class=\"ds-label ds-stills__caption\"><span>Plate 19</span><span>The office</span></p></li>\n          <li><span class=\"ds-still ds-still--portico\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span><p class=\"ds-label ds-stills__caption\"><span>Plate 27</span><span>The wash hall</span></p></li>\n        </ul>\n        <a class=\"ds-next\" href=\"#project\">\n          <span><span class=\"ds-label ds-label--accent\">Next project</span><span class=\"ds-next__title\">The tower</span></span>\n          <span class=\"ds-still ds-still--tower\" aria-hidden=\"true\"><span class=\"ds-still__back\"></span><span class=\"ds-still__mid\"></span><span class=\"ds-still__fore\"></span></span>\n        </a>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"contact\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Index</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#contact\">Contact</a></li>\n        <li class=\"ds-breadcrumb__current\">Book a night</li>\n      </ol>\n      <span class=\"ds-label ds-label--mono\">04 / 04</span>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Book a night</h1>\n        <p class=\"ds-page-header__text\">Tell us which building and when it is lit. We answer within three working days.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols ds-cols--even\">\n      <form class=\"ds-form\" data-component=\"form\" action=\"#contact\">\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 this can be sent.</p>\n        </div>\n        <div class=\"ds-form__row\">\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"book-name\">Name</label>\n            <input class=\"ds-form__input\" id=\"book-name\" type=\"text\" value=\"A. Visitor\">\n          </div>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"book-field\">Field</label>\n            <select class=\"ds-form__select\" id=\"book-field\">\n              <option>Film</option>\n              <option>Stills</option>\n              <option>Print</option>\n              <option>A talk</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"ds-form__field\">\n          <label class=\"ds-form__label\" for=\"book-mail\">E-mail address</label>\n          <input class=\"ds-form__input is-error\" id=\"book-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=\"book-note\">The building</label>\n          <textarea class=\"ds-form__textarea\" id=\"book-note\" placeholder=\"Where it stands, who lights it, when it is empty\"></textarea>\n          <p class=\"ds-form__hint\">A street address is enough. We go and look before we answer.</p>\n        </div>\n        <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> We may enter the building at night.</label>\n        <div class=\"ds-form__actions\" data-component=\"buttons\">\n          <button class=\"ds-button\" type=\"submit\">Send the enquiry</button>\n          <a class=\"ds-button ds-button--secondary\" href=\"#archive\">See the work first</a>\n          <button class=\"ds-button ds-button--danger\" type=\"button\">Withdraw it</button>\n          <button class=\"ds-button is-disabled\" type=\"button\" disabled>Sent</button>\n        </div>\n      </form>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">With the enquiry</h2></div>\n          <div class=\"ds-panel__body\">\n            <label class=\"ds-switch is-on\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Send me the reel<small>Two minutes, as a private link</small></span></label>\n            <label class=\"ds-switch is-on\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Send the rate sheet<small>Per night on site, travel apart</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\">One letter a year<small>The new work, each December</small></span></label>\n          </div>\n        </div>\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"withdraw-title\">\n            <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"withdraw-title\">Withdraw the enquiry?</h2><a class=\"ds-dialog__close\" href=\"#contact\" aria-label=\"Close\"></a></div>\n            <div class=\"ds-dialog__body\"><p>The night we are holding for you in March goes back into the calendar.</p></div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--danger\" href=\"#home\">Withdraw</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#contact\">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__lead\">\n    <p class=\"ds-footer__line\">Show us a building.</p>\n    <a class=\"ds-link ds-link--arrow\" href=\"#contact\">Book a night</a>\n  </div>\n  <div class=\"ds-wrap ds-footer__cols\">\n    <div>\n      <a class=\"ds-brand\" href=\"#home\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" aria-hidden=\"true\"><path d=\"M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5\"/><circle cx=\"12\" cy=\"12\" r=\"4.5\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n      </a>\n    </div>\n    <p class=\"ds-footer__about\">chronoskin is a studio for film and stills of buildings after dark. All pictures on this site are ours; ask before you use one.</p>\n    <div>\n      <p class=\"ds-label ds-footer__title\">Work</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#home\">Index</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#archive\">Archive</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#project\">Latest</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-label ds-footer__title\">Studio</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#contact\">Book a night</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#contact\">Licences</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">Imprint and privacy</a></li>\n      </ul>\n    </div>\n  </div>\n  <div class=\"ds-wrap\">\n    <div class=\"ds-footer__legal ds-label\">\n      <span>2026 chronoskin. All pictures reserved.</span>\n      <span>Site set in two faces and one grey</span>\n    </div>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.cinematic.blog.s07.p07.t07.u07\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"cinematic\",\n    \"years\": [\n      2015,\n      2026\n    ]\n  },\n  \"archetype\": \"blog\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-ci-7777\",\n  \"short\": \"v1-ci-7777\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #0c0d0e;\n  --color-canvas: #0c0d0e;\n  --color-surface: #131516;\n  --color-surface-alt: #191b1d;\n  --color-surface-strong: #25282b;\n  --color-bar: #060707;\n  --color-bar-text: #e6e8ea;\n  --color-bar-alt: #101112;\n  --color-bar-alt-text: #8e9399;\n  --color-inverse: #d5d8db;\n  --color-inverse-text: #0c0d0e;\n  --color-text: #b6babf;\n  --color-text-muted: #7b8087;\n  --color-heading: #eceef0;\n  --color-heading-alt: #e39a52;\n  --color-link: #eceef0;\n  --color-link-quiet: #9da2a8;\n  --color-link-visited: #a9adb2;\n  --color-link-hover: #ffb46b;\n  --color-link-active: #e39a52;\n  --color-border: #2a2d30;\n  --color-border-strong: #8f949a;\n  --color-border-muted: #1b1d1f;\n  --color-accent: #cfd3d7;\n  --color-accent-text: #0c0d0e;\n  --color-accent-alt: #e39a52;\n  --color-fill-1: #17191b;\n  --color-fill-2: #202326;\n  --color-fill-3: #2c3034;\n  --color-fill-4: #1d1a16;\n  --color-button: #d5d8db;\n  --color-button-text: #0c0d0e;\n  --color-button-hover-text: #0c0d0e;\n  --color-button-secondary: #0c0d0e;\n  --color-button-secondary-text: #eceef0;\n  --color-input: #101112;\n  --color-input-text: #eceef0;\n  --color-input-border: #3c4044;\n  --color-disabled: #1b1d1f;\n  --color-disabled-text: #5b6066;\n  --color-danger: #e0705c;\n  --color-danger-surface: #2a1512;\n  --color-success: #8fbf9a;\n  --color-warning: #d9b25e;\n  --color-notice: #17191b;\n  --color-notice-text: #d5d8db;\n  --color-focus: #e39a52;\n  --color-shadow: rgb(0 0 0 / 0.7);\n  --color-overlay: rgb(6 7 7 / 0.72);\n}\n\n/* @part type */\n:root {\n  --font-body: \"IBM Plex Sans\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-heading: \"Barlow Condensed\", \"Avenir Next Condensed\", \"Roboto Condensed\", \"Arial Narrow\", sans-serif;\n  --font-ui: \"Barlow Condensed\", \"Avenir Next Condensed\", \"Roboto Condensed\", \"Arial Narrow\", sans-serif;\n  --font-mono: \"IBM Plex Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --text-base: 15px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 19px;\n  --text-display: 208px;\n  --text-h1: 88px;\n  --text-h2: 46px;\n  --text-h3: 24px;\n  --line-body: 1.55;\n  --line-heading: 1.02;\n  --line-display: 0.86;\n  --weight-body: 400;\n  --weight-bold: 600;\n  --weight-heading: 300;\n  --weight-display: 200;\n  --weight-ui: 500;\n  --heading-transform: uppercase;\n  --heading-tracking: 1px;\n  --display-tracking: -1px;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: underline;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 2px;\n  --radius-panel: 2px;\n  --radius-pill: 999px;\n  --radius-page: 3px;\n  --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 5%, transparent), 0 24px 40px -28px var(--color-shadow);\n  --shadow-control: inset 0 1px 0 color-mix(in srgb, white 36%, transparent), inset 0 -1px 0 color-mix(in srgb, black 30%, transparent);\n  --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 36%, transparent), 0 10px 24px -10px var(--color-shadow);\n  --shadow-control-pressed: inset 0 2px 5px var(--color-shadow);\n  --shadow-dialog: 0 48px 96px -24px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: repeating-linear-gradient(90deg, color-mix(in srgb, white 2%, transparent) 0 1px, transparent 1px 3px), var(--color-page);\n  --fill-bar: linear-gradient(112deg, transparent 0 34%, color-mix(in srgb, white 5%, transparent) 46%, transparent 58%), repeating-linear-gradient(90deg, color-mix(in srgb, white 5%, transparent) 0 1px, transparent 1px 2px, color-mix(in srgb, black 30%, transparent) 2px 3px, transparent 3px 5px), var(--color-bar);\n  --fill-bar-alt: linear-gradient(180deg, color-mix(in srgb, var(--color-bar-alt) 94%, white), var(--color-bar-alt) 30%);\n  --fill-inverse: linear-gradient(100deg, color-mix(in srgb, var(--color-inverse) 86%, black), var(--color-inverse) 38%, color-mix(in srgb, var(--color-inverse) 80%, white) 52%, var(--color-inverse) 66%, color-mix(in srgb, var(--color-inverse) 88%, black));\n  --fill-accent: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 70%, white), var(--color-accent) 50%, color-mix(in srgb, var(--color-accent) 82%, black));\n  --fill-panel: linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--color-surface) 86%, black));\n  --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 60%, white), var(--color-button) 46%, color-mix(in srgb, var(--color-button) 76%, black));\n  --fill-button-hover: linear-gradient(var(--color-accent-alt), var(--color-accent-alt));\n  --fill-button-secondary: color-mix(in srgb, var(--color-button-secondary) 50%, transparent);\n  --fill-input: linear-gradient(180deg, color-mix(in srgb, var(--color-input) 80%, black), var(--color-input));\n  --focus-ring: 1px dashed var(--color-focus);\n  --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n  --backdrop-blur: 0px;\n}\n"
  }
}