{
  "id": "v1-ci-3152",
  "long_id": "v1.cinematic.shop.s03.p01.t05.u02",
  "name": "Cinematic object house shop",
  "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": "shop",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "This is the shop of a fashion or object house between 2015 and 2026: a lookbook first and a shop second, opening on a dark room in which a few objects stand in the light of one lamp, with the collection's name in very large wide capitals. Navigation is a single thin line with the mark in the middle and the bag at the right, the product grid is sparse, each object alone on a lit plate, and prices, piece numbers and counts are small monospaced labels. It was the common look of fashion, design and game-studio shops in the second half of the 2010s and the first half of the 2020s.",
  "url": "https://chrono.skin/s/v1-ci-3152",
  "preview_url": "https://chrono.skin/s/v1-ci-3152/specimen.html",
  "files": {
    "STYLE.md": "# Cinematic object house shop\n\n## Summary\n\nThis is the shop of a fashion or object house between 2015 and 2026: a lookbook first and a shop second, opening on a dark room in which a few objects stand in the light of one lamp, with the collection's name in very large wide capitals. Navigation is a single thin line with the mark in the middle and the bag at the right, the product grid is sparse, each object alone on a lit plate, and prices, piece numbers and counts are small monospaced labels. It was the common look of fashion, design and game-studio shops 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, and runs edge to edge: content is inset only by `--space-5` (28px) through `.ds-edge` (`--space-4` on a phone); `--size-page` (1360px) is the width of `.ds-wrap` for text that must not grow wider. Sections pad themselves with `--space-8` (96px), `--tight` with `--space-7`; `--edge` adds the side inset.\n- Navigation is `.ds-nav`, one line `--size-nav` (60px) tall on the page colour that stays at the top of the window: label links at the left (one of them a `.ds-menu` that drops the collections), the brand in the middle, a product link and the bag with its count at the right. A hairline runs under it and an accent mark under the current link.\n- The home view stacks: `.ds-hero`, a room `--size-scene` (780px) tall with the title at the lower left and lead and buttons along the foot; a section with the `.ds-carousel` of looks; the `.ds-grid` of four objects; the `.ds-stat` line; the `.ds-band`.\n- Inner pages have no hero. Each opens inside `.ds-edge` with `.ds-top` (the breadcrumb) and the `.ds-page-header`: a very large title on a strong hairline with one line of text under it and, at the right on the baseline, a count or price and one button. Then `.ds-main` with `.ds-cols`: a `.ds-sidebar` `--size-side` (220px) wide at the left that stays in the window, and the working column; `--object` and `--bag` are 7 to 5. Tabs sit in a `.ds-toolbar` at the top of the working column with a switch at its right end.\n- Views. The specimen is the shop of a house that makes objects in numbered runs. `home` is the lookbook. `shop` has the kinds of object as a sidebar, tabs and a switch, two notices, six objects in a grid of three with badges and a tooltip, and the pagination. `object` shows one lamp: a gallery, a table of sizes, a progress line for the run, the description as prose, the maker as an avatar, links and an accordion. `bag` has the three lines of the bag as a list, the open remove dialog and an empty state at the left, and the summary panel and checkout form with all four buttons at the right.\n- Below 1100px columns stack, the sidebar becomes two columns of links and grids go two by two; below 800px the navigation becomes two rows (brand and bag, then the links), the carousel's caption drops under its plate and a wide table scrolls inside `.ds-table__wrap`; below 520px figures go two by two. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px, `--space-2` 8px (label to text, tab gaps), `--space-3` 12px (between buttons, grid columns, gallery gaps), `--space-4` 20px (rows, panel padding), `--space-5` 28px (page inset, stack gap, grid rows), `--space-6` 40px (columns), `--space-7` 64px (tight sections), `--space-8` 96px (sections), `--space-9` 144px. `--space-track` 2px is the tracking of labels.\n- Other sizes: `--size-mark` 26px, `--size-control` 46px, `--size-dialog` 440px, `--size-thumb` 96px (gallery thumbnails and the pictures in the bag).\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, and the first link of the actions is not shown. At 520px and below that link is shown again, the links spread over the row, the Collections `.ds-menu` opens as a full row under the bar instead of a box under its toggle, and a tooltip in a grid cell opens as a full-width note above its line.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- These are the conventions of the era, kept from its first layout. A block stands on one of five grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. A scene (a picture) stands on the bar, `--fill-bar` or `--color-bar`, and carries only `--color-bar-text`. The footer stands on `--fill-bar-alt` and carries `--color-bar-alt-text`. The inverted block (`--fill-inverse`, `.ds-band`) carries only `--color-inverse-text`. Accent elements (`--fill-accent`: badges) carry `--color-accent-text`.\n- Pictures are drawn, never loaded. In a picture `--color-bar` is the ground and every solid shape is a silhouette in it; `--color-accent` is the light; `--color-accent-alt` is the second light; `--color-fill-1` to `--color-fill-4` are the tones between; `--color-bar-text` is the hottest point of a light. The texture of a picture comes from `--fill-bar`: `.ds-scene__grain` takes that fill less its own colour (two background layers blended by difference) and lays it over the finished picture, so a surface set changes the texture of every picture and it shows on a dark and on a pale ground alike.\n- Nothing assumes that a palette is dark. A picture is as dark as `--color-bar`, the page as dark as `--color-page`; `--color-inverse` is the opposite of the page.\n- The fills are also the grounds of grid cells and carry `--color-text` and `--color-heading`, never `--color-bar-text` or `--color-inverse-text` as running text.\n- Buttons by ground. On the page, panels and fills: `.ds-button` (`--fill-button`, `--color-button-text`) and `.ds-button--secondary` (`--fill-button-secondary`, text and outline in `--color-button-secondary-text`). On a scene only `.ds-button--onscene` (fill `--color-bar-text`, text `--color-bar`) and `.ds-button--ghost`. On the inverted block only `.ds-button--inverse` and `.ds-button--ghost`. The destructive button is `--color-danger` with `--color-button-text`.\n- `--color-heading-alt` is the colour of kickers, numbers used as labels, panel and sidebar titles and h3 in prose. The label is the second voice: `--font-ui` at `--text-small` or `--text-ui`, `--ui-transform`, tracked by `--space-track` (a layout token; the type vocabulary has no positive tracking for labels). Dates, times, prices and counts are labels in `--font-mono`.\n- The default badge is `--fill-accent` with `--color-accent-text`. Status badges are never fills: the status colour is text, outline and a small dot on a transparent ground. `.ds-badge--quiet` is an outline in `--color-border`.\n- `--color-notice` with `--color-notice-text` is the information notice, with a left edge of `--border-width-strong` in `--color-accent`; the error notice is `--color-danger` on `--color-danger-surface`.\n- Borders: `--border-width` in `--color-border` between rows and around panels, `--color-border-strong` for the rules that open a table, a list or a page, `--color-border-muted` inside boxes, `--color-input-border` around fields. `--border-width-strong` marks the current item (navigation, tabs, pagination), the progress line and the notice edge. Every border takes `--border-style`.\n- Radii: `--radius-control` for buttons, fields and carousel arrows; `--radius-panel` for panels, notices, the dialog, the empty state and tooltips; `--radius-pill` for badges, switches and avatars; `--radius-page` for the largest boxes (pictures, grid cells). Shapes inside a drawing use percentages and `clip-path`, never a radius token.\n- Shadows: `--shadow-panel` on panels and grid cells, `--shadow-control` on buttons and the brand tile, `--shadow-control-hover` on hovered buttons and cells, `--shadow-dialog` on the dialog and an open menu. `--backdrop-blur` blurs what lies behind the dialog's veil.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: lights and haze are a light token mixed with `transparent` or with a fill; hairlines on a picture are `currentColor` at 24 to 40%; the rim of light on a figure is a `drop-shadow` of twice `--border-width` in the accent; the largest type steps down as a share of its own token at 1100px, 800px and 520px, so every type set shrinks in proportion to itself; 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, set as a label. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--arrow` is a label led by a hairline that grows on hover, used for \"all dates\" and \"read\". `.ds-linkrow` lays links in a row.\n- `.ds-button`: a flat box with a tracked label. Variants: `--secondary`, `--danger` (destructive actions only), `--onscene` (scenes), `--inverse` (the inverted block), `--ghost` (both), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-badge`: small tracked label on `--fill-accent`. `--quiet` outlined. Status variants: `--success`, `--warning`, `--danger`, each an outline with a dot. `.ds-badgerow` for several.\n- `.ds-notice`: a ruled message with a strong left edge; `--error` in the danger colours. `.ds-notice__title` is the tracked lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` labels; `is-current` is underlined with `--color-accent`, `is-disabled` is grey. Page numbers are written with two digits.\n- `.ds-breadcrumb`: a label trail of `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a block of `--color-overlay` (blurring by `--backdrop-blur`) centring `.ds-dialog__box`, a panel with a strong outline and `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, a drawn cross `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions` with the main action first.\n- `.ds-empty`: a hairline box with a short accent rule (`.ds-empty__icon`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-switch`: an on/off control over a checkbox: `.ds-switch__input` (invisible, covers the row), `.ds-switch__track` with its knob, `.ds-switch__label` with an optional `small` line. On is `is-on` or `:checked`: outline and knob in `--color-accent`.\n- `.ds-tooltip`: a dotted-underlined trigger holding `.ds-tooltip__tip`, a small inverted box shown on hover, focus or `is-open`; `--end` aligns it to the right edge.\n- `.ds-avatar`: a person drawn as a backlit head and shoulders: dark shapes in `--color-bar` on a lit copy of themselves, a light in the corner, a fill behind. `--2` is lit from the left with `--color-accent-alt`, `--3` from above with `--color-bar-text`; `--large` doubles it. `.ds-person` sets one beside `.ds-person__name` and `.ds-person__role`.\n- `.ds-progress`: `.ds-progress__head` (a label and a `.ds-progress__value` in mono) over `.ds-progress__bar`, a `<progress>` drawn as a hairline of `--border-width-strong` with the value in `--color-accent`.\n- `.ds-accordion`: ruled `<details>`: `.ds-accordion__item` with a `.ds-accordion__head` label that ends in a plus (a cross when open) and a `.ds-accordion__body`.\n- `.ds-band`: the inverted block. Only `.ds-button--inverse` and `.ds-button--ghost` inside.\n- `.ds-stack`: stacks blocks one step apart; `--tight` closer. `.ds-main` is the body of an inner page. `.ds-facts` is a `dl` of label and value pairs inside a panel.\n- `.ds-object`: a thing of the house, drawn as a dark body in `--color-bar` whose edge nearest the light is the accent. The default is a flask with a stopper and a label; `--vase`, `--bowl`, `--candle` (with a flame in the accent) and `--lamp` (a dome on a stem with the accent glowing under it). It stands inside a `.ds-plinth`, a `.ds-grid__plate` or the `.ds-hero`, sized in percent of that box.\n- `.ds-plinth`: the studio a single object stands in: a box on `--fill-bar` whose wall is washed with one fill, with a floor line and a pool of light where the object stands. `--2` is crossed by a slanted bar of the second light, `--3` has a disc of light behind the object, `--4` a cone from above. `--wide` (1.5 to 1) for lookbook slides, `--square` for galleries and the bag. `.ds-plinth__label` sets two mono labels across the top; `.ds-plinth__word` is an outlined word behind the object.\n- `.ds-nav`: the thin line. `.ds-nav__inner` holds `.ds-nav__links` of `.ds-nav__link` (the current one bright with an accent mark under it, `is-current`), the brand and `.ds-nav__actions`; `.ds-nav__count` is the number in the bag. 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>` among the links: `.ds-menu__toggle` (the word and a plus) and `.ds-menu__list` of `.ds-menu__item` rows with counts, a hairline box that drops under it. Closed until clicked.\n- `.ds-hero`: the room of the home view, on `--fill-bar`: `.ds-hero__room` (the wall, the table's edge and the pool of light on it), `.ds-hero__cone` (the lamp's cone), `.ds-hero__word` (an outlined word on the wall), a `.ds-object--lamp` hanging from the top edge and three objects under it; then `.ds-hero__kicker`, `.ds-hero__title` and `.ds-hero__foot` with `.ds-hero__lead` and `.ds-hero__actions`. One per site.\n- `.ds-section`: a block of the page; `--tight`, `--edge`. `.ds-section__head` holds a `.ds-section__kicker`, the `.ds-section__title` and an arrow link at the right.\n- `.ds-carousel`: one look to a slide: `.ds-carousel__track` of `.ds-carousel__slide` (a `.ds-plinth--wide` beside `.ds-carousel__copy` with a label, `.ds-carousel__title`, `.ds-carousel__text` and a secondary button), then `.ds-carousel__nav` with a count, `.ds-carousel__dots` of hairline `.ds-carousel__dot` and two word `.ds-carousel__arrow`.\n- `.ds-grid`: a sparse grid of objects, four across; `--three` three across. A `.ds-grid__cell` is a link: `.ds-grid__plate` (a lit plate on one of the four fills, in turn, holding the object and an optional badge), a `.ds-grid__row` with `.ds-grid__title` and `.ds-grid__price`, and `.ds-grid__text`.\n- `.ds-stat`: one line of four figures between hairlines; each `.ds-stat__item` is a `.ds-stat__figure` with a narrow `.ds-stat__label` beside it.\n- `.ds-band`: here `.ds-band__inner` sets `.ds-band__text`, one sentence in the heading face, beside `.ds-band__side` with a paragraph and a button.\n- `.ds-edge`: the side inset of full-width content. `.ds-top` holds the breadcrumb of an inner page.\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 a count or `.ds-price` and one button; a strong hairline closes it.\n- `.ds-cols`: sidebar and working column; `--object`, `--bag` 7 to 5. `.ds-toolbar` puts tabs and a switch, or a count and the pagination, on one line.\n- `.ds-sidebar`: `.ds-sidebar__title` label and a `.ds-sidebar__list` of `.ds-sidebar__item` labels with a `.ds-sidebar__count`; the current one is bright and led by a short accent rule.\n- `.ds-tabs`: words in a row; the current `.ds-tabs__tab` (`is-current`) is boxed with `--color-border-strong`.\n- `.ds-gallery`: `.ds-gallery__thumbs`, a column of three small plinths (the current one outlined with the accent), beside the large one. `.ds-price` is a price in mono at `--text-large`.\n- `.ds-table`: a full grid of hairlines with a label head on `--color-surface-alt`; `is-hover` tints a row. `.ds-table__num` right-aligns figures in mono; `.ds-table__title` is the row's link. Wrap it in `.ds-table__wrap`.\n- `.ds-panel`: a hairline box with `.ds-panel__head` (a `.ds-panel__title` in the heading face and a label) and `.ds-panel__body`; `.ds-panel__text` is a paragraph. Inside, `.ds-facts` rules each pair and `.ds-facts__total` enlarges the last value.\n- `.ds-list`: the lines of the bag: each `.ds-list__item` is a small square plinth, a `.ds-list__title` with a `.ds-list__meta` label under it, and `.ds-list__end` with the price and a quiet link.\n- `.ds-footer`: the closing strip on `--fill-bar-alt`: `.ds-footer__cols` with the brand and a `.ds-footer__about` line and 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-width <= 1px`: every rule and outline is a hairline.\n- `border-radius <= 4px`: boxes are almost square; only pills and circles are rounder.\n- `box-shadow-blur <= 120px`: only the dialog, the open menu and a hovered control cast a shadow, wide and soft.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. First decide which ground it stands on (page, panel or fill; scene; inverted block; footer strip) and take the text token and the buttons of that ground; never put a primary button on a scene or `--color-bar-text` on a fill. A new picture is built the way the existing ones are: the bar colour for darkness and every solid shape, the accent for the light, the alternate accent for a second light, the fills for the tones between, shapes from percentages, gradients with hard stops and `clip-path`, and the grain from `--fill-bar`; do not load an image and do not write a colour. If the installing project has photographs or film, they replace the drawn layers of a scene and everything else (the shade under the text, the labels, the type) stays. Keep type on the `--text-*` tokens, the largest sizes stepped down with the same factors as the specimen, labels tracked by `--space-track`, spacing on the `--space-*` scale, and note any one-off `color-mix()` shade next to its rule.\n",
    "components.css": ":root {\n  --size-page: 1360px;\n  --size-nav: 60px;\n  --size-mark: 26px;\n  --size-control: 46px;\n  --size-dialog: 440px;\n  --size-scene: 780px;\n  --size-thumb: 96px;\n  --size-side: 220px;\n  --space-track: 2px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 20px;\n  --space-5: 28px;\n  --space-6: 40px;\n  --space-7: 64px;\n  --space-8: 96px;\n  --space-9: 144px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n  position: relative;\n  margin: 0;\n  padding: 0;\n  min-height: 100vh;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n.ds-wrap {\n  width: 100%;\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 var(--space-6);\n}\n\n/* label: the small tracked line of the era. Dates, numbers, credits,\n   coordinates and every caption are set in it. */\n.ds-label {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-label--muted {\n  color: var(--color-text-muted);\n}\n.ds-label--accent {\n  color: var(--color-heading-alt);\n}\n.ds-label--mono {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* brand: the mark on a small tile dressed like the primary button */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  padding: var(--space-1);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n  max-width: 64ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  font-size: var(--text-h2);\n}\n.ds-prose h2 {\n  margin-top: var(--space-6);\n  font-size: var(--text-h3);\n}\n.ds-prose h3 {\n  margin-top: var(--space-5);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-prose p {\n  margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: var(--space-3) 0 0;\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-top: var(--space-1);\n}\n.ds-prose li::marker {\n  color: var(--color-heading-alt);\n}\n.ds-prose strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  line-height: 1.35;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: var(--space-1);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-link--arrow {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-link--arrow:visited {\n  color: inherit;\n}\n.ds-link--arrow::before {\n  content: \"\";\n  width: var(--space-6);\n  height: var(--border-width);\n  background: currentColor;\n  transition: var(--transition);\n}\n.ds-link--arrow:hover::before,\n.ds-link--arrow.is-hover::before {\n  width: var(--space-7);\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* buttons: flat labels in a box. The filled one is the single bright\n   object of a screen. */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n  opacity: 0.8;\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  box-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: color-mix(in srgb, var(--color-button-secondary-text) 14%, transparent);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  border-color: var(--color-danger);\n  background: var(--color-danger);\n  color: var(--color-button-text);\n  box-shadow: none;\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  border-color: currentColor;\n  background: transparent;\n  color: inherit;\n  box-shadow: none;\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  background: color-mix(in srgb, currentColor 16%, transparent);\n}\n.ds-button--onscene,\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover {\n  border-color: var(--color-bar-text);\n  background: var(--color-bar-text);\n  color: var(--color-bar);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  border-color: var(--color-inverse-text);\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n  box-shadow: none;\n}\n.ds-button--onscene:hover,\n.ds-button--onscene.is-hover,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  opacity: 0.86;\n}\n.ds-button--small {\n  min-height: calc(var(--size-control) - var(--space-3));\n  padding: var(--space-1) var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: transparent;\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  box-shadow: none;\n  opacity: 1;\n  cursor: not-allowed;\n}\n.ds-buttonrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: grid;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-form__label {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--line-heading);\n  box-shadow: none;\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(var(--size-control) * 3);\n  padding: var(--space-3) var(--space-4);\n  border-radius: var(--radius-panel);\n  line-height: var(--line-body);\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n  outline-offset: 0;\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n}\n.ds-form__hint {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-form__checkbox {\n  flex: none;\n  width: var(--space-4);\n  height: var(--space-4);\n  margin: var(--space-1) 0 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* badge: a tracked word in a hairline box; status variants are the\n   status colour as text and outline, never as a fill */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-badge--quiet {\n  border-color: var(--color-border);\n  background: transparent;\n  color: var(--color-text-muted);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  border-color: currentColor;\n  background: transparent;\n}\n.ds-badge--success {\n  color: var(--color-success);\n}\n.ds-badge--warning {\n  color: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-danger);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n  content: \"\";\n  width: var(--space-1);\n  height: var(--space-1);\n  border-radius: 50%;\n  background: currentColor;\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* notice: a ruled line of text with a strong left edge */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  font-size: var(--text-base);\n}\n.ds-notice--error {\n  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n  border-left-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-notice__title {\n  margin-right: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-noticerow {\n  display: grid;\n  gap: var(--space-2);\n}\n\n/* pagination: numbers as labels, the current one underlined by the light */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: calc(var(--size-control) - var(--space-2));\n  height: calc(var(--size-control) - var(--space-2));\n  padding: 0 var(--space-2);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: inherit;\n  opacity: 0.72;\n}\n.ds-breadcrumb__item a {\n  color: inherit;\n  text-decoration: none;\n}\n.ds-breadcrumb__item::after {\n  content: \"/\";\n  opacity: 0.6;\n}\n.ds-breadcrumb__current {\n  color: inherit;\n}\n\n/* dialog: shown open in the page flow, on the overlay colour */\n.ds-dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-7) var(--space-4);\n  background: var(--color-overlay);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur));\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-5) var(--space-5) 0;\n}\n.ds-dialog__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n  position: relative;\n  flex: none;\n  width: var(--space-5);\n  height: var(--space-5);\n  color: var(--color-heading);\n}\n.ds-dialog__close::before,\n.ds-dialog__close::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: var(--border-width);\n  background: currentColor;\n  transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n  transform: rotate(-45deg);\n}\n.ds-dialog__body {\n  padding: var(--space-3) var(--space-5) var(--space-5);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n  display: grid;\n  justify-items: start;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  color: var(--color-text);\n}\n.ds-empty__icon {\n  width: var(--space-7);\n  height: var(--border-width-strong);\n  background: var(--color-accent);\n}\n.ds-empty__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n  max-width: 44ch;\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n/* switch */\n.ds-switch {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  order: 2;\n  width: calc(var(--space-5) * 2);\n  height: var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  background: var(--fill-input);\n  transition: var(--transition);\n}\n.ds-switch__track::after {\n  content: \"\";\n  position: absolute;\n  top: var(--space-1);\n  bottom: var(--space-1);\n  left: var(--space-1);\n  width: calc(var(--space-5) - var(--space-2) - var(--border-width) * 2);\n  border-radius: var(--radius-pill);\n  background: var(--color-text-muted);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n  left: calc(100% - var(--space-5) + var(--space-1) + var(--border-width) * 2);\n  background: var(--color-accent);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-1);\n}\n.ds-switch__label {\n  color: var(--color-heading);\n}\n.ds-switch__label small {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* tooltip: a dotted label; the hint appears on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  border-bottom: var(--border-width) dotted currentColor;\n  cursor: help;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 6;\n  display: none;\n  width: max-content;\n  max-width: min(32ch, 60vw);\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-panel);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  letter-spacing: 0;\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n\n/* avatar: a backlit head and shoulders, drawn from the scene colours.\n   Each dark shape lies on a lit copy of itself, moved a little towards\n   the light, which leaves a rim. */\n.ds-avatar {\n  position: relative;\n  display: inline-block;\n  flex: none;\n  width: var(--size-control);\n  height: var(--size-control);\n  overflow: hidden;\n  border-radius: var(--radius-pill);\n  background:\n    radial-gradient(ellipse 15% 19% at 50% 41%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 15% 19% at 52% 40%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 96%, transparent 100%),\n    radial-gradient(ellipse 7% 12% at 50% 60%, var(--color-bar) 0 96%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 50% 100%, var(--color-bar) 0 97%, transparent 100%),\n    radial-gradient(ellipse 38% 30% at 52% 99%, color-mix(in srgb, var(--color-accent) 60%, var(--color-bar-text)) 0 97%, transparent 100%),\n    radial-gradient(ellipse 60% 50% at 86% 14%, color-mix(in srgb, var(--color-accent) 80%, transparent), transparent 100%),\n    linear-gradient(to bottom, var(--color-fill-4), var(--color-bar));\n}\n.ds-avatar--large {\n  width: calc(var(--size-control) * 2);\n  height: calc(var(--size-control) * 2);\n}\n.ds-person {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-person__name {\n  display: block;\n  color: var(--color-heading);\n}\n.ds-person__role {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n\n/* progress: a hairline with the light running along it */\n.ds-progress {\n  display: block;\n  min-width: 0;\n}\n.ds-progress__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n}\n.ds-progress__value {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.ds-progress__bar {\n  display: block;\n  width: 100%;\n  height: var(--border-width-strong);\n  overflow: hidden;\n  appearance: none;\n  -webkit-appearance: none;\n  border: 0;\n  background: color-mix(in srgb, currentColor 24%, transparent);\n  color: var(--color-accent);\n}\n.ds-progress__bar::-webkit-progress-bar {\n  background: transparent;\n}\n.ds-progress__bar::-webkit-progress-value {\n  background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n  background: var(--color-accent);\n}\n\n/* accordion */\n.ds-accordion {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__head::after {\n  content: \"\";\n  flex: none;\n  align-self: center;\n  display: inline-block;\n  width: calc(var(--space-2) * 1.25);\n  height: calc(var(--space-2) * 1.25);\n  background: currentColor;\n  clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n  color: var(--color-heading-alt);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after {\n  rotate: 45deg;\n}\n.ds-accordion__body {\n  max-width: 60ch;\n  margin: 0;\n  padding: 0 0 var(--space-4);\n  color: var(--color-text);\n}\n\n/* nav: one thin line on the page, links at the left, the mark in the\n   middle, the bag at the right */\n.ds-nav {\n  position: sticky;\n  top: 0;\n  z-index: 7;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-page);\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-5);\n}\n.ds-nav__links {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link,\n.ds-menu__toggle {\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  cursor: pointer;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover,\n.ds-menu__toggle: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(#shop:target) .ds-nav__link[href=\"#shop\"],\n.ds-page:has(#object:target) .ds-nav__link[href=\"#object\"],\n.ds-page:has(#bag:target) .ds-nav__link[href=\"#bag\"] {\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-5);\n}\n.ds-nav__count {\n  font-family: var(--font-mono);\n  color: var(--color-heading-alt);\n}\n\n/* menu: a list that drops from the word Collections */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle {\n  list-style: none;\n}\n.ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle::after {\n  content: \"\";\n  flex: none;\n  align-self: center;\n  display: inline-block;\n  width: calc(var(--space-2) * 1.25);\n  height: calc(var(--space-2) * 1.25);\n  background: currentColor;\n  clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n  color: var(--color-heading-alt);\n}\n.ds-menu[open] > .ds-menu__toggle::after {\n  rotate: 45deg;\n}\n.ds-menu__list {\n  position: absolute;\n  top: 100%;\n  left: calc(var(--space-4) * -1);\n  z-index: 8;\n  min-width: calc(var(--size-side) + var(--space-7));\n  margin: 0;\n  padding: var(--space-2) 0;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  list-style: none;\n}\n.ds-menu__item {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding: var(--space-2) var(--space-4);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-menu__item span {\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n\n/* object: a thing of the house, drawn as a dark body with a lit edge.\n   The body is the bar colour; the edge nearest the lamp is the accent. */\n.ds-object,\n.ds-object::before,\n.ds-object::after {\n  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 70%, var(--color-bar-text)) 0, var(--color-bar) 9%, var(--color-bar) 74%, color-mix(in srgb, var(--color-fill-4) 70%, var(--color-bar)) 100%);\n}\n.ds-object {\n  position: absolute;\n  bottom: 21%;\n  left: 50%;\n  z-index: 1;\n  width: 24%;\n  aspect-ratio: 0.62;\n  border-radius: 10% / 6%;\n  transform: translateX(-50%);\n}\n.ds-object::before,\n.ds-object::after {\n  content: \"\";\n  position: absolute;\n}\n/* flask: the default body, a stopper and a label */\n.ds-object::before {\n  bottom: 100%;\n  left: 32%;\n  width: 36%;\n  height: 20%;\n}\n.ds-object::after {\n  inset: 42% 16% 20% 16%;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 36%, transparent);\n  background: transparent;\n}\n.ds-object--vase {\n  width: 22%;\n  aspect-ratio: 0.5;\n  border-radius: 50% / 60% 60% 40% 40%;\n}\n.ds-object--vase::before {\n  bottom: 90%;\n  left: 28%;\n  width: 44%;\n  height: 26%;\n  clip-path: polygon(0 0, 100% 0, 76% 100%, 24% 100%);\n}\n.ds-object--vase::after {\n  display: none;\n}\n.ds-object--bowl {\n  width: 44%;\n  aspect-ratio: 2.3;\n  border-radius: 0 0 50% 50% / 0 0 100% 100%;\n}\n.ds-object--bowl::before {\n  top: 94%;\n  bottom: auto;\n  left: 36%;\n  width: 28%;\n  height: 16%;\n}\n.ds-object--bowl::after {\n  display: none;\n}\n.ds-object--candle {\n  width: 5%;\n  aspect-ratio: 0.14;\n}\n.ds-object--candle::before {\n  bottom: 103%;\n  left: -70%;\n  width: 240%;\n  height: 16%;\n  border-radius: 50% / 70% 70% 30% 30%;\n  background: radial-gradient(ellipse 50% 60% at 50% 66%, var(--color-bar-text) 0 30%, var(--color-accent) 70%, transparent 100%);\n}\n.ds-object--candle::after {\n  inset: 100% -240% auto -240%;\n  height: 5%;\n  border: 0;\n  background: var(--color-bar);\n}\n/* lamp: a dome on a stem; the light under it is the accent */\n.ds-object--lamp {\n  bottom: 62%;\n  width: 34%;\n  aspect-ratio: 1.9;\n  border-radius: 50% 50% 0 0 / 100% 100% 0 0;\n}\n.ds-object--lamp::before {\n  top: 100%;\n  bottom: auto;\n  left: 48%;\n  width: 4%;\n  height: 210%;\n  background: var(--color-bar);\n}\n.ds-object--lamp::after {\n  inset: 100% 6% auto 6%;\n  height: 14%;\n  border: 0;\n  border-radius: 0 0 50% 50% / 0 0 100% 100%;\n  background: radial-gradient(ellipse 50% 100% at 50% 0%, var(--color-bar-text) 0, var(--color-accent) 60%, color-mix(in srgb, var(--color-accent) 40%, transparent) 100%);\n}\n\n/* plinth: the studio a single object stands in. A wall washed with one\n   fill, a floor, and a pool of light where the object stands. */\n.ds-plinth {\n  position: relative;\n  display: block;\n  isolation: isolate;\n  overflow: hidden;\n  aspect-ratio: 0.8;\n  border-radius: var(--radius-page);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-plinth::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background:\n    radial-gradient(ellipse 46% 9% at 50% 80%, color-mix(in srgb, var(--color-accent) 70%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 79%, color-mix(in srgb, var(--color-fill-4) 70%, transparent) 79%, transparent 100%),\n    radial-gradient(ellipse 80% 62% at 40% 34%, var(--color-fill-4), color-mix(in srgb, var(--color-fill-1) 60%, transparent) 60%, transparent 100%);\n}\n.ds-plinth--2::before {\n  background:\n    radial-gradient(ellipse 46% 9% at 50% 80%, color-mix(in srgb, var(--color-accent-alt) 60%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 79%, color-mix(in srgb, var(--color-fill-2) 80%, transparent) 79%, transparent 100%),\n    linear-gradient(100deg, transparent 0 30%, color-mix(in srgb, var(--color-accent-alt) 26%, transparent) 30% 52%, transparent 52%),\n    radial-gradient(ellipse 90% 70% at 70% 30%, var(--color-fill-2), transparent 100%);\n}\n.ds-plinth--3::before {\n  background:\n    radial-gradient(ellipse 60% 12% at 50% 80%, color-mix(in srgb, var(--color-accent) 50%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 79%, color-mix(in srgb, var(--color-fill-3) 90%, transparent) 79%, transparent 100%),\n    radial-gradient(ellipse 34% 34% at 50% 40%, color-mix(in srgb, var(--color-accent) 60%, transparent), transparent 100%),\n    radial-gradient(ellipse 90% 80% at 50% 40%, var(--color-fill-3), transparent 100%);\n}\n.ds-plinth--4::before {\n  background:\n    radial-gradient(ellipse 46% 9% at 50% 80%, color-mix(in srgb, var(--color-bar-text) 40%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 79%, color-mix(in srgb, var(--color-fill-4) 90%, transparent) 79%, transparent 100%),\n    conic-gradient(from 150deg at 50% -10%, transparent 0deg, color-mix(in srgb, var(--color-bar-text) 22%, transparent) 14deg, color-mix(in srgb, var(--color-bar-text) 22%, transparent) 46deg, transparent 60deg, transparent 360deg),\n    radial-gradient(ellipse 90% 70% at 50% 20%, var(--color-fill-1), transparent 100%);\n}\n.ds-plinth--wide {\n  aspect-ratio: 1.5;\n}\n.ds-plinth--square {\n  aspect-ratio: 1;\n}\n.ds-plinth--wide .ds-object {\n  width: 13%;\n}\n.ds-plinth--wide .ds-object--vase {\n  width: 12%;\n}\n.ds-plinth--wide .ds-object--bowl {\n  width: 24%;\n}\n.ds-plinth--wide .ds-object--lamp {\n  width: 18%;\n}\n.ds-plinth--wide .ds-object--candle {\n  width: 3%;\n}\n.ds-plinth__label {\n  position: absolute;\n  top: var(--space-3);\n  right: var(--space-3);\n  left: var(--space-3);\n  z-index: 2;\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n.ds-plinth__word {\n  position: absolute;\n  top: 16%;\n  left: 50%;\n  z-index: 0;\n  margin: 0;\n  color: transparent;\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n  white-space: nowrap;\n  transform: translateX(-50%);\n  -webkit-text-stroke: var(--border-width) color-mix(in srgb, var(--color-bar-text) 44%, transparent);\n}\n\n/* hero: a dark room. One lamp over a table, three objects in its light,\n   and the season's word behind them. */\n.ds-hero {\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  min-height: var(--size-scene);\n  padding: var(--space-8) var(--space-5) var(--space-5);\n  overflow: hidden;\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-hero__room,\n.ds-hero__cone {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  pointer-events: none;\n}\n.ds-hero__room {\n  background:\n    linear-gradient(to bottom, transparent 0 66%, color-mix(in srgb, var(--color-bar-text) 30%, transparent) 66%, transparent calc(66% + var(--border-width))),\n    radial-gradient(ellipse 30% 8% at 70% 67%, color-mix(in srgb, var(--color-accent) 90%, var(--color-bar-text)), color-mix(in srgb, var(--color-accent) 50%, transparent) 50%, transparent 100%),\n    linear-gradient(to bottom, transparent 0 66%, var(--color-fill-1) 66%, var(--color-bar) 100%),\n    radial-gradient(ellipse 50% 60% at 70% 40%, var(--color-fill-4), var(--color-fill-3) 50%, transparent 100%),\n    linear-gradient(90deg, var(--color-bar), transparent 40%);\n}\n.ds-hero__cone {\n  background:\n    conic-gradient(from 148deg at 70% 26%, transparent 0deg, color-mix(in srgb, var(--color-accent) 34%, transparent) 3deg, color-mix(in srgb, var(--color-accent) 20%, transparent) 61deg, transparent 64deg, transparent 360deg);\n  -webkit-mask-image: linear-gradient(to bottom, transparent 24%, currentColor 30%, currentColor 60%, transparent 67%);\n  mask-image: linear-gradient(to bottom, transparent 24%, currentColor 30%, currentColor 60%, transparent 67%);\n}\n.ds-hero__word {\n  position: absolute;\n  top: calc(var(--size-nav) + var(--space-4));\n  left: var(--space-5);\n  z-index: -1;\n  margin: 0;\n  color: transparent;\n  font-family: var(--font-heading);\n  font-size: calc(var(--text-display) * 1.4);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n  white-space: nowrap;\n  -webkit-text-stroke: var(--border-width) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n}\n.ds-hero .ds-object {\n  z-index: -1;\n  bottom: 34%;\n  left: 62%;\n  width: 5%;\n}\n.ds-hero .ds-object--lamp {\n  bottom: 69%;\n  left: 70%;\n  width: 13%;\n}\n.ds-hero .ds-object--lamp::before {\n  top: auto;\n  bottom: 100%;\n  height: 400%;\n}\n.ds-hero .ds-object--bowl {\n  left: 77%;\n  width: 9%;\n  bottom: 35%;\n}\n.ds-hero .ds-object--vase {\n  left: 68%;\n  width: 4.4%;\n}\n.ds-hero__kicker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0 0 var(--space-4);\n}\n.ds-hero__title {\n  max-width: 9ch;\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin-top: var(--space-5);\n}\n.ds-hero__lead {\n  max-width: 40ch;\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n\n/* section */\n.ds-section {\n  padding: var(--space-8) 0;\n}\n.ds-section--edge {\n  padding: var(--space-8) var(--space-5);\n}\n.ds-section__head {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: var(--space-2) var(--space-5);\n  margin-bottom: var(--space-5);\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-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* carousel: one look to a slide, a wide plate beside its caption */\n.ds-carousel {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  gap: var(--space-5);\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 100%;\n  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);\n  align-items: end;\n  gap: var(--space-6);\n  min-width: 0;\n  scroll-snap-align: start;\n}\n.ds-carousel__copy {\n  display: grid;\n  justify-items: start;\n  gap: var(--space-3);\n}\n.ds-carousel__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-carousel__text {\n  max-width: 36ch;\n  margin: 0;\n}\n.ds-carousel__nav {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  color: var(--color-text-muted);\n}\n.ds-carousel__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  max-width: var(--space-8);\n  height: var(--border-width);\n  background: var(--color-border-strong);\n  opacity: 0.4;\n}\n.ds-carousel__dot.is-current {\n  height: var(--border-width-strong);\n  background: var(--color-accent);\n  opacity: 1;\n}\n.ds-carousel__arrow {\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  text-decoration: none;\n}\n.ds-carousel__arrow.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* grid: a sparse row of four objects, each on one of the fills */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5) var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid--three {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.ds-grid__cell {\n  display: grid;\n  gap: var(--space-3);\n  color: var(--color-text);\n  text-decoration: none;\n}\n.ds-grid__plate {\n  position: relative;\n  display: block;\n  isolation: isolate;\n  overflow: hidden;\n  aspect-ratio: 0.8;\n  border-radius: var(--radius-page);\n  background:\n    radial-gradient(ellipse 46% 9% at 50% 80%, color-mix(in srgb, var(--color-accent) 60%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 79%, color-mix(in srgb, var(--color-bar) 40%, transparent) 79%),\n    radial-gradient(ellipse 70% 50% at 50% 30%, color-mix(in srgb, var(--color-heading) 12%, transparent), transparent 100%),\n    var(--color-fill-1);\n  box-shadow: var(--shadow-panel);\n  transition: var(--transition);\n}\n.ds-grid > :nth-child(4n + 2) .ds-grid__plate {\n  background:\n    radial-gradient(ellipse 46% 9% at 50% 80%, color-mix(in srgb, var(--color-accent-alt) 50%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 79%, color-mix(in srgb, var(--color-bar) 40%, transparent) 79%),\n    radial-gradient(ellipse 60% 60% at 80% 20%, color-mix(in srgb, var(--color-heading) 12%, transparent), transparent 100%),\n    var(--color-fill-2);\n}\n.ds-grid > :nth-child(4n + 3) .ds-grid__plate {\n  background:\n    radial-gradient(ellipse 46% 9% at 50% 80%, color-mix(in srgb, var(--color-accent) 60%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 79%, color-mix(in srgb, var(--color-bar) 40%, transparent) 79%),\n    radial-gradient(ellipse 60% 60% at 20% 20%, color-mix(in srgb, var(--color-heading) 12%, transparent), transparent 100%),\n    var(--color-fill-3);\n}\n.ds-grid > :nth-child(4n + 4) .ds-grid__plate {\n  background:\n    radial-gradient(ellipse 46% 9% at 50% 80%, color-mix(in srgb, var(--color-accent-alt) 50%, transparent), transparent 100%),\n    linear-gradient(to bottom, transparent 0 79%, color-mix(in srgb, var(--color-bar) 40%, transparent) 79%),\n    radial-gradient(ellipse 80% 40% at 50% 10%, color-mix(in srgb, var(--color-heading) 14%, transparent), transparent 100%),\n    var(--color-fill-4);\n}\n.ds-grid__cell:hover .ds-grid__plate,\n.ds-grid__cell.is-hover .ds-grid__plate {\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__plate .ds-badge {\n  position: absolute;\n  top: var(--space-3);\n  left: var(--space-3);\n  z-index: 2;\n}\n.ds-grid__row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n.ds-grid__title {\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}\n.ds-grid__price {\n  color: var(--color-text);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n}\n.ds-grid__text {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* stats: one line of figures across the page */\n.ds-stat {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin: 0;\n  padding: var(--space-5) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-3);\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}\n.ds-stat__label {\n  max-width: 12ch;\n  margin: 0;\n  color: var(--color-text-muted);\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: grid;\n  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);\n  align-items: end;\n  gap: var(--space-6);\n  padding: var(--space-7) var(--space-5);\n}\n.ds-band__text {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-band__side {\n  display: grid;\n  justify-items: start;\n  gap: var(--space-4);\n}\n.ds-band__side p {\n  margin: 0;\n}\n\n/* inner pages: breadcrumb, then a title on a hairline with the count */\n.ds-edge {\n  padding: 0 var(--space-5);\n}\n.ds-top {\n  padding-top: var(--space-5);\n  color: var(--color-text-muted);\n}\n.ds-page-header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-4);\n  margin: var(--space-6) 0 var(--space-5);\n  padding-bottom: var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__main {\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: calc(var(--text-h1) * 1.3);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  max-width: 56ch;\n  margin: var(--space-3) 0 0;\n  color: var(--color-text);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-main {\n  padding-bottom: 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-6);\n}\n.ds-cols--object {\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n}\n.ds-cols--bag {\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n}\n.ds-stack {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n.ds-toolbar .ds-switch {\n  padding: 0;\n  border: 0;\n}\n\n/* sidebar */\n.ds-sidebar {\n  position: sticky;\n  top: calc(var(--size-nav) + var(--space-4));\n  display: grid;\n  gap: var(--space-3);\n}\n.ds-sidebar__title {\n  margin: 0;\n  color: var(--color-text-muted);\n}\n.ds-sidebar__list {\n  display: grid;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-1) 0;\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  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::before {\n  content: \"\";\n  align-self: center;\n  width: var(--space-3);\n  height: var(--border-width-strong);\n  margin-right: calc(var(--space-2) * -1);\n  background: var(--color-accent);\n}\n.ds-sidebar__count {\n  margin-left: auto;\n  color: var(--color-text-muted);\n  font-family: var(--font-mono);\n}\n\n/* tabs: words in a row, the current one boxed */\n.ds-tabs {\n  display: flex;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  overflow-x: auto;\n  list-style: none;\n  scrollbar-width: none;\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  min-height: calc(var(--size-control) - var(--space-3));\n  padding: 0 var(--space-4);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  border-color: var(--color-border-strong);\n  color: var(--color-heading);\n}\n\n/* gallery: the large plate and its three small ones */\n.ds-gallery {\n  display: grid;\n  grid-template-columns: var(--size-thumb) minmax(0, 1fr);\n  gap: var(--space-3);\n}\n.ds-gallery__thumbs {\n  display: grid;\n  align-content: start;\n  gap: var(--space-3);\n}\n.ds-gallery__thumbs .ds-plinth.is-current {\n  outline: var(--border-width) var(--border-style) var(--color-accent);\n  outline-offset: calc(var(--space-1) / 2);\n}\n.ds-price {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-large);\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-2) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-surface-alt);\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-2) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n  background: var(--color-surface);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n  font-family: var(--font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n.ds-table__title {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\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: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-4) var(--space-3);\n}\n.ds-panel__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n  padding: 0 var(--space-4) var(--space-4);\n}\n.ds-panel__text {\n  margin: 0;\n}\n.ds-facts {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 0;\n  margin: 0;\n}\n.ds-facts dt,\n.ds-facts dd {\n  margin: 0;\n  padding: var(--space-2) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-facts dt {\n  color: var(--color-text-muted);\n}\n.ds-facts dd {\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n  text-align: right;\n}\n.ds-facts__total {\n  font-size: var(--text-large);\n}\n\n/* list: the lines of the bag */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  list-style: none;\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: var(--size-thumb) minmax(0, 1fr) auto;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__title {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: none;\n}\n.ds-list__meta {\n  display: block;\n  margin-top: var(--space-2);\n  color: var(--color-text-muted);\n}\n.ds-list__end {\n  display: grid;\n  justify-items: end;\n  gap: var(--space-2);\n}\n\n/* footer */\n.ds-footer {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n.ds-footer__cols {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5);\n  padding: var(--space-6) var(--space-5);\n}\n.ds-footer__about {\n  max-width: 30ch;\n  margin: var(--space-4) 0 0;\n}\n.ds-footer__title {\n  margin: 0 0 var(--space-3);\n  opacity: 0.7;\n}\n.ds-footer__list {\n  display: grid;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: inherit;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: var(--space-track);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: underline;\n}\n.ds-footer__legal {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: var(--space-4) var(--space-5);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 26%, transparent);\n}\n\n@media (max-width: 1100px) {\n  .ds-hero__title,\n  .ds-plinth__word {\n    font-size: calc(var(--text-display) * 0.7);\n  }\n  .ds-hero__word {\n    font-size: var(--text-display);\n  }\n  .ds-grid,\n  .ds-grid--three {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-cols,\n  .ds-cols--object,\n  .ds-cols--bag,\n  .ds-band__inner {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-sidebar {\n    position: static;\n  }\n  .ds-sidebar__list {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-1) var(--space-5);\n  }\n}\n@media (max-width: 800px) {\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__inner .ds-brand {\n    grid-row: 1;\n    grid-column: 1;\n    justify-self: start;\n  }\n  .ds-nav__actions {\n    grid-row: 1;\n    grid-column: 2;\n  }\n  .ds-nav__links {\n    grid-row: 2;\n    grid-column: 1 / -1;\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-nav__link,\n  .ds-menu__toggle {\n    height: calc(var(--size-nav) - var(--space-4));\n  }\n  .ds-nav__actions .ds-nav__link:first-child {\n    display: none;\n  }\n  .ds-wrap,\n  .ds-edge {\n    padding-right: var(--space-4);\n    padding-left: var(--space-4);\n  }\n  .ds-hero {\n    min-height: calc(var(--size-scene) - var(--space-9));\n    padding: var(--space-7) var(--space-4) var(--space-5);\n  }\n  .ds-hero__title,\n  .ds-plinth__word {\n    font-size: calc(var(--text-display) * 0.46);\n  }\n  .ds-hero__word {\n    left: var(--space-4);\n    font-size: calc(var(--text-display) * 0.6);\n  }\n  .ds-hero__room {\n    background:\n      linear-gradient(to bottom, transparent 0 50%, color-mix(in srgb, var(--color-bar-text) 30%, transparent) 50%, transparent calc(50% + var(--border-width))),\n      radial-gradient(ellipse 60% 6% at 60% 51%, color-mix(in srgb, var(--color-accent) 90%, var(--color-bar-text)), color-mix(in srgb, var(--color-accent) 50%, transparent) 50%, transparent 100%),\n      linear-gradient(to bottom, transparent 0 50%, var(--color-fill-1) 50%, var(--color-bar) 90%),\n      radial-gradient(ellipse 90% 50% at 60% 30%, var(--color-fill-4), var(--color-fill-3) 50%, transparent 100%);\n  }\n  .ds-hero__cone {\n    display: none;\n  }\n  .ds-hero .ds-object {\n    bottom: 50%;\n    left: 38%;\n    width: 11%;\n  }\n  .ds-hero .ds-object--lamp {\n    bottom: 68%;\n    left: 60%;\n    width: 30%;\n  }\n  .ds-hero .ds-object--bowl {\n    bottom: 50.5%;\n    left: 80%;\n    width: 22%;\n  }\n  .ds-hero .ds-object--vase {\n    left: 58%;\n    width: 10%;\n  }\n  .ds-section__title,\n  .ds-band__text,\n  .ds-stat__figure {\n    font-size: calc(var(--text-h1) * 0.6);\n  }\n  .ds-page-header__title {\n    font-size: calc(var(--text-h1) * 0.7);\n    letter-spacing: var(--heading-tracking);\n  }\n  .ds-section {\n    padding: var(--space-7) 0;\n  }\n  .ds-section--edge {\n    padding: var(--space-7) var(--space-4);\n  }\n  .ds-carousel__slide {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-4);\n  }\n  .ds-band__inner {\n    padding: var(--space-6) var(--space-4);\n  }\n  .ds-footer__cols {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    padding: var(--space-6) var(--space-4);\n  }\n  .ds-footer__legal {\n    padding: var(--space-4);\n  }\n  .ds-gallery {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-gallery__thumbs {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    order: 2;\n  }\n}\n@media (max-width: 520px) {\n  .ds-hero__title,\n  .ds-plinth__word {\n    font-size: calc(var(--text-display) * 0.3);\n  }\n  .ds-hero__word {\n    font-size: calc(var(--text-display) * 0.4);\n  }\n  .ds-section__title,\n  .ds-band__text,\n  .ds-stat__figure {\n    font-size: calc(var(--text-h1) * 0.5);\n  }\n  .ds-page-header__title {\n    font-size: calc(var(--text-h1) * 0.56);\n  }\n  .ds-hero__lead {\n    font-size: var(--text-base);\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-stat {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat__item {\n    display: grid;\n    gap: var(--space-1);\n  }\n  .ds-list__item {\n    grid-template-columns: calc(var(--size-thumb) * 0.7) minmax(0, 1fr);\n  }\n  .ds-list__end {\n    grid-column: 2;\n    justify-items: start;\n  }\n  /* the copy is taller on a phone: the room keeps its height so the objects stay above it */\n  .ds-hero {\n    min-height: var(--size-scene);\n  }\n}\n\n/* between a phone and a desk the one-column hero keeps its full height and\n   the objects their desk proportions, so they stand apart above the copy */\n@media (min-width: 521px) and (max-width: 800px) {\n  .ds-hero {\n    min-height: var(--size-scene);\n  }\n  .ds-hero .ds-object {\n    left: 44%;\n    width: 6%;\n  }\n  .ds-hero .ds-object--lamp {\n    left: 58%;\n    width: 17%;\n  }\n  .ds-hero .ds-object--vase {\n    left: 53%;\n    width: 5.4%;\n  }\n  .ds-hero .ds-object--bowl {\n    left: 74%;\n    width: 12%;\n  }\n}\n\n/* Phones: a tip spans its card instead of leaving the window. */\n@media (max-width: 520px) {\n  .ds-grid__cell {\n    position: relative;\n  }\n  .ds-grid__cell .ds-tooltip {\n    position: static;\n  }\n  .ds-grid__cell .ds-tooltip__tip {\n    top: auto;\n    right: 0;\n    bottom: auto;\n    left: 0;\n    align-self: flex-start;\n    width: auto;\n    max-width: none;\n    transform: translateY(calc(-100% - var(--space-2)));\n  }\n}\n\n/* Phones: the links spread across the bar and the collections open as a full row under it. */\n@media (max-width: 520px) {\n  .ds-nav__inner {\n    position: relative;\n  }\n  .ds-nav__links {\n    justify-content: space-between;\n  }\n  .ds-nav__links .ds-menu {\n    position: static;\n  }\n  .ds-nav__links .ds-menu__list {\n    right: 0;\n    left: 0;\n    min-width: 0;\n  }\n  .ds-nav__actions .ds-nav__link:first-child {\n    display: inline-flex;\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 object house shop 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    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">House</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#shop\">Objects</a></li>\n      <li>\n        <details class=\"ds-menu\">\n          <summary class=\"ds-menu__toggle\">Collections</summary>\n          <ul class=\"ds-menu__list\">\n            <li><a class=\"ds-menu__item\" href=\"#shop\">07 Dark rooms <span>12</span></a></li>\n            <li><a class=\"ds-menu__item\" href=\"#shop\">06 Low water <span>09</span></a></li>\n            <li><a class=\"ds-menu__item\" href=\"#shop\">05 Ash and oil <span>11</span></a></li>\n            <li><a class=\"ds-menu__item\" href=\"#shop\">The archive <span>41</span></a></li>\n          </ul>\n        </details>\n      </li>\n    </ul>\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" aria-hidden=\"true\"><path d=\"M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5\"/><circle cx=\"12\" cy=\"12\" r=\"4.5\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <div class=\"ds-nav__actions\">\n      <a class=\"ds-nav__link\" href=\"#object\">Lamp 07</a>\n      <a class=\"ds-nav__link\" href=\"#bag\">Bag <span class=\"ds-nav__count\">03</span></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    <span class=\"ds-hero__room\" aria-hidden=\"true\"></span>\n    <span class=\"ds-hero__cone\" aria-hidden=\"true\"></span>\n    <p class=\"ds-hero__word\" aria-hidden=\"true\">Seven</p>\n    <span class=\"ds-object ds-object--lamp\" aria-hidden=\"true\"></span>\n    <span class=\"ds-object\" aria-hidden=\"true\"></span>\n    <span class=\"ds-object ds-object--vase\" aria-hidden=\"true\"></span>\n    <span class=\"ds-object ds-object--bowl\" aria-hidden=\"true\"></span>\n    <p class=\"ds-hero__kicker ds-label\"><span>Collection 07</span><span class=\"ds-label--mono\">Twelve objects, runs of 100</span></p>\n    <h1 class=\"ds-hero__title\">Dark rooms</h1>\n    <div class=\"ds-hero__foot\">\n      <p class=\"ds-hero__lead\">A lamp, a flask, a vase and a bowl, made to be seen by one light at a time.</p>\n      <div class=\"ds-hero__actions\">\n        <a class=\"ds-button ds-button--onscene\" href=\"#shop\">Shop the collection</a>\n        <a class=\"ds-button ds-button--ghost\" href=\"#object\">See lamp 07</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--edge\">\n    <div class=\"ds-section__head\">\n      <p class=\"ds-label ds-section__kicker\">Lookbook</p>\n      <h2 class=\"ds-section__title\">Seen by one light</h2>\n      <a class=\"ds-link ds-link--arrow\" href=\"#shop\">All twelve</a>\n    </div>\n    <div class=\"ds-carousel\">\n      <ul class=\"ds-carousel__track\">\n        <li class=\"ds-carousel__slide\">\n          <span class=\"ds-plinth ds-plinth--wide ds-plinth--3\"><span class=\"ds-plinth__word\" aria-hidden=\"true\">Vessel</span><span class=\"ds-object ds-object--vase\"></span><span class=\"ds-plinth__label ds-label ds-label--mono\"><span>Look 01</span><span>07.03</span></span></span>\n          <div class=\"ds-carousel__copy\">\n            <p class=\"ds-label ds-label--accent\">Look 01 of 06</p>\n            <h3 class=\"ds-carousel__title\">Vase 07, smoked glass</h3>\n            <p class=\"ds-carousel__text\">Blown in one piece and left unpolished at the lip. It holds one branch, not a bunch.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#object\">View the object</a>\n          </div>\n        </li>\n        <li class=\"ds-carousel__slide\">\n          <span class=\"ds-plinth ds-plinth--wide ds-plinth--2\"><span class=\"ds-plinth__word\" aria-hidden=\"true\">Flask</span><span class=\"ds-object\"></span><span class=\"ds-plinth__label ds-label ds-label--mono\"><span>Look 02</span><span>07.01</span></span></span>\n          <div class=\"ds-carousel__copy\">\n            <p class=\"ds-label ds-label--accent\">Look 02 of 06</p>\n            <h3 class=\"ds-carousel__title\">Flask 07, room scent</h3>\n            <p class=\"ds-carousel__text\">Cedar, cold stone and smoke.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#object\">View the object</a>\n          </div>\n        </li>\n      </ul>\n      <div class=\"ds-carousel__nav\">\n        <span class=\"ds-label ds-label--mono\">01 / 06</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 class=\"ds-carousel__dot\"></span></span>\n        <a class=\"ds-carousel__arrow is-disabled\" href=\"#home\">Prev</a>\n        <a class=\"ds-carousel__arrow\" href=\"#home\">Next</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-edge\">\n    <div class=\"ds-section__head\">\n      <p class=\"ds-label ds-section__kicker\">New this week</p>\n      <h2 class=\"ds-section__title\">Four objects</h2>\n      <a class=\"ds-link ds-link--arrow\" href=\"#shop\">Shop all</a>\n    </div>\n    <ul class=\"ds-grid\" data-component=\"grid\">\n      <li><a class=\"ds-grid__cell\" href=\"#object\"><span class=\"ds-grid__plate\"><span class=\"ds-badge\">New</span><span class=\"ds-object ds-object--lamp\"></span></span><span class=\"ds-grid__row\"><span class=\"ds-grid__title\">Lamp 07</span><span class=\"ds-grid__price\">480.00</span></span><span class=\"ds-grid__text\">Spun steel, one bulb</span></a></li>\n      <li><a class=\"ds-grid__cell\" href=\"#object\"><span class=\"ds-grid__plate\"><span class=\"ds-object\"></span></span><span class=\"ds-grid__row\"><span class=\"ds-grid__title\">Flask 07</span><span class=\"ds-grid__price\">95.00</span></span><span class=\"ds-grid__text\">Room scent, 200 ml</span></a></li>\n      <li><a class=\"ds-grid__cell\" href=\"#object\"><span class=\"ds-grid__plate\"><span class=\"ds-object ds-object--vase\"></span></span><span class=\"ds-grid__row\"><span class=\"ds-grid__title\">Vase 07</span><span class=\"ds-grid__price\">260.00</span></span><span class=\"ds-grid__text\">Smoked glass</span></a></li>\n      <li><a class=\"ds-grid__cell\" href=\"#object\"><span class=\"ds-grid__plate\"><span class=\"ds-object ds-object--bowl\"></span></span><span class=\"ds-grid__row\"><span class=\"ds-grid__title\">Bowl 07</span><span class=\"ds-grid__price\">140.00</span></span><span class=\"ds-grid__text\">Black stoneware</span></a></li>\n    </ul>\n  </div>\n\n  <div class=\"ds-section ds-section--edge\">\n    <div class=\"ds-stat\" data-component=\"stats\">\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">07</p><p class=\"ds-label ds-stat__label\">Collections since 2019</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">41</p><p class=\"ds-label ds-stat__label\">Objects in the archive</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">100</p><p class=\"ds-label ds-stat__label\">Pieces in every run</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">03</p><p class=\"ds-label ds-stat__label\">Workshops we work with</p></div>\n    </div>\n  </div>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-band__inner\">\n      <p class=\"ds-band__text\">When a run ends, it ends.</p>\n      <div class=\"ds-band__side\">\n        <p>Every object is made one hundred times and numbered. We do not make a second run.</p>\n        <a class=\"ds-button ds-button--inverse\" href=\"#shop\">See what is left</a>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"shop\">\n  <div class=\"ds-edge\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">House</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#shop\">Objects</a></li>\n        <li class=\"ds-breadcrumb__current\">07 Dark rooms</li>\n      </ol>\n    </div>\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Dark rooms</h1>\n        <p class=\"ds-page-header__text\">Collection 07. Twelve objects for a room lit by one lamp.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <span class=\"ds-label ds-label--mono\">12 objects</span>\n        <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#bag\">Open the bag</a>\n      </div>\n    </div>\n  </div>\n  <div class=\"ds-main ds-edge\">\n    <div class=\"ds-cols\">\n      <div class=\"ds-sidebar\" data-component=\"sidebar\">\n        <p class=\"ds-label ds-sidebar__title\">Kinds of object</p>\n        <div class=\"ds-sidebar__list\">\n          <a class=\"ds-sidebar__item is-current\" href=\"#shop\">Everything <span class=\"ds-sidebar__count\">12</span></a>\n          <a class=\"ds-sidebar__item\" href=\"#shop\">Light <span class=\"ds-sidebar__count\">03</span></a>\n          <a class=\"ds-sidebar__item\" href=\"#shop\">Vessels <span class=\"ds-sidebar__count\">05</span></a>\n          <a class=\"ds-sidebar__item\" href=\"#shop\">Scent <span class=\"ds-sidebar__count\">02</span></a>\n          <a class=\"ds-sidebar__item\" href=\"#shop\">Table <span class=\"ds-sidebar__count\">02</span></a>\n        </div>\n      </div>\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=\"#shop\">Newest</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#shop\">Price</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#shop\">Nearly gone</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\">In stock only</span></label>\n        </div>\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Shipping</span>Glass travels in a wooden crate and takes five working days.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Sold out</span>Candle 07 left your bag: the last piece was sold a minute ago.</p>\n        </div>\n        <ul class=\"ds-grid ds-grid--three\">\n          <li><a class=\"ds-grid__cell\" href=\"#object\"><span class=\"ds-grid__plate\"><span class=\"ds-badge\" data-component=\"badge\">New</span><span class=\"ds-object ds-object--lamp\"></span></span><span class=\"ds-grid__row\"><span class=\"ds-grid__title\">Lamp 07</span><span class=\"ds-grid__price\">480.00</span></span><span class=\"ds-grid__text\"><span class=\"ds-badge ds-badge--success\">In stock</span></span></a></li>\n          <li><a class=\"ds-grid__cell is-hover\" href=\"#object\"><span class=\"ds-grid__plate\"><span class=\"ds-object\"></span></span><span class=\"ds-grid__row\"><span class=\"ds-grid__title\">Flask 07</span><span class=\"ds-grid__price\">95.00</span></span><span class=\"ds-grid__text\"><span class=\"ds-badge ds-badge--success\">In stock</span></span></a></li>\n          <li><a class=\"ds-grid__cell\" href=\"#object\"><span class=\"ds-grid__plate\"><span class=\"ds-object ds-object--vase\"></span></span><span class=\"ds-grid__row\"><span class=\"ds-grid__title\">Vase 07</span><span class=\"ds-grid__price\">260.00</span></span><span class=\"ds-grid__text\"><span class=\"ds-badge ds-badge--warning\">9 of 100 left</span></span></a></li>\n          <li><a class=\"ds-grid__cell\" href=\"#object\"><span class=\"ds-grid__plate\"><span class=\"ds-object ds-object--bowl\"></span></span><span class=\"ds-grid__row\"><span class=\"ds-grid__title\">Bowl 07</span><span class=\"ds-grid__price\">140.00</span></span><span class=\"ds-grid__text\"><span class=\"ds-badge ds-badge--success\">In stock</span></span></a></li>\n          <li><a class=\"ds-grid__cell\" href=\"#object\"><span class=\"ds-grid__plate\"><span class=\"ds-object ds-object--candle\"></span></span><span class=\"ds-grid__row\"><span class=\"ds-grid__title\">Candle 07</span><span class=\"ds-grid__price\">38.00</span></span><span class=\"ds-grid__text\"><span class=\"ds-badge ds-badge--danger\">Run ended</span></span></a></li>\n          <li><a class=\"ds-grid__cell\" href=\"#object\"><span class=\"ds-grid__plate\"><span class=\"ds-object ds-object--vase\"></span></span><span class=\"ds-grid__row\"><span class=\"ds-grid__title\">Vase 07, tall</span><span class=\"ds-grid__price\">310.00</span></span><span class=\"ds-grid__text\"><span class=\"ds-tooltip ds-label ds-label--muted\" tabindex=\"0\">Numbered<span class=\"ds-tooltip__tip\">Each piece carries its number out of 100 under the foot.</span></span></span></a></li>\n        </ul>\n        <div class=\"ds-toolbar\">\n          <span class=\"ds-label ds-label--muted\">6 of 12 objects</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#shop\">Prev</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#shop\">01</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#shop\">02</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#shop\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"object\">\n  <div class=\"ds-edge\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">House</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#shop\">07 Dark rooms</a></li>\n        <li class=\"ds-breadcrumb__current\">Lamp 07</li>\n      </ol>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Lamp 07</h1>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <p class=\"ds-price\">480.00</p>\n        <a class=\"ds-button\" href=\"#bag\">Add to bag</a>\n      </div>\n    </div>\n  </div>\n  <div class=\"ds-main ds-edge\">\n    <div class=\"ds-cols ds-cols--object\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-gallery\">\n          <div class=\"ds-gallery__thumbs\">\n            <span class=\"ds-plinth ds-plinth--square is-current\"><span class=\"ds-object ds-object--lamp\"></span></span>\n            <span class=\"ds-plinth ds-plinth--square ds-plinth--2\"><span class=\"ds-object ds-object--lamp\"></span></span>\n            <span class=\"ds-plinth ds-plinth--square ds-plinth--4\"><span class=\"ds-object ds-object--lamp\"></span></span>\n          </div>\n          <span class=\"ds-plinth ds-plinth--square\"><span class=\"ds-plinth__word\" aria-hidden=\"true\">07</span><span class=\"ds-object ds-object--lamp\"></span><span class=\"ds-plinth__label ds-label ds-label--mono\"><span>Lamp 07, spun steel</span><span>36 of 100</span></span></span>\n        </div>\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th>Size</th><th class=\"ds-table__num\">Height, cm</th><th class=\"ds-table__num\">Shade, cm</th><th class=\"ds-table__num\">Weight, kg</th><th class=\"ds-table__num\">Price</th></tr>\n            </thead>\n            <tbody>\n              <tr><td><a class=\"ds-table__title\" href=\"#object\">Table</a></td><td class=\"ds-table__num\">42</td><td class=\"ds-table__num\">28</td><td class=\"ds-table__num\">2.4</td><td class=\"ds-table__num\">480.00</td></tr>\n              <tr class=\"is-hover\"><td><a class=\"ds-table__title\" href=\"#object\">Reading</a></td><td class=\"ds-table__num\">64</td><td class=\"ds-table__num\">28</td><td class=\"ds-table__num\">3.1</td><td class=\"ds-table__num\">540.00</td></tr>\n              <tr><td><a class=\"ds-table__title\" href=\"#object\">Floor</a></td><td class=\"ds-table__num\">138</td><td class=\"ds-table__num\">34</td><td class=\"ds-table__num\">6.8</td><td class=\"ds-table__num\">720.00</td></tr>\n              <tr><td><a class=\"ds-table__title\" href=\"#object\">Wall</a></td><td class=\"ds-table__num\">22</td><td class=\"ds-table__num\">28</td><td class=\"ds-table__num\">1.9</td><td class=\"ds-table__num\">420.00</td></tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-progress\">\n          <p class=\"ds-progress__head\"><span>Run 07, numbered</span><span class=\"ds-progress__value\">64 of 100 sold</span></p>\n          <progress class=\"ds-progress__bar\" value=\"64\" max=\"100\">64%</progress>\n        </div>\n        <div class=\"ds-prose\" data-component=\"typography\">\n          <h1>A dome, a stem and one bulb</h1>\n          <p class=\"ds-prose__lead\">It lights the table under it and nothing else.</p>\n          <p>The shade is spun from one sheet of steel and blackened by hand, so <strong>no two are the same black</strong>. Order code <code>CS L07 T</code>.</p>\n          <h2>Made by</h2>\n          <p>A workshop of three on the coast, who also made lamps 02 and 05.</p>\n          <h3>In the crate</h3>\n          <ul>\n            <li>The lamp, wired, with two metres of cloth cable</li>\n            <li>One warm bulb and a spare</li>\n            <li>A card with the number of your piece</li>\n          </ul>\n        </div>\n        <div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--large\" aria-hidden=\"true\"></span><span><span class=\"ds-person__name\">The metal spinner</span><span class=\"ds-person__role\">Workshop on the coast</span></span></div>\n        <ul class=\"ds-linkrow\" data-component=\"links\">\n          <li><a class=\"ds-link\" href=\"#shop\">The whole collection</a></li>\n          <li><a class=\"ds-link is-visited\" href=\"#object\">Vase 07 (seen)</a></li>\n          <li><a class=\"ds-link is-hover\" href=\"#shop\">Other lamps</a></li>\n          <li><a class=\"ds-link is-active\" href=\"#bag\">Go to the bag</a></li>\n          <li><a class=\"ds-link ds-link--quiet\" href=\"#home\">About the house</a></li>\n        </ul>\n        <div class=\"ds-accordion\">\n          <details class=\"ds-accordion__item\" open>\n            <summary class=\"ds-accordion__head\">Care</summary>\n            <p class=\"ds-accordion__body\">Wipe with a dry cloth. The black deepens with handling.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Shipping</summary>\n            <p class=\"ds-accordion__body\">Five working days in a wooden crate, signed for.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Returns</summary>\n            <p class=\"ds-accordion__body\">Thirty days, in the crate it came in.</p>\n          </details>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"bag\">\n  <div class=\"ds-edge\">\n    <div class=\"ds-top\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a href=\"#home\">House</a></li>\n        <li class=\"ds-breadcrumb__item\"><a href=\"#bag\">Bag</a></li>\n        <li class=\"ds-breadcrumb__current\">Checkout</li>\n      </ol>\n    </div>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Your bag</h1>\n        <p class=\"ds-page-header__text\">Three objects, held for you for twenty minutes.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-link ds-link--arrow\" href=\"#shop\">Keep looking</a>\n      </div>\n    </div>\n  </div>\n  <div class=\"ds-main ds-edge\">\n    <div class=\"ds-cols ds-cols--bag\">\n      <div class=\"ds-stack\">\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\">\n            <span class=\"ds-plinth ds-plinth--square\"><span class=\"ds-object ds-object--lamp\"></span></span>\n            <span><a class=\"ds-list__title\" href=\"#object\">Lamp 07</a><span class=\"ds-label ds-list__meta\">Table size, piece 65 of 100</span></span>\n            <span class=\"ds-list__end\"><span class=\"ds-price\">480.00</span><a class=\"ds-link ds-link--quiet\" href=\"#bag\">Remove</a></span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-plinth ds-plinth--square ds-plinth--2\"><span class=\"ds-object\"></span></span>\n            <span><a class=\"ds-list__title\" href=\"#object\">Flask 07</a><span class=\"ds-label ds-list__meta\">Room scent, 200 ml, two pieces</span></span>\n            <span class=\"ds-list__end\"><span class=\"ds-price\">190.00</span><a class=\"ds-link ds-link--quiet\" href=\"#bag\">Remove</a></span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-plinth ds-plinth--square ds-plinth--3\"><span class=\"ds-object ds-object--bowl\"></span></span>\n            <span><a class=\"ds-list__title\" href=\"#object\">Bowl 07</a><span class=\"ds-label ds-list__meta\">Black stoneware, piece 12 of 100</span></span>\n            <span class=\"ds-list__end\"><span class=\"ds-price\">140.00</span><a class=\"ds-link ds-link--quiet\" href=\"#bag\">Remove</a></span>\n          </li>\n        </ul>\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"remove-title\">\n            <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"remove-title\">Remove lamp 07?</h2><a class=\"ds-dialog__close\" href=\"#bag\" aria-label=\"Close\"></a></div>\n            <div class=\"ds-dialog__body\"><p>Piece 65 goes back on the shelf and may be gone when you return.</p></div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--danger\" href=\"#bag\">Remove</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#bag\">Keep it</a>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <span class=\"ds-empty__icon\" aria-hidden=\"true\"></span>\n          <p class=\"ds-empty__title\">Nothing saved for later</p>\n          <p class=\"ds-empty__text\">Objects you set aside wait here until their run ends.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#shop\">Look at the collection</a>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\" data-component=\"panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Summary</h2><span class=\"ds-label ds-label--muted\">3 objects</span></div>\n          <div class=\"ds-panel__body\">\n            <dl class=\"ds-facts\">\n              <dt>Objects</dt><dd>810.00</dd>\n              <dt>Crate and shipping</dt><dd>35.00</dd>\n              <dt>Total</dt><dd class=\"ds-facts__total\">845.00</dd>\n            </dl>\n          </div>\n        </div>\n        <form class=\"ds-form\" data-component=\"form\" action=\"#bag\">\n          <div class=\"ds-form__row\">\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"bag-name\">Name</label>\n              <input class=\"ds-form__input\" id=\"bag-name\" type=\"text\" value=\"A. Collector\">\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"bag-country\">Ship to</label>\n              <select class=\"ds-form__select\" id=\"bag-country\">\n                <option>Portugal</option>\n                <option>Denmark</option>\n                <option>Japan</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"ds-form__field\">\n            <label class=\"ds-form__label\" for=\"bag-mail\">E-mail address</label>\n            <input class=\"ds-form__input is-error\" id=\"bag-mail\" type=\"email\" value=\"collector@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=\"bag-note\">Note for the workshop</label>\n            <textarea class=\"ds-form__textarea\" id=\"bag-note\" placeholder=\"A date it must arrive by, a name for the card\"></textarea>\n          </div>\n          <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Wrap each object separately.</label>\n          <div class=\"ds-form__actions\" data-component=\"buttons\">\n            <button class=\"ds-button\" type=\"submit\">Pay 845.00</button>\n            <a class=\"ds-button ds-button--secondary\" href=\"#shop\">Keep looking</a>\n            <button class=\"ds-button ds-button--danger\" type=\"button\">Empty the bag</button>\n            <button class=\"ds-button is-disabled\" type=\"button\" disabled>Apply code</button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-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 objects in runs of one hundred, for rooms lit by one lamp.</p>\n    </div>\n    <div>\n      <p class=\"ds-label ds-footer__title\">Shop</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#shop\">07 Dark rooms</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#shop\">The archive</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#bag\">Bag</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=\"#home\">Lookbook</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">Workshops</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">Contact</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-label ds-footer__title\">Service</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#object\">Shipping</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#object\">Returns</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#object\">Care</a></li>\n      </ul>\n    </div>\n  </div>\n  <p class=\"ds-footer__legal ds-label\"><span>2026 chronoskin. All rights reserved.</span><span>Prices include tax</span></p>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.cinematic.shop.s03.p01.t05.u02\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"cinematic\",\n    \"years\": [\n      2015,\n      2026\n    ]\n  },\n  \"archetype\": \"shop\",\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-3152\",\n  \"short\": \"v1-ci-3152\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #000000;\n  --color-canvas: #000000;\n  --color-surface: #0d0d0d;\n  --color-surface-alt: #131313;\n  --color-surface-strong: #222222;\n  --color-bar: #050505;\n  --color-bar-text: #ffffff;\n  --color-bar-alt: #0d0d0d;\n  --color-bar-alt-text: #9a9a9a;\n  --color-inverse: #e5e5e5;\n  --color-inverse-text: #0a0a0a;\n  --color-text: #cbcbcb;\n  --color-text-muted: #858585;\n  --color-heading: #ffffff;\n  --color-heading-alt: #e10600;\n  --color-link: #ffffff;\n  --color-link-quiet: #a8a8a8;\n  --color-link-visited: #b9b9b9;\n  --color-link-hover: #ff2a1a;\n  --color-link-active: #e10600;\n  --color-border: #2e2e2e;\n  --color-border-strong: #ffffff;\n  --color-border-muted: #1c1c1c;\n  --color-accent: #e10600;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #ff5a2b;\n  --color-fill-1: #1d0605;\n  --color-fill-2: #141414;\n  --color-fill-3: #330a07;\n  --color-fill-4: #1f1f1f;\n  --color-button: #ffffff;\n  --color-button-text: #000000;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #000000;\n  --color-button-secondary-text: #ffffff;\n  --color-input: #0d0d0d;\n  --color-input-text: #ffffff;\n  --color-input-border: #3a3a3a;\n  --color-disabled: #1a1a1a;\n  --color-disabled-text: #5c5c5c;\n  --color-danger: #ff4a3d;\n  --color-danger-surface: #2a0806;\n  --color-success: #5fd08a;\n  --color-warning: #f0b540;\n  --color-notice: #161616;\n  --color-notice-text: #e5e5e5;\n  --color-focus: #ff2a1a;\n  --color-shadow: rgb(0 0 0 / 0.8);\n  --color-overlay: rgb(0 0 0 / 0.75);\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: 1px;\n  --border-style: solid;\n  --radius-control: 999px;\n  --radius-panel: 2px;\n  --radius-pill: 999px;\n  --radius-page: 4px;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: 0 8px 30px var(--color-shadow);\n  --shadow-control-pressed: none;\n  --shadow-dialog: 0 40px 120px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: radial-gradient(ellipse 120% 80% at 50% 0%, color-mix(in srgb, var(--color-page) 90%, white), var(--color-page) 70%);\n  --fill-bar: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='white' opacity='.3' transform='translate(0 .5)'%3E%3Cpath opacity='.4' d='M54 0h1M62 3h1M8 4h1M183 4h1M8 5h1M77 5h1M199 5h1M96 7h1M106 7h1M124 7h1M131 7h1M109 8h1M21 9h1M182 9h1M25 10h1M155 10h1M15 11h1M137 11h1M188 11h1M107 12h1M53 13h1M2 15h1M16 15h1M42 16h1M55 16h1M4 17h1M7 17h1M98 17h1M184 17h1M34 18h1M107 18h1M157 18h1M18 19h1M82 19h1M121 19h1M18 20h1M154 20h1M138 21h1M57 22h1M86 22h1M99 22h1M52 25h1M180 25h1M127 26h1M26 27h1M43 28h1M178 28h1M98 29h1M194 30h1M149 31h1M183 31h1M116 32h1M99 33h1M146 33h1M180 33h1M196 33h1M34 34h1M147 34h1M77 36h1M199 36h1M160 39h1M193 40h1M133 44h1M98 46h1M53 47h1M157 47h1M9 48h1M116 48h1M143 48h1M150 48h1M185 48h1M9 49h1M27 49h1M64 50h1M50 51h1M127 51h1M193 51h1M23 53h1M81 53h1M156 53h1M0 54h1M37 54h1M70 54h1M71 54h1M45 57h1M5 58h1M32 58h1M39 58h1M79 58h1M194 58h1M68 60h1M65 61h1M54 62h1M34 63h1M68 63h1M114 63h1M156 63h1M29 65h1M100 65h1M121 65h1M124 65h1M7 66h1M113 66h1M82 67h1M172 69h1M16 70h1M196 70h1M8 71h1M167 71h1M45 72h1M131 73h1M27 74h1M125 75h1M65 79h1M90 79h1M179 79h1M65 80h1M79 81h1M134 81h1M72 82h1M61 83h1M118 83h1M156 84h1M79 85h1M32 86h1M112 87h1M127 89h1M87 90h1M185 90h1M121 91h1M23 92h1M2 94h1M139 94h1M153 94h1M163 94h1M1 96h1M120 96h1M105 97h1M169 97h1M171 97h1M54 98h1M75 98h1M84 99h1M181 101h1M27 102h1M132 102h1M34 103h1M105 103h1M3 104h1M68 105h1M101 107h1M140 107h1M162 110h1M56 112h1M24 114h1M29 114h1M19 115h1M35 115h1M101 115h1M159 115h1M115 116h1M21 117h1M137 117h1M148 117h1M87 118h1M112 118h1M199 119h1M35 120h1M115 120h1M111 121h1M19 123h1M22 123h1M99 123h1M150 123h1M119 124h1M31 125h1M112 126h1M121 126h1M75 127h1M113 127h1M29 128h1M167 128h1M89 129h1M114 130h1M115 130h1M9 131h1M47 131h1M38 132h1M50 132h1M51 132h1M185 132h1M42 133h1M160 133h1M178 133h1M139 134h1M3 135h1M94 135h1M44 136h1M120 136h1M23 137h1M79 137h1M105 137h1M88 138h1M104 141h1M161 141h1M115 143h1M122 143h1M131 143h1M134 143h1M139 144h1M166 144h1M140 145h1M69 146h1M71 146h1M127 146h1M164 147h1M56 149h1M97 149h1M133 149h1M35 151h1M69 151h1M112 151h1M10 152h1M107 152h1M61 153h1M79 153h1M1 154h1M100 154h1M3 155h1M173 156h1M128 157h1M167 157h1M62 158h1M107 158h1M3 159h1M40 159h1M95 159h1M130 159h1M50 160h1M12 161h1M27 161h1M121 161h1M144 161h1M149 162h1M153 162h1M177 162h1M23 163h1M59 163h1M143 163h1M4 164h1M107 164h1M184 164h1M83 166h1M157 166h1M137 167h1M84 168h1M87 168h1M157 168h1M1 169h1M103 170h1M126 172h1M45 174h1M3 175h1M4 175h1M19 175h1M21 175h1M50 175h1M85 175h1M23 176h1M148 176h1M173 176h1M187 176h1M188 177h1M33 179h1M50 179h1M100 179h1M189 180h1M21 181h1M173 181h1M10 182h1M45 182h1M64 183h1M80 183h1M105 184h1M74 186h1M106 186h1M17 187h1M48 187h1M127 187h1M188 188h1M40 189h1M167 189h1M52 191h1M43 192h1M132 192h1M2 193h1M22 194h1M6 196h1M144 196h1M2 197h1M7 199h1M50 199h1M69 199h1M127 199h1'/%3E%3Cpath opacity='1' d='M6 3h1M131 3h1M175 4h1M147 5h1M6 9h1M149 10h1M179 10h1M194 11h1M129 12h1M152 14h1M148 15h1M47 18h1M48 18h1M118 19h1M82 21h1M42 24h1M49 24h1M99 24h1M172 24h1M195 24h1M2 25h1M120 25h1M123 27h1M47 29h1M180 29h1M179 30h1M119 36h1M135 39h1M98 40h1M162 40h1M52 44h1M51 46h1M88 46h1M37 48h1M153 48h1M80 49h1M194 50h1M24 51h1M32 51h1M30 52h1M110 53h1M164 54h1M18 57h1M12 59h1M34 59h1M34 61h1M193 62h1M197 62h1M66 64h1M122 64h1M60 65h1M22 66h1M167 69h1M66 71h1M40 72h1M107 72h1M143 72h1M191 75h1M87 77h1M153 79h1M13 80h1M185 81h1M34 84h1M76 86h1M70 87h1M194 87h1M131 90h1M2 91h1M13 91h1M91 92h1M31 93h1M153 95h1M5 96h1M165 96h1M19 99h1M175 99h1M83 100h1M191 101h1M195 101h1M113 102h1M134 102h1M40 103h1M46 103h1M94 103h1M162 105h1M130 106h1M111 107h1M119 109h1M135 111h1M104 116h1M106 116h1M98 120h1M73 123h1M145 123h1M43 126h1M109 126h1M131 127h1M157 131h1M11 133h1M55 135h1M93 135h1M46 136h1M40 137h1M55 138h1M140 138h1M19 140h1M195 141h1M103 145h1M133 145h1M12 148h1M129 149h1M156 150h1M49 154h1M62 154h1M80 154h1M138 156h1M29 157h1M135 157h1M12 159h1M163 159h1M103 160h1M189 160h1M52 161h1M180 161h1M3 162h1M129 162h1M25 163h1M136 163h1M113 165h1M55 168h1M69 170h1M152 171h1M34 174h1M145 174h1M128 175h1M137 177h1M29 180h1M139 180h1M169 183h1M52 184h1M109 184h1M25 185h1M33 186h1M27 189h1M92 189h1M29 190h1M104 193h1M87 195h1M110 195h1M94 196h1M55 199h1M190 199h1'/%3E%3C/g%3E%3C/svg%3E\") var(--color-bar);\n  --fill-bar-alt: color-mix(in srgb, var(--color-bar-alt) 72%, transparent);\n  --fill-inverse: linear-gradient(180deg, var(--color-inverse), color-mix(in srgb, var(--color-inverse) 90%, black));\n  --fill-accent: var(--color-accent);\n  --fill-panel: color-mix(in srgb, var(--color-surface) 80%, transparent);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 84%, black);\n  --fill-button-secondary: color-mix(in srgb, var(--color-button-secondary) 30%, transparent);\n  --fill-input: transparent;\n  --focus-ring: 1px solid var(--color-focus);\n  --transition: all 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);\n  --backdrop-blur: 14px;\n}\n"
  }
}