{
  "id": "v1-ci-4253",
  "long_id": "v1.cinematic.landing.s04.p02.t05.u03",
  "name": "Cinematic collection",
  "era": {
    "slug": "cinematic",
    "code": "ci",
    "name": "Cinematic",
    "years": [
      2015,
      2026
    ],
    "description": "The immersive site of 2015 to 2026 for a band, a film, a fashion house or a game: one scene to a screen, edge to edge and mostly dark, enormous condensed capitals set tight, almost no chrome, thin rules and small tracked labels, one colour used like a light."
  },
  "archetype": "landing",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "This is the site of a fashion house showing one season between 2015 and 2026: a pale page of bone paper, the season's name in enormous tight grotesque capitals at the left and one tall framed picture of the show's hall at the right, then the looks as a strip of tall frames in the order they walk. Pictures are printed rather than lit, paper and one deep blue like a cyanotype, and everything else is near-black type, hairlines and a few heavy bars. It was the common look of collection, lookbook and show sites of fashion houses in the second half of the 2010s and the first half of the 2020s.",
  "url": "https://chrono.skin/s/v1-ci-4253",
  "preview_url": "https://chrono.skin/s/v1-ci-4253/specimen.html",
  "files": {
    "STYLE.md": "# Cinematic collection\n\n## Summary\n\nThis is the site of a fashion house showing one season between 2015 and 2026: a pale page of bone paper, the season's name in enormous tight grotesque capitals at the left and one tall framed picture of the show's hall at the right, then the looks as a strip of tall frames in the order they walk. Pictures are printed rather than lit, paper and one deep blue like a cyanotype, and everything else is near-black type, hairlines and a few heavy bars. It was the common look of collection, lookbook and show sites of fashion houses in the second half of the 2010s and the first half of the 2020s.\n\n## Layout\n\n- The page is fluid and designed at 1440px. Content sits in `.ds-wrap`, centred, at most `--size-page` (1360px) wide with `--space-6` side padding (`--space-4` on a phone). Sections pad themselves with `--space-8` (88px), `--tight` with `--space-7`; `--ruled` opens with a strong hairline.\n- Navigation is `.ds-nav`, one line `--size-nav` (64px) tall on the page colour, not over a picture: the brand at the left, four links in the middle, each led by its number, and at the right the word Index (a `.ds-menu` that drops a sheet in the corner) and a small secondary button. A strong hairline runs under it and a heavy accent mark under the current link.\n- The home view stacks: `.ds-hero`, split 7 to 5: at the left `.ds-hero__copy` on the page (kicker, the two-line title, and a foot with the lead, the show's countdown as a `.ds-progress` and two buttons), at the right `.ds-hero__frame`, one tall picture `--size-scene` (720px) high with a hairline frame and four captions; a section with the `.ds-carousel`, the runway, five tall `.ds-look` frames to a screen; the `.ds-band` with the show's date; the `.ds-stat` row under heavy bars; the `.ds-grid` of four cloths; the `.ds-list` of notes.\n- Inner pages have no hero and no picture at their head: type alone. Each opens inside `.ds-wrap` with `.ds-top` (the breadcrumb at the left, the page's number such as `02 / 04` at the right) and the `.ds-page-header`: a very large title with one line of text under it and at most two buttons at the right, on a rule of `--border-width-strong`. Then `.ds-main` with `.ds-cols`: a narrow column `--size-side` (240px) with the `.ds-sidebar` and a wide one; `--look` is 5 to 7, `--even` two halves. Tabs sit in a `.ds-toolbar` at the top of the wide column with a switch at its right end.\n- Views. The specimen is the site of a house showing its autumn collection. `home` is the season. `looks` has the parts of the show as a sidebar, two notices and an empty state at the left, and tabs with a switch, six looks in a grid of three with badges and a tooltip, and the pagination at the right. `look` shows one look: its frame and the cutter as an avatar at the left; a panel of facts, the table of pieces, notes as prose, links and an accordion at the right. `show` is the request for a seat: the form with its error and all four buttons, a panel with the seats held as a progress line and two switches, and the open dialog.\n- Below 1100px the hero and the columns stack, the runway shows three frames and the grid and the figures go two by two; below 800px the navigation becomes two rows (the links scroll sideways), the page header stacks, the runway shows two frames and a part of the third and the looks go two by two; below 520px the grid is one column. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px, `--space-2` 8px (label to text), `--space-3` 12px (between buttons, caption to frame), `--space-4` 18px (gaps between frames and cells, panel padding), `--space-5` 26px (rows of the list, column gaps in rows), `--space-6` 36px (page gutter, stack gap, the hero's padding), `--space-7` 56px (section head to content, columns, tight sections), `--space-8` 88px (sections, the indent of the title's second line), `--space-9` 136px. `--space-track` 1.5px is the tracking of labels.\n- Other sizes: `--size-mark` 26px, `--size-control` 46px, `--size-dialog` 460px.\n- On a phone (800px and below) `.ds-nav__inner` has two rows: the `.ds-brand` and `.ds-nav__actions` above, `.ds-nav__links` below on a hairline, one row that scrolls sideways. At 520px and below `.ds-nav__links` and the button in `.ds-nav__actions` are not shown: the Index `.ds-menu` stays and is the navigation, its list opening as a full row under the bar with every `.ds-menu__item` set at `--text-h2` and the current view marked by a `--color-accent` rule under it.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- These are the conventions of the era, kept from its first layout. A block stands on one of five grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. A scene (a picture) stands on the bar, `--fill-bar` or `--color-bar`, and carries only `--color-bar-text`. The footer stands on `--fill-bar-alt` and carries `--color-bar-alt-text`. The inverted block (`--fill-inverse`, `.ds-band`) carries only `--color-inverse-text`. Accent elements (`--fill-accent`: badges) carry `--color-accent-text`.\n- Pictures are drawn, never loaded. In a picture `--color-bar` is the ground and every solid shape is a silhouette in it; `--color-accent` is the light; `--color-accent-alt` is the second light; `--color-fill-1` to `--color-fill-4` are the tones between; `--color-bar-text` is the hottest point of a light. The texture of a picture comes from `--fill-bar`: `.ds-scene__grain` takes that fill less its own colour (two background layers blended by difference) and lays it over the finished picture, so a surface set changes the texture of every picture and it shows on a dark and on a pale ground alike.\n- Nothing assumes that a palette is dark. A picture is as dark as `--color-bar`, the page as dark as `--color-page`; `--color-inverse` is the opposite of the page.\n- The fills are also the grounds of grid cells and carry `--color-text` and `--color-heading`, never `--color-bar-text` or `--color-inverse-text` as running text.\n- Buttons by ground. On the page, panels and fills: `.ds-button` (`--fill-button`, `--color-button-text`) and `.ds-button--secondary` (`--fill-button-secondary`, text and outline in `--color-button-secondary-text`). On a scene only `.ds-button--onscene` (fill `--color-bar-text`, text `--color-bar`) and `.ds-button--ghost`. On the inverted block only `.ds-button--inverse` and `.ds-button--ghost`. The destructive button is `--color-danger` with `--color-button-text`.\n- `--color-heading-alt` is the colour of kickers, numbers used as labels, panel and sidebar titles and h3 in prose. The label is the second voice: `--font-ui` at `--text-small` or `--text-ui`, `--ui-transform`, tracked by `--space-track` (a layout token; the type vocabulary has no positive tracking for labels). Dates, times, prices and counts are labels in `--font-mono`.\n- The default badge is `--fill-accent` with `--color-accent-text`. Status badges are never fills: the status colour is text, outline and a small dot on a transparent ground. `.ds-badge--quiet` is an outline in `--color-border`.\n- `--color-notice` with `--color-notice-text` is the information notice, with a left edge of `--border-width-strong` in `--color-accent`; the error notice is `--color-danger` on `--color-danger-surface`.\n- Borders: `--border-width` in `--color-border` between rows and around panels, `--color-border-strong` for the rules that open a table, a list or a page, `--color-border-muted` inside boxes, `--color-input-border` around fields. `--border-width-strong` marks the current item (navigation, tabs, pagination), the progress line and the notice edge. Every border takes `--border-style`.\n- Radii: `--radius-control` for buttons, fields and carousel arrows; `--radius-panel` for panels, notices, the dialog, the empty state and tooltips; `--radius-pill` for badges, switches and avatars; `--radius-page` for the largest boxes (pictures, grid cells). Shapes inside a drawing use percentages and `clip-path`, never a radius token.\n- Shadows: `--shadow-panel` on panels and grid cells, `--shadow-control` on buttons and the brand tile, `--shadow-control-hover` on hovered buttons and cells, `--shadow-dialog` on the dialog and an open menu. `--backdrop-blur` blurs what lies behind the dialog's veil.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: lights and haze are a light token mixed with `transparent` or with a fill; hairlines on a picture are `currentColor` at 24 to 40%; the rim of light on a figure is a `drop-shadow` of twice `--border-width` in the accent; the largest type steps down as a share of its own token at 1100px, 800px and 520px, so every type set shrinks in proportion to itself; the hero title is also held to 13vw, so a wider type set cannot push it out of the column.\n- Here: the page is a deep green-black `#0b1410`, pictures are darker still, text is ivory and grey green, and the one colour is brass, `--color-accent`, with a pale jade `--color-accent-alt` as the daylight of a skylight. The fills are three greens and one bronze brown. The primary button is brass with dark text; the inverted block is parchment.\n- Four families. `--font-heading` is a display serif (Cormorant Garamond, EB Garamond, Big Caslon, Hoefler Text) for titles and figures, in upper and lower case at weight 400 (`--heading-transform` is `none`); `--font-body` is a text serif (Source Serif, Iowan Old Style, Palatino) at `--text-base` 16px and `--line-body` 1.65; `--font-ui` is a flared sans (Optima, Marcellus) for labels in capitals; `--font-mono` (Fira Mono, Andale Mono, Menlo) sets counts and prices.\n- `--text-display` 150px with `--line-display` 0.92 and `--display-tracking` -4px (the hero title only; its `em` is italic in `--color-heading-alt`); `--text-h1` 76px (section and page titles, figures); `--text-h2` 38px (room names and numerals, cell titles, the band); `--text-h3` 23px (work titles, sidebar rows, table names, menu, dialog title); `--text-large` 21px (leads).\n- Surface: `--border-style` is `double`, so a rule of `--border-width-strong` (3px) is a pair of fine lines (under the masthead, the page title, the current link and tab, around a work and the dialog) while a hairline of 1px stays single. Corners are eased by 2px, the largest boxes are square. Buttons and badges are short gradients of metal with an inner highlight; panels carry an inner line of light; the dialog and a hung work cast a soft shadow. `--fill-bar` is a weave of fine lines like canvas that lies over every picture and every canvas; `--fill-page` is lighter at the top. Links in running text are underlined. No blur.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets font, text colour and `--fill-page`.\n- `.ds-wrap`: the centred content column, `--size-page` wide.\n- `.ds-label`: the small tracked line. `--muted`, `--accent` (in `--color-heading-alt`), `--mono` for figures.\n- `.ds-brand`: the site's mark and name, in the navigation and again in the footer. `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--arrow` is a label led by a hairline that grows on hover. `.ds-linkrow` lays links in a row.\n- `.ds-button`: a label in a box. Variants: `--secondary`, `--danger` (destructive actions only), `--onscene` (pictures), `--inverse` (the inverted block), `--ghost` (both), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-badge`: small tracked label on `--fill-accent`. `--quiet` outlined. Status variants: `--success`, `--warning`, `--danger`, each an outline with a dot. `.ds-badgerow` for several.\n- `.ds-notice`: a ruled message with a strong left edge; `--error` in the danger colours. `.ds-notice__title` is the tracked lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` labels; `is-current` is underlined with `--color-accent`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a label trail of `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a block of `--color-overlay` (blurring by `--backdrop-blur`) centring `.ds-dialog__box`, a panel with a strong outline and `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, a drawn cross `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions` with the main action first.\n- `.ds-empty`: a hairline box with a short accent rule (`.ds-empty__icon`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-switch`: an on/off control over a checkbox: `.ds-switch__input` (invisible, covers the row), `.ds-switch__track` with its knob, `.ds-switch__label` with an optional `small` line. On is `is-on` or `:checked`: outline and knob in `--color-accent`.\n- `.ds-tooltip`: a dotted-underlined trigger holding `.ds-tooltip__tip`, a small inverted box shown on hover, focus or `is-open`; `--end` aligns it to the right edge.\n- `.ds-avatar`: a person drawn as a backlit head and shoulders from the picture colours; `--2` lit from the left with `--color-accent-alt`, `--3` from above; `--large` doubles it. `.ds-person` sets one beside `.ds-person__name` and `.ds-person__role`.\n- `.ds-progress`: `.ds-progress__head` (a label and a `.ds-progress__value` in mono) over `.ds-progress__bar`, a `<progress>` drawn as a line of `--border-width-strong` with the value in `--color-accent`.\n- `.ds-accordion`: ruled `<details>`: `.ds-accordion__item` with a `.ds-accordion__head` label that ends in a plus (a cross when open) and a `.ds-accordion__body`.\n- `.ds-band`: the inverted block, `.ds-band__inner` inside. Only `.ds-button--inverse` and `.ds-button--ghost` on it.\n- `.ds-stack`: stacks blocks one step apart; `--tight` closer. `.ds-main` is the body of an inner page. `.ds-facts` is a `dl` of label and value pairs inside a panel.\n- `.ds-table`: a ruled table: a label head under a strong rule, hairlines between rows, no vertical lines; `is-hover` tints a row. `.ds-table__num` right-aligns figures in mono; `.ds-table__title` is the row's name in the heading face. Wrap it in `.ds-table__wrap`; `.ds-table__foot` holds a count and the pagination.\n- `.ds-panel`: a hairline box: `.ds-panel__head` with a label `.ds-panel__title` and an optional badge, and `.ds-panel__body`; `.ds-panel__text` is a paragraph.\n- `.ds-section`: a block of the page; `--tight`. `.ds-section__head` holds a `.ds-section__kicker`, the `.ds-section__title` and an arrow link at the right.\n- `.ds-figure`: one standing person in a long coat seen from behind, a silhouette in `--color-bar` with a rim of light; it stands inside a picture and is placed by that picture.\n- `.ds-scene`: the picture of the hall, a positioned box on `--fill-bar` in `--color-bar-text` whose first children are empty layers, in this order: `.ds-scene__wall` (the back wall), `.ds-scene__side` and `.ds-scene__side--right` (the two side walls: windows between piers, cut to the lines of the perspective), `.ds-scene__lines` (floorboards and ceiling beams running to the vanishing point), `.ds-scene__floor` (the light of the door on the floor), `.ds-scene__door` (the door of light and its glow), `.ds-scene__cast` (the figure's shadow), `.ds-figure`, `.ds-scene__shade` (a vignette), `.ds-scene__grain`, `.ds-scene__frame` (a hairline inside the edge) and two `.ds-scene__caption` lines of mono labels (`--foot` for the lower one). One per site.\n- `.ds-look`: one tall frame (3 to 5) of the lookbook: `.ds-look__set` (the set behind the figure, one box of gradients), `.ds-figure`, `.ds-scene__grain` and `.ds-look__label` (two mono labels across the head); a `.ds-badge` placed inside sits at the lower left. Sets: the default is a door of light; `--2` the light of a slatted window across a wall; `--3` one lamp overhead and its pool; `--4` a flight of stairs under a slit of window; `--5` a lit curtain.\n- `.ds-nav`: the line on the page. `.ds-nav__inner` holds the brand, `.ds-nav__links` of numbered `.ds-nav__link` (the current one in the heading colour on a heavy accent mark, `is-current`) and `.ds-nav__actions`. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-menu`: a `<details>` in the navigation: `.ds-menu__toggle` (the word and a plus) and `.ds-menu__list` of numbered `.ds-menu__item` in the heading face, a sheet with a strong outline that drops in the corner. Closed until clicked.\n- `.ds-hero`: the split head of the home view: `.ds-hero__copy` with `.ds-hero__kicker` (a badge and two mono labels), `.ds-hero__title` of two lines, the second indented, and `.ds-hero__foot` with `.ds-hero__lead` and `.ds-hero__side` (the countdown and `.ds-hero__actions`); `.ds-hero__frame` is the `.ds-scene` at the right. One per site.\n- `.ds-carousel`: the runway: `.ds-carousel__track` of `.ds-carousel__slide` (a `.ds-look` over `.ds-carousel__title` and a label), five to a screen, then `.ds-carousel__nav` with a count, `.ds-carousel__dots` of `.ds-carousel__dot` drawn as segments of a heavy line, and two `.ds-carousel__arrow`.\n- `.ds-stat`: the row of four figures; each `.ds-stat__item` is a `.ds-stat__figure` over a `.ds-stat__label`, under a heavy bar.\n- `.ds-grid`: four cloths in one row, the outer two twice as wide, one on each fill and each with its own weave of fine lines; a `.ds-grid__cell` is a link with a mono label at the top and `.ds-grid__title` and `.ds-grid__text` at the bottom.\n- `.ds-list`: notes as ruled rows: each `.ds-list__item` is a mono `.ds-list__meta` (date and subject), a `.ds-list__title` with a `.ds-list__text` under it, and an arrow link; a hovered row is tinted.\n- `.ds-band`: here it holds the show: a label over `.ds-band__date` at the left, `.ds-band__side` with a label and the button at the right.\n- `.ds-top`: the line that opens an inner page: breadcrumb and page number.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__main` with the `.ds-page-header__title` and one line of `.ds-page-header__text`; `.ds-page-header__actions` at the right with ordinary buttons, since it stands on the page.\n- `.ds-cols`: narrow and wide column; `--look`, `--even`. `.ds-toolbar` sets the tabs and a switch on one line. `.ds-looks` is the grid of three `.ds-looks__item` (a look over its name and a badge or label).\n- `.ds-sidebar`: `.ds-sidebar__title` label and a `.ds-sidebar__list` of ruled `.ds-sidebar__item` labels with a `.ds-sidebar__count`; the current one has a heavy accent mark at its left.\n- `.ds-tabs`: labels on a hairline; the current `.ds-tabs__tab` (`is-current`) stands on a heavy accent mark.\n- `.ds-footer`: the closing block on `--fill-bar-alt`: `.ds-footer__cols` with the brand and a `.ds-footer__about` line, three columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal`.\n\n## Never\n\n- `font-size >= 12px`: labels are the smallest text.\n- `font-size <= 150px`: the exhibition's title is the largest text.\n- `font-weight <= 700`: the display face is set at regular weight.\n- `line-height <= 1.65`: body text is set at 1.65.\n- `text-shadow = none`: type is flat, also on pictures.\n- `border-radius <= 12px`: boxes are square and badges eased by 2px; the only rounder corners are the shoulders of a drawn flask.\n- `border-width <= 3px`: rules are hairlines; 3px marks the current item and the progress line.\n- `box-shadow-blur <= 80px`: shadows are glows, and the widest, around the dialog, ends at 80px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. First decide which ground it stands on (page, panel or fill; picture; inverted block; footer) and take the text token and the buttons of that ground; never put a primary button on a picture or `--color-bar-text` on a fill. A new picture is built the way the existing ones are: it needs a subject that reduces to light and silhouette (a room, a doorway, a horizon, a figure against light, a lamp on an object), several layers of depth, one clear source of light and a frame or caption that says it is a picture; the bar colour for the ground and every solid shape, the accent for the light, the alternate accent for a second light, the fills for the tones between, shapes from percentages, hard gradient stops and `clip-path`, and `.ds-scene__grain` last. An inner page gets a real picture or none: type alone is right, a wash of colour is not. Do not load an image and do not write a colour. If the installing project has photographs or film, they replace the drawn layers and the captions, labels and type stay. Keep type on the `--text-*` tokens, the largest sizes stepped down with the same factors as the specimen, labels tracked by `--space-track`, spacing on the `--space-*` scale, and note any one-off `color-mix()` shade next to its rule.\n",
    "components.css": ":root {\n  --size-page: 1360px;\n  --size-nav: 64px;\n  --size-mark: 26px;\n  --size-control: 46px;\n  --size-dialog: 460px;\n  --size-scene: 720px;\n  --size-side: 240px;\n  --space-track: 1.5px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 18px;\n  --space-5: 26px;\n  --space-6: 36px;\n  --space-7: 56px;\n  --space-8: 88px;\n  --space-9: 136px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n  position: relative;\n  margin: 0;\n  padding: 0;\n  min-height: 100vh;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n.ds-wrap {\n  width: 100%;\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 var(--space-6);\n}\n\n/* label: the small tracked line of the era. Dates, numbers, credits,\n   coordinates and every caption are set in it. */\n.ds-label {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-label--muted {\n  color: var(--color-text-muted);\n}\n.ds-label--mono {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* brand: the mark on a small tile dressed like the primary button */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  padding: var(--space-1);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n  max-width: 64ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  font-size: var(--text-h2);\n}\n.ds-prose h2 {\n  margin-top: var(--space-6);\n  font-size: var(--text-h3);\n}\n.ds-prose h3 {\n  margin-top: var(--space-5);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-prose p {\n  margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: var(--space-3) 0 0;\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-top: var(--space-1);\n}\n.ds-prose li::marker {\n  color: var(--color-heading-alt);\n}\n.ds-prose strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  line-height: 1.35;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: var(--space-1);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-link--arrow {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-link--arrow:visited {\n  color: inherit;\n}\n.ds-link--arrow::before {\n  content: \"\";\n  width: var(--space-6);\n  height: var(--border-width);\n  background: currentColor;\n  transition: var(--transition);\n}\n.ds-link--arrow:hover::before,\n.ds-link--arrow.is-hover::before {\n  width: var(--space-7);\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* buttons: flat labels in a box. The filled one is the single bright\n   object of a screen. */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n  opacity: 0.8;\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  box-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: color-mix(in srgb, var(--color-button-secondary-text) 14%, transparent);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  border-color: var(--color-danger);\n  background: var(--color-danger);\n  color: var(--color-button-text);\n  box-shadow: none;\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  border-color: currentColor;\n  background: transparent;\n  color: inherit;\n  box-shadow: none;\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  background: color-mix(in srgb, currentColor 16%, transparent);\n}\n.ds-button--onscene,\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover {\n  border-color: var(--color-bar-text);\n  background: var(--color-bar-text);\n  color: var(--color-bar);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  border-color: var(--color-inverse-text);\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n  box-shadow: none;\n}\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  opacity: 0.86;\n}\n.ds-button--small {\n  min-height: calc(var(--size-control) - var(--space-3));\n  padding: var(--space-1) var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: transparent;\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  box-shadow: none;\n  opacity: 1;\n  cursor: not-allowed;\n}\n.ds-buttonrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: grid;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-form__label {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-heading);\n  box-shadow: none;\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(var(--size-control) * 3);\n  padding: var(--space-3) var(--space-4);\n  border-radius: var(--radius-panel);\n  line-height: var(--line-body);\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n  outline-offset: 0;\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n}\n.ds-form__hint {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-form__checkbox {\n  flex: none;\n  width: var(--space-4);\n  height: var(--space-4);\n  margin: var(--space-1) 0 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* badge: a tracked word in a hairline box; status variants are the\n   status colour as text and outline, never as a fill */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-badge--quiet {\n  border-color: var(--color-border);\n  background: transparent;\n  color: var(--color-text-muted);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  border-color: currentColor;\n  background: transparent;\n}\n.ds-badge--success {\n  color: var(--color-success);\n}\n.ds-badge--warning {\n  color: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-danger);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n  content: \"\";\n  width: var(--space-1);\n  height: var(--space-1);\n  border-radius: 50%;\n  background: currentColor;\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* notice: a ruled line of text with a strong left edge */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  font-size: var(--text-base);\n}\n.ds-notice--error {\n  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n  border-left-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-notice__title {\n  margin-right: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-noticerow {\n  display: grid;\n  gap: var(--space-2);\n}\n\n/* pagination: numbers as labels, the current one underlined by the light */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: calc(var(--size-control) - var(--space-2));\n  height: calc(var(--size-control) - var(--space-2));\n  padding: 0 var(--space-2);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: inherit;\n  opacity: 0.72;\n}\n.ds-breadcrumb__item a {\n  color: inherit;\n  text-decoration: none;\n}\n.ds-breadcrumb__item::after {\n  content: \"/\";\n  opacity: 0.6;\n}\n.ds-breadcrumb__current {\n  color: inherit;\n}\n\n/* dialog: shown open in the page flow, on the overlay colour */\n.ds-dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-7) var(--space-4);\n  background: var(--color-overlay);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-5) var(--space-5) 0;\n}\n.ds-dialog__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n  position: relative;\n  flex: none;\n  width: var(--space-5);\n  height: var(--space-5);\n  color: var(--color-heading);\n}\n.ds-dialog__close::before,\n.ds-dialog__close::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: var(--border-width);\n  background: currentColor;\n  transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n  transform: rotate(-45deg);\n}\n.ds-dialog__body {\n  padding: var(--space-3) var(--space-5) var(--space-5);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n  display: grid;\n  justify-items: start;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  color: var(--color-text);\n}\n.ds-empty__icon {\n  width: var(--space-7);\n  height: var(--border-width-strong);\n  background: var(--color-accent);\n}\n.ds-empty__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  max-width: 44ch;\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* switch */\n.ds-switch {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  order: 2;\n  width: calc(var(--space-5) * 2);\n  height: var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  background: var(--fill-input);\n  transition: var(--transition);\n}\n.ds-switch__track::after {\n  content: \"\";\n  position: absolute;\n  top: var(--space-1);\n  bottom: var(--space-1);\n  left: var(--space-1);\n  width: calc(var(--space-5) - var(--space-2) - var(--border-width) * 2);\n  border-radius: var(--radius-pill);\n  background: var(--color-text-muted);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n  left: calc(100% - var(--space-5) + var(--space-1) + var(--border-width) * 2);\n  background: var(--color-accent);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-switch__label {\n  color: var(--color-heading);\n}\n.ds-switch__label small {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* tooltip: a dotted label; the hint appears on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  border-bottom: var(--border-width) dotted currentColor;\n  cursor: help;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 6;\n  display: none;\n  width: max-content;\n  max-width: min(32ch, 60vw);\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-panel);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  letter-spacing: 0;\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n\n/* avatar: a backlit head and shoulders, drawn from the scene colours.\n   Each dark shape lies on a lit copy of itself, moved a little towards\n   the light, which leaves a rim. */\n.ds-avatar {\n  position: relative;\n  display: inline-block;\n  flex: none;\n  width: var(--size-control);\n  height: var(--size-control);\n  overflow: hidden;\n  border-radius: var(--radius-pill);\n  background:\n    radial-gradient(ellipse 15% 19% at 50% 41%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 15% 19% at 52% 40%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 50% 60%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 50% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 52% 99%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 60% 50% at 86% 14%, color-mix(in srgb, var(--color-accent) 80%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-4), var(--color-bar));\n}\n.ds-avatar--large {\n  width: calc(var(--size-control) * 2);\n  height: calc(var(--size-control) * 2);\n}\n.ds-person {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-person__name {\n  display: block;\n  color: var(--color-heading);\n}\n.ds-person__role {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n\n/* progress: a hairline with the light running along it */\n.ds-progress {\n  display: block;\n  min-width: 0;\n}\n.ds-progress__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-progress__value {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.ds-progress__bar {\n  display: block;\n  width: 100%;\n  height: var(--border-width-strong);\n  overflow: hidden;\n  appearance: none;\n  -webkit-appearance: none;\n  border: 0;\n  background: color-mix(in srgb, var(--color-accent) 24%, transparent);\n}\n.ds-progress__bar::-webkit-progress-bar {\n  background: transparent;\n}\n.ds-progress__bar::-webkit-progress-value {\n  background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n  background: var(--color-accent);\n}\n\n/* accordion */\n.ds-accordion {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__head::after {\n  content: \"\";\n  flex: none;\n  align-self: center;\n  display: inline-block;\n  width: calc(var(--space-2) * 1.25);\n  height: calc(var(--space-2) * 1.25);\n  background: currentColor;\n  clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n  color: var(--color-heading-alt);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after {\n  rotate: 45deg;\n}\n.ds-accordion__body {\n  max-width: 60ch;\n  margin: 0;\n  padding: 0 0 var(--space-4);\n  color: var(--color-text);\n}\n\n/* scene: the picture of a screen, drawn from tokens. The ground is the\n   bar fill, the light is the accent, the second light the alternate\n   accent, the fills are the tones between, and everything solid is a\n   silhouette in the bar colour. Text on a scene is the bar text colour. */\n.ds-scene {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n/* grain: the texture of the bar fill alone (the fill less its own\n   colour), laid over the finished picture, so it shows on dark and on\n   pale grounds alike */\n.ds-scene__grain {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background: linear-gradient(var(--color-bar), var(--color-bar)), var(--fill-bar);\n  background-blend-mode: difference, normal, normal, normal;\n  mix-blend-mode: difference;\n  pointer-events: none;\n}\n/* figure: one standing person in a long coat, seen from behind, with a\n   rim of light on the side of the lamp */\n.ds-figure {\n  position: absolute;\n  bottom: 9%;\n  left: 50%;\n  z-index: -1;\n  height: 56%;\n  aspect-ratio: 0.3;\n  transform: translateX(-50%);\n  filter: drop-shadow(calc(var(--border-width) * 2) 0 0 color-mix(in srgb, var(--color-accent) 70%, var(--color-bar-text)));\n  pointer-events: none;\n}\n.ds-figure::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--color-bar);\n  clip-path: polygon(43% 0, 57% 0, 63% 3%, 64% 8%, 59% 12%, 58% 14%, 80% 17%, 86% 24%, 90% 52%, 81% 53%, 77% 30%, 75% 50%, 88% 90%, 63% 91%, 62% 100%, 52% 100%, 50% 91%, 48% 100%, 38% 100%, 37% 91%, 12% 90%, 25% 50%, 23% 30%, 19% 53%, 10% 52%, 14% 24%, 20% 17%, 42% 14%, 41% 12%, 36% 8%, 37% 3%);\n}\n\n/* band: the inverted block */\n.ds-band {\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n}\n.ds-band__inner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding-top: var(--space-7);\n  padding-bottom: var(--space-7);\n}\n.ds-stack {\n  display: grid;\n  gap: var(--space-6);\n  min-width: 0;\n}\n\n/* table */\n.ds-table__wrap {\n  overflow-x: auto;\n}\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-table th {\n  padding: var(--space-3) var(--space-3) var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-align: left;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-table td {\n  padding: var(--space-3) var(--space-3) var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  vertical-align: middle;\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n  background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n.ds-table td.ds-table__num {\n  font-size: var(--text-ui);\n}\n.ds-table__title {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n}\n.ds-table__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding-top: var(--space-4);\n  color: var(--color-text-muted);\n}\n\n/* panel */\n.ds-panel {\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__title {\n  margin: 0;\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-panel__body {\n  padding: var(--space-4);\n}\n.ds-panel__text {\n  margin: 0;\n}\n.ds-facts {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n}\n.ds-facts dt {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-facts dd {\n  margin: 0;\n  color: var(--color-heading);\n  text-align: right;\n}\n\n/* section head: a kicker, a large title and a link at the right */\n.ds-section__head {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: var(--space-3) var(--space-6);\n  margin-bottom: var(--space-7);\n}\n.ds-section__kicker {\n  grid-column: 1 / -1;\n  color: var(--color-heading-alt);\n}\n.ds-section__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-scene .ds-section__title,\n.ds-scene .ds-section__kicker,\n.ds-band .ds-section__title {\n  color: inherit;\n}\n\n/* the hall: a long room in one-point perspective. The back wall holds a\n   door of light, both side walls a row of tall windows between piers,\n   the floor carries the light of the door, and one person stands in it. */\n.ds-scene__wall,\n.ds-scene__door,\n.ds-scene__side,\n.ds-scene__floor,\n.ds-scene__lines,\n.ds-scene__cast,\n.ds-scene__shade {\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n}\n.ds-scene__wall {\n  inset: 24% 30% 36% 30%;\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-4) 70%, var(--color-bar)), var(--color-fill-2));\n}\n.ds-scene__door {\n  inset: 30% 41% 36% 41%;\n  background: linear-gradient(to top, var(--color-bar-text) 0, color-mix(in srgb, var(--color-accent) 64%, var(--color-bar-text)) 36%, var(--color-accent) 100%);\n}\n.ds-scene__door::before {\n  content: \"\";\n  position: absolute;\n  inset: -60% -230%;\n  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 62%, transparent), transparent);\n}\n/* side wall: windows between piers, cut to the lines of the perspective */\n.ds-scene__side {\n  inset: 0 70% 0 0;\n  background:\n    linear-gradient(90deg, var(--color-bar) 0 18%, transparent 18% 40%, var(--color-bar) 40% 53%, transparent 53% 68%, var(--color-bar) 68% 77%, transparent 77% 87%, var(--color-bar) 87% 92%, transparent 92% 98%, var(--color-bar) 98%),\n    repeating-linear-gradient(0deg, transparent 0 11%, color-mix(in srgb, var(--color-bar) 70%, transparent) 11% 12%),\n    linear-gradient(90deg, color-mix(in srgb, var(--color-accent-alt) 74%, var(--color-fill-4)), color-mix(in srgb, var(--color-accent) 30%, var(--color-fill-2)));\n  clip-path: polygon(9% 0, 100% 30%, 100% 60%, 0 72%, 0 0);\n}\n.ds-scene__side--right {\n  inset: 0 0 0 70%;\n  transform: scaleX(-1);\n}\n.ds-scene__floor {\n  inset: 64% 0 0 0;\n  background:\n    radial-gradient(ellipse 26% 100% at 50% 0, color-mix(in srgb, var(--color-accent) 70%, var(--color-bar-text)) 0, color-mix(in srgb, var(--color-accent) 60%, transparent) 36%, transparent 100%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-2) 80%, transparent), transparent 90%);\n  clip-path: polygon(30% 0, 70% 0, 100% 50%, 100% 100%, 0 100%, 0 50%);\n}\n/* lines: floorboards and ceiling beams running to the vanishing point */\n.ds-scene__lines {\n  inset: 0;\n  background: repeating-conic-gradient(from 0deg at 50% 52%, transparent 0 4.5deg, color-mix(in srgb, var(--color-bar-text) 18%, transparent) 4.5deg 5deg);\n  clip-path: polygon(30% 64%, 70% 64%, 100% 82%, 100% 100%, 0 100%, 0 82%, 30% 64%, 30% 24%, 12.9% 0, 87.1% 0, 70% 24%, 30% 24%);\n}\n.ds-scene__cast {\n  top: 83%;\n  left: 50%;\n  width: 44%;\n  height: 17%;\n  background: linear-gradient(to bottom, var(--color-bar), color-mix(in srgb, var(--color-bar) 30%, transparent));\n  clip-path: polygon(43% 0, 57% 0, 84% 100%, 16% 100%);\n  transform: translateX(-50%);\n}\n.ds-scene > .ds-figure {\n  bottom: 16.5%;\n  height: 31%;\n}\n.ds-scene__shade {\n  inset: 0;\n  background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 50%, color-mix(in srgb, var(--color-bar) 76%, transparent) 100%);\n}\n/* frame: a hairline inside the edge and two captions say it is a picture */\n.ds-scene__frame {\n  position: absolute;\n  inset: var(--space-3);\n  z-index: -1;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, currentColor 36%, transparent);\n  pointer-events: none;\n}\n.ds-scene__caption {\n  position: absolute;\n  top: var(--space-5);\n  right: var(--space-5);\n  left: var(--space-5);\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0;\n}\n.ds-scene__caption--foot {\n  top: auto;\n  bottom: var(--space-5);\n}\n\n/* look: one tall frame of the lookbook. The set behind the figure is one\n   box of gradients; five sets. */\n.ds-look {\n  position: relative;\n  isolation: isolate;\n  display: block;\n  aspect-ratio: 3 / 5;\n  overflow: hidden;\n  border-radius: var(--radius-page);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-look__set {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background:\n    linear-gradient(to top, var(--color-bar) 0, color-mix(in srgb, var(--color-accent) 44%, var(--color-bar)) 17%, transparent 17%),\n    linear-gradient(to top, var(--color-bar-text) 0, color-mix(in srgb, var(--color-accent) 64%, var(--color-bar-text)) 34%, var(--color-accent) 100%) 50% 55% / 46% 64% no-repeat,\n    radial-gradient(ellipse 66% 52% at 50% 52%, color-mix(in srgb, var(--color-accent) 56%, transparent), transparent 100%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 70%, var(--color-fill-4)), color-mix(in srgb, var(--color-bar) 40%, var(--color-fill-2)));\n}\n.ds-look__set::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n}\n/* blinds: the light of a slatted window thrown across the wall */\n.ds-look--2 .ds-look__set {\n  background:\n    linear-gradient(to top, var(--color-bar) 0, color-mix(in srgb, var(--color-accent) 26%, var(--color-bar)) 17%, transparent 17%),\n    linear-gradient(100deg, color-mix(in srgb, var(--color-fill-4) 50%, var(--color-bar)), color-mix(in srgb, var(--color-bar) 84%, var(--color-fill-2)));\n}\n.ds-look--2 .ds-look__set::before {\n  background: repeating-linear-gradient(0deg, transparent 0 3.4%, color-mix(in srgb, var(--color-accent) 80%, var(--color-bar-text)) 3.4% 6%);\n  clip-path: polygon(6% 34%, 82% 10%, 82% 50%, 6% 74%);\n}\n.ds-look--2 .ds-figure {\n  left: 60%;\n}\n/* spot: one lamp straight above and its pool on the floor */\n.ds-look--3 .ds-look__set {\n  background:\n    radial-gradient(ellipse 44% 6% at 50% 90%, var(--color-bar-text) 0, var(--color-accent) 60%, transparent 100%),\n    conic-gradient(from 163deg at 50% -6%, transparent 0deg, color-mix(in srgb, var(--color-accent) 50%, transparent) 3deg, color-mix(in srgb, var(--color-accent) 34%, transparent) 31deg, transparent 34deg, transparent 360deg),\n    linear-gradient(to top, var(--color-bar) 0, color-mix(in srgb, var(--color-fill-2) 60%, var(--color-bar)) 17%, transparent 17%),\n    linear-gradient(to bottom, var(--color-bar), color-mix(in srgb, var(--color-bar) 70%, var(--color-fill-4)));\n}\n.ds-look--3 .ds-figure {\n  filter: drop-shadow(0 calc(var(--border-width) * -2) 0 color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)));\n}\n/* stairs: a flight in silhouette under a tall slit of a window */\n.ds-look--4 .ds-look__set {\n  background:\n    linear-gradient(to top, var(--color-bar-text), var(--color-accent)) 24% 30% / 7% 46% no-repeat,\n    radial-gradient(ellipse 50% 44% at 26% 40%, color-mix(in srgb, var(--color-accent) 60%, transparent), transparent 100%),\n    linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 60%, var(--color-fill-4)), color-mix(in srgb, var(--color-bar) 50%, var(--color-fill-2)));\n}\n.ds-look--4 .ds-look__set::before {\n  background: var(--color-bar);\n  clip-path: polygon(100% 44%, 86% 44%, 86% 53%, 72% 53%, 72% 62%, 58% 62%, 58% 71%, 44% 71%, 44% 80%, 30% 80%, 30% 89%, 0 89%, 0 100%, 100% 100%);\n}\n.ds-look--4 .ds-figure {\n  bottom: 29%;\n  left: 65%;\n  height: 46%;\n  filter: drop-shadow(calc(var(--border-width) * -2) 0 0 color-mix(in srgb, var(--color-accent) 70%, var(--color-bar-text)));\n}\n/* curtain: heavy folds lit from above */\n.ds-look--5 .ds-look__set {\n  background:\n    linear-gradient(to top, var(--color-bar) 0, color-mix(in srgb, var(--color-accent) 30%, var(--color-bar)) 17%, transparent 17%),\n    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-bar) 88%, transparent) 0, transparent 5%, color-mix(in srgb, var(--color-bar-text) 22%, transparent) 7%, transparent 9%, color-mix(in srgb, var(--color-bar) 88%, transparent) 13%),\n    linear-gradient(to bottom, var(--color-accent), color-mix(in srgb, var(--color-accent) 40%, var(--color-fill-4)) 50%, var(--color-bar));\n}\n.ds-look--5 .ds-figure {\n  left: 42%;\n}\n/* a shade under the two labels at the head of the frame */\n.ds-look__set::after {\n  content: \"\";\n  position: absolute;\n  inset: 0 0 82% 0;\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 80%, transparent), transparent);\n}\n.ds-look__label {\n  position: absolute;\n  top: var(--space-3);\n  right: var(--space-3);\n  left: var(--space-3);\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-2);\n}\n.ds-look > .ds-badge {\n  position: absolute;\n  bottom: var(--space-3);\n  left: var(--space-3);\n}\n\n/* nav: one line on the page colour, the brand at the left, the numbered\n   links in the middle, the index and one button at the right */\n.ds-nav {\n  position: relative;\n  z-index: 5;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n  color: var(--color-heading);\n}\n.ds-nav__inner {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--space-5);\n  min-height: var(--size-nav);\n  padding: 0 var(--space-6);\n}\n.ds-nav__links {\n  display: flex;\n  gap: var(--space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  counter-reset: nav;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  height: var(--size-nav);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: var(--link-decoration-quiet);\n  white-space: nowrap;\n  transition: var(--transition);\n  counter-increment: nav;\n}\n.ds-nav__link::before {\n  content: counter(nav, decimal-leading-zero);\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  letter-spacing: 0;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-heading);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#looks:target) .ds-nav__link[href=\"#looks\"],\n.ds-page:has(#look:target) .ds-nav__link[href=\"#look\"],\n.ds-page:has(#show:target) .ds-nav__link[href=\"#show\"] {\n  color: var(--color-heading);\n  box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent);\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-4);\n}\n\n/* menu: the index of the whole site, a sheet that drops in the corner */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  height: var(--size-nav);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle::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}\n.ds-menu[open] > .ds-menu__toggle::after {\n  rotate: 45deg;\n}\n.ds-menu__list {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  z-index: 8;\n  width: calc(var(--size-side) * 1.5);\n  max-width: 86vw;\n  margin: 0;\n  padding: var(--space-3) var(--space-5) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  list-style: none;\n  counter-reset: menu;\n}\n.ds-menu__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-3);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n  counter-increment: menu;\n}\n.ds-menu__item::before {\n  content: counter(menu, decimal-leading-zero);\n  color: var(--color-heading-alt);\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-link-hover);\n  border-bottom-color: var(--color-border-strong);\n}\n\n/* hero: the page split in two. The title stands on the page at the left;\n   the hall is one tall framed picture at the right. */\n.ds-hero {\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-hero__copy {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: var(--space-6);\n  min-width: 0;\n  padding: var(--space-6);\n}\n.ds-hero__kicker {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  color: var(--color-text-muted);\n}\n.ds-hero__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__title span {\n  display: block;\n}\n.ds-hero__title span + span {\n  margin-left: var(--space-8);\n}\n.ds-hero__foot {\n  display: grid;\n  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);\n  align-items: end;\n  gap: var(--space-5) var(--space-6);\n  padding-top: var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-hero__lead {\n  max-width: 40ch;\n  margin: 0;\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  line-height: 1.25;\n}\n.ds-hero__side {\n  display: grid;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n.ds-hero__frame {\n  min-height: var(--size-scene);\n  margin: var(--space-6) var(--space-6) var(--space-6) 0;\n  border-radius: var(--radius-page);\n}\n\n/* section */\n.ds-section {\n  padding: var(--space-8) 0;\n}\n.ds-section--tight {\n  padding: var(--space-7) 0;\n}\n.ds-section--ruled {\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n\n/* carousel: the runway, a strip of tall frames, five to a screen */\n.ds-carousel {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  gap: var(--space-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  display: grid;\n  flex: 0 0 calc((100% - var(--space-4) * 4) / 5);\n  align-content: start;\n  gap: var(--space-3);\n  min-width: 0;\n  color: var(--color-text);\n  text-decoration: none;\n  scroll-snap-align: start;\n}\n.ds-carousel__title {\n  display: block;\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-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-carousel__nav {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  color: var(--color-heading);\n}\n.ds-carousel__nav > .ds-label {\n  flex: none;\n  white-space: nowrap;\n}\n.ds-carousel__dots {\n  display: flex;\n  flex: 1 1 auto;\n  gap: var(--space-1);\n}\n.ds-carousel__dot {\n  flex: 1 1 0;\n  height: var(--border-width-strong);\n  background: var(--color-border);\n}\n.ds-carousel__dot.is-current {\n  background: var(--color-accent);\n}\n.ds-carousel__arrow {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control);\n  height: var(--size-control);\n  border: var(--border-width) var(--border-style) currentColor;\n  border-radius: var(--radius-control);\n  color: inherit;\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-carousel__arrow::before {\n  content: \"\";\n  flex: none;\n  width: calc(var(--text-ui) * 0.5);\n  height: calc(var(--text-ui) * 0.5);\n  border-left: calc(var(--space-2) / 4) solid currentColor;\n  border-bottom: calc(var(--space-2) / 4) solid currentColor;\n  rotate: 45deg;\n  translate: 25% 0;\n}\n.ds-carousel__arrow + .ds-carousel__arrow::before {\n  rotate: -135deg;\n  translate: -25% 0;\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n  background: var(--color-surface-strong);\n}\n.ds-carousel__arrow.is-disabled {\n  opacity: 0.35;\n}\n\n/* stats: figures under heavy bars */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5);\n  margin: 0;\n}\n.ds-stat__item {\n  display: grid;\n  gap: var(--space-2);\n  padding-top: var(--space-3);\n  border-top: var(--border-width-strong) 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(--heading-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* list: notes from the atelier, a date, a title with a line of text, a link */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n  list-style: none;\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: var(--size-side) minmax(0, 1fr) auto;\n  align-items: baseline;\n  gap: var(--space-5);\n  padding: var(--space-5) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  transition: var(--transition);\n}\n.ds-list__item:hover,\n.ds-list__item.is-hover {\n  background: var(--color-surface-alt);\n}\n.ds-list__meta {\n  color: var(--color-text-muted);\n}\n.ds-list__title {\n  display: block;\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n}\n.ds-list__text {\n  display: block;\n  max-width: 60ch;\n}\n.ds-list__item > .ds-link--arrow {\n  color: var(--color-heading);\n}\n\n/* grid: four swatches of cloth, one on each fill, each with its weave */\n.ds-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);\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  justify-content: space-between;\n  gap: var(--space-8);\n  height: 100%;\n  min-height: calc(var(--size-scene) / 2);\n  padding: var(--space-4);\n  border-radius: var(--radius-page);\n  background:\n    repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-heading) 9%, transparent) 0 var(--border-width), transparent var(--border-width) var(--space-2)),\n    var(--color-fill-1);\n  color: var(--color-text);\n  text-decoration: none;\n  box-shadow: var(--shadow-panel);\n  transition: var(--transition);\n}\n.ds-grid > :nth-child(2) .ds-grid__cell {\n  background:\n    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-heading) 12%, transparent) 0 var(--border-width), transparent var(--border-width) var(--space-3)),\n    var(--color-fill-2);\n}\n.ds-grid > :nth-child(3) .ds-grid__cell {\n  background:\n    repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-heading) 8%, transparent) 0 var(--border-width), transparent var(--border-width) var(--space-1)),\n    var(--color-fill-3);\n}\n.ds-grid > :nth-child(4) .ds-grid__cell {\n  background:\n    repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-heading) 9%, transparent) 0 var(--border-width), transparent var(--border-width) var(--space-4)),\n    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-heading) 9%, transparent) 0 var(--border-width), transparent var(--border-width) var(--space-4)),\n    var(--color-fill-4);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__title {\n  display: block;\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n  display: block;\n  margin: 0;\n}\n\n/* band: the show, its date set as large as a title */\n.ds-band__date {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  font-variant-numeric: tabular-nums;\n}\n.ds-band__side {\n  display: grid;\n  justify-items: start;\n  gap: var(--space-4);\n}\n\n/* inner pages: type alone. A line with the trail and the page's number,\n   then the title on a heavy rule. */\n.ds-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding-top: var(--space-5);\n  color: var(--color-text-muted);\n}\n.ds-page-header {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: var(--space-4) var(--space-6);\n  padding: var(--space-6) 0 var(--space-5);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__main {\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  max-width: 52ch;\n  margin: var(--space-4) 0 0;\n  color: var(--color-text);\n  font-size: var(--text-large);\n  line-height: 1.25;\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-6) 0 var(--space-8);\n}\n.ds-cols {\n  display: grid;\n  grid-template-columns: var(--size-side) minmax(0, 1fr);\n  align-items: start;\n  gap: var(--space-7);\n}\n.ds-cols--look {\n  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n}\n.ds-cols--even {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-5);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-toolbar .ds-tabs {\n  border-bottom: 0;\n}\n.ds-toolbar .ds-switch {\n  padding: 0;\n  border-bottom: 0;\n}\n.ds-looks {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-6) var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-looks__item {\n  display: grid;\n  align-content: start;\n  gap: var(--space-3);\n  color: var(--color-text);\n  text-decoration: none;\n}\n\n/* sidebar */\n.ds-sidebar {\n  display: grid;\n  gap: var(--space-3);\n}\n.ds-sidebar__title {\n  margin: 0;\n  color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover,\n.ds-sidebar__item.is-current {\n  color: var(--color-heading);\n}\n.ds-sidebar__item.is-current {\n  box-shadow: inset var(--border-width-strong) 0 0 var(--color-accent);\n  padding-left: var(--space-3);\n}\n.ds-sidebar__count {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  letter-spacing: 0;\n}\n\n/* tabs: labels in a row, the current one on a heavy mark */\n.ds-tabs {\n  display: flex;\n  gap: var(--space-5);\n  margin: 0;\n  padding: 0;\n  overflow-x: auto;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  list-style: none;\n  scrollbar-width: none;\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n\n/* footer */\n.ds-footer {\n  border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n.ds-footer__cols {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n  gap: var(--space-6);\n  padding-top: var(--space-7);\n  padding-bottom: var(--space-7);\n}\n.ds-footer__about {\n  max-width: 30ch;\n  margin: var(--space-4) 0 0;\n  font-size: var(--text-large);\n  line-height: 1.25;\n}\n.ds-footer__title {\n  margin: 0 0 var(--space-3);\n  opacity: 0.7;\n}\n.ds-footer__list {\n  display: grid;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: underline;\n}\n.ds-footer__legal {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-5);\n  padding-top: var(--space-4);\n  padding-bottom: var(--space-4);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 30%, transparent);\n}\n\n/* narrower windows: the type steps down with the display size itself */\n@media (max-width: 1100px) {\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.7);\n    letter-spacing: calc(var(--display-tracking) * 0.7);\n  }\n  .ds-hero,\n  .ds-cols,\n  .ds-cols--look {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-hero__frame {\n    min-height: calc(var(--size-scene) * 0.8);\n    margin: 0 var(--space-6) var(--space-6);\n  }\n  .ds-carousel__slide {\n    flex-basis: calc((100% - var(--space-4) * 2) / 3);\n  }\n  .ds-grid,\n  .ds-stat {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-list__item {\n    grid-template-columns: minmax(0, 1fr) auto;\n  }\n  .ds-list__meta {\n    grid-column: 1 / -1;\n  }\n}\n@media (max-width: 800px) {\n  .ds-wrap {\n    padding-right: var(--space-4);\n    padding-left: var(--space-4);\n  }\n  .ds-nav__inner {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 0 var(--space-4);\n    padding: 0 var(--space-4);\n  }\n  .ds-nav__links {\n    grid-row: 2;\n    grid-column: 1 / -1;\n    gap: var(--space-5);\n    overflow-x: auto;\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n    scrollbar-width: none;\n  }\n  .ds-nav__link,\n  .ds-menu__toggle {\n    height: calc(var(--size-nav) - var(--space-4));\n  }\n  .ds-hero__copy {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.46);\n    letter-spacing: calc(var(--display-tracking) * 0.46);\n  }\n  .ds-hero__title span + span {\n    margin-left: var(--space-6);\n  }\n  .ds-hero__frame {\n    margin: 0 var(--space-4) var(--space-4);\n  }\n  .ds-section__title,\n  .ds-page-header__title,\n  .ds-band__date,\n  .ds-stat__figure {\n    font-size: calc(var(--text-h1) * 0.6);\n  }\n  .ds-hero__foot,\n  .ds-cols--even,\n  .ds-page-header,\n  .ds-footer__cols {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-section,\n  .ds-section--tight {\n    padding: var(--space-7) 0;\n  }\n  .ds-section__head {\n    grid-template-columns: minmax(0, 1fr);\n    margin-bottom: var(--space-5);\n  }\n  .ds-carousel__slide {\n    flex-basis: 44%;\n  }\n  .ds-looks {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-list__title {\n    font-size: calc(var(--text-h2) * 0.7);\n  }\n}\n@media (max-width: 520px) {\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.3);\n    letter-spacing: calc(var(--display-tracking) * 0.3);\n  }\n  .ds-hero__title span + span {\n    margin-left: var(--space-5);\n  }\n  .ds-hero__frame {\n    min-height: calc(var(--size-scene) * 0.62);\n  }\n  .ds-section__title,\n  .ds-page-header__title,\n  .ds-band__date,\n  .ds-stat__figure {\n    font-size: calc(var(--text-h1) * 0.5);\n  }\n  .ds-hero__lead,\n  .ds-page-header__text,\n  .ds-footer__about {\n    font-size: var(--text-base);\n  }\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-grid__cell {\n    min-height: 0;\n    gap: var(--space-7);\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-nav__actions .ds-button {\n    display: none;\n  }\n}\n\n/* Phones: the mark and the word Index; the index opens as a full sheet of large links. */\n@media (max-width: 520px) {\n  .ds-nav__links {\n    display: none;\n  }\n  .ds-nav__inner {\n    position: relative;\n  }\n  .ds-nav__actions .ds-menu {\n    position: static;\n  }\n  .ds-nav__actions .ds-menu__list {\n    right: 0;\n    left: 0;\n    width: auto;\n    max-width: none;\n  }\n  .ds-nav__actions .ds-menu__item {\n    font-size: var(--text-h2);\n  }\n  .ds-page:not(:has(.ds-view:target)) li:nth-child(-n+4) > .ds-menu__item[href=\"#home\"],\n  .ds-page:has(#home:target) li:nth-child(-n+4) > .ds-menu__item[href=\"#home\"],\n  .ds-page:has(#looks:target) li:nth-child(-n+4) > .ds-menu__item[href=\"#looks\"],\n  .ds-page:has(#look:target) li:nth-child(-n+4) > .ds-menu__item[href=\"#look\"],\n  .ds-page:has(#show:target) li:nth-child(-n+4) > .ds-menu__item[href=\"#show\"] {\n    border-bottom-color: var(--color-accent);\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 collection specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" aria-hidden=\"true\"><path d=\"M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5\"/><circle cx=\"12\" cy=\"12\" r=\"4.5\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Season</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#looks\">Looks</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#look\">Look 07</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#show\">Show</a></li>\n    </ul>\n    <div class=\"ds-nav__actions\">\n      <details class=\"ds-menu\">\n        <summary class=\"ds-menu__toggle\">Index</summary>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__item\" href=\"#home\">Autumn, winter 26</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#looks\">Twenty-four looks</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#look\">The long coat</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#show\">The show</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#show\">Appointments</a></li>\n        </ul>\n      </details>\n      <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#show\">Request a seat</a>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <div class=\"ds-hero__copy\">\n      <p class=\"ds-hero__kicker\"><span class=\"ds-badge\">New season</span><span class=\"ds-label ds-label--mono\">Collection 12</span><span class=\"ds-label ds-label--mono\">Autumn, winter 26</span></p>\n      <h1 class=\"ds-hero__title\"><span>Slack</span><span>water</span></h1>\n      <div class=\"ds-hero__foot\">\n        <p class=\"ds-hero__lead\">Twenty-four looks cut for the hour between two tides. Boiled wool, waxed cotton, one blue.</p>\n        <div class=\"ds-hero__side\">\n          <div class=\"ds-progress\">\n            <p class=\"ds-progress__head\"><span>The show, in 12 days</span><span class=\"ds-progress__value\">12.03.26</span></p>\n            <progress class=\"ds-progress__bar\" value=\"74\" max=\"100\">74%</progress>\n          </div>\n          <div class=\"ds-hero__actions\">\n            <a class=\"ds-button\" href=\"#looks\">See the looks</a>\n            <a class=\"ds-button ds-button--secondary\" href=\"#show\">The show</a>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"ds-hero__frame ds-scene\">\n      <span class=\"ds-scene__wall\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__side\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__side ds-scene__side--right\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__lines\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__floor\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__door\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__cast\" aria-hidden=\"true\"></span>\n      <span class=\"ds-figure\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__shade\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__grain\" aria-hidden=\"true\"></span>\n      <span class=\"ds-scene__frame\" aria-hidden=\"true\"></span>\n      <p class=\"ds-scene__caption ds-label ds-label--mono\"><span>Look 07 of 24</span><span>Hall 3</span></p>\n      <p class=\"ds-scene__caption ds-scene__caption--foot ds-label ds-label--mono\"><span>The long coat</span><span>20:00</span></p>\n    </div>\n  </div>\n\n  <div class=\"ds-section\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">The runway</p>\n        <h2 class=\"ds-section__title\">In order of exit</h2>\n        <a class=\"ds-link ds-link--arrow\" href=\"#looks\">All 24 looks</a>\n      </div>\n      <div class=\"ds-carousel\">\n        <ul class=\"ds-carousel__track\">\n          <li class=\"ds-carousel__slide\"><a class=\"ds-look\" href=\"#look\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>01</span><span>Exit</span></span></a><span><span class=\"ds-carousel__title\">Harbour coat</span><span class=\"ds-label ds-label--muted\">Boiled wool</span></span></li>\n          <li class=\"ds-carousel__slide\"><a class=\"ds-look ds-look--2\" href=\"#look\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>02</span><span>Exit</span></span></a><span><span class=\"ds-carousel__title\">Pilot jacket</span><span class=\"ds-label ds-label--muted\">Waxed cotton</span></span></li>\n          <li class=\"ds-carousel__slide\"><a class=\"ds-look ds-look--3\" href=\"#look\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>03</span><span>Exit</span></span></a><span><span class=\"ds-carousel__title\">Column dress</span><span class=\"ds-label ds-label--muted\">Wool crepe</span></span></li>\n          <li class=\"ds-carousel__slide\"><a class=\"ds-look ds-look--4\" href=\"#look\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>04</span><span>Exit</span></span></a><span><span class=\"ds-carousel__title\">Deck trousers</span><span class=\"ds-label ds-label--muted\">Cotton drill</span></span></li>\n          <li class=\"ds-carousel__slide\"><a class=\"ds-look ds-look--5\" href=\"#look\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>05</span><span>Exit</span></span></a><span><span class=\"ds-carousel__title\">Storm cape</span><span class=\"ds-label ds-label--muted\">Oiled silk</span></span></li>\n          <li class=\"ds-carousel__slide\"><a class=\"ds-look\" href=\"#look\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>06</span><span>Exit</span></span></a><span><span class=\"ds-carousel__title\">Net knit</span><span class=\"ds-label ds-label--muted\">Lambswool</span></span></li>\n        </ul>\n        <div class=\"ds-carousel__nav\">\n          <span class=\"ds-label ds-label--mono\">01 to 05 / 24</span>\n          <span class=\"ds-carousel__dots\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></span>\n          <a class=\"ds-carousel__arrow is-disabled\" href=\"#home\" aria-label=\"Earlier looks\"></a>\n          <a class=\"ds-carousel__arrow\" href=\"#looks\" aria-label=\"Later looks\"></a>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-wrap ds-band__inner\">\n      <div>\n        <p class=\"ds-label\">The show</p>\n        <p class=\"ds-band__date\">12.03.26, 20:00</p>\n      </div>\n      <div class=\"ds-band__side\">\n        <p class=\"ds-label\">Hall 3, the old customs house. Doors at 19:15.</p>\n        <a class=\"ds-button ds-button--inverse\" href=\"#show\">Request a seat</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-stat\" data-component=\"stats\">\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">24</p><p class=\"ds-label ds-stat__label\">Looks</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">09</p><p class=\"ds-label ds-stat__label\">Cloths</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">03</p><p class=\"ds-label ds-stat__label\">Mills</p></div>\n        <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">01</p><p class=\"ds-label ds-stat__label\">Blue</p></div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--tight ds-section--ruled\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">The cloth</p>\n        <h2 class=\"ds-section__title\">Four grounds</h2>\n        <a class=\"ds-link ds-link--arrow\" href=\"#look\">How a coat is made</a>\n      </div>\n      <ul class=\"ds-grid\" data-component=\"grid\">\n        <li><a class=\"ds-grid__cell\" href=\"#looks\"><span class=\"ds-label ds-label--mono\">A 01</span><span><span class=\"ds-grid__title\">Boiled wool</span><span class=\"ds-grid__text\">Felted twice, cut raw, never lined. Eleven of the twenty-four looks.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#looks\"><span class=\"ds-label ds-label--mono\">A 02</span><span><span class=\"ds-grid__title\">Drill</span><span class=\"ds-grid__text\">A cotton made for decks.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#looks\"><span class=\"ds-label ds-label--mono\">A 03</span><span><span class=\"ds-grid__title\">Crepe</span><span class=\"ds-grid__text\">Dry, heavy, slow to crease.</span></span></a></li>\n        <li><a class=\"ds-grid__cell\" href=\"#looks\"><span class=\"ds-label ds-label--mono\">A 04</span><span><span class=\"ds-grid__title\">Waxed cotton</span><span class=\"ds-grid__text\">Proofed by hand in the north, and proofed again each spring for as long as you own it.</span></span></a></li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--tight\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head\">\n        <p class=\"ds-label ds-section__kicker\">From the atelier</p>\n        <h2 class=\"ds-section__title\">Notes</h2>\n        <a class=\"ds-link ds-link--arrow\" href=\"#look\">All notes</a>\n      </div>\n      <ul class=\"ds-list\" data-component=\"list\">\n        <li class=\"ds-list__item\">\n          <span class=\"ds-label ds-label--mono ds-list__meta\">02.03.26, fittings</span>\n          <span><a class=\"ds-list__title\" href=\"#look\">The coat that would not hang</a><span class=\"ds-list__text\">Six toiles before the back fell straight. What changed on the seventh.</span></span>\n          <a class=\"ds-link ds-link--arrow\" href=\"#look\">Read</a>\n        </li>\n        <li class=\"ds-list__item is-hover\">\n          <span class=\"ds-label ds-label--mono ds-list__meta\">21.02.26, cloth</span>\n          <span><a class=\"ds-list__title\" href=\"#look\">One blue, dyed four times</a><span class=\"ds-list__text\">The vat, the mill and why the fourth bath is the one we kept.</span></span>\n          <a class=\"ds-link ds-link--arrow\" href=\"#look\">Read</a>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-label ds-label--mono ds-list__meta\">09.02.26, the hall</span>\n          <span><a class=\"ds-list__title\" href=\"#show\">A customs house at high tide</a><span class=\"ds-list__text\">Forty metres of floor, eleven windows and one door.</span></span>\n          <a class=\"ds-link ds-link--arrow\" href=\"#show\">Read</a>\n        </li>\n      </ul>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"looks\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Season</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#looks\">Looks</a></li>\n        <li class=\"ds-breadcrumb__current\">Part one</li>\n      </ol>\n      <span class=\"ds-label ds-label--mono\">02 / 04</span>\n    </div>\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">The looks</h1>\n        <p class=\"ds-page-header__text\">Twenty-four exits in three parts, as they will walk on the night.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#show\">Book an appointment</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-sidebar\" data-component=\"sidebar\">\n          <p class=\"ds-label ds-sidebar__title\">Parts</p>\n          <div class=\"ds-sidebar__list\">\n            <a class=\"ds-sidebar__item is-current\" href=\"#looks\">One, ebb <span class=\"ds-sidebar__count\">06</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#looks\">Two, slack <span class=\"ds-sidebar__count\">08</span></a>\n            <a class=\"ds-sidebar__item\" href=\"#looks\">Three, flood <span class=\"ds-sidebar__count\">10</span></a>\n          </div>\n        </div>\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Orders</span>Every piece is made to order. Books close on 30 April.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Closed</span>Look 03 is fully allocated for this season.</p>\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 bags this season</p>\n          <p class=\"ds-empty__text\">Accessories return in spring. Leave a note and we will write when they do.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#show\">Leave a note</a>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-toolbar\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#looks\">All <span class=\"ds-badge ds-badge--quiet\">06</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#looks\">Coats</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#looks\">Tailoring</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#looks\">Knit</a></li>\n          </ul>\n          <label class=\"ds-switch is-on\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label ds-label\">On the figure</span></label>\n        </div>\n        <ul class=\"ds-looks\">\n          <li><a class=\"ds-looks__item\" href=\"#look\"><span class=\"ds-look\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>01</span><span>Ebb</span></span><span class=\"ds-badge\" data-component=\"badge\">New</span></span><span><span class=\"ds-carousel__title\">Harbour coat</span><span class=\"ds-label ds-label--muted\">Boiled wool, raw hem</span></span></a></li>\n          <li><a class=\"ds-looks__item\" href=\"#look\"><span class=\"ds-look ds-look--2\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>02</span><span>Ebb</span></span></span><span><span class=\"ds-carousel__title\">Pilot jacket</span><span class=\"ds-badgerow\"><span class=\"ds-badge ds-badge--success\">Open</span><span class=\"ds-label ds-label--muted\">Waxed cotton</span></span></span></a></li>\n          <li><a class=\"ds-looks__item\" href=\"#look\"><span class=\"ds-look ds-look--3\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>03</span><span>Ebb</span></span></span><span><span class=\"ds-carousel__title\">Column dress</span><span class=\"ds-badgerow\"><span class=\"ds-badge ds-badge--danger\">Allocated</span><span class=\"ds-label ds-label--muted\">Wool crepe</span></span></span></a></li>\n          <li><a class=\"ds-looks__item\" href=\"#look\"><span class=\"ds-look ds-look--4\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>04</span><span>Ebb</span></span></span><span><span class=\"ds-carousel__title\">Deck trousers</span><span class=\"ds-badgerow\"><span class=\"ds-badge ds-badge--warning\">Last five</span><span class=\"ds-label ds-label--muted\">Cotton drill</span></span></span></a></li>\n          <li><a class=\"ds-looks__item\" href=\"#look\"><span class=\"ds-look ds-look--5\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>05</span><span>Ebb</span></span></span><span><span class=\"ds-carousel__title\">Storm cape</span><span class=\"ds-label ds-label--muted\">Oiled silk</span></span></a></li>\n          <li><span class=\"ds-looks__item\"><span class=\"ds-look ds-look--2\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>06</span><span>Ebb</span></span></span><span><span class=\"ds-carousel__title\">Net knit</span><span class=\"ds-tooltip ds-label ds-label--muted\" tabindex=\"0\">By appointment<span class=\"ds-tooltip__tip\">Knitted to your measure in six weeks. Shown in the atelier only.</span></span></span></span></li>\n        </ul>\n        <div class=\"ds-table__foot\">\n          <span class=\"ds-label\">Looks 01 to 06 of 24</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#looks\">Prev</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#looks\">01</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#looks\">02</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#looks\">03</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#looks\">04</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#looks\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"look\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Season</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#looks\">Looks</a></li>\n        <li class=\"ds-breadcrumb__current\">Look 07</li>\n      </ol>\n      <span class=\"ds-label ds-label--mono\">03 / 04</span>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">The long coat</h1>\n        <p class=\"ds-page-header__text\">Look 07. Boiled wool to the ankle, one seam down the back, no lining.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#show\">Order this look</a>\n        <a class=\"ds-button ds-button--secondary\" href=\"#looks\">Look 08</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols ds-cols--look\">\n      <div class=\"ds-stack\">\n        <span class=\"ds-look\"><span class=\"ds-look__set\"></span><span class=\"ds-figure\"></span><span class=\"ds-scene__grain\"></span><span class=\"ds-look__label ds-label ds-label--mono\"><span>07</span><span>Slack</span></span></span>\n        <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">Cut by the head of the atelier</span><span class=\"ds-person__role\">Pattern 07, seventh toile</span></span></div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\" data-component=\"panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">The look</h2><span class=\"ds-badge ds-badge--quiet\">CS 12 07</span></div>\n          <div class=\"ds-panel__body\">\n            <dl class=\"ds-facts\">\n              <dt>Part</dt><dd>Two, slack</dd>\n              <dt>Cloth</dt><dd>Boiled wool, 620 g</dd>\n              <dt>Colour</dt><dd>The blue, fourth bath</dd>\n              <dt>Made in</dt><dd>Six weeks from order</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th>Piece</th><th>Cloth</th><th>Made</th><th class=\"ds-table__num\">Price</th></tr>\n            </thead>\n            <tbody>\n              <tr><td><a class=\"ds-table__title\" href=\"#look\">Long coat</a></td><td>Boiled wool</td><td>The north mill</td><td class=\"ds-table__num\">1,480.00</td></tr>\n              <tr class=\"is-hover\"><td><a class=\"ds-table__title\" href=\"#look\">Net knit</a></td><td>Lambswool</td><td>By hand</td><td class=\"ds-table__num\">420.00</td></tr>\n              <tr><td><a class=\"ds-table__title\" href=\"#look\">Deck trousers</a></td><td>Cotton drill</td><td>The atelier</td><td class=\"ds-table__num\">390.00</td></tr>\n              <tr><td><a class=\"ds-table__title\" href=\"#look\">Harbour boot</a></td><td>Waxed hide</td><td>The bootmaker</td><td class=\"ds-table__num\">640.00</td></tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"ds-prose\" data-component=\"typography\">\n          <h1>Notes on the coat</h1>\n          <p class=\"ds-prose__lead\">It began as a blanket thrown over a chair, and it still wants to be one.</p>\n          <p>The wool is felted twice so that it can be <strong>cut and left raw</strong>. There is one seam, down the centre of the back, and it is sewn by hand.</p>\n          <h2>How it is worn</h2>\n          <p>Open, with the collar up. Pattern <code>CS 12 07</code> comes in four lengths and is shortened only at the shoulder.</p>\n          <h3>Care</h3>\n          <ul>\n            <li>Brush it; do not wash it</li>\n            <li>Hang it wet, away from heat</li>\n            <li>Send it back to us every third winter</li>\n          </ul>\n        </div>\n        <ul class=\"ds-linkrow\" data-component=\"links\">\n          <li><a class=\"ds-link\" href=\"#look\">The pattern</a></li>\n          <li><a class=\"ds-link is-visited\" href=\"#look\">The mill (seen)</a></li>\n          <li><a class=\"ds-link is-hover\" href=\"#show\">See it walk</a></li>\n          <li><a class=\"ds-link is-active\" href=\"#show\">Order this look</a></li>\n          <li><a class=\"ds-link ds-link--quiet\" href=\"#looks\">Back to the looks</a></li>\n        </ul>\n        <div class=\"ds-accordion\">\n          <details class=\"ds-accordion__item\" open>\n            <summary class=\"ds-accordion__head\">Sizes and lengths</summary>\n            <p class=\"ds-accordion__body\">Four lengths, five widths. We take eleven measures at the appointment or by post.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Made to order</summary>\n            <p class=\"ds-accordion__body\">Six weeks from the day the cloth is cut.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Repairs</summary>\n            <p class=\"ds-accordion__body\">For as long as the coat exists, at cost.</p>\n          </details>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"show\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">Season</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#show\">Show</a></li>\n        <li class=\"ds-breadcrumb__current\">Request a seat</li>\n      </ol>\n      <span class=\"ds-label ds-label--mono\">04 / 04</span>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">The show</h1>\n        <p class=\"ds-page-header__text\">12 March 2026 at 20:00, Hall 3 of the old customs house. Two hundred seats.</p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols ds-cols--even\">\n      <form class=\"ds-form\" data-component=\"form\" action=\"#show\">\n        <div class=\"ds-noticerow\">\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Check</span>One field needs another look before we can hold a seat.</p>\n        </div>\n        <div class=\"ds-form__row\">\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"seat-name\">Name</label>\n            <input class=\"ds-form__input\" id=\"seat-name\" type=\"text\" value=\"A. Visitor\">\n          </div>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"seat-kind\">You are</label>\n            <select class=\"ds-form__select\" id=\"seat-kind\">\n              <option>A client</option>\n              <option>A buyer</option>\n              <option>Press</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"ds-form__field\">\n          <label class=\"ds-form__label\" for=\"seat-mail\">E-mail address</label>\n          <input class=\"ds-form__input is-error\" id=\"seat-mail\" type=\"email\" value=\"visitor@example\">\n          <p class=\"ds-form__error\">This address is missing its ending, for example .org.</p>\n        </div>\n        <div class=\"ds-form__field\">\n          <label class=\"ds-form__label\" for=\"seat-note\">Anything we should know</label>\n          <textarea class=\"ds-form__textarea\" id=\"seat-note\" placeholder=\"A second seat, step-free access\"></textarea>\n          <p class=\"ds-form__hint\">Seats are confirmed by hand within two days.</p>\n        </div>\n        <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> I have read how my address is used.</label>\n        <div class=\"ds-form__actions\" data-component=\"buttons\">\n          <button class=\"ds-button\" type=\"submit\">Request a seat</button>\n          <a class=\"ds-button ds-button--secondary\" href=\"#looks\">See the looks first</a>\n          <button class=\"ds-button ds-button--danger\" type=\"button\">Give up my seat</button>\n          <button class=\"ds-button is-disabled\" type=\"button\" disabled>Request sent</button>\n        </div>\n      </form>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">On the night</h2><span class=\"ds-badge ds-badge--warning\">31 seats left</span></div>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-progress\">\n              <p class=\"ds-progress__head\"><span>Seats held</span><span class=\"ds-progress__value\">169 / 200</span></p>\n              <progress class=\"ds-progress__bar\" value=\"169\" max=\"200\">84%</progress>\n            </div>\n            <label class=\"ds-switch is-on\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Remind me the day before<small>One message, at noon</small></span></label>\n            <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\"><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">An appointment after the show<small>The atelier, 13 to 20 March</small></span></label>\n          </div>\n        </div>\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"seat-title\">\n            <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"seat-title\">Give up your seat?</h2><a class=\"ds-dialog__close\" href=\"#show\" aria-label=\"Close\"></a></div>\n            <div class=\"ds-dialog__body\"><p>Row C, seat 14 goes back to the list and cannot be held for you again.</p></div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--danger\" href=\"#home\">Give it up</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#show\">Keep it</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-wrap ds-footer__cols\">\n    <div>\n      <a class=\"ds-brand\" href=\"#home\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" aria-hidden=\"true\"><path d=\"M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5\"/><circle cx=\"12\" cy=\"12\" r=\"4.5\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n      </a>\n      <p class=\"ds-footer__about\">chronoskin makes clothes to order, twice a year, in one room.</p>\n    </div>\n    <div>\n      <p class=\"ds-label ds-footer__title\">Season</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#home\">Autumn, winter 26</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#looks\">The looks</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#look\">The long coat</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-label ds-footer__title\">House</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#show\">The show</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#show\">Appointments</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#look\">Repairs</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-label ds-footer__title\">Small print</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#show\">Contact</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#show\">Privacy</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">Imprint</a></li>\n      </ul>\n    </div>\n  </div>\n  <div class=\"ds-wrap ds-footer__legal ds-label\">\n    <span>2026 chronoskin. All rights reserved.</span>\n    <span>Collection 12</span>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.cinematic.landing.s04.p02.t05.u03\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"cinematic\",\n    \"years\": [\n      2015,\n      2026\n    ]\n  },\n  \"archetype\": \"landing\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-ci-4253\",\n  \"short\": \"v1-ci-4253\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #12100d;\n  --color-canvas: #12100d;\n  --color-surface: #1a1713;\n  --color-surface-alt: #221e18;\n  --color-surface-strong: #2f2920;\n  --color-bar: #0a0806;\n  --color-bar-text: #efe6d6;\n  --color-bar-alt: #1a1713;\n  --color-bar-alt-text: #a39880;\n  --color-inverse: #e8dfcf;\n  --color-inverse-text: #17130e;\n  --color-text: #c9bfae;\n  --color-text-muted: #8d8372;\n  --color-heading: #efe6d6;\n  --color-heading-alt: #c8a273;\n  --color-link: #dcc09a;\n  --color-link-quiet: #a39880;\n  --color-link-visited: #b79f84;\n  --color-link-hover: #f4d8ae;\n  --color-link-active: #e0763a;\n  --color-border: #3a3329;\n  --color-border-strong: #8d7a5c;\n  --color-border-muted: #262119;\n  --color-accent: #c8a273;\n  --color-accent-text: #17130e;\n  --color-accent-alt: #e0763a;\n  --color-fill-1: #2b2219;\n  --color-fill-2: #3b2f22;\n  --color-fill-3: #1e1914;\n  --color-fill-4: #4b3a29;\n  --color-button: #e8dfcf;\n  --color-button-text: #17130e;\n  --color-button-hover-text: #17130e;\n  --color-button-secondary: #12100d;\n  --color-button-secondary-text: #e8dfcf;\n  --color-input: #1a1713;\n  --color-input-text: #efe6d6;\n  --color-input-border: #5a4f40;\n  --color-disabled: #262119;\n  --color-disabled-text: #6a6152;\n  --color-danger: #e2705a;\n  --color-danger-surface: #2e1712;\n  --color-success: #9ab87e;\n  --color-warning: #dbb25c;\n  --color-notice: #221e18;\n  --color-notice-text: #e8dfcf;\n  --color-focus: #f4d8ae;\n  --color-shadow: rgb(5 3 1 / 0.6);\n  --color-overlay: rgb(10 8 6 / 0.7);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Source Serif 4\", \"Iowan Old Style\", \"Palatino Linotype\", Palatino, Georgia, serif;\n  --font-heading: \"Cormorant Garamond\", \"EB Garamond\", \"Big Caslon\", \"Hoefler Text\", Baskerville, Garamond, serif;\n  --font-ui: Optima, Marcellus, Candara, \"Gill Sans\", \"Trebuchet MS\", sans-serif;\n  --font-mono: \"Fira Mono\", \"Andale Mono\", Menlo, Consolas, monospace;\n  --text-base: 16px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 21px;\n  --text-display: 150px;\n  --text-h1: 76px;\n  --text-h2: 38px;\n  --text-h3: 23px;\n  --line-body: 1.65;\n  --line-heading: 1.08;\n  --line-display: 0.92;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 400;\n  --heading-transform: none;\n  --heading-tracking: -0.5px;\n  --display-tracking: -4px;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: underline;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 3px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 2px;\n  --radius-page: 0;\n  --shadow-panel: inset 0 0 0 1px var(--color-shadow);\n  --shadow-control: 0 0 24px var(--color-shadow);\n  --shadow-control-hover: 0 0 44px var(--color-shadow);\n  --shadow-control-pressed: inset 0 0 12px var(--color-shadow);\n  --shadow-dialog: 0 0 80px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: linear-gradient(90deg, color-mix(in srgb, white 3%, transparent) 1px, transparent 1px) 0 0 / 120px 120px, var(--color-page);\n  --fill-bar: repeating-linear-gradient(0deg, color-mix(in srgb, white 5%, transparent) 0 1px, transparent 1px 4px), var(--color-bar);\n  --fill-bar-alt: linear-gradient(180deg, var(--color-bar-alt), color-mix(in srgb, var(--color-bar-alt) 70%, black));\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: linear-gradient(100deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 80%, white));\n  --fill-panel: linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--color-surface) 60%, transparent));\n  --fill-button: linear-gradient(100deg, var(--color-button), color-mix(in srgb, var(--color-button) 82%, white));\n  --fill-button-hover: linear-gradient(var(--color-button), var(--color-button));\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px dashed var(--color-focus);\n  --transition: all 0.25s ease-out;\n  --backdrop-blur: 0px;\n}\n"
  }
}