{
  "id": "v1-ci-3333",
  "long_id": "v1.cinematic.shop.s03.p03.t03.u03",
  "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": "pure",
  "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-3333",
  "preview_url": "https://chrono.skin/s/v1-ci-3333/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\nThese are the conventions of the era; every layout and every token set keeps them.\n\n- A block stands on one of five grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. A scene (the picture of a screen) stands on the bar: `--fill-bar` or `--color-bar`, and carries only `--color-bar-text`. The footer and other quiet strips stand on `--fill-bar-alt` and carry `--color-bar-alt-text`. The inverted block (`--fill-inverse`, class `.ds-band`) carries only `--color-inverse-text`. Accent elements (`--fill-accent`: badges) carry `--color-accent-text`.\n- Pictures are drawn, never loaded. In a scene `--color-bar` is the darkness and every solid shape (a crowd, a ridge, a figure, an object) is a silhouette in it; `--color-accent` is the light (a beam, the sun, a lamp); `--color-accent-alt` is the second light (a flare, a rim, a far lamp); `--color-fill-1` to `--color-fill-4` are the tones between dark and light (haze, sky, walls, far hills); `--color-bar-text` is the hottest point of a light and the colour of an outlined word. The grain or scan lines of a scene come from `--fill-bar`, so a surface set changes the texture of every picture and a palette changes its light.\n- Nothing assumes that a palette is dark. The scene is as dark as `--color-bar`, the page as dark as `--color-page`; `--color-inverse` is the opposite of the page.\n- `--color-fill-1` to `--color-fill-4` are also the grounds of grid cells and carry `--color-text` and `--color-heading`; they never carry `--color-inverse-text` or `--color-bar-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` (fill `--color-inverse-text`, text `--color-inverse`) and `.ds-button--ghost`. The ghost button takes outline and text from the block it stands on. 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. On a scene a kicker inherits `--color-bar-text`.\n- The label is the second voice of the era: `--font-ui` at `--text-small` or `--text-ui`, `--ui-transform`, tracked by `--space-track` (a layout token, 2px; the type vocabulary has no positive tracking for labels). Dates, timecodes, coordinates, 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 (`--color-success`, `--color-warning`, `--color-danger`) is text, outline and a small dot on a transparent ground, so they hold on any palette. `.ds-badge--quiet` is an outline in `--color-border`.\n- `--color-notice` with `--color-notice-text` is the information notice, with a left edge of `--border-width-strong` in `--color-accent`; the error notice is `--color-danger` on `--color-danger-surface`.\n- Borders are hairlines: `--border-width` in `--color-border` between rows and around panels, `--color-border-strong` above a table or list and around the dialog, `--color-border-muted` inside boxes, `--color-input-border` around fields. `--border-width-strong` is the mark of the current item (navigation, tabs, pagination), the progress line and the notice edge.\n- Radii: `--radius-control` for buttons, fields, tabs and carousel arrows; `--radius-panel` for panels, notices, the dialog, the empty state, textareas and tooltips; `--radius-pill` for badges, switches and small avatars; `--radius-page` for the largest boxes (stills, plates, sleeves, grid cells). Shapes inside a drawing use percentages and `clip-path`, never a radius token, so a surface set cannot bend a silhouette.\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 and behind an open overlay menu.\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` at 20 to 90%; hairlines on a scene are `--color-bar-text` at 20 to 30%; outlined words are a text stroke of `--border-width` in the block's text colour at 26 to 70%; the display size steps down as `--text-display` times 0.7, 0.46 and 0.3 at 1100px, 800px and 520px, and `--text-h1` times 0.6 and 0.5, so every type set shrinks in proportion to itself. Opacity 0.6 to 0.86 dims secondary text on scenes.\n- Here: the page is a cold blue-black `#05090f`, rooms are darker still, text is ice white and blue grey, and the one colour is the acid yellow-green `--color-accent`, with a cyan `--color-accent-alt` as the second light and the strong outline. The fills are four deep blues and teals. The primary button is the accent with dark text and a faint glow; the inverted block is ice white.\n- Three families. `--font-heading` is a wide, heavy sans (Unbounded, Archivo Black, Arial Black; the references used commercial extended faces) for titles and figures, in capitals at weight 900 with tight tracking. `--font-body` and `--font-ui` are one grotesque (Space Grotesk, Helvetica Neue): text at `--text-base` 15px and `--line-body` 1.55, labels at 12px and weight 700. `--font-mono` (Space Mono, SF Mono) sets prices, piece numbers and counts.\n- `--text-display` 128px with `--line-display` 0.94 and `--display-tracking` -5px (the hero title and the outlined word on a plate; the room's outlined word is 1.4 times that); `--text-h1` 60px (section titles, figures, the band; page titles are 1.3 times that); `--text-h2` 32px (carousel titles); `--text-h3` 18px (panel, list and dialog titles); `--text-large` 19px (leads, prices).\n- Surface: square corners (badges 2px), hairlines of 1px and marks of 3px, and light instead of shadow: `--shadow-control` and `--shadow-dialog` are glows in the cyan `--color-shadow`, `--shadow-panel` an inner line. `--fill-page` carries faint vertical guide lines, `--fill-bar` fine scan lines that show in every room and plate, and the button and accent fills are short gradients. 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 <= 180px`: the outlined word in the room is the largest, at 1.4 times the display size.\n- `font-families <= 3`: a wide display face, one sans-serif for reading and labels, one monospace for figures.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `text-shadow = none`: type is flat, also on pictures.\n- `border-radius <= 12px`: boxes are square and badges eased by 2px; the only rounder corners are the shoulders of a drawn flask.\n- `border-width <= 3px`: rules are hairlines; 3px marks the current item and the progress line.\n- `box-shadow-blur <= 80px`: shadows are glows, and the widest, around the dialog, ends at 80px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. First decide which ground it stands on (page, panel or fill; 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.p03.t03.u03\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"cinematic\",\n    \"years\": [\n      2015,\n      2026\n    ]\n  },\n  \"archetype\": \"shop\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-ci-3333\",\n  \"short\": \"v1-ci-3333\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #05090f;\n  --color-canvas: #05090f;\n  --color-surface: #0a121c;\n  --color-surface-alt: #0e1926;\n  --color-surface-strong: #152536;\n  --color-bar: #02050a;\n  --color-bar-text: #eaf3fa;\n  --color-bar-alt: #0a121c;\n  --color-bar-alt-text: #7d93a8;\n  --color-inverse: #dfeaf2;\n  --color-inverse-text: #05090f;\n  --color-text: #b4c4d2;\n  --color-text-muted: #6f8499;\n  --color-heading: #eaf3fa;\n  --color-heading-alt: #d9ff3c;\n  --color-link: #d9ff3c;\n  --color-link-quiet: #8fa5b9;\n  --color-link-visited: #b7cf52;\n  --color-link-hover: #f1ff9c;\n  --color-link-active: #62e6ff;\n  --color-border: #1c2f42;\n  --color-border-strong: #62e6ff;\n  --color-border-muted: #111e2c;\n  --color-accent: #d9ff3c;\n  --color-accent-text: #05090f;\n  --color-accent-alt: #62e6ff;\n  --color-fill-1: #0b1e30;\n  --color-fill-2: #0d2a38;\n  --color-fill-3: #101a33;\n  --color-fill-4: #163a4a;\n  --color-button: #d9ff3c;\n  --color-button-text: #05090f;\n  --color-button-hover-text: #05090f;\n  --color-button-secondary: #0a121c;\n  --color-button-secondary-text: #d9ff3c;\n  --color-input: #070d15;\n  --color-input-text: #eaf3fa;\n  --color-input-border: #2a4259;\n  --color-disabled: #101a26;\n  --color-disabled-text: #4a5d70;\n  --color-danger: #ff5d73;\n  --color-danger-surface: #2a0d18;\n  --color-success: #4de0a0;\n  --color-warning: #ffc04a;\n  --color-notice: #0b1e30;\n  --color-notice-text: #bfeaf7;\n  --color-focus: #62e6ff;\n  --color-shadow: rgb(98 230 255 / 0.28);\n  --color-overlay: rgb(2 5 10 / 0.8);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Space Grotesk\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-heading: Unbounded, \"Archivo Black\", \"Arial Black\", \"Verdana\", sans-serif;\n  --font-ui: \"Space Grotesk\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-mono: \"Space Mono\", \"SF Mono\", Menlo, Consolas, monospace;\n  --text-base: 15px;\n  --text-small: 12px;\n  --text-ui: 12px;\n  --text-large: 19px;\n  --text-display: 128px;\n  --text-h1: 60px;\n  --text-h2: 32px;\n  --text-h3: 18px;\n  --line-body: 1.55;\n  --line-heading: 1.08;\n  --line-display: 0.94;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 900;\n  --weight-display: 900;\n  --weight-ui: 700;\n  --heading-transform: uppercase;\n  --heading-tracking: -1px;\n  --display-tracking: -5px;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: underline;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 3px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 2px;\n  --radius-page: 0;\n  --shadow-panel: inset 0 0 0 1px var(--color-shadow);\n  --shadow-control: 0 0 24px var(--color-shadow);\n  --shadow-control-hover: 0 0 44px var(--color-shadow);\n  --shadow-control-pressed: inset 0 0 12px var(--color-shadow);\n  --shadow-dialog: 0 0 80px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: linear-gradient(90deg, color-mix(in srgb, white 3%, transparent) 1px, transparent 1px) 0 0 / 120px 120px, var(--color-page);\n  --fill-bar: repeating-linear-gradient(0deg, color-mix(in srgb, white 5%, transparent) 0 1px, transparent 1px 4px), var(--color-bar);\n  --fill-bar-alt: linear-gradient(180deg, var(--color-bar-alt), color-mix(in srgb, var(--color-bar-alt) 70%, black));\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: linear-gradient(100deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 80%, white));\n  --fill-panel: linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--color-surface) 60%, transparent));\n  --fill-button: linear-gradient(100deg, var(--color-button), color-mix(in srgb, var(--color-button) 82%, white));\n  --fill-button-hover: linear-gradient(var(--color-button), var(--color-button));\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px dashed var(--color-focus);\n  --transition: all 0.25s ease-out;\n  --backdrop-blur: 0px;\n}\n"
  }
}