{
  "id": "v1-ci-2872",
  "long_id": "v1.cinematic.portal.s02.p08.t07.u02",
  "name": "Cinematic film site",
  "era": {
    "slug": "cinematic",
    "code": "ci",
    "name": "Cinematic",
    "years": [
      2015,
      2026
    ],
    "description": "The immersive site of 2015 to 2026 for a band, a film, a fashion house or a game: one scene to a screen, edge to edge and mostly dark, enormous condensed capitals set tight, almost no chrome, thin rules and small tracked labels, one colour used like a light."
  },
  "archetype": "portal",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "This is the official site of a film between 2015 and 2026: a letterboxed picture between two dark bars, the title in very large high-contrast serif capitals centred on it, a billing block of tiny tracked credits beneath, and the navigation reduced to a dark rail of vertical labels at the left edge and the word Menu in the corner. Below it the page is a warm near-black with bone-white type, stills in film proportion, cast as backlit portraits and screenings as a quiet ruled table. It was the common look of film, series and studio sites in the second half of the 2010s and the first half of the 2020s.",
  "url": "https://chrono.skin/s/v1-ci-2872",
  "preview_url": "https://chrono.skin/s/v1-ci-2872/specimen.html",
  "files": {
    "STYLE.md": "# Cinematic film site\n\n## Summary\n\nThis is the official site of a film between 2015 and 2026: a letterboxed picture between two dark bars, the title in very large high-contrast serif capitals centred on it, a billing block of tiny tracked credits beneath, and the navigation reduced to a dark rail of vertical labels at the left edge and the word Menu in the corner. Below it the page is a warm near-black with bone-white type, stills in film proportion, cast as backlit portraits and screenings as a quiet ruled table. It was the common look of film, series and studio sites in the second half of the 2010s and the first half of the 2020s.\n\n## Layout\n\n- The page is fluid and designed at 1440px. A rail `--size-rail` (72px) wide runs down the left edge for the whole height of the page; views and footer stand to its right. Content sits in `.ds-wrap`, centred, at most `--size-page` (1240px) wide with `--space-6` side padding. Sections pad themselves with `--space-9` (136px), `--tight` with `--space-8`; `--flush` drops the top padding.\n- Navigation is `.ds-nav`, the rail on `--fill-bar`: the brand at the top (mark, then the name set vertically), five vertical label links that stay in the window as the page scrolls, the current one marked by a short accent line, and a frame-ratio label at the foot. The `.ds-menu` is the word Menu in the top right corner; opened, it is a veil the height of the window at the right edge with the five views in the heading face.\n- The home view stacks: `.ds-hero` (a dark bar of labels, the letterboxed scene `--size-scene` (600px) tall with kicker, title, lead and two buttons centred low in the frame, the trailer's `.ds-progress` and the billing block); a `.ds-statement` beside the `.ds-stat` figures; the `.ds-grid` of four stills; the `.ds-cast` row of four portraits; the `.ds-list` of production notes; the `.ds-band`.\n- Inner pages have no hero. Each opens with `.ds-top` inside `.ds-wrap`: a line with the breadcrumb at the left and the page's index (`02 / 05`) at the right, the `.ds-page-header` (large serif title, one line of text, one button at the right) and a sliver of the film, a `.ds-still--sliver` `--size-sliver` (150px) tall and as wide as the column. Then `.ds-main` with `.ds-cols` (8 to 4, the `.ds-sidebar` at the right), `--even`, or one full-width `.ds-stack`. Tabs sit in a `.ds-toolbar` above the table, with a switch at its right end.\n- Views. The specimen is the site of one film. `home` is the film. `cast` has four people as panels with portraits, a panel of facts about the crew and two more portraits. `screenings` has the tabs and a switch, two notices, the table of screenings with badges and a tooltip, and the pagination. `stills` has the carousel of frames, four thumbnails, the open download dialog and an empty state. `press` has the notes as prose with links and an accordion of questions, the kit as a sidebar and the request form with all four buttons.\n- Below 1100px the columns stack and the stills go two by two; below 800px the rail becomes a bar across the top (brand, Menu, and the links in a row that scrolls sideways), portraits go two by two and a wide table scrolls inside `.ds-table__wrap`; below 520px grids are one column. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px, `--space-2` 8px (label to text, list gaps), `--space-3` 12px (between buttons, thumbnails), `--space-4` 18px (rows, panel padding, grid gap), `--space-5` 24px (column gaps in rows, the camera marks' inset), `--space-6` 36px (page gutter, stack gap), `--space-7` 56px (columns, rail groups), `--space-8` 88px (tight sections, the sun's size), `--space-9` 136px (sections). `--space-track` 2px is the tracking of labels.\n- Other sizes: `--size-nav` 64px (the hero's bar and the corner Menu), `--size-mark` 32px, `--size-control` 42px, `--size-dialog` 520px, `--size-menu` 380px (the overlay menu).\n- On a phone (800px and below) the rail becomes a bar across the top: the `.ds-brand` and the `.ds-menu` toggle on the first row, `.ds-nav__links` on a second row that scrolls sideways, the current link marked by an accent line under it; `.ds-nav__index` is not shown. At 520px and below `.ds-nav__links` is not shown and the `.ds-menu` veil is the only navigation: its `.ds-menu__item` rows list every view at a smaller size, the current one with the accent line, and a tooltip in a table opens as a full row under its line.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThese are the conventions of the era; every layout and every token set keeps them.\n\n- A block stands on one of five grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. A scene (a picture, and the bars of a frame around it) stands on the bar: `--fill-bar` or `--color-bar`, and carries only `--color-bar-text`. The footer stands on `--fill-bar-alt` and carries `--color-bar-alt-text`. The inverted block (`--fill-inverse`, class `.ds-band`) carries only `--color-inverse-text`. Accent elements (`--fill-accent`: badges) carry `--color-accent-text`.\n- Pictures are drawn, never loaded. In a picture `--color-bar` is the darkness and every solid shape (a tower, a roof, a column, a chair) is a silhouette in it; `--color-accent` is the light (lit windows, the underside of a roof, the end of a tunnel); `--color-accent-alt` is the second light (one far lamp, a sign); `--color-fill-1` to `--color-fill-4` are the tones between (far blocks, walls, hills, a floor); `--color-bar-text` is the hottest point of a light. The grain of a picture comes from `--fill-bar`, which shows wherever the sky or a wall is left open.\n- Nothing assumes that a palette is dark. A picture is as dark as `--color-bar`, the page as dark as `--color-page`; with a pale bar colour the pictures turn into prints.\n- `--color-fill-1` to `--color-fill-4` are also the grounds of grid cells and carry `--color-text` and `--color-heading`.\n- Buttons by ground. On the page, panels and fills: `.ds-button` and `.ds-button--secondary`. On a picture or a frame only `.ds-button--onscene` (fill `--color-bar-text`, text `--color-bar`) and `.ds-button--ghost`. On the inverted block only `.ds-button--inverse` and `.ds-button--ghost`. The destructive button is `--color-danger` with `--color-button-text`.\n- `--color-heading-alt` is the colour of kickers, list numbers, panel and sidebar titles and h3 in prose.\n- The label is the second voice: `--font-ui` at `--text-small` or `--text-ui`, `--ui-transform`, tracked by `--space-track` (a layout token, 2px). Years, timecodes, counts and plate numbers are labels in `--font-mono`.\n- The default badge is `--fill-accent` with `--color-accent-text`. Status badges are never fills: the status colour is text, outline and a small dot on a transparent ground. `.ds-badge--quiet` is an outline in `--color-border`.\n- `--color-notice` with `--color-notice-text` is the information notice, with a left edge of `--border-width-strong` in `--color-accent`; the error notice is `--color-danger` on `--color-danger-surface`.\n- Borders are hairlines: `--border-width` in `--color-border` between rows and around panels and cells, `--color-border-strong` above the list, a table and each figure and under the page header, `--color-border-muted` inside boxes, `--color-input-border` around fields. `--border-width-strong` marks the current item (navigation, sidebar, tabs, pagination), the progress line and the notice edge.\n- Radii: `--radius-control` for buttons, fields and carousel arrows; `--radius-panel` for panels, notices, the dialog, the menu and tooltips; `--radius-pill` for badges, switches and avatars; `--radius-page` for stills and grid cells. A still that fills a frame has no radius. Shapes inside a drawing use percentages and `clip-path`, never a radius token.\n- Shadows: `--shadow-panel` on panels and grid cells, `--shadow-control` on buttons and the brand tile, `--shadow-control-hover` on hovered buttons and cells, `--shadow-dialog` on the dialog and an open menu. `--backdrop-blur` blurs what lies behind the dialog's veil.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: lights are a light token mixed with `transparent` at 10 to 90%; hairlines on a picture are `--color-bar-text` at 22 to 60%; the shade under the reel's title is `--color-bar` at 66 to 70%; the hovered list row is washed with `--color-accent` at 12%; the display size steps down as `--text-display` times 0.7, 0.46 and 0.3 at 1100px, 800px and 520px, with `--display-tracking` scaled by the same factors, and `--text-h1` times 0.6 and 0.46; the page title is `--text-h1` times 1.3. Opacity 0.7 to 0.86 dims secondary text on pictures and far shapes.\n- Here: graphite page, near-black pictures, silver text. The light `--color-accent` is silver, so buildings are lit without colour; the one warm tone, `--color-accent-alt` and `--color-heading-alt`, is the lamp on the mast, the sign, the small labels, the focus ring and the hovered button. The fills are three greys and one warm dark. The primary button is brushed silver with dark text; the inverted block is a sheet of silver.\n- Three families. `--font-heading` and `--font-ui` are one light condensed grotesque (Barlow Condensed, Avenir Next Condensed, Roboto Condensed, Arial Narrow; the references used commercial condensed faces): titles at `--weight-heading` 300 and `--weight-display` 200, always in capitals, labels at `--weight-ui` 500. `--font-body` is IBM Plex Sans at `--text-base` 15px and `--line-body` 1.55. `--font-mono` (IBM Plex Mono, Menlo) sets figures.\n- `--text-display` 208px with `--line-display` 0.86 and `--display-tracking` -1px (the hero title); `--text-h1` 88px (list titles, figures, the reel's title, the band, the footer line; the page title is 1.3 times that); `--text-h2` 46px (section and cell titles, the next project); `--text-h3` 24px (table titles, dialog title); `--text-large` 19px (leads).\n- Surface: hairlines of 1px and marks of 2px; corners of 2px on controls and panels and 3px on pictures, pills for badges; buttons and badges are brushed metal (a vertical gradient with a light upper edge), panels sink a little towards the bottom; the page carries fine vertical brush lines and `--fill-bar` a denser brush with one slanted sheen; a slow eased `--transition`; a dashed focus ring; no blur. Links in running text are underlined; navigation and titles are not.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets font, text colour and `--fill-page`.\n- `.ds-wrap`: the centred content column, `--size-page` wide.\n- `.ds-label`: the small tracked line. `--muted`, `--accent` (in `--color-heading-alt`), `--mono` for figures.\n- `.ds-brand`: the site's mark and name, in the navigation and again in the footer. `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name, set as a label. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--arrow` is a label led by a hairline that grows on hover, used for \"all dates\" and \"read\". `.ds-linkrow` lays links in a row.\n- `.ds-button`: a flat box with a tracked label. Variants: `--secondary`, `--danger` (destructive actions only), `--onscene` (scenes), `--inverse` (the inverted block), `--ghost` (both), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-badge`: small tracked label on `--fill-accent`. `--quiet` outlined. Status variants: `--success`, `--warning`, `--danger`, each an outline with a dot. `.ds-badgerow` for several.\n- `.ds-notice`: a ruled message with a strong left edge; `--error` in the danger colours. `.ds-notice__title` is the tracked lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` labels; `is-current` is underlined with `--color-accent`, `is-disabled` is grey. Page numbers are written with two digits.\n- `.ds-breadcrumb`: a label trail of `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a block of `--color-overlay` (blurring by `--backdrop-blur`) centring `.ds-dialog__box`, a panel with a strong outline and `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, a drawn cross `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions` with the main action first.\n- `.ds-empty`: a hairline box with a short accent rule (`.ds-empty__icon`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-switch`: an on/off control over a checkbox: `.ds-switch__input` (invisible, covers the row), `.ds-switch__track` with its knob, `.ds-switch__label` with an optional `small` line. On is `is-on` or `:checked`: outline and knob in `--color-accent`.\n- `.ds-tooltip`: a dotted-underlined trigger holding `.ds-tooltip__tip`, a small inverted box shown on hover, focus or `is-open`; `--end` aligns it to the right edge.\n- `.ds-avatar`: a person drawn as a backlit head and shoulders: dark shapes in `--color-bar` on a lit copy of themselves, a light in the corner, a fill behind. `--2` is lit from the left with `--color-accent-alt`, `--3` from above with `--color-bar-text`; `--large` doubles it. `.ds-person` sets one beside `.ds-person__name` and `.ds-person__role`.\n- `.ds-progress`: `.ds-progress__head` (a label and a `.ds-progress__value` in mono) over `.ds-progress__bar`, a `<progress>` drawn as a hairline of `--border-width-strong` with the value in `--color-accent`.\n- `.ds-accordion`: ruled `<details>`: `.ds-accordion__item` with a `.ds-accordion__head` label that ends in a plus (a cross when open) and a `.ds-accordion__body`.\n- `.ds-band`: the inverted block. Only `.ds-button--inverse` and `.ds-button--ghost` inside.\n- `.ds-stack`: stacks blocks one step apart; `--tight` closer. `.ds-main` is the body of an inner page. `.ds-facts` is a `dl` of label and value pairs inside a panel.\n- `.ds-scene`: the large picture, a landscape. A positioned box on `--color-bar` in `--color-bar-text` whose first children are empty layers, in this order: `.ds-scene__sky` (darkness running through the fills to the accent at the horizon), `.ds-scene__sun` (a small hot disc with a long horizontal flare and a halo), `.ds-scene__ridge--far` (jagged peaks, a `clip-path`), `.ds-scene__ridge--mid` (two dunes), `.ds-scene__figure` (one cloaked walker), `.ds-scene__ridge--near` (the black foreground), `.ds-scene__grain` (the texture of `--fill-bar` alone, the fill less its own colour, laid over the picture by difference, so its grain shows on a dark and on a pale bar alike) and `.ds-scene__marks` (the corners of the camera gate).\n- `.ds-still`: one frame of the film in 2.39 to 1, drawn as a single box of gradients with the grain over it: the default is a low sun over dunes; `--night` a moon, stars and a range; `--door` a slab of light with someone standing in it; `--road` two lamps and a white line; `--sea` a sun and its column on water. `--tall` (1.6 to 1) for grid cells, `--sliver` for the strip under a page header. `.ds-still__label` sets two mono labels along its foot.\n- `.ds-nav`: the rail. `.ds-nav__rail` holds the brand, `.ds-nav__links` of vertical `.ds-nav__link` (the current one bright with an accent line, `is-current`) and `.ds-nav__index`. 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 top right corner: `.ds-menu__toggle` (the word and two lines) and `.ds-menu__list`, a full-height veil on `--fill-bar-alt` with `.ds-menu__item` rows in the heading face, each with its number. Closed until clicked.\n- `.ds-hero`: the letterboxed picture of the home view: `.ds-hero__bar` (labels in the upper bar), `.ds-hero__frame` (the `.ds-scene`, with `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions` centred low), `.ds-hero__scrub` (the trailer's progress line) and `.ds-hero__credits` (the billing block; the title inside it is a `b` in the heading face). One per site.\n- `.ds-section`: a block of the page; `--tight`, `--flush`. `.ds-section__head` is a ruled line with a `.ds-section__kicker` above the `.ds-section__title` and an arrow link at the right.\n- `.ds-statement`: the synopsis in the heading face (`.ds-statement__text`, with `em` in the accent) beside the figures.\n- `.ds-stat`: four figures two by two; each `.ds-stat__item` is a label over a `.ds-stat__figure`, under a strong hairline.\n- `.ds-grid`: four cells, one on each fill; a `.ds-grid__cell` is a link holding a `.ds-still--tall`, a timecode label, `.ds-grid__title` and `.ds-grid__text`.\n- `.ds-cast`: four large square portraits in a row, each a `.ds-cast__item` link with a `.ds-avatar`, a name and a part.\n- `.ds-list`: dated notes as ruled rows of four columns: `.ds-list__meta` (the date), `.ds-list__title` in the heading face, `.ds-list__text` and an arrow link.\n- `.ds-top`: the opening of an inner page: `.ds-top__line` (breadcrumb and index), the page header and a sliver still.\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-cols`: main column and side column, 8 to 4; `--even`. `.ds-toolbar` puts tabs and a switch on one line.\n- `.ds-tabs`: joined pills in one outline; the current `.ds-tabs__tab` (`is-current`) is filled with `--color-surface-strong`.\n- `.ds-table`: a ruled table: a head of accent labels between a strong and a plain hairline, faint rules between rows; `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 with `.ds-panel__head` (a `.ds-panel__title` in the heading face and an optional badge) and `.ds-panel__body`; `.ds-panel__text` is a paragraph. `--person` puts a square portrait at the left. `.ds-panels` lays panels two by two.\n- `.ds-sidebar`: a box on `--color-surface-alt`: `.ds-sidebar__title` label and a `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows with a `.ds-sidebar__count`; the current row is bright.\n- `.ds-carousel`: one still to a slide: `.ds-carousel__track` of `.ds-carousel__slide`, then `.ds-carousel__nav` with the frame count, round `.ds-carousel__dots` of `.ds-carousel__dot` and two `.ds-carousel__arrow`. `.ds-thumbs` is a row of four small stills under it.\n- `.ds-footer`: the closing strip on `--fill-bar-alt`, centred: `.ds-footer__inner` with the brand, `.ds-footer__about` (the billing line), a `.ds-footer__list` of `.ds-footer__link` and `.ds-footer__legal`.\n\n## Never\n\n- `font-size >= 12px`: labels are the smallest text.\n- `font-size <= 208px`: the hero title is the largest.\n- `font-weight <= 600`: titles are light; only `strong` is heavier.\n- `font-families <= 3`: one condensed face for titles and labels, one sans-serif for reading, one monospace for figures.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `text-shadow = none`: type is flat, also on pictures.\n- `border-width <= 1px`: every rule and outline is a hairline.\n- `border-radius <= 4px`: boxes are almost square; only pills and circles are rounder.\n- `box-shadow-blur <= 120px`: only the dialog, the open menu and a hovered control cast a shadow, wide and soft.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. First decide which ground it stands on (page, panel or fill; scene; inverted block; footer strip) and take the text token and the buttons of that ground; never put a primary button on a scene or `--color-bar-text` on a fill. A new picture is built the way the existing ones are: the bar colour for darkness and every solid shape, the accent for the light, the alternate accent for a second light, the fills for the tones between, shapes from percentages, gradients with hard stops and `clip-path`, and the grain from `--fill-bar`; do not load an image and do not write a colour. If the installing project has photographs or film, they replace the drawn layers of a scene and everything else (the shade under the text, the labels, the type) stays. Keep type on the `--text-*` tokens, the largest sizes stepped down with the same factors as the specimen, labels tracked by `--space-track`, spacing on the `--space-*` scale, and note any one-off `color-mix()` shade next to its rule.\n",
    "components.css": ":root {\n  --size-page: 1240px;\n  --size-rail: 72px;\n  --size-nav: 64px;\n  --size-mark: 32px;\n  --size-control: 42px;\n  --size-dialog: 520px;\n  --size-scene: 600px;\n  --size-sliver: 150px;\n  --size-menu: 380px;\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--accent {\n  color: var(--color-heading-alt);\n}\n.ds-label--mono {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* brand: the mark on a small tile dressed like the primary button */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  padding: var(--space-1);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n  max-width: 64ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  font-size: var(--text-h2);\n}\n.ds-prose h2 {\n  margin-top: var(--space-6);\n  font-size: var(--text-h3);\n}\n.ds-prose h3 {\n  margin-top: var(--space-5);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-prose p {\n  margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: var(--space-3) 0 0;\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-top: var(--space-1);\n}\n.ds-prose li::marker {\n  color: var(--color-heading-alt);\n}\n.ds-prose strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  line-height: 1.35;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: var(--space-1);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-link--arrow {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-link--arrow:visited {\n  color: inherit;\n}\n.ds-link--arrow::before {\n  content: \"\";\n  width: var(--space-6);\n  height: var(--border-width);\n  background: currentColor;\n  transition: var(--transition);\n}\n.ds-link--arrow:hover::before,\n.ds-link--arrow.is-hover::before {\n  width: var(--space-7);\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* buttons: flat labels in a box. The filled one is the single bright\n   object of a screen. */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n  opacity: 0.8;\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  box-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: color-mix(in srgb, var(--color-button-secondary-text) 14%, transparent);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  border-color: var(--color-danger);\n  background: var(--color-danger);\n  color: var(--color-button-text);\n  box-shadow: none;\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  border-color: currentColor;\n  background: transparent;\n  color: inherit;\n  box-shadow: none;\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  background: color-mix(in srgb, currentColor 16%, transparent);\n}\n.ds-button--onscene,\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover {\n  border-color: var(--color-bar-text);\n  background: var(--color-bar-text);\n  color: var(--color-bar);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  border-color: var(--color-inverse-text);\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n  box-shadow: none;\n}\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  opacity: 0.86;\n}\n.ds-button--small {\n  min-height: calc(var(--size-control) - var(--space-3));\n  padding: var(--space-1) var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: transparent;\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  box-shadow: none;\n  opacity: 1;\n  cursor: not-allowed;\n}\n.ds-buttonrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: grid;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-form__label {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-heading);\n  box-shadow: none;\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(var(--size-control) * 3);\n  padding: var(--space-3) var(--space-4);\n  border-radius: var(--radius-panel);\n  line-height: var(--line-body);\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n  outline-offset: 0;\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n}\n.ds-form__hint {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-form__checkbox {\n  flex: none;\n  width: var(--space-4);\n  height: var(--space-4);\n  margin: var(--space-1) 0 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* badge: a tracked word in a hairline box; status variants are the\n   status colour as text and outline, never as a fill */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-badge--quiet {\n  border-color: var(--color-border);\n  background: transparent;\n  color: var(--color-text-muted);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  border-color: currentColor;\n  background: transparent;\n}\n.ds-badge--success {\n  color: var(--color-success);\n}\n.ds-badge--warning {\n  color: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-danger);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n  content: \"\";\n  width: var(--space-1);\n  height: var(--space-1);\n  border-radius: 50%;\n  background: currentColor;\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* notice: a ruled line of text with a strong left edge */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  font-size: var(--text-base);\n}\n.ds-notice--error {\n  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n  border-left-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-notice__title {\n  margin-right: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-noticerow {\n  display: grid;\n  gap: var(--space-2);\n}\n\n/* pagination: numbers as labels, the current one underlined by the light */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: calc(var(--size-control) - var(--space-2));\n  height: calc(var(--size-control) - var(--space-2));\n  padding: 0 var(--space-2);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: inherit;\n  opacity: 0.72;\n}\n.ds-breadcrumb__item a {\n  color: inherit;\n  text-decoration: none;\n}\n.ds-breadcrumb__item::after {\n  content: \"/\";\n  opacity: 0.6;\n}\n.ds-breadcrumb__current {\n  color: inherit;\n}\n\n/* dialog: shown open in the page flow, on the overlay colour */\n.ds-dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-7) var(--space-4);\n  background: var(--color-overlay);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-5) var(--space-5) 0;\n}\n.ds-dialog__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n  position: relative;\n  flex: none;\n  width: var(--space-5);\n  height: var(--space-5);\n  color: var(--color-heading);\n}\n.ds-dialog__close::before,\n.ds-dialog__close::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: var(--border-width);\n  background: currentColor;\n  transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n  transform: rotate(-45deg);\n}\n.ds-dialog__body {\n  padding: var(--space-3) var(--space-5) var(--space-5);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n  display: grid;\n  justify-items: start;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  color: var(--color-text);\n}\n.ds-empty__icon {\n  width: var(--space-7);\n  height: var(--border-width-strong);\n  background: var(--color-accent);\n}\n.ds-empty__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  max-width: 44ch;\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* switch */\n.ds-switch {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  order: 2;\n  width: calc(var(--space-5) * 2);\n  height: var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  background: var(--fill-input);\n  transition: var(--transition);\n}\n.ds-switch__track::after {\n  content: \"\";\n  position: absolute;\n  top: var(--space-1);\n  bottom: var(--space-1);\n  left: var(--space-1);\n  width: calc(var(--space-5) - var(--space-2) - var(--border-width) * 2);\n  border-radius: var(--radius-pill);\n  background: var(--color-text-muted);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n  left: calc(100% - var(--space-5) + var(--space-1) + var(--border-width) * 2);\n  background: var(--color-accent);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-switch__label {\n  color: var(--color-heading);\n}\n.ds-switch__label small {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* tooltip: a dotted label; the hint appears on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  border-bottom: var(--border-width) dotted currentColor;\n  cursor: help;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 6;\n  display: none;\n  width: max-content;\n  max-width: min(32ch, 60vw);\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-panel);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  letter-spacing: 0;\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n\n/* avatar: a backlit head and shoulders, drawn from the scene colours.\n   Each dark shape lies on a lit copy of itself, moved a little towards\n   the light, which leaves a rim. */\n.ds-avatar {\n  position: relative;\n  display: inline-block;\n  flex: none;\n  width: var(--size-control);\n  height: var(--size-control);\n  overflow: hidden;\n  border-radius: var(--radius-pill);\n  background:\n    radial-gradient(ellipse 15% 19% at 50% 41%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 15% 19% at 52% 40%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 50% 60%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 50% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 52% 99%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 60% 50% at 86% 14%, color-mix(in srgb, var(--color-accent) 80%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-4), var(--color-bar));\n}\n.ds-avatar--2 {\n  background:\n    radial-gradient(ellipse 14% 19% at 47% 41%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 14% 19% at 45% 40%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-bar-text)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 47% 60%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 40% 29% at 46% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 40% 29% at 44% 99%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-bar-text)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 60% 60% at 8% 20%, color-mix(in srgb, var(--color-accent-alt) 70%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-2), var(--color-bar));\n}\n.ds-avatar--3 {\n  background:\n    radial-gradient(ellipse 15% 20% at 54% 43%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 15% 20% at 54% 41%, color-mix(in srgb, var(--color-bar-text) 80%, var(--color-accent)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 54% 62%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 36% 28% at 54% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 36% 28% at 54% 98%, color-mix(in srgb, var(--color-bar-text) 80%, var(--color-accent)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 50% 46% at 54% 0%, color-mix(in srgb, var(--color-bar-text) 50%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-3), var(--color-bar));\n}\n.ds-avatar--large {\n  width: calc(var(--size-control) * 2);\n  height: calc(var(--size-control) * 2);\n}\n.ds-person {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-person__name {\n  display: block;\n  color: var(--color-heading);\n}\n.ds-person__role {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n\n/* progress: a hairline with the light running along it */\n.ds-progress {\n  display: block;\n  min-width: 0;\n}\n.ds-progress__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-progress__value {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.ds-progress__bar {\n  display: block;\n  width: 100%;\n  height: var(--border-width-strong);\n  overflow: hidden;\n  appearance: none;\n  -webkit-appearance: none;\n  border: 0;\n  background: color-mix(in srgb, currentColor 24%, transparent);\n  color: var(--color-accent);\n}\n.ds-progress__bar::-webkit-progress-bar {\n  background: transparent;\n}\n.ds-progress__bar::-webkit-progress-value {\n  background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n  background: var(--color-accent);\n}\n\n/* accordion */\n.ds-accordion {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__head::after {\n  content: \"\";\n  flex: none;\n  align-self: center;\n  display: inline-block;\n  width: calc(var(--space-2) * 1.25);\n  height: calc(var(--space-2) * 1.25);\n  background: currentColor;\n  clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n  color: var(--color-heading-alt);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after {\n  rotate: 45deg;\n}\n.ds-accordion__body {\n  max-width: 60ch;\n  margin: 0;\n  padding: 0 0 var(--space-4);\n  color: var(--color-text);\n}\n\n/* the rail: the whole site hangs on a dark strip down the left edge.\n   Views and footer stand to its right. */\n.ds-view,\n.ds-footer {\n  margin-left: var(--size-rail);\n}\n.ds-nav {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  width: var(--size-rail);\n  border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 20%, transparent);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-nav__rail {\n  position: sticky;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-7);\n  height: 100vh;\n  max-height: 100%;\n  padding: var(--space-4) 0 var(--space-5);\n}\n.ds-nav .ds-brand {\n  flex-direction: column;\n  gap: var(--space-4);\n}\n.ds-nav .ds-brand__name {\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column-reverse;\n  justify-content: center;\n  gap: var(--space-5);\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-2);\n  padding: var(--space-2) 0;\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: var(--link-decoration-quiet);\n  white-space: nowrap;\n  opacity: 0.6;\n  transition: var(--transition);\n}\n.ds-nav__link::before {\n  content: \"\";\n  width: var(--border-width);\n  height: 0;\n  background: var(--color-accent);\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  opacity: 1;\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#cast:target) .ds-nav__link[href=\"#cast\"],\n.ds-page:has(#screenings:target) .ds-nav__link[href=\"#screenings\"],\n.ds-page:has(#stills:target) .ds-nav__link[href=\"#stills\"],\n.ds-page:has(#press:target) .ds-nav__link[href=\"#press\"] {\n  opacity: 1;\n}\n.ds-nav__link.is-current::before,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#cast:target) .ds-nav__link[href=\"#cast\"]::before,\n.ds-page:has(#screenings:target) .ds-nav__link[href=\"#screenings\"]::before,\n.ds-page:has(#stills:target) .ds-nav__link[href=\"#stills\"]::before,\n.ds-page:has(#press:target) .ds-nav__link[href=\"#press\"]::before {\n  height: var(--space-6);\n}\n.ds-nav__index {\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  opacity: 0.6;\n}\n\n/* menu: the word in the top right corner; opened, a veil the height of\n   the window slides over the right edge */\n.ds-menu {\n  position: absolute;\n  top: 0;\n  left: calc(100vw - var(--space-9));\n  z-index: 8;\n  width: var(--space-9);\n}\n.ds-menu__toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  justify-content: flex-end;\n  width: 100%;\n  height: var(--size-nav);\n  padding: 0 var(--space-5);\n  color: var(--color-bar-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  list-style: none;\n  mix-blend-mode: difference;\n  cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle::after {\n  content: \"\";\n  width: var(--space-5);\n  height: var(--space-2);\n  border-top: var(--border-width) var(--border-style) currentColor;\n  border-bottom: var(--border-width) var(--border-style) currentColor;\n}\n.ds-menu__list {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: -1;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--space-2);\n  width: min(var(--size-menu), 100vw);\n  margin: 0;\n  padding: var(--size-nav) var(--space-6) var(--space-6);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n  box-shadow: var(--shadow-dialog);\n  list-style: none;\n}\n.ds-menu__item {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-2) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: inherit;\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-menu__item span {\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  letter-spacing: 0;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover {\n  color: var(--color-heading);\n}\n\n/* scene: a landscape drawn from tokens. The ground is the bar colour,\n   the sky runs through the fills to the accent at the horizon, the sun\n   and its flare are the accent and the alternate accent, and what is\n   solid is a silhouette. Text on a scene is the bar text colour. */\n.ds-scene {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  background: var(--color-bar);\n  color: var(--color-bar-text);\n}\n.ds-scene__sky,\n.ds-scene__ridge,\n.ds-scene__grain,\n.ds-scene__marks {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  pointer-events: none;\n}\n.ds-scene__sky {\n  background:\n    linear-gradient(to bottom,\n      var(--color-bar) 0,\n      var(--color-fill-3) 16%,\n      var(--color-fill-1) 30%,\n      var(--color-fill-4) 44%,\n      color-mix(in srgb, var(--color-accent) 62%, var(--color-fill-4)) 55%,\n      color-mix(in srgb, var(--color-accent-alt) 60%, var(--color-accent)) 61%,\n      var(--color-fill-2) 62%,\n      var(--color-bar) 100%);\n}\n/* sun: a small hot disc on the horizon with a long anamorphic flare */\n.ds-scene__sun {\n  position: absolute;\n  top: 58%;\n  left: 64%;\n  z-index: -1;\n  width: var(--space-8);\n  aspect-ratio: 1;\n  border-radius: 50%;\n  background: radial-gradient(closest-side, var(--color-bar-text) 0 26%, var(--color-accent) 44%, color-mix(in srgb, var(--color-accent-alt) 60%, transparent) 62%, transparent 100%);\n  transform: translate(-50%, -50%);\n}\n.ds-scene__sun::before,\n.ds-scene__sun::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ds-scene__sun::before {\n  width: 900%;\n  height: 8%;\n  background: radial-gradient(closest-side, var(--color-bar-text) 0, color-mix(in srgb, var(--color-accent-alt) 80%, transparent) 30%, transparent 100%);\n}\n.ds-scene__sun::after {\n  width: 620%;\n  height: 620%;\n  border-radius: 50%;\n  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 44%, transparent) 0, transparent 100%);\n}\n/* ridges: far peaks, the middle dunes and the dark foreground */\n.ds-scene__ridge--far {\n  top: 36%;\n  bottom: 30%;\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-4) 76%, var(--color-accent)), var(--color-fill-2));\n  clip-path: polygon(0 62%, 6% 50%, 11% 58%, 19% 30%, 24% 46%, 30% 38%, 37% 60%, 45% 52%, 52% 72%, 60% 80%, 70% 78%, 77% 54%, 83% 20%, 88% 42%, 93% 34%, 100% 56%, 100% 100%, 0 100%);\n  opacity: 0.92;\n}\n.ds-scene__ridge--mid {\n  top: 50%;\n  background:\n    radial-gradient(ellipse 52% 44% at 88% 82%, var(--color-fill-1) 0, var(--color-fill-2) 99%, transparent 100%),\n    radial-gradient(ellipse 64% 34% at 30% 86%, var(--color-fill-3) 0, var(--color-fill-1) 99%, transparent 100%),\n    linear-gradient(to bottom, transparent 0 46%, var(--color-fill-3) 46%);\n}\n.ds-scene__ridge--near {\n  top: 56%;\n  background:\n    radial-gradient(ellipse 58% 62% at 14% 100%, var(--color-bar) 0 99%, transparent 100%),\n    radial-gradient(ellipse 40% 30% at 100% 100%, var(--color-bar) 0 99%, transparent 100%),\n    linear-gradient(to bottom, transparent 0 78%, var(--color-bar) 78%);\n}\n/* figure: one cloaked walker on the crest of the near dune */\n.ds-scene__figure {\n  position: absolute;\n  bottom: 40%;\n  left: 31%;\n  z-index: -1;\n  width: 2.2%;\n  aspect-ratio: 0.36;\n  background: var(--color-bar);\n  clip-path: polygon(42% 0, 60% 0, 66% 7%, 60% 13%, 74% 20%, 82% 60%, 100% 100%, 8% 100%, 24% 60%, 28% 20%, 40% 13%, 36% 7%);\n}\n/* grain: the texture of the bar fill alone (the fill less its own\n   colour), laid over the picture, so it shows on a dark and on a pale\n   ground alike */\n.ds-scene__grain {\n  z-index: 0;\n  background: linear-gradient(var(--color-bar), var(--color-bar)), var(--fill-bar);\n  background-blend-mode: difference, normal, normal, normal;\n  mix-blend-mode: difference;\n}\n/* marks: the corners of the camera gate */\n.ds-scene__marks {\n  inset: var(--space-5);\n  z-index: 0;\n  background:\n    linear-gradient(currentColor, currentColor) 0 0 / var(--space-5) var(--border-width) no-repeat,\n    linear-gradient(currentColor, currentColor) 0 0 / var(--border-width) var(--space-5) no-repeat,\n    linear-gradient(currentColor, currentColor) 100% 0 / var(--space-5) var(--border-width) no-repeat,\n    linear-gradient(currentColor, currentColor) 100% 0 / var(--border-width) var(--space-5) no-repeat,\n    linear-gradient(currentColor, currentColor) 0 100% / var(--space-5) var(--border-width) no-repeat,\n    linear-gradient(currentColor, currentColor) 0 100% / var(--border-width) var(--space-5) no-repeat,\n    linear-gradient(currentColor, currentColor) 100% 100% / var(--space-5) var(--border-width) no-repeat,\n    linear-gradient(currentColor, currentColor) 100% 100% / var(--border-width) var(--space-5) no-repeat;\n  opacity: 0.5;\n}\n\n/* hero: the letterboxed picture between two dark bars */\n.ds-hero {\n  background: var(--color-bar);\n  color: var(--color-bar-text);\n}\n.ds-hero__bar {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  min-height: var(--size-nav);\n  padding: 0 calc(var(--space-9) + var(--space-5)) 0 var(--space-6);\n}\n.ds-hero__bar span:first-child {\n  flex: 1 1 auto;\n}\n.ds-hero__frame {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  min-height: var(--size-scene);\n  padding: var(--space-8) var(--space-6) var(--space-7);\n  text-align: center;\n}\n.ds-hero__kicker {\n  margin: 0 0 var(--space-4);\n}\n.ds-hero__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  max-width: 52ch;\n  margin: var(--space-4) 0 0;\n  font-size: var(--text-large);\n  line-height: 1.35;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-3);\n  margin-top: var(--space-5);\n}\n.ds-hero__scrub {\n  padding: var(--space-4) var(--space-6) 0;\n}\n.ds-hero__credits {\n  max-width: 96ch;\n  margin: 0 auto;\n  padding: var(--space-5) var(--space-6) var(--space-6);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1.7;\n  letter-spacing: var(--space-track);\n  text-align: center;\n  text-transform: var(--ui-transform);\n  opacity: 0.74;\n}\n.ds-hero__credits b {\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-heading);\n  letter-spacing: var(--heading-tracking);\n}\n\n/* still: one frame of the film, drawn as a single box of gradients */\n.ds-still {\n  position: relative;\n  display: block;\n  width: 100%;\n  aspect-ratio: 2.39;\n  overflow: hidden;\n  border-radius: var(--radius-page);\n  background:\n    radial-gradient(ellipse 60% 56% at 12% 112%, var(--color-bar) 0 99%, transparent 100%),\n    radial-gradient(ellipse 70% 40% at 84% 112%, var(--color-fill-1) 0 99%, transparent 100%),\n    radial-gradient(circle at 60% 60%, var(--color-bar-text) 0 var(--space-2), var(--color-accent) var(--space-4), color-mix(in srgb, var(--color-accent) 40%, transparent) var(--space-7), transparent var(--space-9)),\n    linear-gradient(to bottom, var(--color-bar) 0, var(--color-fill-3) 26%, var(--color-fill-4) 48%, color-mix(in srgb, var(--color-accent) 60%, var(--color-fill-4)) 60%, var(--color-fill-2) 61%, var(--color-bar) 100%);\n  color: var(--color-bar-text);\n}\n/* night: a moon, two fields of stars and a black range */\n.ds-still--night {\n  background:\n    linear-gradient(to top right, var(--color-bar) 0 50%, transparent 50.5%) 0 100% / 30% 50% no-repeat,\n    linear-gradient(to top left, var(--color-bar) 0 50%, transparent 50.5%) 40.5% 100% / 26% 50% no-repeat,\n    linear-gradient(to top right, var(--color-bar) 0 50%, transparent 50.5%) 63.2% 100% / 24% 36% no-repeat,\n    linear-gradient(to top left, var(--color-bar) 0 50%, transparent 50.5%) 100% 100% / 28% 36% no-repeat,\n    linear-gradient(to top, var(--color-bar) 0 12%, transparent 12%),\n    radial-gradient(circle at 78% 26%, var(--color-bar-text) 0 var(--space-3), color-mix(in srgb, var(--color-accent) 50%, transparent) calc(var(--space-3) + var(--border-width)), transparent var(--space-8)),\n    radial-gradient(circle, var(--color-bar-text) 0 var(--border-width), transparent var(--border-width-strong)) var(--space-3) var(--space-2) / var(--space-8) var(--space-7),\n    radial-gradient(circle, color-mix(in srgb, var(--color-bar-text) 60%, transparent) 0 var(--border-width), transparent var(--border-width-strong)) var(--space-7) var(--space-5) / var(--space-9) var(--space-8),\n    linear-gradient(to bottom, var(--color-bar) 0, var(--color-fill-3) 60%, color-mix(in srgb, var(--color-accent-alt) 30%, var(--color-fill-1)) 100%);\n}\n/* door: a dark room, one slab of light and someone standing in it */\n.ds-still--door {\n  background:\n    radial-gradient(ellipse 5% 13% at 60% 46%, var(--color-bar) 0 98%, transparent 100%),\n    radial-gradient(ellipse 10% 50% at 60% 110%, var(--color-bar) 0 98%, transparent 100%),\n    linear-gradient(90deg, transparent 0 53%, color-mix(in srgb, var(--color-accent) 30%, var(--color-bar-text)) 53% 66%, transparent 66%) 0 0 / 100% 84% no-repeat,\n    linear-gradient(to bottom, transparent 0 84%, color-mix(in srgb, var(--color-accent) 70%, transparent) 84%, transparent 100%) 0 0 / 100% 100% no-repeat,\n    radial-gradient(ellipse 34% 90% at 59% 50%, color-mix(in srgb, var(--color-accent) 46%, transparent), transparent 100%),\n    linear-gradient(90deg, var(--color-bar), var(--color-fill-3) 50%, var(--color-fill-1) 70%, var(--color-bar));\n}\n/* road: night driving, the white line and two lamps coming on */\n.ds-still--road {\n  background:\n    radial-gradient(circle at 44% 50%, var(--color-bar-text) 0 var(--space-1), color-mix(in srgb, var(--color-accent-alt) 70%, transparent) var(--space-3), transparent var(--space-7)),\n    radial-gradient(circle at 49% 50%, var(--color-bar-text) 0 var(--space-1), color-mix(in srgb, var(--color-accent-alt) 70%, transparent) var(--space-3), transparent var(--space-7)),\n    repeating-linear-gradient(to bottom, transparent 0 var(--space-3), var(--color-fill-1) var(--space-3) var(--space-5)) 50% 100% / var(--border-width-strong) 48% no-repeat,\n    conic-gradient(from 132deg at 50% 50%, var(--color-fill-1) 0deg, var(--color-fill-3) 48deg, var(--color-fill-1) 96deg, transparent 96.5deg, transparent 360deg),\n    linear-gradient(to bottom, var(--color-bar) 0, var(--color-fill-3) 40%, color-mix(in srgb, var(--color-accent) 50%, var(--color-fill-4)) 50%, var(--color-bar) 50.5%);\n}\n/* sea: a low sun and its column on flat water */\n.ds-still--sea {\n  background:\n    repeating-linear-gradient(to bottom, transparent 0 var(--space-1), var(--color-fill-3) var(--space-1) var(--space-2)) 0 100% / 100% 44% no-repeat,\n    radial-gradient(ellipse 6% 50% at 36% 56%, color-mix(in srgb, var(--color-accent) 90%, var(--color-bar-text)) 0, transparent 100%) 0 100% / 100% 44% no-repeat,\n    linear-gradient(to bottom, var(--color-fill-4), var(--color-fill-3)) 0 100% / 100% 44% no-repeat,\n    radial-gradient(circle at 36% 56%, var(--color-bar-text) 0 var(--space-4), var(--color-accent) calc(var(--space-4) + var(--border-width-strong)), color-mix(in srgb, var(--color-accent-alt) 50%, transparent) var(--space-7), transparent var(--space-9)),\n    linear-gradient(to bottom, var(--color-bar) 0, var(--color-fill-1) 30%, color-mix(in srgb, var(--color-accent-alt) 50%, var(--color-fill-4)) 56%);\n}\n.ds-still--sliver {\n  height: var(--size-sliver);\n  aspect-ratio: auto;\n}\n.ds-still--tall {\n  aspect-ratio: 1.6;\n}\n.ds-still::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(var(--color-bar), var(--color-bar)), var(--fill-bar);\n  background-blend-mode: difference, normal, normal, normal;\n  mix-blend-mode: difference;\n}\n.ds-still__label {\n  position: absolute;\n  right: var(--space-3);\n  bottom: var(--space-3);\n  left: var(--space-3);\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n\n/* section */\n.ds-section {\n  padding: var(--space-9) 0;\n}\n.ds-section--flush {\n  padding-top: 0;\n}\n.ds-section__head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-5);\n  margin-bottom: var(--space-6);\n  padding-bottom: var(--space-3);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\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.ds-section__kicker {\n  flex: 1 1 100%;\n  color: var(--color-heading-alt);\n}\n\n/* statement: the synopsis in the display face, beside the figures */\n.ds-statement {\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  align-items: end;\n  gap: var(--space-8);\n}\n.ds-statement__text {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: 1.12;\n  letter-spacing: var(--heading-tracking);\n}\n.ds-statement__text em {\n  color: var(--color-heading-alt);\n  font-style: normal;\n}\n\n/* stats: two by two, each figure under a hairline and its label */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-5) var(--space-6);\n  margin: 0;\n}\n.ds-stat__item {\n  display: grid;\n  gap: var(--space-2);\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}\n.ds-stat__label {\n  order: -1;\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* grid: four stills, each on one of the fills with its caption */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  height: 100%;\n  padding: var(--space-3) var(--space-3) var(--space-4);\n  border-radius: var(--radius-page);\n  background: var(--color-fill-1);\n  color: var(--color-text);\n  text-decoration: none;\n  box-shadow: var(--shadow-panel);\n  transition: var(--transition);\n}\n.ds-grid > :nth-child(2) .ds-grid__cell {\n  background: var(--color-fill-2);\n}\n.ds-grid > :nth-child(3) .ds-grid__cell {\n  background: var(--color-fill-3);\n}\n.ds-grid > :nth-child(4) .ds-grid__cell {\n  background: var(--color-fill-4);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__title {\n  display: block;\n  margin: var(--space-2) 0 var(--space-1);\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-grid__text {\n  display: block;\n  font-size: var(--text-base);\n}\n\n/* list: dated notes in three columns of a ruled row */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr) auto;\n  align-items: baseline;\n  gap: var(--space-5);\n  padding: var(--space-4) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__meta {\n  color: var(--color-text-muted);\n}\n.ds-list__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-list__text {\n  margin: 0;\n}\n\n/* cast: portraits in a row, a name and a part under each */\n.ds-cast {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-cast__item {\n  display: grid;\n  gap: var(--space-3);\n  color: inherit;\n  text-decoration: none;\n}\n.ds-cast .ds-avatar {\n  width: 100%;\n  height: auto;\n  aspect-ratio: 1;\n  border-radius: var(--radius-page);\n}\n\n/* band: the inverted block, one sentence */\n.ds-band {\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n}\n.ds-band__inner {\n  display: grid;\n  justify-items: center;\n  gap: var(--space-5);\n  padding-top: var(--space-8);\n  padding-bottom: var(--space-8);\n  text-align: center;\n}\n.ds-band__text {\n  max-width: 22ch;\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-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* inner pages: an index line, the title, then a sliver of the film */\n.ds-top {\n  padding: var(--space-4) 0 var(--space-6);\n}\n.ds-top__line {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-height: calc(var(--size-nav) - var(--space-4));\n  padding-right: calc(var(--space-9) - var(--space-5));\n  color: var(--color-text-muted);\n}\n.ds-top__line > span {\n  flex: none;\n  white-space: nowrap;\n}\n.ds-page-header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin: var(--space-6) 0;\n}\n.ds-page-header__main {\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  max-width: 58ch;\n  margin: var(--space-3) 0 0;\n  color: var(--color-text);\n  font-size: var(--text-large);\n  line-height: 1.35;\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n.ds-main {\n  padding: var(--space-5) 0 var(--space-9);\n}\n.ds-cols {\n  display: grid;\n  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);\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-stack {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--space-6);\n  min-width: 0;\n}\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n.ds-toolbar .ds-switch {\n  padding: 0;\n  border: 0;\n}\n\n/* tabs: joined boxes, the current one filled */\n.ds-tabs {\n  display: inline-flex;\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n  overflow-x: auto;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\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  min-height: var(--size-control);\n  padding: 0 var(--space-5);\n  border-radius: var(--radius-control);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n\n/* table */\n.ds-table__wrap {\n  overflow-x: auto;\n}\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--color-text);\n}\n.ds-table th {\n  padding: var(--space-2) var(--space-4) var(--space-2) 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-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-align: left;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-table td {\n  padding: var(--space-4) var(--space-4) var(--space-4) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  vertical-align: baseline;\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n  background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n.ds-table__title {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-decoration: none;\n}\n.ds-table__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  color: var(--color-text-muted);\n}\n\n/* panel: a credit card for one person or one fact sheet */\n.ds-panel {\n  display: flex;\n  flex-direction: column;\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-4) var(--space-4) 0;\n}\n.ds-panel__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n  padding: var(--space-3) var(--space-4) var(--space-4);\n}\n.ds-panel__text {\n  margin: 0;\n}\n.ds-panels {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n.ds-panel--person {\n  flex-direction: row;\n  align-items: stretch;\n}\n.ds-panel--person > .ds-avatar {\n  align-self: flex-start;\n  width: 36%;\n  height: auto;\n  aspect-ratio: 1;\n  border-radius: 0;\n}\n.ds-panel--person > div {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-facts {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n}\n.ds-facts dt {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-facts dd {\n  margin: 0;\n  color: var(--color-heading);\n}\n\n/* sidebar */\n.ds-sidebar {\n  display: grid;\n  gap: var(--space-2);\n  padding: var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface-alt);\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-link-quiet);\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__count {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n\n/* carousel: one still to a slide, the frame number and the dots under it */\n.ds-carousel {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  overflow-x: auto;\n  list-style: none;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n}\n.ds-carousel__slide {\n  flex: 0 0 100%;\n  min-width: 0;\n  scroll-snap-align: start;\n}\n.ds-carousel__nav {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  color: var(--color-text-muted);\n}\n.ds-carousel__dots {\n  display: flex;\n  flex: 1 1 auto;\n  justify-content: center;\n  gap: var(--space-2);\n}\n.ds-carousel__dot {\n  width: var(--space-2);\n  height: var(--space-2);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n}\n.ds-carousel__dot.is-current {\n  border-color: var(--color-accent);\n  background: var(--color-accent);\n}\n.ds-carousel__arrow {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control);\n  height: var(--size-control);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  color: var(--color-heading);\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  color: var(--color-disabled-text);\n}\n.ds-thumbs {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-3);\n}\n\n/* footer: the billing block, then the links */\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__inner {\n  display: grid;\n  justify-items: center;\n  gap: var(--space-5);\n  padding-top: var(--space-7);\n  padding-bottom: var(--space-5);\n  text-align: center;\n}\n.ds-footer__about {\n  max-width: 80ch;\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  line-height: 1.8;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-footer__list {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: underline;\n}\n.ds-footer__legal {\n  width: 100%;\n  margin: 0;\n  padding-top: var(--space-4);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 26%, transparent);\n}\n\n@media (max-width: 1100px) {\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.7);\n  }\n  .ds-statement,\n  .ds-cols,\n  .ds-cols--even {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-6);\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-list__item {\n    grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) auto;\n  }\n  .ds-list__text {\n    display: none;\n  }\n}\n@media (max-width: 800px) {\n  .ds-view,\n  .ds-footer {\n    margin-left: 0;\n  }\n  .ds-wrap {\n    padding-right: var(--space-4);\n    padding-left: var(--space-4);\n  }\n  .ds-nav {\n    position: relative;\n    width: auto;\n    border-right: 0;\n    border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 20%, transparent);\n  }\n  .ds-nav__rail {\n    position: static;\n    flex-flow: row wrap;\n    align-items: center;\n    gap: 0 var(--space-4);\n    height: auto;\n    padding: 0 var(--space-4);\n  }\n  .ds-nav .ds-brand {\n    flex-direction: row;\n    min-height: var(--size-nav);\n    gap: var(--space-3);\n  }\n  .ds-nav .ds-brand__name,\n  .ds-nav__link {\n    writing-mode: horizontal-tb;\n    transform: none;\n  }\n  .ds-nav__links {\n    flex: 1 1 100%;\n    flex-direction: row;\n    justify-content: flex-start;\n    gap: var(--space-5);\n    overflow-x: auto;\n    border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 20%, transparent);\n    scrollbar-width: none;\n  }\n  .ds-nav__link {\n    padding: var(--space-3) 0;\n  }\n  .ds-nav__link::before {\n    display: none;\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(#cast:target) .ds-nav__link[href=\"#cast\"],\n  .ds-page:has(#screenings:target) .ds-nav__link[href=\"#screenings\"],\n  .ds-page:has(#stills:target) .ds-nav__link[href=\"#stills\"],\n  .ds-page:has(#press:target) .ds-nav__link[href=\"#press\"] {\n    box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent);\n  }\n  .ds-menu {\n    right: 0;\n    left: auto;\n  }\n  .ds-menu__toggle {\n    padding: 0 var(--space-4);\n    mix-blend-mode: normal;\n  }\n  .ds-hero__bar,\n  .ds-nav__index {\n    display: none;\n  }\n  .ds-hero__frame {\n    min-height: calc(var(--size-scene) - var(--space-8));\n    padding: var(--space-7) var(--space-4) var(--space-6);\n  }\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.46);\n  }\n  .ds-scene__figure {\n    width: 5%;\n  }\n  .ds-hero__scrub,\n  .ds-hero__credits {\n    padding-right: var(--space-4);\n    padding-left: var(--space-4);\n  }\n  .ds-page-header__title,\n  .ds-stat__figure,\n  .ds-band__text {\n    font-size: calc(var(--text-h1) * 0.6);\n  }\n  .ds-statement__text {\n    font-size: calc(var(--text-h2) * 0.7);\n  }\n  .ds-section {\n    padding: var(--space-8) 0;\n  }\n  .ds-section--flush {\n    padding-top: 0;\n  }\n  .ds-top__line {\n    padding-right: 0;\n  }\n  .ds-cast,\n  .ds-thumbs {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-panels {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n@media (max-width: 520px) {\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.3);\n  }\n  .ds-page-header__title,\n  .ds-stat__figure,\n  .ds-band__text {\n    font-size: calc(var(--text-h1) * 0.5);\n  }\n  .ds-hero__lead,\n  .ds-page-header__text {\n    font-size: var(--text-base);\n  }\n  .ds-grid,\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-list__item {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-2);\n  }\n  .ds-still--sliver {\n    height: calc(var(--size-sliver) * 0.6);\n  }\n  /* five links do not fit one row of a phone: two tidy rows of three columns */\n  .ds-panel--person .ds-panel__head {\n    flex-wrap: wrap;\n    gap: var(--space-2);\n  }\n}\n\n/* In a table a tip opens under its word, inside the table. */\n.ds-table .ds-tooltip__tip {\n  top: calc(100% + var(--space-2));\n  bottom: auto;\n}\n/* Phones: the table keeps the columns that matter, so its last one is in view. */\n@media (max-width: 520px) {\n  #screenings .ds-table th:nth-child(4),\n  #screenings .ds-table td:nth-child(4),\n  #screenings .ds-table th:nth-child(5),\n  #screenings .ds-table td:nth-child(5) {\n    display: none;\n  }\n}\n\n/* Phones: the mark and the word Menu; the sheet of large links is the navigation. */\n@media (max-width: 520px) {\n  .ds-nav__links {\n    display: none;\n  }\n  .ds-menu__list {\n    padding-right: var(--space-5);\n    padding-left: var(--space-5);\n  }\n  .ds-menu__item {\n    font-size: calc(var(--text-h2) * 0.8);\n  }\n  .ds-page:not(:has(.ds-view:target)) .ds-menu__item[href=\"#home\"],\n  .ds-page:has(#home:target) .ds-menu__item[href=\"#home\"],\n  .ds-page:has(#cast:target) .ds-menu__item[href=\"#cast\"],\n  .ds-page:has(#screenings:target) .ds-menu__item[href=\"#screenings\"],\n  .ds-page:has(#stills:target) .ds-menu__item[href=\"#stills\"],\n  .ds-page:has(#press:target) .ds-menu__item[href=\"#press\"] {\n    box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent);\n  }\n  .ds-table__wrap {\n    position: relative;\n  }\n  .ds-table .ds-tooltip {\n    position: static;\n  }\n  .ds-table .ds-tooltip__tip {\n    top: auto;\n    right: 0;\n    left: 0;\n    align-self: flex-start;\n    width: auto;\n    max-width: none;\n    margin-top: var(--space-6);\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 film site specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__rail\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" aria-hidden=\"true\"><path d=\"M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5\"/><circle cx=\"12\" cy=\"12\" r=\"4.5\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">The film</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#cast\">Cast and crew</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#screenings\">Screenings</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#stills\">Stills</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#press\">Press</a></li>\n    </ul>\n    <span class=\"ds-nav__index\">2.39:1</span>\n  </div>\n  <details class=\"ds-menu\">\n    <summary class=\"ds-menu__toggle\">Menu</summary>\n    <ul class=\"ds-menu__list\">\n      <li><a class=\"ds-menu__item\" href=\"#home\">The film <span>01</span></a></li>\n      <li><a class=\"ds-menu__item\" href=\"#cast\">Cast and crew <span>02</span></a></li>\n      <li><a class=\"ds-menu__item\" href=\"#screenings\">Screenings <span>03</span></a></li>\n      <li><a class=\"ds-menu__item\" href=\"#stills\">Stills <span>04</span></a></li>\n      <li><a class=\"ds-menu__item\" href=\"#press\">Press <span>05</span></a></li>\n    </ul>\n  </details>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <p class=\"ds-hero__bar ds-label\"><span>A chronoskin picture</span><span class=\"ds-label--mono\">Reel 3 of 6</span></p>\n    <div class=\"ds-hero__frame ds-scene\">\n      <span class=\"ds-scene__sky\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__sun\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__ridge ds-scene__ridge--far\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__ridge ds-scene__ridge--mid\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__figure\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__ridge ds-scene__ridge--near\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__grain\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__marks\" aria-hidden=\"true\"></span>\n      <p class=\"ds-label ds-hero__kicker\">In cinemas 12 March</p>\n      <h1 class=\"ds-hero__title\">Salt road</h1>\n      <p class=\"ds-hero__lead\">A surveyor walks out to map the last unmapped valley and finds that someone has been there before her.</p>\n      <div class=\"ds-hero__actions\">\n        <a class=\"ds-button ds-button--onscene\" href=\"#screenings\">Find a screening</a>\n        <a class=\"ds-button ds-button--ghost\" href=\"#stills\">See the stills</a>\n      </div>\n    </div>\n    <div class=\"ds-hero__scrub\">\n      <div class=\"ds-progress\">\n        <p class=\"ds-progress__head\"><span>Trailer</span><span class=\"ds-progress__value\">00:48 / 02:14</span></p>\n        <progress class=\"ds-progress__bar\" value=\"36\" max=\"100\">36%</progress>\n      </div>\n    </div>\n    <p class=\"ds-hero__credits\">A chronoskin picture <b>Salt road</b> written and directed by the director, photographed on 65 mm by the director of photography, edited by the editor, music by the composer, sound by the recordist, produced by the two producers. Certificate 12. Running time 127 minutes.</p>\n  </div>\n\n  <div class=\"ds-section\">\n    <div class=\"ds-wrap ds-statement\">\n      <p class=\"ds-statement__text\">Nine days on foot across a dry sea. One instrument, one radio, and <em>a second set of tracks</em> that should not be there.</p>\n      <div class=\"ds-stat\" data-component=\"stats\">\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">127</p><p class=\"ds-label ds-stat__label\">Minutes</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">65</p><p class=\"ds-label ds-stat__label\">Millimetre film</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">31</p><p class=\"ds-label ds-stat__label\">Countries</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">412</p><p class=\"ds-label ds-stat__label\">Screens, first week</p></div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--flush\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">Stills</p>\n        <h2 class=\"ds-section__title\">Four frames</h2>\n        <a class=\"ds-link ds-link--arrow\" href=\"#stills\">All stills</a>\n      </div>\n      <ul class=\"ds-grid\" data-component=\"grid\">\n        <li><a class=\"ds-grid__cell\" href=\"#stills\"><span class=\"ds-still ds-still--tall\"></span><span><span class=\"ds-label ds-label--mono\">00:04:11</span><span class=\"ds-grid__title\">The crossing</span><span class=\"ds-grid__text\">First light, day one.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#stills\"><span class=\"ds-still ds-still--tall ds-still--door\"></span><span><span class=\"ds-label ds-label--mono\">00:31:52</span><span class=\"ds-grid__title\">The station</span><span class=\"ds-grid__text\">A door nobody locked.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#stills\"><span class=\"ds-still ds-still--tall ds-still--night\"></span><span><span class=\"ds-label ds-label--mono\">01:02:07</span><span class=\"ds-grid__title\">The range</span><span class=\"ds-grid__text\">Night four, no fire.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#stills\"><span class=\"ds-still ds-still--tall ds-still--road\"></span><span><span class=\"ds-label ds-label--mono\">01:48:30</span><span class=\"ds-grid__title\">The road</span><span class=\"ds-grid__text\">Two lamps, far off.</span></span></a></li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--flush\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">Cast</p>\n        <h2 class=\"ds-section__title\">Four people, one valley</h2>\n        <a class=\"ds-link ds-link--arrow\" href=\"#cast\">Cast and crew</a>\n      </div>\n      <ul class=\"ds-cast\">\n        <li><a class=\"ds-cast__item\" href=\"#cast\"><span class=\"ds-avatar\" aria-hidden=\"true\"></span><span class=\"ds-person__name\">The surveyor</span><span class=\"ds-person__role\">Lead</span></a></li>\n        <li><a class=\"ds-cast__item\" href=\"#cast\"><span class=\"ds-avatar ds-avatar--2\" aria-hidden=\"true\"></span><span class=\"ds-person__name\">The driver</span><span class=\"ds-person__role\">Supporting</span></a></li>\n        <li><a class=\"ds-cast__item\" href=\"#cast\"><span class=\"ds-avatar ds-avatar--3\" aria-hidden=\"true\"></span><span class=\"ds-person__name\">The sister</span><span class=\"ds-person__role\">Supporting</span></a></li>\n        <li><a class=\"ds-cast__item\" href=\"#cast\"><span class=\"ds-avatar ds-avatar--2\" aria-hidden=\"true\"></span><span class=\"ds-person__name\">The radio operator</span><span class=\"ds-person__role\">Voice</span></a></li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--flush\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">Notes</p>\n        <h2 class=\"ds-section__title\">From the production</h2>\n        <a class=\"ds-link ds-link--arrow\" href=\"#press\">Press notes</a>\n      </div>\n      <ul class=\"ds-list\" data-component=\"list\">\n        <li class=\"ds-list__item\"><span class=\"ds-label ds-label--mono ds-list__meta\">02.03.2026</span><a class=\"ds-list__title\" href=\"#screenings\">Seventy millimetre prints in nine cities</a><p class=\"ds-list__text\">The large format run opens a week before the general release.</p><a class=\"ds-link ds-link--arrow\" href=\"#screenings\">Read</a></li>\n        <li class=\"ds-list__item\"><span class=\"ds-label ds-label--mono ds-list__meta\">18.02.2026</span><a class=\"ds-list__title is-hover\" href=\"#press\">The score is out on the day of release</a><p class=\"ds-list__text\">Forty minutes for strings, a pump organ and wind recorded on location.</p><a class=\"ds-link ds-link--arrow\" href=\"#press\">Read</a></li>\n        <li class=\"ds-list__item\"><span class=\"ds-label ds-label--mono ds-list__meta\">30.01.2026</span><a class=\"ds-list__title\" href=\"#stills\">Twelve new stills from the dry sea</a><p class=\"ds-list__text\">Frames scanned from the camera negative, free for editorial use.</p><a class=\"ds-link ds-link--arrow\" href=\"#stills\">Read</a></li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap ds-band__inner\">\n      <p class=\"ds-label\">From the press notes</p>\n      <p class=\"ds-band__text\">See it on the largest screen you can find</p>\n      <a class=\"ds-button ds-button--inverse\" href=\"#screenings\">Screenings near you</a>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"cast\">\n  <div class=\"ds-wrap ds-top\">\n    <div class=\"ds-top__line ds-label\">\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Salt road</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#cast\">Cast and crew</a></li>\n        <li class=\"ds-breadcrumb__current\">Cast</li>\n      </ol>\n      <span class=\"ds-label--mono\">02 / 05</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\">Cast and crew</h1>\n        <p class=\"ds-page-header__text\">Four people in front of the camera, sixty-one behind it, nine weeks in the valley.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#press\">Full credits</a>\n      </div>\n    </div>\n    <span class=\"ds-still ds-still--sliver ds-still--sea\" aria-hidden=\"true\"></span>\n  </div>\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols\">\n      <div class=\"ds-panels\">\n        <div class=\"ds-panel ds-panel--person\" data-component=\"panel\">\n          <span class=\"ds-avatar\" aria-hidden=\"true\"></span>\n          <div>\n            <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">The surveyor</h2><span class=\"ds-badge ds-badge--quiet\">Lead</span></div>\n            <div class=\"ds-panel__body\"><p class=\"ds-panel__text\">On screen for all but six minutes. Learned to read a theodolite and walked every kilometre herself.</p></div>\n          </div>\n        </div>\n        <div class=\"ds-panel ds-panel--person\">\n          <span class=\"ds-avatar ds-avatar--2\" aria-hidden=\"true\"></span>\n          <div>\n            <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">The driver</h2><span class=\"ds-badge ds-badge--quiet\">Supporting</span></div>\n            <div class=\"ds-panel__body\"><p class=\"ds-panel__text\">Takes her to the edge of the map and promises to come back in nine days.</p></div>\n          </div>\n        </div>\n        <div class=\"ds-panel ds-panel--person\">\n          <span class=\"ds-avatar ds-avatar--3\" aria-hidden=\"true\"></span>\n          <div>\n            <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">The sister</h2><span class=\"ds-badge ds-badge--quiet\">Supporting</span></div>\n            <div class=\"ds-panel__body\"><p class=\"ds-panel__text\">Seen only in the first reel and the last. The reason for the walk.</p></div>\n          </div>\n        </div>\n        <div class=\"ds-panel ds-panel--person\">\n          <span class=\"ds-avatar ds-avatar--2\" aria-hidden=\"true\"></span>\n          <div>\n            <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">The radio operator</h2><span class=\"ds-badge ds-badge--quiet\">Voice</span></div>\n            <div class=\"ds-panel__body\"><p class=\"ds-panel__text\">Never seen. Recorded over a real shortwave link, two hundred kilometres away.</p></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Behind the camera</h2></div>\n          <div class=\"ds-panel__body\">\n            <dl class=\"ds-facts\">\n              <dt>Direction</dt><dd>The director, a second feature</dd>\n              <dt>Photography</dt><dd>65 mm, natural light only</dd>\n              <dt>Editing</dt><dd>One editor, fourteen months</dd>\n              <dt>Music</dt><dd>Strings, pump organ, wind</dd>\n              <dt>Sound</dt><dd>Recorded on location</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--large ds-avatar--3\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The director</span><span class=\"ds-person__role\">Writer and director</span></span></div>\n        <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The director of photography</span><span class=\"ds-person__role\">Camera and light</span></span></div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"screenings\">\n  <div class=\"ds-wrap ds-top\">\n    <div class=\"ds-top__line ds-label\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Salt road</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#screenings\">Screenings</a></li>\n        <li class=\"ds-breadcrumb__current\">Opening week</li>\n      </ol>\n      <span class=\"ds-label--mono\">03 / 05</span>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Screenings</h1>\n        <p class=\"ds-page-header__text\">The large format run opens on 5 March, everywhere else a week later.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#press\">Ask for a screening</a>\n      </div>\n    </div>\n    <span class=\"ds-still ds-still--sliver ds-still--road\" aria-hidden=\"true\"></span>\n  </div>\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap 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=\"#screenings\">Opening week</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#screenings\">Large format</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#screenings\">Festivals</a></li>\n        </ul>\n        <label class=\"ds-switch is-on\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Subtitled only</span></label>\n      </div>\n      <div class=\"ds-noticerow\" data-component=\"notice\">\n        <p class=\"ds-notice\"><span class=\"ds-notice__title\">Note</span>The film runs 127 minutes without an interval. Latecomers are seated after the first reel.</p>\n        <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Cancelled</span>The late screening in the harbour cinema on 7 March is cancelled. Tickets are refunded.</p>\n      </div>\n      <div class=\"ds-table__wrap\">\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr><th>Day</th><th>City and cinema</th><th>Format</th><th class=\"ds-table__num\">Starts</th><th class=\"ds-table__num\">Seats left</th><th>Status</th></tr>\n          </thead>\n          <tbody>\n            <tr><td class=\"ds-label ds-label--mono\">05.03</td><td><a class=\"ds-table__title\" href=\"#press\">Rotterdam, harbour cinema</a></td><td><span class=\"ds-tooltip\" tabindex=\"0\">70 mm<span class=\"ds-tooltip__tip\">Projected from a film print on the largest screen of the house.</span></span></td><td class=\"ds-table__num\">19:30</td><td class=\"ds-table__num\">212</td><td><span class=\"ds-badge ds-badge--success\">Booking</span></td></tr>\n            <tr class=\"is-hover\"><td class=\"ds-label ds-label--mono\">05.03</td><td><a class=\"ds-table__title\" href=\"#press\">Lyon, the old depot</a></td><td>70 mm</td><td class=\"ds-table__num\">20:00</td><td class=\"ds-table__num\">38</td><td><span class=\"ds-badge ds-badge--warning\">Few seats</span></td></tr>\n            <tr><td class=\"ds-label ds-label--mono\">06.03</td><td><a class=\"ds-table__title\" href=\"#press\">Leipzig, palace of film</a></td><td>Digital, subtitled</td><td class=\"ds-table__num\">18:15</td><td class=\"ds-table__num\">164</td><td><span class=\"ds-badge ds-badge--success\">Booking</span></td></tr>\n            <tr><td class=\"ds-label ds-label--mono\">07.03</td><td><a class=\"ds-table__title\" href=\"#press\">Rotterdam, harbour cinema</a></td><td>70 mm</td><td class=\"ds-table__num\">22:45</td><td class=\"ds-table__num\">0</td><td><span class=\"ds-badge ds-badge--danger\">Cancelled</span></td></tr>\n            <tr><td class=\"ds-label ds-label--mono\">12.03</td><td><a class=\"ds-table__title\" href=\"#press\">Everywhere</a></td><td>Digital</td><td class=\"ds-table__num\">All day</td><td class=\"ds-table__num\">412</td><td><span class=\"ds-badge\" data-component=\"badge\">General release</span></td></tr>\n          </tbody>\n        </table>\n      </div>\n      <div class=\"ds-table__foot\">\n        <span class=\"ds-label\">5 of 37 screenings</span>\n        <ul class=\"ds-pagination\" data-component=\"pagination\">\n          <li><a class=\"ds-pagination__link is-disabled\" href=\"#screenings\">Prev</a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#screenings\">01</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#screenings\">02</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#screenings\">03</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#screenings\">Next</a></li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"stills\">\n  <div class=\"ds-wrap ds-top\">\n    <div class=\"ds-top__line ds-label\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Salt road</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#stills\">Stills</a></li>\n        <li class=\"ds-breadcrumb__current\">Frame 01</li>\n      </ol>\n      <span class=\"ds-label--mono\">04 / 05</span>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Stills</h1>\n        <p class=\"ds-page-header__text\">Twelve frames scanned from the camera negative.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#press\">Press kit</a>\n      </div>\n    </div>\n  </div>\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-stack\">\n      <div class=\"ds-carousel\">\n        <ul class=\"ds-carousel__track\">\n          <li class=\"ds-carousel__slide\"><span class=\"ds-still\"><span class=\"ds-still__label ds-label ds-label--mono\"><span>Frame 01, the crossing</span><span>00:04:11:08</span></span></span></li>\n          <li class=\"ds-carousel__slide\"><span class=\"ds-still ds-still--door\"><span class=\"ds-still__label ds-label ds-label--mono\"><span>Frame 02, the station</span><span>00:31:52:14</span></span></span></li>\n        </ul>\n        <div class=\"ds-carousel__nav\">\n          <span class=\"ds-label ds-label--mono\">01 / 12</span>\n          <span class=\"ds-carousel__dots\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></span>\n          <a class=\"ds-carousel__arrow is-disabled\" href=\"#stills\" aria-label=\"Previous still\"></a>\n          <a class=\"ds-carousel__arrow\" href=\"#stills\" aria-label=\"Next still\"></a>\n        </div>\n      </div>\n      <div class=\"ds-thumbs\">\n        <span class=\"ds-still ds-still--door\"></span>\n        <span class=\"ds-still ds-still--night\"></span>\n        <span class=\"ds-still ds-still--road\"></span>\n        <span class=\"ds-still ds-still--sea\"></span>\n      </div>\n      <div class=\"ds-cols ds-cols--even\">\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"still-title\">\n            <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"still-title\">Download frame 01?</h2><a class=\"ds-dialog__close\" href=\"#stills\" aria-label=\"Close\"></a></div>\n            <div class=\"ds-dialog__body\"><p>Full resolution, 48 MB. Free for editorial use with the credit line; not for advertising.</p></div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button\" href=\"#stills\">Download</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#stills\">Not now</a>\n            </div>\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 photographs from the set yet</p>\n          <p class=\"ds-empty__text\">The set photographs are released with the film on 12 March.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#press\">Ask the press office</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"press\">\n  <div class=\"ds-wrap ds-top\">\n    <div class=\"ds-top__line ds-label\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Salt road</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#press\">Press</a></li>\n        <li class=\"ds-breadcrumb__current\">Notes</li>\n      </ol>\n      <span class=\"ds-label--mono\">05 / 05</span>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Press notes</h1>\n        <p class=\"ds-page-header__text\">The production in its own words, the kit, and the way to a screening.</p>\n      </div>\n    </div>\n    <span class=\"ds-still ds-still--sliver ds-still--night\" aria-hidden=\"true\"></span>\n  </div>\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-prose\" data-component=\"typography\">\n          <h1>A walk across a dry sea</h1>\n          <p class=\"ds-prose__lead\">The film was shot in order, on foot, with a crew small enough to carry what it needed.</p>\n          <p>Every morning began with <strong>forty minutes of usable light</strong>. The camera was loaded the night before and nothing was lit that the sun did not light. The slate for the first shot read <code>SR 001 A</code>.</p>\n          <h2>The valley</h2>\n          <p>No road reaches it. The unit walked in with mules and stayed nine weeks.</p>\n          <h3>What the kit holds</h3>\n          <ul>\n            <li>Production notes, sixteen pages</li>\n            <li>Twelve stills at full resolution</li>\n            <li>The trailer and two scenes for broadcast</li>\n          </ul>\n        </div>\n        <ul class=\"ds-linkrow\" data-component=\"links\">\n          <li><a class=\"ds-link\" href=\"#stills\">The stills</a></li>\n          <li><a class=\"ds-link is-visited\" href=\"#cast\">Cast and crew (seen)</a></li>\n          <li><a class=\"ds-link is-hover\" href=\"#screenings\">Screenings</a></li>\n          <li><a class=\"ds-link is-active\" href=\"#press\">The press kit</a></li>\n          <li><a class=\"ds-link ds-link--quiet\" href=\"#home\">Back to the film</a></li>\n        </ul>\n        <div class=\"ds-accordion\">\n          <details class=\"ds-accordion__item\" open>\n            <summary class=\"ds-accordion__head\">Why film, and why 65 mm?</summary>\n            <p class=\"ds-accordion__body\">Because the valley is mostly horizon, and the horizon needs the room.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">How much was shot on location?</summary>\n            <p class=\"ds-accordion__body\">All of it. There is no studio day in the schedule.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Is there a version with an interval?</summary>\n            <p class=\"ds-accordion__body\">No. It runs 127 minutes in one piece.</p>\n          </details>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-sidebar\" data-component=\"sidebar\">\n          <p class=\"ds-label ds-sidebar__title\">In the kit</p>\n          <div class=\"ds-sidebar__list\">\n            <a class=\"ds-sidebar__item is-current\" href=\"#press\">Production notes <span class=\"ds-sidebar__count\">16 p</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#stills\">Stills <span class=\"ds-sidebar__count\">12</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#press\">Trailer <span class=\"ds-sidebar__count\">02:14</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#cast\">Credits <span class=\"ds-sidebar__count\">65</span></a>\n          </div>\n        </div>\n        <form class=\"ds-form\" data-component=\"form\" action=\"#press\">\n          <p class=\"ds-label ds-label--accent\">Ask for a press screening</p>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"press-name\">Name</label>\n            <input class=\"ds-form__input\" id=\"press-name\" type=\"text\" value=\"A. Critic\">\n          </div>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"press-mail\">E-mail address</label>\n            <input class=\"ds-form__input is-error\" id=\"press-mail\" type=\"email\" value=\"critic@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=\"press-city\">City</label>\n            <select class=\"ds-form__select\" id=\"press-city\">\n              <option>Rotterdam, 3 March</option>\n              <option>Lyon, 3 March</option>\n              <option>Leipzig, 4 March</option>\n            </select>\n          </div>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"press-note\">Outlet and deadline</label>\n            <textarea class=\"ds-form__textarea\" id=\"press-note\" placeholder=\"Where the piece runs, and when\"></textarea>\n          </div>\n          <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> I will hold my review until 5 March.</label>\n          <div class=\"ds-form__actions\" data-component=\"buttons\">\n            <button class=\"ds-button\" type=\"submit\">Send request</button>\n            <a class=\"ds-button ds-button--secondary\" href=\"#screenings\">Public screenings</a>\n            <button class=\"ds-button ds-button--danger\" type=\"button\">Withdraw</button>\n            <button class=\"ds-button is-disabled\" type=\"button\" disabled>Sent</button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-wrap ds-footer__inner\">\n    <a class=\"ds-brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" aria-hidden=\"true\"><path d=\"M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5\"/><circle cx=\"12\" cy=\"12\" r=\"4.5\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <p class=\"ds-footer__about\">A chronoskin picture. Salt road. Photographed on 65 mm film. Certificate 12, running time 127 minutes. In cinemas 12 March.</p>\n    <ul class=\"ds-footer__list\">\n      <li><a class=\"ds-footer__link\" href=\"#home\">The film</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#cast\">Cast and crew</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#screenings\">Screenings</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#stills\">Stills</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#press\">Press</a></li>\n    </ul>\n    <p class=\"ds-footer__legal ds-label\">2026 chronoskin. All rights reserved.</p>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.cinematic.portal.s02.p08.t07.u02\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"cinematic\",\n    \"years\": [\n      2015,\n      2026\n    ]\n  },\n  \"archetype\": \"portal\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-ci-2872\",\n  \"short\": \"v1-ci-2872\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #f1f4f6;\n  --color-canvas: #f1f4f6;\n  --color-surface: #ffffff;\n  --color-surface-alt: #e8edf1;\n  --color-surface-strong: #d7dfe6;\n  --color-bar: #0a1420;\n  --color-bar-text: #eef6fb;\n  --color-bar-alt: #e3e9ee;\n  --color-bar-alt-text: #3c4a58;\n  --color-inverse: #0f1c2a;\n  --color-inverse-text: #eef6fb;\n  --color-text: #2a3541;\n  --color-text-muted: #64717e;\n  --color-heading: #0a1420;\n  --color-heading-alt: #0a7a61;\n  --color-link: #0a6a55;\n  --color-link-quiet: #55626f;\n  --color-link-visited: #4a6a73;\n  --color-link-hover: #0c9c7c;\n  --color-link-active: #064d3f;\n  --color-border: #c5cfd8;\n  --color-border-strong: #0a1420;\n  --color-border-muted: #dce3e9;\n  --color-accent: #2ee0a6;\n  --color-accent-text: #05241b;\n  --color-accent-alt: #7cc4f5;\n  --color-fill-1: #dfe7ed;\n  --color-fill-2: #cddbe5;\n  --color-fill-3: #d6ece6;\n  --color-fill-4: #bccddb;\n  --color-button: #0a1420;\n  --color-button-text: #f1f4f6;\n  --color-button-hover-text: #05241b;\n  --color-button-secondary: #ffffff;\n  --color-button-secondary-text: #0a1420;\n  --color-input: #ffffff;\n  --color-input-text: #0a1420;\n  --color-input-border: #a9b6c2;\n  --color-disabled: #e1e6ea;\n  --color-disabled-text: #98a3ad;\n  --color-danger: #c4352b;\n  --color-danger-surface: #fbe9e6;\n  --color-success: #0c7f5f;\n  --color-warning: #a2660a;\n  --color-notice: #e6f3ef;\n  --color-notice-text: #123a30;\n  --color-focus: #0c9c7c;\n  --color-shadow: rgb(10 20 32 / 0.16);\n  --color-overlay: rgb(10 20 32 / 0.5);\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: 1px;\n  --border-style: solid;\n  --radius-control: 999px;\n  --radius-panel: 2px;\n  --radius-pill: 999px;\n  --radius-page: 4px;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: 0 8px 30px var(--color-shadow);\n  --shadow-control-pressed: none;\n  --shadow-dialog: 0 40px 120px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: radial-gradient(ellipse 120% 80% at 50% 0%, color-mix(in srgb, var(--color-page) 90%, white), var(--color-page) 70%);\n  --fill-bar: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='white' opacity='.3' transform='translate(0 .5)'%3E%3Cpath opacity='.4' d='M54 0h1M62 3h1M8 4h1M183 4h1M8 5h1M77 5h1M199 5h1M96 7h1M106 7h1M124 7h1M131 7h1M109 8h1M21 9h1M182 9h1M25 10h1M155 10h1M15 11h1M137 11h1M188 11h1M107 12h1M53 13h1M2 15h1M16 15h1M42 16h1M55 16h1M4 17h1M7 17h1M98 17h1M184 17h1M34 18h1M107 18h1M157 18h1M18 19h1M82 19h1M121 19h1M18 20h1M154 20h1M138 21h1M57 22h1M86 22h1M99 22h1M52 25h1M180 25h1M127 26h1M26 27h1M43 28h1M178 28h1M98 29h1M194 30h1M149 31h1M183 31h1M116 32h1M99 33h1M146 33h1M180 33h1M196 33h1M34 34h1M147 34h1M77 36h1M199 36h1M160 39h1M193 40h1M133 44h1M98 46h1M53 47h1M157 47h1M9 48h1M116 48h1M143 48h1M150 48h1M185 48h1M9 49h1M27 49h1M64 50h1M50 51h1M127 51h1M193 51h1M23 53h1M81 53h1M156 53h1M0 54h1M37 54h1M70 54h1M71 54h1M45 57h1M5 58h1M32 58h1M39 58h1M79 58h1M194 58h1M68 60h1M65 61h1M54 62h1M34 63h1M68 63h1M114 63h1M156 63h1M29 65h1M100 65h1M121 65h1M124 65h1M7 66h1M113 66h1M82 67h1M172 69h1M16 70h1M196 70h1M8 71h1M167 71h1M45 72h1M131 73h1M27 74h1M125 75h1M65 79h1M90 79h1M179 79h1M65 80h1M79 81h1M134 81h1M72 82h1M61 83h1M118 83h1M156 84h1M79 85h1M32 86h1M112 87h1M127 89h1M87 90h1M185 90h1M121 91h1M23 92h1M2 94h1M139 94h1M153 94h1M163 94h1M1 96h1M120 96h1M105 97h1M169 97h1M171 97h1M54 98h1M75 98h1M84 99h1M181 101h1M27 102h1M132 102h1M34 103h1M105 103h1M3 104h1M68 105h1M101 107h1M140 107h1M162 110h1M56 112h1M24 114h1M29 114h1M19 115h1M35 115h1M101 115h1M159 115h1M115 116h1M21 117h1M137 117h1M148 117h1M87 118h1M112 118h1M199 119h1M35 120h1M115 120h1M111 121h1M19 123h1M22 123h1M99 123h1M150 123h1M119 124h1M31 125h1M112 126h1M121 126h1M75 127h1M113 127h1M29 128h1M167 128h1M89 129h1M114 130h1M115 130h1M9 131h1M47 131h1M38 132h1M50 132h1M51 132h1M185 132h1M42 133h1M160 133h1M178 133h1M139 134h1M3 135h1M94 135h1M44 136h1M120 136h1M23 137h1M79 137h1M105 137h1M88 138h1M104 141h1M161 141h1M115 143h1M122 143h1M131 143h1M134 143h1M139 144h1M166 144h1M140 145h1M69 146h1M71 146h1M127 146h1M164 147h1M56 149h1M97 149h1M133 149h1M35 151h1M69 151h1M112 151h1M10 152h1M107 152h1M61 153h1M79 153h1M1 154h1M100 154h1M3 155h1M173 156h1M128 157h1M167 157h1M62 158h1M107 158h1M3 159h1M40 159h1M95 159h1M130 159h1M50 160h1M12 161h1M27 161h1M121 161h1M144 161h1M149 162h1M153 162h1M177 162h1M23 163h1M59 163h1M143 163h1M4 164h1M107 164h1M184 164h1M83 166h1M157 166h1M137 167h1M84 168h1M87 168h1M157 168h1M1 169h1M103 170h1M126 172h1M45 174h1M3 175h1M4 175h1M19 175h1M21 175h1M50 175h1M85 175h1M23 176h1M148 176h1M173 176h1M187 176h1M188 177h1M33 179h1M50 179h1M100 179h1M189 180h1M21 181h1M173 181h1M10 182h1M45 182h1M64 183h1M80 183h1M105 184h1M74 186h1M106 186h1M17 187h1M48 187h1M127 187h1M188 188h1M40 189h1M167 189h1M52 191h1M43 192h1M132 192h1M2 193h1M22 194h1M6 196h1M144 196h1M2 197h1M7 199h1M50 199h1M69 199h1M127 199h1'/%3E%3Cpath opacity='1' d='M6 3h1M131 3h1M175 4h1M147 5h1M6 9h1M149 10h1M179 10h1M194 11h1M129 12h1M152 14h1M148 15h1M47 18h1M48 18h1M118 19h1M82 21h1M42 24h1M49 24h1M99 24h1M172 24h1M195 24h1M2 25h1M120 25h1M123 27h1M47 29h1M180 29h1M179 30h1M119 36h1M135 39h1M98 40h1M162 40h1M52 44h1M51 46h1M88 46h1M37 48h1M153 48h1M80 49h1M194 50h1M24 51h1M32 51h1M30 52h1M110 53h1M164 54h1M18 57h1M12 59h1M34 59h1M34 61h1M193 62h1M197 62h1M66 64h1M122 64h1M60 65h1M22 66h1M167 69h1M66 71h1M40 72h1M107 72h1M143 72h1M191 75h1M87 77h1M153 79h1M13 80h1M185 81h1M34 84h1M76 86h1M70 87h1M194 87h1M131 90h1M2 91h1M13 91h1M91 92h1M31 93h1M153 95h1M5 96h1M165 96h1M19 99h1M175 99h1M83 100h1M191 101h1M195 101h1M113 102h1M134 102h1M40 103h1M46 103h1M94 103h1M162 105h1M130 106h1M111 107h1M119 109h1M135 111h1M104 116h1M106 116h1M98 120h1M73 123h1M145 123h1M43 126h1M109 126h1M131 127h1M157 131h1M11 133h1M55 135h1M93 135h1M46 136h1M40 137h1M55 138h1M140 138h1M19 140h1M195 141h1M103 145h1M133 145h1M12 148h1M129 149h1M156 150h1M49 154h1M62 154h1M80 154h1M138 156h1M29 157h1M135 157h1M12 159h1M163 159h1M103 160h1M189 160h1M52 161h1M180 161h1M3 162h1M129 162h1M25 163h1M136 163h1M113 165h1M55 168h1M69 170h1M152 171h1M34 174h1M145 174h1M128 175h1M137 177h1M29 180h1M139 180h1M169 183h1M52 184h1M109 184h1M25 185h1M33 186h1M27 189h1M92 189h1M29 190h1M104 193h1M87 195h1M110 195h1M94 196h1M55 199h1M190 199h1'/%3E%3C/g%3E%3C/svg%3E\") var(--color-bar);\n  --fill-bar-alt: color-mix(in srgb, var(--color-bar-alt) 72%, transparent);\n  --fill-inverse: linear-gradient(180deg, var(--color-inverse), color-mix(in srgb, var(--color-inverse) 90%, black));\n  --fill-accent: var(--color-accent);\n  --fill-panel: color-mix(in srgb, var(--color-surface) 80%, transparent);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 84%, black);\n  --fill-button-secondary: color-mix(in srgb, var(--color-button-secondary) 30%, transparent);\n  --fill-input: transparent;\n  --focus-ring: 1px solid var(--color-focus);\n  --transition: all 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);\n  --backdrop-blur: 14px;\n}\n"
  }
}