{ "id": "v1-me-4555", "long_id": "v1.memphis.shop.s04.p05.t05.u05", "name": "Memphis print shop (2016 to 2022)", "era": { "slug": "memphis", "code": "me", "name": "Memphis", "years": [ 2016, 2022 ], "description": "The Memphis revival of 2016 to 2022: flat bright colours that clash on purpose, squiggles, dots, triangles and zigzags scattered as decoration, patterns laid as whole fields, flat blocks that overlap and tilt, and bold geometric type." }, "archetype": "shop", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "A fluid online shop in the Memphis revival look of 2016 to 2022: flat hot colours that clash on purpose, whole fields of terrazzo, stripes and rings, and discs, arches and zigzags laid across the edges of the blocks. Nothing is outlined and nothing casts a shadow: depth comes from one flat block or shape overlapping another. It was common on the shops of small print studios, stationery and sock brands and museum stores; this pack is the shop of a print room, with a shelf of colour blocks under the navigation, a shop window of prints standing on a band of pattern, a wall of product tiles that touch, a product page and a basket.", "url": "https://chrono.skin/s/v1-me-4555", "preview_url": "https://chrono.skin/s/v1-me-4555/specimen.html", "files": { "STYLE.md": "# Memphis print shop (2016 to 2022)\n\n## Summary\n\nA fluid online shop in the Memphis revival look of 2016 to 2022: flat hot colours that clash on purpose, whole fields of terrazzo, stripes and rings, and discs, arches and zigzags laid across the edges of the blocks. Nothing is outlined and nothing casts a shadow: depth comes from one flat block or shape overlapping another. It was common on the shops of small print studios, stationery and sock brands and museum stores; this pack is the shop of a print room, with a shelf of colour blocks under the navigation, a shop window of prints standing on a band of pattern, a wall of product tiles that touch, a product page and a basket.\n\n## Layout\n\n- The page is fluid: `--size-page` is 100% and every section (`.ds-nav`, `.ds-hero`, `.ds-page-header`, `.ds-band`, `.ds-footer`) is full-bleed. Content sits in a centred `--size-content` (1240px) column with `--space-gutter` (44px) at the sides. Designed at a 1440px viewport.\n- Order of the home page: the navigation bar (`--size-nav` 76px) in one flat colour with links as tall as the bar, the shelf of five department blocks, the hero, four stat discs that climb over the foot of the hero, the product wall, a tinted band with a field of pattern down its left end (a feature block over the seam, the list and a panel beside it), a slim band in `--color-fill-4` with the call to action, and the footer.\n- Sections touch and have no rule between them. Bands are of different heights. Shapes lie over the corners of bands and across their edges.\n- `.ds-shelf` is a row of five blocks of unequal width (4:3:5:3:5) that touch: four departments in the four fills and one block of `--fill-bar-alt` pattern with a note on a flat chip.\n- The hero is a shop window: the title at display size runs the full width of the open ground; under it `.ds-hero__ground`, a band of pattern, crosses the whole page along the foot. In a 5:7 grid the pitch and buttons sit on a flat block that crosses the upper edge of the band, and three prints (a tilted block, an arch and a disc, overlapping one another) stand on the band and rise above it.\n- `.ds-stat` is four discs of unequal width (22%, 17%, 26%, 19% of the column) that overlap by `--space-4`; two are tilted. The row is pulled up by `--space-7` so that it crosses into the hero's pattern.\n- `.ds-grid` is the product wall: four columns (three with `.ds-grid--3`) with no gap, so the tiles are fields of colour that touch. One tile is `.ds-grid__cell--big` (two columns, two rows), one or two are `.ds-grid__cell--wide` (two columns, picture beside the text). `.ds-split` is a main column and a `--size-sidebar` (280px) column, `.ds-split--flip` puts the narrow column first, `.ds-split--even` is two halves, `.ds-split--feature` is 4:7 with the columns centred on each other.\n- Inner pages keep the navigation, the shelf and the footer and drop the hero. In its place comes a `.ds-page-header`: a flat `--color-surface-alt` band with a field of pattern over its right quarter; the breadcrumb, the `--text-h1` title and one line of lead are on the left and the action buttons at the right lie across the seam of the pattern. Below it one or two `.ds-band` sections hold a `.ds-split`: the main column starts with the `.ds-tabs` or the notices, then the grid, table or form; the side column holds a `.ds-sidebar` and panels. Inner pages are left-aligned.\n- Spacing scale: `--space-1` 4px (underline offset, chip padding), `--space-2` 8px (gaps in rows of chips, label to control), `--space-3` 12px (row padding, shelf block padding), `--space-4` 16px (panel padding, gap between buttons, overlap of the discs, climb of a panel title), `--space-5` 24px (tile padding, gap between stacked blocks), `--space-6` 36px (page header padding, band head to content), `--space-7` 52px (tight band padding, gap between columns, climb of the stat row), `--space-8` 80px (band padding, foot of the hero), `--space-9` 112px (spare, for a taller band). `--space-nudge` 3px is the pressed offset, the focus outline offset and the underline thickness.\n- Fixed sizes: `--size-control` 48px, `--size-control-large` 60px, `--size-control-small` 36px, `--size-logo` 40px, `--size-avatar` 44px, `--size-art` 200px (unit of a product picture and of the hero band), `--size-shape` 100px (the unit of every ornament), `--size-dot` 20px (pitch of every pattern), `--size-stroke` 5px (weight of drawn lines and pattern lines), `--size-dialog` 480px.\n- Below 1000px the navigation links wrap under the brand, the shelf becomes two columns, the hero stacks (title, pitch, prints), the discs wrap to two rows, the wall is two columns, splits stack, and the pattern fields of bands and page headers and all free shapes disappear. Below 600px gutters shrink to `--space-4`, the wall is one column, the hero title is half the display size, buttons may wrap and table columns marked `.ds-table__extra` are hidden, so nothing scrolls sideways. Below 1000px `.ds-nav__links` is one row under the brand and `.ds-nav__actions` that scrolls sideways and fades at its edge, the `.ds-menu` stands at the right of that row with its list opening from the right edge, and on the product view the third link is moved to the front so that the current view is in sight.\n- Views: four, switched by plain `#name` links. `home` is the shop window. `shop` is the catalogue: departments with two switches and an empty state on the left, tabs, seven tiles and the pagination on the right. `product` is one print: a picture carousel and the artist beside the status badges, the buying panel with a tooltip and the accordion; below, the description beside related links and the edition progress. `basket` has the notices, the table, the delivery form with the four buttons, the order panel with a progress bar and a switch, and the confirmation dialog on its overlay band. The navigation marks the current view through `:has()` rules, one per view.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Type: headings in a wide, heavy sans set in lower case (`--font-heading`: Syne, Unbounded, Bricolage Grotesque, then Arial Black); body, navigation and buttons in Manrope or Public Sans, then Segoe UI and Helvetica. `--text-base` 16px at 1.45, `--text-small` 14px, `--text-ui` 15px at weight 700, `--text-large` 22px for leads. `--text-display` 96px (the hero title is set at 82% of it, line height 1.1 so each line fills its block); `--text-h1` 54px (inner page titles, stat figures), `--text-h2` 36px (band titles, the footer name), `--text-h3` 20px (tile, panel and sidebar titles). Headings, navigation, buttons, badges and labels are all lower case (`--heading-transform`, `--ui-transform`), weight 800; nothing is set in capitals. Links in running text are underlined, titles and navigation are not.\n- Palette: black, white and one loud colour. A pale grey page `--color-page` #f1f1ee with white surfaces, grey `--color-surface-alt` #e2e2de and pale pink `--color-surface-strong` #ffd9ec. The four fills are magenta #de1173, black #0d0d0d, dark grey #5a5a57 and wine #8f0a4b, a shade of the magenta; the text on them is white (`--color-accent-text`). `--color-accent` and the primary button are the magenta, `--color-accent-alt` and the secondary button the black; the fifth ornament colour `--color-shadow` is mid grey #a9a9a4. `--color-bar` is bubblegum pink #ffa3d1 with black text, for the navigation and table heads. Text is the black, links deep magenta; link hover is the magenta, visited a greyed plum. Danger #b3001b, success #1d7a46, warning #a35a00, notice pale pink.\n- Surface: no outlines and no shadows. `--border-width` and `--border-width-strong` are a 1px solid hairline, used only round form controls and between rows; all five shadow tokens are `none`. Buttons and inputs are pills (`--radius-control`), tags are square (`--radius-pill` 0), panels round their upper right corner by 40px (`--radius-panel`) and the largest blocks their lower right by 120px (`--radius-page`). `--fill-page` scatters small faint squares over the page; `--fill-bar-alt` is a magenta and black check; `--fill-inverse` is broad magenta stripes with a thin white one over black. `--fill-button-hover` is the black. The focus ring is dashed. No text shadow, no blur; `--transition` moves only `transform` and the fill.\n- Which text sits on which fill (the era's convention; every Memphis layout and token set keeps to it):\n - `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` carry `--color-text`, headings in `--color-heading` or `--color-heading-alt`, links in the `--color-link-*` tokens and secondary text in `--color-text-muted`.\n - `--color-fill-1` to `--color-fill-4`, `--color-accent` (`--fill-accent`), `--color-accent-alt`, `--color-success` and `--color-warning` are the loud fills. They carry `--color-accent-text` and nothing else: headings and links on them inherit it (use `.ds-link--plain`), and there is no muted text on a loud fill. The author block of a post is such a fill, so everything written on it inherits.\n - `--color-danger` is readable as text on any surface. Used as a fill (destructive button, danger badge) it carries `--color-surface`. `--color-danger-surface` carries `--color-text`.\n - `--color-bar` carries `--color-bar-text`, `--color-bar-alt` carries `--color-bar-alt-text`, `--color-inverse` carries `--color-inverse-text`, `--color-notice` carries `--color-notice-text`, buttons carry their own text tokens and `--color-disabled` carries `--color-disabled-text`. The bar is a loud colour of its own, so the primary and the secondary button must both read on it.\n - A box is a flat block of one colour. It has no outline and nothing behind it: every `--shadow-*` token is `none` and `components.css` never sets `box-shadow`. Two blocks are told apart by their fills, so a block never sits on a ground of its own colour: panels and board tiles (`--fill-panel`) go on the page, on `--color-surface-alt` or on a pattern; tinted blocks go on the page or on a surface. The secondary button and the menu use the darkest or lightest colour of the palette (`--color-button-secondary`, `--color-inverse`); in a set where that colour is also a fill, keep the secondary button off that fill.\n - The only borders are hairlines: `--border-width` in `--color-input-border` around a form control and in `--color-border-muted` between rows of a table, list or sidebar, drawn in the set's `--border-style`. `--color-border` and `--color-border-strong` are the ink of drawn ornaments (`.ds-shape--ink`, the specks in the terrazzo and confetti patterns), not of frames. `--color-shadow` is the fifth ornament colour (`.ds-shape--c5`, confetti); it is never a shadow.\n - Patterns come in two strengths. `--fill-page` is the quiet one, drawn in a faint tint of the ground, and text may sit on it. The loud ones (`--fill-bar-alt`, `--fill-inverse` and every `.ds-cover`) are drawn in a second, clashing colour and never carry text directly: text goes on a flat block or chip laid over the pattern (`.ds-cover__chip`, the three `.ds-hero__line` blocks, the stat bars, the footer block). The only exceptions are the faint tints of `.ds-avatar__pic` and `.ds-progress__bar`, which mix `--color-accent-text` at under 30% into the fill.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill, the base font and colour; sections are its children, there is no wrapper column.\n- `.ds-brand`: the mark and name, first in the navigation bar, linking home. `.ds-brand__mark` is a `--size-logo` tile dressed like the primary button (flat fill, text colour, radius, no outline) and tilted 8 degrees; `.ds-brand__name` is the name in the heading font at `--text-h3`. The name `chronoskin` and its mark are placeholders for the installing project's own.\n- `.ds-nav`: the header. `.ds-nav__bar` is flat `--fill-bar` and holds the brand, `.ds-nav__links` of `.ds-nav__link` (each a block as tall as the bar; the current one is a `--color-surface` block with `--color-text`, a hovered one takes the accent fill) with one `.ds-menu`, and `.ds-nav__actions` with the basket, a small button holding a plain badge. Under the bar comes `.ds-shelf`.\n- `.ds-shelf`: the row of department blocks: `.ds-shelf__item` holds a `.ds-shelf__link` in the heading font with a `.ds-shelf__count`; the four take the four fills in turn. `.ds-shelf__item--note` is a block of `--fill-bar-alt` pattern whose words sit on a `.ds-shelf__chip`. A hovered block tilts over its neighbours.\n- `.ds-hero`: the shop window. Its first child is `.ds-hero__ground`, a `.ds-cover .ds-cover--ground` across the foot. `.ds-hero__inner` is the grid: `.ds-hero__head` (a tilted badge and `.ds-hero__title` at display size with one word in `.ds-hero__mark`, a tilted accent block) spans both columns; `.ds-hero__body` is the flat block with `.ds-hero__lead` and `.ds-hero__actions`; `.ds-hero__art` holds three `.ds-hero__piece`, each a `.ds-cover` link with one or two shapes and an optional `.ds-cover__chip`, cut in turn as a tilted block, an arch and a disc.\n- `.ds-page-header`: the head of an inner page, used instead of the hero: `.ds-page-header__ground` (a `.ds-cover--ground` over the right quarter), `.ds-page-header__inner`, the breadcrumb, then `.ds-page-header__row` with `.ds-page-header__title` and `.ds-page-header__lead` on the left and `.ds-page-header__actions` on the right. Only buttons go over the pattern.\n- `.ds-band`: any full-width section. Fill by `.ds-band--surface`, `.ds-band--alt`, `.ds-band--strong`, `.ds-band--fill` (`--color-fill-4` with `--color-accent-text`; the only loud band, for a call to action), `.ds-band--overlay` (dialog backdrop); `.ds-band--tight` for less padding; `.ds-band--lift` for a band whose content climbs into the section above. `.ds-band__field` places a `.ds-cover--ground` down the left 36%. `.ds-band__inner` is the content column, `.ds-band__head` a row with a `.ds-band__title` over a `.ds-squiggle` on the left and a link on the right; `.ds-band__lead` is a larger line, `.ds-band__label` a small heading over one block. `.ds-split`, `.ds-stack` (`.ds-stack--wide`) and `.ds-row` arrange blocks.\n- `.ds-stat`: the row of figures: four `.ds-stat__cell` discs, each one flat fill, unequal in size, overlapping, two of them tilted; a `.ds-stat__value` at `--text-h1` over a short `.ds-stat__label`. `.ds-stat` is the row.\n- `.ds-grid`: the product wall. A `.ds-grid__cell` is a field of one fill (the four in turn) with `--color-accent-text`: a `.ds-cover` picture, `.ds-grid__body` with an optional plain badge, `.ds-grid__title` (a `.ds-link--plain`) and `.ds-grid__text`, and `.ds-grid__price`, a round `--fill-panel` sticker that hangs over the right edge of the tile. Size: `.ds-grid__cell--big`, `.ds-grid__cell--wide`. Cut of the picture: `.ds-grid__cell--arch`, `.ds-grid__cell--disc`, `.ds-grid__cell--quarter`; `.ds-grid__cell--tilt` turns it 3 degrees so that its corners cross the tile's edge.\n- `.ds-list`: rows on one flat `--color-surface` block: `.ds-list__item` with a `.ds-list__swatch` (a small `.ds-cover` cut as a disc or a tilted arch), `.ds-list__main` (`.ds-list__title`, `.ds-list__text`) and a muted `.ds-list__meta`; hairlines between rows.\n- `.ds-panel`: a flat `--fill-panel` block; its `.ds-panel__title` is a tilted tag on `--color-surface-strong` that climbs over the upper edge, then `.ds-panel__body`. `.ds-panel--pick` gives the tag the accent fill; `.ds-panel--tint` makes the block `--color-surface-strong` with an inverted tag; `.ds-panel__price` is a large figure. `.ds-inline` puts a control and a button on one line.\n- `.ds-feature`: a flat `--fill-panel` block for one promoted thing, laid over the edge of a pattern field: a badge, an avatar, `.ds-feature__title`, a paragraph and a link.\n- `.ds-sidebar`: a flat `--color-surface-strong` block with a `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by hairlines; an item may end with a badge. `.ds-sidebar__foot` holds switches under the list.\n- `.ds-footer`: a field of `--fill-inverse` pattern with two shapes; the content lies on a flat `--color-inverse` block over it: `.ds-footer__inner` is a 1:1:1:2 grid of columns (`.ds-footer__title`, `.ds-footer__list` of `.ds-footer__link`) ending in `.ds-footer__sign` with `.ds-footer__brand` and `.ds-footer__text`, right-aligned; `.ds-footer__legal` is the last line of the block, over a faint hairline.\n- `.ds-shape`: an ornament. An empty `aria-hidden` span, absolutely placed in a section that has `position: relative`, behind the content or across the edge of two blocks. Filled kinds, with no outline: `.ds-shape--disc`, `.ds-shape--half`, `.ds-shape--quarter`, `.ds-shape--tri` (clipped box), `.ds-shape--block`. Line-only kinds: `.ds-shape--ring` (a thick circle) and `.ds-shape--hoop` (a thin one), both drawn with a radial gradient and not with a border; `.ds-shape--line`, which holds an inline SVG squiggle or zigzag, and `.ds-shape--draw`, which holds an inline SVG triangle, cross or arc, all stroked in `currentColor` at one and a half times `--size-stroke`. Pattern kinds: `.ds-shape--dots`, `.ds-shape--grid`, `.ds-shape--bars`, `.ds-shape--stripes`. Colour: `.ds-shape--c1` to `.ds-shape--c4` (the four fills), `.ds-shape--c5` (`--color-shadow`), `.ds-shape--ink` (`--color-border-strong`), `.ds-shape--paper` (`--color-surface`). A shape is either filled or a line, never a filled shape with an outline round it. Size: `.ds-shape--s`, none, `.ds-shape--l`, `.ds-shape--xl`, `.ds-shape--xxl` (0.5, 1, 2, 3 and 4.5 times `--size-shape`). `.ds-shape--tilt`, `.ds-shape--turn`, `.ds-shape--flip` and `.ds-shape--side` rotate it. Place with `.ds-shape--tl`, `--tr`, `--bl`, `--br`, `--edge-l`, `--edge-r`. Free shapes are hidden on narrow screens so they never cover text; keep them out of the way of buttons.\n- `.ds-cover`: a field of pattern, for pictures and for whole grounds: a fill with a pattern in a clashing colour. Colour pairs: `.ds-cover--1` to `.ds-cover--4` (each fill with the next one), `.ds-cover--5` (`--color-surface-strong` with the accent), `.ds-cover--6` (`--color-inverse` with `--color-fill-1`). Patterns: `.ds-cover--dots`, `.ds-cover--stripes`, `.ds-cover--grid`, `.ds-cover--zig` (rows of teeth), `.ds-cover--dash` (short strokes in rows), `.ds-cover--rings`, `.ds-cover--terrazzo` and `.ds-cover--confetti`, all at the pitch of `--size-dot`. As a picture it holds one or two `.ds-shape` (in a row, not absolutely) and may carry a `.ds-cover__chip` label on a solid surface. `.ds-cover--ground` makes it an absolutely placed layer behind the content of a section; the layout places it with a class of its own. Use patterns big: a band across the hero, a third of a section, the end of a page header.\n- `.ds-squiggle`: the short wavy rule under a section title, an inline SVG in `--color-accent`. It is the style's rule: there are no straight heavy rules.\n- `.ds-prose`: long text: h1, h2, h3 (in `--color-heading-alt`), paragraphs, lists with coloured markers, strong, inline code on a flat `--color-surface-alt` chip, and links. `.ds-prose__lead` is the first, larger paragraph.\n- `.ds-link`: a link in content, bold, in `--color-link` with the `--link-decoration` underline as thick as `--space-nudge`; on hover it takes `--color-link-hover` and the underline turns wavy. `.ds-link--quiet` for titles, breadcrumbs and lists; `.ds-link--plain` inherits its colour and is the only link allowed on a loud fill. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-links` is a wrapping row of them.\n- `.ds-button`: one flat block of `--fill-button` with `--radius-control` corners, no outline and no shadow. `.ds-button--secondary` uses the secondary fill; `.ds-button--danger` is `--color-danger` with `--color-surface` text, once per view; `.ds-button--large` and `.ds-button--small` change height and text size. `is-hover` swaps the fill (`--fill-button-hover`; the secondary button takes the accent) and tilts the block 2 degrees, `is-active` drops it by `--space-nudge`, `is-disabled` is `--color-disabled`, `is-focus` shows `--focus-ring`. On a block of the button's own colour use the other button. `.ds-buttons` is a row.\n- `.ds-badge`: a small flat tag in the UI font with `--radius-pill` corners and no outline; `--fill-accent` by default. `.ds-badge--alt` (`--color-accent-alt`), `.ds-badge--plain` (`--color-surface-strong` with `--color-text`, for counts, neutral tags and tags on a product tile), and the status variants `.ds-badge--success`, `.ds-badge--warning` (both with `--color-accent-text`) and `.ds-badge--danger` (`--color-danger` with `--color-surface` text). `.ds-badge--tilt` turns it 4 degrees. `.ds-badges` is a row.\n- `.ds-form`: stacked `.ds-form__field` blocks, a bold small `.ds-form__label` over a `.ds-form__control` (input, select; `.ds-form__control--area` for a textarea, which takes `--radius-panel`), then `.ds-form__hint` or `.ds-form__error`. A control is `--fill-input` with the hairline in `--color-input-border`. `.ds-form__row` puts two fields side by side. `is-focus` adds the focus ring, `is-invalid` turns the control `--color-danger-surface` with a `--color-danger` hairline, `is-disabled` greys it. `.ds-form__check` wraps a `.ds-form__checkbox` (checked: the accent fill with a small square in it) and its text.\n- `.ds-switch`: an on/off control over a checkbox: `.ds-switch__input` (invisible, covers the label), a flat `.ds-switch__track` with a flat thumb in `--color-button-secondary`, `.ds-switch__label` and an optional `.ds-switch__hint`. On, the track is `--fill-accent`. `.ds-switch--end` puts the track at the right end of a full-width row. `is-on` shows the on state statically.\n- `.ds-table`: one flat `--color-surface` block. The head row is `--color-bar` with `--color-bar-text`; rows alternate `--color-surface` and `--color-surface-alt` and are divided by a hairline in `--color-border-muted`; `is-current` on a row makes it `--color-surface-strong` and bold (the total of the basket). `.ds-table__num` right-aligns figures, `.ds-table__extra` marks a column that is dropped on a phone, `.ds-table__meta` is a muted second line in a cell.\n- `.ds-tabs`: a wrapping row of flat `--color-surface-strong` chips (`.ds-tabs__tab`); the current one (`is-current`) is `--fill-accent` and tilted 3 degrees. `is-hover` tints and tilts. Use for two to four views of one block, as the first row of the main column of an inner page.\n- `.ds-notice`: a flat `--color-notice` block with a striped end drawn in its own text colour; `.ds-notice__title` and `.ds-notice__text`. `.ds-notice--error` is `--color-danger-surface` with `--color-text` and `--color-danger` stripes.\n- `.ds-pagination`: a row of flat `--color-surface-strong` counters (`.ds-pagination__link`, `--radius-pill`); the current page (`is-current`) is `--fill-accent` and tilted, `is-disabled` is grey, `is-hover` takes `--color-accent-alt` and tilts the other way.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` separated by accent dots; the last has `is-current`. It is the first line of an inner page.\n- `.ds-dialog`: a flat `--fill-panel` block on the overlay, with no frame: `.ds-dialog__bar` on `--color-surface-strong` with `.ds-dialog__title` and a `.ds-dialog__close` in the secondary button colours, `.ds-dialog__body`, `.ds-dialog__actions` with the buttons at the right.\n- `.ds-empty`: a flat `--color-surface-alt` block, centred: `.ds-empty__art` (three small `.ds-shape` in a row), `.ds-empty__title`, `.ds-empty__text` and one small button.\n- `.ds-menu`: a drop-down under a navigation item, a `
` with a `.ds-menu__toggle` summary and a `.ds-menu__list` of `.ds-menu__link`, each with an optional `.ds-menu__note`. The list is a flat `--color-inverse` block, tilted 1 degree, so it reads on any ground without a frame or a shadow; a hovered link takes the accent fill.\n- `.ds-tooltip`: wraps its trigger; `.ds-tooltip__tip` is a small flat `--color-inverse` chip above it, tilted, shown on hover and focus (`is-open` shows it statically). Do not leave it open over other content.\n- `.ds-accordion`: `.ds-accordion__item` (`
`) with a `.ds-accordion__head` summary on `--color-surface-alt` ending in a `.ds-accordion__sign`: an accent disc that becomes a diamond in `--color-accent-alt` when open. The open head sits on `--color-surface-strong`; `.ds-accordion__body` holds the answer on the panel fill.\n- `.ds-progress`: a flat `--color-disabled` track with a `.ds-progress__bar` in `--fill-accent`, striped; `.ds-progress--alt` is dotted `--color-accent-alt`. Width by `.ds-progress--0`, `--25`, `--40`, `--60`, `--75`, `--90` (50% without). `.ds-progress__legend` is the label and figure above it.\n- `.ds-avatar`: a face (inline SVG) or initials in `.ds-avatar__pic`, a tile with `--radius-control` corners on a fill with a faint pattern (`.ds-avatar--1` to `.ds-avatar--4`), optionally with `.ds-avatar__text` holding `.ds-avatar__name` and `.ds-avatar__meta`. `.ds-avatar--large` for a feature or a byline.\n- `.ds-carousel`: `.ds-carousel__track` is a scroll-snap row of `.ds-carousel__slide` on one flat `--color-surface-strong` block; here a slide is a `.ds-carousel__pic` (a tall `.ds-cover` with shapes) over a `.ds-carousel__quote` caption. `.ds-carousel__foot` holds `.ds-carousel__dots` (a disc, a diamond and a square in `--color-border`; `is-current` is the accent) and two `.ds-carousel__arrow` buttons in the secondary button colours.\n\n## Never\n\n- `row-gap <= 8px`: rows of a table or list touch and are divided by hairlines.\n- `block-gap <= 52px`: stacked blocks are 24px apart, columns 52px; sections and wall tiles touch.\n- `content-width >= 80%`: bands are full-bleed and their column is 1240px of a 1440px viewport.\n- `palette-colours <= 18`: black, white, magenta and its wine, pale and bubblegum tints, four greys and the status colours.\n- `font-size <= 79px`: the hero title, at 82% of the display size, is the largest text of this layout.\n- `font-size >= 14px`: labels, badges and meta text are the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 2`: a wide heavy sans for headings and one plain sans for the rest (plus the monospace of inline code).\n- `line-height <= 1.45`: body text is set at 1.45.\n- `uppercase-text <= 1%`: nothing is set in capitals; headings and controls are lower case.\n- `underlined-links <= 20%`: only links in running text are underlined.\n- `box-shadow = none`: no box has anything behind it, neither a soft shadow nor a hard offset block. A block of colour behind every box is another style; depth here comes from one shape or block overlapping another.\n- `border-width <= 1px`: the only borders are hairlines round form controls and between rows. No card, button, tag, tile or bar is outlined; a thick line is a drawn squiggle or zigzag, never a frame.\n- `text-shadow = none`: type is flat.\n- `gradient-fills <= 8%`: gradients are used only to draw patterns: dots, stripes, dashes, zigzags, rings and terrazzo. No box fades from one colour to another.\n- `animation = none`: nothing moves on its own; only hover tilts a control.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A box is one flat fill with a radius token: no border, no `box-shadow`, no outline. If it would vanish on its ground, change its fill or the ground's, do not frame it. Follow the convention above for its text: `--color-accent-text` on the loud fills, `--color-text` on the surfaces. Give depth by overlap: set tiles of different fills edge to edge and make them unequal in size, tilt a picture so its corners cross its tile, hang a sticker over the next tile, pull a row of discs over the edge of a pattern band with a negative margin, lay a flat block across the seam of a pattern field. Decoration is the point of this style: a new section gets a `.ds-cover` pattern as part of its ground or a few `.ds-shape` in its empty corners, mixing filled shapes with line-only ones; draw both from the fill tokens so that every palette repaints them, and keep text on flat blocks, off the loud patterns. Corners are square or fully round (discs, arches, quarters) and come from the radius tokens, some of which round a single corner; never give boxes a uniform medium radius. Tilt small things (tags, the current tab, a panel title, a price sticker, one picture of a row) by 2 to 9 degrees with `transform: rotate()`; never tilt running text or a form. For a size the vocabulary lacks use `calc()` over an existing token; `--size-stroke` is the weight of every drawn line.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 100%;\n --size-content: 1240px;\n --size-measure: 620px;\n --size-nav: 76px;\n --size-control: 48px;\n --size-control-large: 60px;\n --size-control-small: 36px;\n --size-logo: 40px;\n --size-check: 22px;\n --size-thumb: 20px;\n --size-track: 18px;\n --size-avatar: 44px;\n --size-art: 200px;\n --size-shape: 100px;\n --size-dot: 20px;\n --size-stroke: 5px;\n --size-sidebar: 280px;\n --size-dialog: 480px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 36px;\n --space-7: 52px;\n --space-8: 80px;\n --space-9: 112px;\n --space-gutter: 44px;\n --space-nudge: 3px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n width: var(--size-page);\n overflow-x: clip;\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}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* views: one screen 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/* nav: one flat bar whose links are blocks as tall as the bar; under it the shelf, five colour blocks of unequal width that touch */\n.ds-nav {\n position: relative;\n z-index: 5;\n color: var(--color-bar-text);\n}\n.ds-nav__bar {\n display: flex;\n align-items: stretch;\n gap: var(--space-6);\n min-height: var(--size-nav);\n padding: 0 var(--space-gutter);\n background: var(--fill-bar);\n}\n.ds-nav__bar > .ds-brand {\n align-self: center;\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n align-items: stretch;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__links > li {\n display: flex;\n}\n.ds-nav__link {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-nav);\n padding: 0 var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n color: var(--color-bar-text);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-accent-text);\n background: var(--fill-accent);\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(#product:target) .ds-nav__link[href=\"#product\"],\n.ds-page:has(#basket:target) .ds-nav__actions .ds-button[href=\"#basket\"] {\n color: var(--color-text);\n background: var(--color-surface);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-nudge) * -2);\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-shelf {\n display: grid;\n grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr) minmax(0, 5fr);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-shelf__item {\n display: flex;\n min-width: 0;\n}\n.ds-shelf__link {\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n gap: 0 var(--space-3);\n min-width: 0;\n padding: var(--space-3) var(--space-5);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: 1.2;\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-decoration: none;\n color: var(--color-accent-text);\n background: var(--color-fill-1);\n transition: var(--transition);\n}\n.ds-shelf__item:nth-child(2) .ds-shelf__link {\n background: var(--color-fill-2);\n}\n.ds-shelf__item:nth-child(3) .ds-shelf__link {\n background: var(--color-fill-3);\n}\n.ds-shelf__item:nth-child(4) .ds-shelf__link {\n background: var(--color-fill-4);\n}\n.ds-shelf__item--note .ds-shelf__link {\n align-items: center;\n justify-content: center;\n background: var(--fill-bar-alt);\n}\n.ds-shelf__link:hover,\n.ds-shelf__link.is-hover {\n position: relative;\n z-index: 1;\n transform: rotate(-2deg);\n}\n.ds-shelf__link:focus-visible,\n.ds-shelf__link.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-nudge) * -2);\n}\n.ds-shelf__count {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n letter-spacing: 0;\n text-transform: var(--ui-transform);\n}\n.ds-shelf__chip {\n padding: var(--space-1) var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n letter-spacing: 0;\n text-transform: var(--ui-transform);\n color: var(--color-bar-alt-text);\n background: var(--color-bar-alt);\n}\n\n/* bands: full-bleed fields of flat colour or pattern that meet edge to edge, with no rule between them */\n.ds-band {\n position: relative;\n padding: var(--space-8) var(--space-gutter);\n overflow: hidden;\n}\n.ds-band--tight {\n padding-top: var(--space-7);\n padding-bottom: var(--space-7);\n}\n.ds-band--surface {\n background: var(--color-surface);\n}\n.ds-band--alt {\n background: var(--color-surface-alt);\n}\n.ds-band--strong {\n background: var(--color-surface-strong);\n}\n.ds-band--fill {\n color: var(--color-accent-text);\n background: var(--color-fill-4);\n}\n.ds-band--lift {\n z-index: 2;\n display: flow-root;\n padding-top: 0;\n overflow: visible;\n}\n.ds-band--overlay {\n background: var(--color-overlay);\n}\n.ds-band__field {\n top: 0;\n bottom: 0;\n left: 0;\n width: 36%;\n}\n.ds-band__inner {\n position: relative;\n z-index: 1;\n max-width: var(--size-content);\n margin: 0 auto;\n}\n.ds-band__head {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4);\n margin: 0 0 var(--space-6);\n}\n.ds-band__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-band--fill .ds-band__title {\n color: inherit;\n}\n.ds-band__lead {\n max-width: var(--size-measure);\n margin: 0;\n font-size: var(--text-large);\n line-height: 1.4;\n}\n.ds-band__label {\n margin: 0 0 var(--space-4);\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 color: var(--color-heading-alt);\n}\n.ds-stack {\n display: grid;\n gap: var(--space-5);\n align-content: start;\n min-width: 0;\n}\n.ds-stack--wide {\n gap: var(--space-7);\n}\n.ds-split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-sidebar);\n gap: var(--space-7);\n align-items: start;\n}\n.ds-split--even {\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-split--flip {\n grid-template-columns: var(--size-sidebar) minmax(0, 1fr);\n}\n.ds-split--feature {\n grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);\n align-items: center;\n}\n.ds-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n\n/* hero: a shop window. The words run the full width of the open ground; under them a band of pattern crosses the page,\n with the pitch on a flat block over its upper edge and three prints, cut as a block, an arch and a disc, standing on it */\n.ds-hero {\n position: relative;\n padding: var(--space-7) var(--space-gutter) var(--space-8);\n overflow: hidden;\n}\n.ds-hero__ground {\n right: 0;\n bottom: 0;\n left: 0;\n height: calc(var(--size-art) + var(--space-8));\n}\n.ds-hero__inner {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n gap: var(--space-6) var(--space-7);\n align-items: end;\n max-width: var(--size-content);\n margin: 0 auto;\n}\n.ds-hero__head {\n display: grid;\n grid-column: 1 / -1;\n gap: var(--space-4);\n justify-items: start;\n}\n.ds-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-hero__mark {\n display: inline-block;\n padding: 0 var(--space-3);\n color: var(--color-accent-text);\n background: var(--fill-accent);\n border-radius: var(--radius-panel);\n transform: rotate(-2deg);\n}\n.ds-hero__body {\n display: grid;\n gap: var(--space-5);\n justify-items: start;\n margin: 0 0 var(--space-7);\n padding: var(--space-5);\n color: var(--color-text);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n}\n.ds-hero__lead {\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-4);\n}\n.ds-hero__art {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n min-width: 0;\n}\n.ds-hero__art .ds-hero__piece {\n flex: none;\n width: 36%;\n min-height: calc(var(--size-art) * 1.8);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-hero__art .ds-hero__piece:nth-child(1) {\n z-index: 1;\n transform: rotate(-4deg);\n}\n.ds-hero__art .ds-hero__piece:nth-child(2) {\n z-index: 2;\n width: 38%;\n min-height: calc(var(--size-art) * 2.2);\n margin-left: calc(var(--space-5) * -1);\n border-radius: 50% 50% 0 0 / 36% 36% 0 0;\n}\n.ds-hero__art .ds-hero__piece:nth-child(3) {\n z-index: 3;\n width: 30%;\n min-height: 0;\n aspect-ratio: 1;\n margin: 0 0 var(--space-7) calc(var(--space-6) * -1);\n border-radius: 50%;\n transform: rotate(6deg);\n}\n.ds-hero__art .ds-hero__piece:hover,\n.ds-hero__art .ds-hero__piece.is-hover {\n transform: rotate(2deg);\n}\n\n/* page header: the head of an inner page. A flat tinted band; a field of pattern fills its right end and the actions lie across the seam */\n.ds-page-header {\n position: relative;\n padding: var(--space-6) var(--space-gutter);\n overflow: hidden;\n color: var(--color-text);\n background: var(--color-surface-alt);\n}\n.ds-page-header__ground {\n top: 0;\n right: 0;\n bottom: 0;\n width: 24%;\n}\n.ds-page-header__inner {\n position: relative;\n z-index: 1;\n max-width: var(--size-content);\n margin: 0 auto;\n}\n.ds-page-header__row {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n}\n.ds-page-header__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-page-header__lead {\n max-width: var(--size-measure);\n margin: var(--space-3) 0 0;\n font-size: var(--text-large);\n line-height: 1.4;\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* stats: four discs of unequal size in four fills that overlap one another and climb over the foot of the hero */\n.ds-stat {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: calc(var(--space-7) * -1) 0 0;\n}\n.ds-stat__cell {\n display: flex;\n flex: none;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: center;\n width: 22%;\n aspect-ratio: 1;\n padding: var(--space-4);\n text-align: center;\n color: var(--color-accent-text);\n background: var(--color-fill-1);\n border-radius: 50%;\n}\n.ds-stat__cell + .ds-stat__cell {\n margin-left: calc(var(--space-4) * -1);\n}\n.ds-stat__cell:nth-child(2) {\n z-index: 1;\n width: 17%;\n background: var(--color-fill-2);\n transform: rotate(-7deg);\n}\n.ds-stat__cell:nth-child(3) {\n width: 26%;\n background: var(--color-fill-3);\n}\n.ds-stat__cell:nth-child(4) {\n z-index: 1;\n width: 19%;\n background: var(--color-fill-4);\n transform: rotate(6deg);\n}\n.ds-stat__value {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n}\n.ds-stat__label {\n max-width: 16ch;\n margin: var(--space-2) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.3;\n text-transform: var(--ui-transform);\n}\n\n/* grid: the product wall. Tiles are fields of flat colour that touch, of unequal size; each holds a print cut as a block,\n an arch or a disc, some tilted over the edge of the tile, and a round price sticker that hangs over the next tile */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n grid-auto-flow: dense;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid--3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.ds-grid__cell {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n padding: var(--space-5);\n color: var(--color-accent-text);\n background: var(--color-fill-1);\n}\n.ds-grid__cell:nth-child(4n + 2) {\n background: var(--color-fill-2);\n}\n.ds-grid__cell:nth-child(4n + 3) {\n background: var(--color-fill-3);\n}\n.ds-grid__cell:nth-child(4n) {\n background: var(--color-fill-4);\n}\n.ds-grid__cell--big {\n grid-column: span 2;\n grid-row: span 2;\n}\n.ds-grid__cell--wide {\n grid-column: span 2;\n flex-direction: row;\n align-items: flex-end;\n}\n.ds-grid__cell .ds-cover {\n flex: 1;\n min-height: var(--size-art);\n}\n.ds-grid__cell--wide .ds-cover {\n align-self: stretch;\n}\n.ds-grid__cell--tilt .ds-cover {\n z-index: 1;\n transform: rotate(-3deg);\n}\n.ds-grid__cell--arch .ds-cover {\n border-radius: 50% 50% 0 0 / 40% 40% 0 0;\n}\n.ds-grid__cell--disc .ds-cover {\n flex: none;\n align-self: center;\n width: 82%;\n min-height: 0;\n aspect-ratio: 1;\n border-radius: 50%;\n}\n.ds-grid__cell--quarter .ds-cover {\n border-radius: 0 100% 0 0;\n}\n.ds-grid__body {\n display: grid;\n gap: var(--space-1);\n align-content: end;\n justify-items: start;\n min-width: 0;\n}\n.ds-grid__cell--wide .ds-grid__body {\n flex: 0 0 42%;\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-grid__cell--big .ds-grid__title {\n font-size: var(--text-h2);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.45;\n}\n.ds-grid__price {\n position: absolute;\n top: var(--space-3);\n right: calc(var(--space-3) * -1);\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-control-large) * 1.1);\n aspect-ratio: 1;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-display);\n line-height: 1;\n font-variant-numeric: tabular-nums;\n color: var(--color-text);\n background: var(--fill-panel);\n border-radius: 50%;\n transform: rotate(9deg);\n}\n.ds-grid__cell:nth-child(even) .ds-grid__price {\n transform: rotate(-8deg);\n}\n\n/* list: rows on one flat block, each led by a small patterned swatch cut as a disc or an arch */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text);\n background: var(--color-surface);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list .ds-list__swatch {\n flex: none;\n width: var(--size-control);\n min-height: 0;\n aspect-ratio: 1;\n border-radius: 50%;\n}\n.ds-list__item:nth-child(even) .ds-list__swatch {\n border-radius: 50% 50% 0 0;\n transform: rotate(-8deg);\n}\n.ds-list__main {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n margin: 0;\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: 1.35;\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.45;\n}\n.ds-list__meta {\n flex: none;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n\n/* panel: a flat block whose title is a tilted tag that climbs over its upper edge */\n.ds-panel {\n position: relative;\n margin-top: var(--space-4);\n color: var(--color-text);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n}\n.ds-panel__title {\n position: relative;\n display: table;\n max-width: calc(100% - var(--space-6));\n margin: calc(var(--space-4) * -1) 0 0 var(--space-4);\n padding: var(--space-1) var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: 1.2;\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading-alt);\n background: var(--color-surface-strong);\n transform: rotate(-2deg);\n}\n.ds-panel__body {\n display: grid;\n gap: var(--space-3);\n justify-items: start;\n padding: var(--space-4);\n}\n.ds-panel__body > * {\n margin: 0;\n}\n.ds-panel__body > .ds-form,\n.ds-panel__body > .ds-progress,\n.ds-panel__body > .ds-progress__legend,\n.ds-panel__body > .ds-switch {\n width: 100%;\n}\n.ds-panel__price {\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n color: var(--color-heading);\n}\n.ds-panel--pick .ds-panel__title {\n color: var(--color-accent-text);\n background: var(--fill-accent);\n transform: rotate(3deg);\n}\n.ds-panel--tint {\n background: var(--color-surface-strong);\n}\n.ds-panel--tint .ds-panel__title {\n color: var(--color-inverse-text);\n background: var(--color-inverse);\n}\n.ds-inline {\n display: flex;\n gap: var(--space-3);\n width: 100%;\n}\n.ds-inline .ds-form__control {\n flex: 1;\n min-width: 0;\n}\n.ds-feature {\n display: grid;\n gap: var(--space-4);\n justify-items: start;\n padding: var(--space-5);\n color: var(--color-text);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n}\n.ds-feature > * {\n margin: 0;\n}\n.ds-feature__title {\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 color: var(--color-heading);\n}\n.ds-carousel .ds-carousel__pic {\n min-height: calc(var(--size-art) * 1.9);\n margin: 0 0 var(--space-4);\n}\n\n/* sidebar: a flat tinted block */\n.ds-sidebar {\n padding: var(--space-5);\n color: var(--color-text);\n background: var(--color-surface-strong);\n border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\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 color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__foot {\n display: grid;\n gap: var(--space-3);\n margin: var(--space-3) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* footer: a field of pattern; the columns lie on one flat inverted block over it, the name set large at its right end */\n.ds-footer {\n position: relative;\n padding: var(--space-8) var(--space-gutter) 0;\n overflow: hidden;\n color: var(--color-inverse-text);\n background: var(--fill-inverse);\n}\n.ds-footer__inner {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 2fr;\n gap: var(--space-6);\n max-width: var(--size-content);\n margin: 0 auto;\n padding: var(--space-6) var(--space-6) var(--space-5);\n background: var(--color-inverse);\n}\n.ds-footer__sign {\n text-align: right;\n}\n.ds-footer__brand {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-footer__text {\n max-width: 36ch;\n margin: 0 0 0 auto;\n font-size: var(--text-small);\n line-height: 1.5;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.5;\n text-transform: var(--ui-transform);\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 font-size: var(--text-small);\n line-height: 1.45;\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: underline wavy;\n text-underline-offset: var(--space-1);\n}\n.ds-footer__legal {\n position: relative;\n z-index: 1;\n max-width: var(--size-content);\n margin: 0 auto;\n padding: var(--space-4) var(--space-6) var(--space-5);\n background: var(--color-inverse);\n font-size: var(--text-small);\n line-height: 1.45;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 40%, transparent);\n}\n\n/* ornaments: shapes that float free of the layout; they paint with currentColor */\n.ds-shape {\n position: absolute;\n z-index: 0;\n display: block;\n width: var(--size-shape);\n aspect-ratio: 1;\n color: var(--color-fill-1);\n pointer-events: none;\n}\n.ds-shape--disc {\n background: currentColor;\n border-radius: 50%;\n}\n.ds-shape--ring {\n background: radial-gradient(closest-side, transparent 56%, currentColor 58% 98%, transparent 100%);\n}\n.ds-shape--hoop {\n background: radial-gradient(closest-side, transparent 84%, currentColor 86% 98%, transparent 100%);\n}\n.ds-shape--half {\n aspect-ratio: 2 / 1;\n background: currentColor;\n border-radius: 50% 50% 0 0 / 100% 100% 0 0;\n}\n.ds-shape--quarter {\n background: currentColor;\n border-radius: 100% 0 0 0;\n}\n.ds-shape--tri {\n background: currentColor;\n clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n.ds-shape--block {\n background: currentColor;\n border-radius: var(--radius-panel);\n}\n.ds-shape--dots {\n background: radial-gradient(currentColor 30%, transparent 34%) 0 0 / var(--size-dot) var(--size-dot);\n}\n.ds-shape--grid {\n background:\n linear-gradient(currentColor var(--size-stroke), transparent var(--size-stroke)) 0 0 / var(--size-dot) var(--size-dot),\n linear-gradient(90deg, currentColor var(--size-stroke), transparent var(--size-stroke)) 0 0 / var(--size-dot) var(--size-dot);\n}\n.ds-shape--bars {\n aspect-ratio: 3 / 2;\n background: repeating-linear-gradient(currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3.5));\n}\n.ds-shape--stripes {\n background: repeating-linear-gradient(-45deg, currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3));\n border-radius: 50%;\n}\n.ds-shape--line {\n width: calc(var(--size-shape) * 1.6);\n aspect-ratio: 5 / 1;\n}\n.ds-shape svg {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n.ds-shape svg path {\n vector-effect: non-scaling-stroke;\n stroke-width: calc(var(--size-stroke) * 1.5);\n}\n.ds-shape--draw {\n background: none;\n}\n.ds-shape--c5 {\n color: var(--color-shadow);\n}\n.ds-shape--paper {\n color: var(--color-surface);\n}\n.ds-shape--c1 {\n color: var(--color-fill-1);\n}\n.ds-shape--c2 {\n color: var(--color-fill-2);\n}\n.ds-shape--c4 {\n color: var(--color-fill-4);\n}\n.ds-shape--ink {\n color: var(--color-border-strong);\n}\n.ds-shape--s {\n width: calc(var(--size-shape) * 0.5);\n}\n.ds-shape--l {\n width: calc(var(--size-shape) * 2);\n}\n.ds-shape--xl {\n width: calc(var(--size-shape) * 3);\n}\n.ds-shape--xxl {\n width: calc(var(--size-shape) * 4.5);\n}\n.ds-shape--flip {\n transform: rotate(180deg);\n}\n.ds-shape--side {\n transform: rotate(90deg);\n}\n.ds-shape--tilt {\n transform: rotate(-14deg);\n}\n.ds-shape--turn {\n transform: rotate(28deg);\n}\n.ds-shape--tl {\n top: var(--space-5);\n left: var(--space-5);\n}\n.ds-shape--tr {\n top: var(--space-5);\n right: var(--space-5);\n}\n.ds-hero > .ds-shape--hoop.ds-shape--tr {\n right: calc(var(--size-shape) * -1);\n}\n.ds-shape--br {\n bottom: var(--space-5);\n right: var(--space-5);\n}\n.ds-shape--edge-r {\n top: 30%;\n right: calc(var(--size-shape) * -0.5);\n}\n.ds-shape--edge-l {\n bottom: 12%;\n left: calc(var(--size-shape) * -0.5);\n}\n\n/* covers and pattern grounds: a flat fill with a pattern drawn in a second, clashing fill.\n Text never sits straight on one: it goes on a flat block laid over the pattern */\n.ds-cover {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--size-art);\n overflow: hidden;\n background-color: var(--color-fill-1);\n color: var(--color-fill-2);\n}\n.ds-cover--1 {\n background-color: var(--color-fill-1);\n color: var(--color-fill-2);\n}\n.ds-cover--2 {\n background-color: var(--color-fill-2);\n color: var(--color-fill-3);\n}\n.ds-cover--3 {\n background-color: var(--color-fill-3);\n color: var(--color-fill-4);\n}\n.ds-cover--4 {\n background-color: var(--color-fill-4);\n color: var(--color-fill-1);\n}\n.ds-cover--5 {\n background-color: var(--color-surface-strong);\n color: var(--color-accent);\n}\n.ds-cover--6 {\n background-color: var(--color-inverse);\n color: var(--color-fill-1);\n}\n.ds-cover--dots {\n background-image: radial-gradient(currentColor 28%, transparent 31%);\n background-size: var(--size-dot) var(--size-dot);\n}\n.ds-cover--stripes {\n background-image: repeating-linear-gradient(-45deg, currentColor 0 calc(var(--size-stroke) * 1.5), transparent calc(var(--size-stroke) * 1.5) var(--size-dot));\n}\n.ds-cover--grid {\n background-image:\n linear-gradient(currentColor var(--size-stroke), transparent var(--size-stroke)),\n linear-gradient(90deg, currentColor var(--size-stroke), transparent var(--size-stroke));\n background-size: calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--zig {\n background-image:\n linear-gradient(135deg, currentColor 25%, transparent 25%),\n linear-gradient(225deg, currentColor 25%, transparent 25%);\n background-size: calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--terrazzo {\n background-image:\n radial-gradient(ellipse 10% 6% at 18% 24%, currentColor 96%, transparent),\n radial-gradient(ellipse 5% 11% at 72% 16%, var(--color-border-strong) 96%, transparent),\n radial-gradient(ellipse 9% 9% at 46% 58%, var(--color-surface) 96%, transparent),\n radial-gradient(ellipse 12% 5% at 84% 70%, currentColor 96%, transparent),\n radial-gradient(ellipse 5% 8% at 14% 82%, var(--color-border-strong) 96%, transparent),\n radial-gradient(ellipse 6% 4% at 56% 92%, var(--color-surface) 96%, transparent);\n background-size: calc(var(--size-dot) * 7) calc(var(--size-dot) * 6);\n}\n.ds-cover--dash {\n background-image:\n radial-gradient(ellipse 34% 10% at 50% 50%, currentColor 96%, transparent),\n radial-gradient(ellipse 34% 10% at 50% 50%, currentColor 96%, transparent);\n background-size: calc(var(--size-dot) * 2) calc(var(--size-dot) * 1.5);\n background-position: 0 0, var(--size-dot) calc(var(--size-dot) * 0.75);\n}\n.ds-cover--rings {\n background-image:\n radial-gradient(closest-side, transparent 50%, currentColor 54% 80%, transparent 84%),\n radial-gradient(closest-side, transparent 50%, currentColor 54% 80%, transparent 84%);\n background-size: calc(var(--size-dot) * 3) calc(var(--size-dot) * 3);\n background-position: 0 0, calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--confetti {\n background-image:\n radial-gradient(ellipse 4% 4% at 12% 16%, currentColor 96%, transparent),\n radial-gradient(ellipse 9% 2% at 44% 10%, var(--color-surface) 96%, transparent),\n radial-gradient(ellipse 2% 9% at 80% 22%, var(--color-border-strong) 96%, transparent),\n radial-gradient(ellipse 5% 5% at 66% 52%, var(--color-shadow) 96%, transparent),\n radial-gradient(ellipse 2% 8% at 26% 48%, currentColor 96%, transparent),\n radial-gradient(ellipse 9% 2% at 16% 82%, var(--color-border-strong) 96%, transparent),\n radial-gradient(ellipse 3% 3% at 50% 78%, var(--color-surface) 96%, transparent),\n radial-gradient(ellipse 8% 2% at 84% 86%, currentColor 96%, transparent);\n background-size: calc(var(--size-dot) * 8) calc(var(--size-dot) * 8);\n}\n.ds-cover--ground {\n position: absolute;\n z-index: 0;\n display: block;\n min-height: 0;\n}\n.ds-cover .ds-shape {\n position: relative;\n flex: none;\n}\n.ds-cover__chip {\n position: absolute;\n left: var(--space-3);\n bottom: var(--space-3);\n padding: var(--space-1) var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n text-transform: var(--ui-transform);\n color: var(--color-text);\n background: var(--fill-panel);\n border-radius: var(--radius-pill);\n}\n\n/* brand */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-logo);\n height: var(--size-logo);\n padding: var(--space-1);\n color: var(--color-button-text);\n background: var(--fill-button);\n border-radius: var(--radius-control);\n transform: rotate(-8deg);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-bar-text);\n}\n\n/* typography */\n.ds-prose {\n max-width: 66ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\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 color: var(--color-heading);\n}\n.ds-prose h1 {\n margin: 0 0 var(--space-5);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin: var(--space-6) 0 var(--space-3);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n font-size: var(--text-h3);\n color: var(--color-heading-alt);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n background: var(--color-surface-alt);\n border-radius: var(--radius-panel);\n}\n.ds-prose a {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n text-underline-offset: var(--space-1);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n line-height: 1.45;\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n text-decoration-thickness: var(--space-nudge);\n text-underline-offset: var(--space-1);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--plain {\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link--plain:visited {\n color: inherit;\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n text-decoration-style: wavy;\n}\n.ds-link--plain:hover,\n.ds-link--plain.is-hover {\n color: inherit;\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-nudge);\n}\n.ds-links {\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: one flat block of colour, no outline and nothing behind it; hover swaps the fill and tilts the block */\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: 0 var(--space-5);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n color: var(--color-button-text);\n background: var(--fill-button);\n border: 0;\n border-radius: var(--radius-control);\n transition: var(--transition);\n}\n.ds-button--secondary {\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n transition: var(--transition), background-color 0s;\n}\n.ds-button--danger {\n color: var(--color-surface);\n background: var(--color-danger);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button--small {\n min-height: var(--size-control-small);\n padding: 0 var(--space-4);\n font-size: var(--text-small);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n color: var(--color-button-hover-text);\n background: var(--fill-button-hover);\n transform: rotate(-2deg);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n color: var(--color-accent-text);\n background: var(--fill-accent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n color: var(--color-surface);\n background: var(--color-danger);\n}\n.ds-button:active,\n.ds-button.is-active {\n transform: translateY(var(--space-nudge)) rotate(1deg);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n color: var(--color-disabled-text);\n background: var(--color-disabled);\n transform: none;\n cursor: not-allowed;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* badge: a small flat tag */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n padding: 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.6;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n vertical-align: middle;\n color: var(--color-accent-text);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-badge--alt {\n background: var(--color-accent-alt);\n}\n.ds-badge--plain {\n color: var(--color-text);\n background: var(--color-surface-strong);\n}\n.ds-badge--success {\n background: var(--color-success);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n color: var(--color-surface);\n background: var(--color-danger);\n}\n.ds-badge--tilt {\n transform: rotate(-4deg);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* form */\n.ds-form {\n display: grid;\n gap: var(--space-4);\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 align-content: start;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n text-transform: var(--ui-transform);\n}\n.ds-form__control {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: var(--space-2) var(--space-4);\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 color: var(--color-input-text);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n transition: var(--transition);\n}\n.ds-form__control--area {\n min-height: calc(var(--size-control) * 2.4);\n border-radius: var(--radius-panel);\n resize: vertical;\n}\n.ds-form__control:focus,\n.ds-form__control.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n color: var(--color-disabled-text);\n background: var(--color-disabled);\n}\n.ds-form__control.is-invalid {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n}\n.ds-form__error {\n margin: 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n color: var(--color-danger);\n}\n.ds-form__hint {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__checkbox {\n appearance: none;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background:\n linear-gradient(var(--color-accent-text), var(--color-accent-text)) center / 44% 44% no-repeat,\n var(--fill-accent);\n}\n.ds-form__checkbox:focus-visible,\n.ds-form__checkbox.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n\n/* switch: a flat track with a flat thumb; on is the accent fill */\n.ds-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n cursor: pointer;\n}\n.ds-switch--end {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\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 width: calc(var(--size-thumb) * 2 + var(--space-nudge) * 2);\n height: calc(var(--size-thumb) + var(--space-nudge) * 2);\n background: var(--color-disabled);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::before {\n content: \"\";\n position: absolute;\n top: var(--space-nudge);\n left: var(--space-nudge);\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-button-secondary);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n background: var(--fill-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::before,\n.ds-switch.is-on .ds-switch__track::before {\n left: auto;\n right: var(--space-nudge);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n.ds-switch__label {\n min-width: 0;\n}\n.ds-switch__hint {\n display: block;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n\n/* table */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-size: var(--text-base);\n color: var(--color-text);\n background: var(--color-surface);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n text-align: left;\n vertical-align: middle;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table th {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n color: var(--color-bar-text);\n background: var(--color-bar);\n border-bottom: 0;\n}\n.ds-table tbody tr:nth-child(even) td {\n background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody tr.is-current td {\n background: var(--color-surface-strong);\n font-weight: var(--weight-bold);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__meta {\n display: block;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n\n/* tabs: a row of flat chips; the current one takes the accent fill and tilts */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-tabs__tab {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control-small);\n padding: 0 var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n color: var(--color-text);\n background: var(--color-surface-strong);\n border-radius: var(--radius-control);\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-surface-alt);\n transform: rotate(-2deg);\n}\n.ds-tabs__tab.is-current {\n font-weight: var(--weight-bold);\n color: var(--color-accent-text);\n background: var(--fill-accent);\n transform: rotate(-3deg);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n\n/* notice: a flat block with a striped end */\n.ds-notice {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: var(--space-1) var(--space-3);\n padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-6) + var(--space-3));\n color: var(--color-notice-text);\n background: var(--color-notice);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-notice::before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: var(--space-6);\n background: repeating-linear-gradient(-45deg, currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3));\n}\n.ds-notice__title {\n flex: none;\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-notice__text {\n flex: 1 1 24ch;\n margin: 0;\n}\n.ds-notice--error {\n color: var(--color-text);\n background: var(--color-danger-surface);\n}\n.ds-notice--error::before {\n color: var(--color-danger);\n}\n\n/* pagination: flat counters; the current one takes the accent fill and tilts */\n.ds-pagination {\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}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control-small);\n min-height: var(--size-control-small);\n padding: 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: var(--ui-transform);\n text-decoration: none;\n color: var(--color-text);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n transition: var(--transition), background-color 0s;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-accent-text);\n background: var(--color-accent-alt);\n transform: rotate(-3deg);\n}\n.ds-pagination__link.is-current {\n color: var(--color-accent-text);\n background: var(--fill-accent);\n transform: rotate(6deg);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n background: var(--color-disabled);\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 0 var(--space-4);\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: 1.4;\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}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n background: var(--fill-accent);\n border-radius: 50%;\n}\n.ds-breadcrumb__item.is-current {\n font-weight: var(--weight-bold);\n}\n\n/* dialog */\n.ds-dialog {\n position: relative;\n z-index: 1;\n max-width: var(--size-dialog);\n margin: 0 auto;\n color: var(--color-text);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-dialog__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n}\n.ds-dialog__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-dialog__close {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-control-small);\n height: var(--size-control-small);\n padding: 0;\n font-family: var(--font-ui);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n cursor: pointer;\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n border: 0;\n border-radius: var(--radius-pill);\n}\n.ds-dialog__body {\n padding: var(--space-5) var(--space-4);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-4);\n padding: 0 var(--space-4) var(--space-5);\n}\n\n/* empty state: a quiet flat block with a small cluster of shapes */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-6) var(--space-5);\n text-align: center;\n color: var(--color-text);\n background: var(--color-surface-alt);\n border-radius: var(--radius-panel);\n}\n.ds-empty__art {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n}\n.ds-empty__art .ds-shape {\n position: relative;\n}\n.ds-empty__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-empty__text {\n max-width: 40ch;\n margin: 0 0 var(--space-2);\n}\n\n/* menu: a drop-down under a navigation item */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle {\n list-style: none;\n cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu__toggle svg {\n flex: none;\n width: var(--space-3);\n height: var(--space-3);\n}\n.ds-menu[open] .ds-menu__toggle svg {\n transform: rotate(180deg);\n}\n.ds-menu__list {\n position: absolute;\n top: calc(100% + var(--space-3));\n left: 0;\n z-index: 8;\n display: grid;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n color: var(--color-inverse-text);\n background: var(--color-inverse);\n border-radius: var(--radius-panel);\n transform: rotate(-1deg);\n}\n.ds-menu__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.4;\n text-transform: var(--ui-transform);\n text-decoration: none;\n color: var(--color-inverse-text);\n border-radius: var(--radius-panel);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n color: var(--color-accent-text);\n background: var(--fill-accent);\n}\n.ds-menu__note {\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n opacity: 0.75;\n}\n\n/* tooltip */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 0;\n z-index: 9;\n padding: var(--space-1) var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.5;\n text-transform: none;\n white-space: nowrap;\n color: var(--color-inverse-text);\n background: var(--color-inverse);\n border-radius: var(--radius-panel);\n transform: rotate(-2deg);\n pointer-events: none;\n}\n.ds-tooltip:hover .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/* accordion */\n.ds-accordion {\n display: grid;\n gap: var(--space-3);\n}\n.ds-accordion__item {\n color: var(--color-text);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-4);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: 1.3;\n list-style: none;\n cursor: pointer;\n color: var(--color-heading);\n background: var(--color-surface-alt);\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__item[open] .ds-accordion__head {\n background: var(--color-surface-strong);\n}\n.ds-accordion__sign {\n position: relative;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n background: var(--fill-accent);\n border-radius: 50%;\n transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__sign {\n background: var(--color-accent-alt);\n border-radius: 0;\n transform: rotate(45deg);\n}\n.ds-accordion__body {\n padding: var(--space-3) var(--space-4) var(--space-4);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n\n/* progress: a flat track, the done part striped over the accent */\n.ds-progress {\n display: block;\n height: var(--size-track);\n background: var(--color-disabled);\n border-radius: var(--radius-pill);\n overflow: hidden;\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background:\n repeating-linear-gradient(-45deg, transparent 0 var(--space-2), color-mix(in srgb, var(--color-accent-text) 28%, transparent) var(--space-2) calc(var(--space-2) + var(--size-stroke))),\n var(--fill-accent);\n}\n.ds-progress--alt .ds-progress__bar {\n background:\n radial-gradient(color-mix(in srgb, var(--color-accent-text) 32%, transparent) 26%, transparent 30%) 0 0 / var(--space-2) var(--space-2),\n var(--color-accent-alt);\n}\n.ds-progress--0 .ds-progress__bar {\n width: 0;\n}\n.ds-progress--25 .ds-progress__bar {\n width: 25%;\n}\n.ds-progress--90 .ds-progress__bar {\n width: 90%;\n}\n.ds-progress__legend {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-1);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n font-variant-numeric: tabular-nums;\n}\n\n/* avatar: a face or initials on a patterned tile */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n color: inherit;\n text-decoration: none;\n}\n.ds-avatar__pic {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n color: var(--color-accent-text);\n background:\n radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n var(--color-fill-1);\n border-radius: var(--radius-control);\n}\n.ds-avatar--1 .ds-avatar__pic {\n background:\n radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n var(--color-fill-1);\n}\n.ds-avatar--2 .ds-avatar__pic {\n background:\n repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-accent-text) 18%, transparent) 0 var(--space-nudge), transparent var(--space-nudge) var(--space-2)),\n var(--color-fill-2);\n}\n.ds-avatar--4 .ds-avatar__pic {\n background:\n repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-accent-text) 18%, transparent) 0 var(--space-nudge), transparent var(--space-nudge) var(--space-2)),\n var(--color-fill-4);\n}\n.ds-avatar--large .ds-avatar__pic {\n width: calc(var(--size-avatar) * 1.75);\n height: calc(var(--size-avatar) * 1.75);\n}\n.ds-avatar__pic svg {\n display: block;\n width: 70%;\n height: 70%;\n}\n.ds-avatar__text {\n min-width: 0;\n}\n.ds-avatar__name {\n display: block;\n font-weight: var(--weight-bold);\n line-height: 1.3;\n}\n.ds-avatar__meta {\n display: block;\n font-size: var(--text-small);\n line-height: 1.4;\n}\n\n/* carousel: one slide shows; the dots are a disc, a diamond and a square */\n.ds-carousel {\n display: grid;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-carousel__track {\n display: flex;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n color: var(--color-text);\n background: var(--color-surface-strong);\n border-radius: var(--radius-panel);\n}\n.ds-carousel__slide {\n flex: 0 0 100%;\n min-width: 0;\n margin: 0;\n padding: var(--space-5);\n scroll-snap-align: start;\n}\n.ds-carousel__quote {\n margin: 0 0 var(--space-4);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: 1.3;\n color: var(--color-heading);\n}\n.ds-carousel__foot {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-carousel__arrow {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-control-small);\n height: var(--size-control-small);\n margin: 0;\n padding: 0;\n cursor: pointer;\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n border: 0;\n border-radius: var(--radius-pill);\n transition: var(--transition), background-color 0s;\n}\n.ds-carousel__arrow svg {\n width: var(--space-4);\n height: var(--space-4);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n color: var(--color-accent-text);\n background: var(--fill-accent);\n transform: rotate(-6deg);\n}\n.ds-carousel__dots {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-carousel__dot {\n width: var(--space-3);\n height: var(--space-3);\n background: var(--color-border);\n border-radius: 50%;\n}\n.ds-carousel__dot:nth-child(3n + 2) {\n border-radius: 0;\n transform: rotate(45deg);\n}\n.ds-carousel__dot:nth-child(3n) {\n border-radius: 0;\n}\n.ds-carousel__dot.is-current {\n background: var(--fill-accent);\n}\n\n/* squiggle: the wavy rule under a section title */\n.ds-squiggle {\n display: block;\n width: calc(var(--size-shape) * 1.25);\n height: var(--space-4);\n color: var(--color-accent);\n}\n.ds-squiggle svg {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n.ds-squiggle svg path {\n vector-effect: non-scaling-stroke;\n stroke-width: calc(var(--size-stroke) * 1.25);\n}\n\n@media (max-width: 1000px) {\n .ds-nav__bar {\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 0 var(--space-4);\n padding: var(--space-3) var(--space-4) 0;\n }\n .ds-nav__links {\n order: 3;\n flex: 0 0 100%;\n flex-wrap: wrap;\n min-height: var(--size-control);\n margin-top: var(--space-2);\n }\n .ds-nav__link {\n min-height: var(--size-control);\n }\n .ds-shelf {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-shelf__item--note {\n grid-column: 1 / -1;\n }\n .ds-hero__inner {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero__body {\n margin-bottom: 0;\n }\n .ds-hero__art {\n justify-content: center;\n }\n .ds-hero__ground {\n height: calc(var(--size-art) * 1.3 + var(--space-8));\n }\n .ds-stat {\n flex-wrap: wrap;\n }\n .ds-stat__cell,\n .ds-stat__cell:nth-child(2),\n .ds-stat__cell:nth-child(3),\n .ds-stat__cell:nth-child(4) {\n width: 40%;\n }\n .ds-stat__cell:nth-child(2) {\n width: 32%;\n }\n .ds-stat__cell:nth-child(3) {\n width: 34%;\n margin-top: calc(var(--space-4) * -1);\n margin-left: 0;\n }\n .ds-stat__cell:nth-child(4) {\n margin-top: calc(var(--space-5) * -1);\n }\n .ds-grid,\n .ds-grid--3 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-grid__cell--big {\n grid-row: auto;\n }\n .ds-split,\n .ds-split--even,\n .ds-split--flip,\n .ds-split--feature {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-band__field,\n .ds-page-header__ground {\n display: none;\n }\n .ds-band > .ds-shape,\n .ds-hero > .ds-shape,\n .ds-page-header > .ds-shape,\n .ds-footer > .ds-shape {\n display: none;\n }\n .ds-footer__inner {\n grid-template-columns: 1fr 1fr;\n }\n .ds-footer__sign {\n grid-column: 1 / -1;\n order: -1;\n text-align: left;\n }\n .ds-footer__text {\n margin-left: 0;\n }\n}\n\n@media (max-width: 600px) {\n .ds-band,\n .ds-band--tight {\n padding: var(--space-7) var(--space-4);\n }\n .ds-band--lift {\n padding-top: 0;\n }\n .ds-hero {\n padding: var(--space-6) var(--space-4) var(--space-8);\n }\n .ds-page-header {\n padding: var(--space-5) var(--space-4);\n }\n .ds-nav__link {\n padding: 0 var(--space-3);\n }\n .ds-shelf__link {\n padding: var(--space-2) var(--space-4);\n font-size: var(--text-large);\n }\n .ds-hero__title {\n font-size: calc(var(--text-display) * 0.5);\n }\n .ds-hero__actions,\n .ds-hero__actions .ds-button {\n width: 100%;\n }\n .ds-hero__art .ds-hero__piece,\n .ds-hero__art .ds-hero__piece:nth-child(1) {\n min-height: calc(var(--size-art) * 1.1);\n }\n .ds-hero__art .ds-hero__piece:nth-child(2) {\n min-height: calc(var(--size-art) * 1.35);\n margin-left: calc(var(--space-3) * -1);\n }\n .ds-hero__art .ds-hero__piece:nth-child(3) {\n min-height: 0;\n margin: 0 0 var(--space-6) calc(var(--space-4) * -1);\n }\n .ds-hero__ground {\n height: calc(var(--size-art) * 0.9 + var(--space-8));\n }\n .ds-page-header__title,\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n .ds-stat__cell,\n .ds-stat__cell:nth-child(4) {\n width: 50%;\n }\n .ds-stat__cell:nth-child(2) {\n width: 44%;\n }\n .ds-stat__cell:nth-child(3) {\n width: 46%;\n }\n .ds-stat__cell {\n padding: var(--space-2);\n }\n .ds-stat__value,\n .ds-panel__price {\n font-size: var(--text-h2);\n }\n .ds-band__title,\n .ds-feature__title,\n .ds-prose h2,\n .ds-grid__cell--big .ds-grid__title {\n font-size: calc(var(--text-h2) * 0.8);\n }\n .ds-grid,\n .ds-grid--3 {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid__cell--big,\n .ds-grid__cell--wide {\n grid-column: auto;\n }\n .ds-grid__cell--wide {\n flex-direction: column;\n align-items: stretch;\n }\n .ds-grid__cell--wide .ds-grid__body {\n flex: none;\n }\n .ds-grid__price {\n right: var(--space-3);\n }\n .ds-footer {\n padding: var(--space-7) var(--space-4) var(--space-5);\n }\n .ds-footer__inner,\n .ds-footer__legal {\n padding-right: var(--space-4);\n padding-left: var(--space-4);\n }\n .ds-footer__brand {\n font-size: var(--text-h2);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-button {\n white-space: normal;\n }\n .ds-table {\n font-size: var(--text-small);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-2);\n }\n .ds-table .ds-table__extra {\n display: none;\n }\n .ds-list__item {\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-3);\n }\n .ds-list__meta {\n flex: 0 0 100%;\n }\n .ds-menu__list {\n min-width: 0;\n width: 28ch;\n max-width: 80vw;\n }\n .ds-inline {\n flex-wrap: wrap;\n }\n .ds-inline .ds-form__control {\n flex: 1 1 100%;\n }\n}\n\n/* the Help menu sits beside the list, so the list can scroll on a phone */\n.ds-nav__links {\n flex: 0 1 auto;\n}\n.ds-nav__bar > .ds-menu {\n display: flex;\n margin-right: auto;\n margin-left: calc(var(--space-6) * -1);\n}\n@media (max-width: 1000px) {\n .ds-nav__bar {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n }\n .ds-nav__bar > .ds-brand {\n grid-area: 1 / 1;\n justify-self: start;\n }\n .ds-nav__actions {\n grid-area: 1 / 2;\n justify-self: end;\n }\n .ds-nav__links {\n grid-area: 2 / 1;\n flex-wrap: nowrap;\n min-width: 0;\n margin-left: calc(var(--space-4) * -1);\n padding-left: var(--space-4);\n overflow-x: auto;\n scrollbar-width: none;\n mask-image: linear-gradient(to left, transparent, black var(--space-6));\n }\n .ds-nav__links > li {\n flex: none;\n }\n .ds-nav__link {\n white-space: nowrap;\n }\n .ds-nav__bar > .ds-menu {\n grid-area: 2 / 2;\n justify-self: end;\n margin: var(--space-2) 0 0;\n }\n .ds-nav__bar > .ds-menu .ds-menu__list {\n right: 0;\n left: auto;\n }\n .ds-page:has(#product:target) .ds-nav__links > li:nth-child(3) {\n order: -1;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: memphis print shop specimen\n\n\n\n\n\n
\n \n \n
\n\n
\n
\n
\n \n \n \n
\n
\n Printed by hand, two colours at a time\n

Prints that shout from the wall.

\n
\n
\n

chronoskin is a small print shop. Risograph prints, notebooks and socks by twelve artists, made in short runs and posted flat.

\n
\n Shop the prints\n Print of the week\n
\n
\n
\n Loud morning\n Two suns\n \n
\n
\n
\n\n
\n
\n
prints in the drawers
84
\n
artists
12
\n
hours until it is posted
48
\n
colours a print
2
\n
\n
\n\n
\n \n \n
\n
\n
\n

New on the wall

\n \n
\n All 84 prints\n
\n
    \n
  • \n 24\n
    \n
    \n Print of the week\n

    Loud morning

    \n

    Risograph, A3, edition of 80, by Ines Marchetti

    \n
    \n
    • \n
  • \n 28\n
    \n
    \n

    Two suns

    \n

    Risograph, A3

    \n
    \n
    • \n
  • \n 18\n
    \n
    \n

    Soft corner

    \n

    Screen print, A4

    \n
    \n
    • \n
  • \n 12\n
    \n
    \n Three for 12\n

    Dotted notebooks

    \n

    A5, 48 pages, sewn

    \n
    \n
    • \n
\n
\n
\n\n
\n \n \n
\n
\n Artist of the month\n Ines Marchetti9 prints in the shop\n

Prints everything twice

\n

Ines draws with cut paper and prints each sheet a second time, a little off, so that no two are the same.

\n See her nine prints\n
\n
\n
\n

Out of the print room this week

\n \n
\n
\n

First look, every Friday

\n
\n

One letter a week with the new prints, a day before they go on the wall.

\n
\n \n \n
\n
\n
\n
\n
\n
\n\n
\n \n \n
\n
\n

A gift card that is a print

\n

Posted in a tube, with the code written on the back in pencil.

\n
\n Choose a card\n
\n
\n
\n\n
\n
\n \n
\n
    \n
  1. Shop
    2. \n
  2. Prints
    3. \n
  3. New
    4. \n
\n
\n
\n

All prints

\n

Eighty-four prints by twelve artists. Seven arrived this month.

\n
\n
\n Open the basket\n
\n
\n
\n
\n\n
\n
\n
\n \n
\n
\n

No seconds today

\n

Misprints at half price turn up here after each print day.

\n Tell me on Friday\n
\n
\n
\n \n
    \n
  • \n 24\n
    \n
    \n Print of the week\n

    Loud morning

    \n

    Risograph, A3, edition of 80

    \n
    \n
    • \n
  • \n 28\n
    \n
    \n

    Two suns

    \n

    Risograph, A3

    \n
    \n
    • \n
  • \n 18\n
    \n
    \n

    Soft corner

    \n

    Screen print, A4

    \n
    \n
    • \n
  • \n 22\n
    \n
    \n

    Long table

    \n

    Risograph, A3

    \n
    \n
    • \n
  • \n 16\n
    \n
    \n

    Forty loops

    \n

    Screen print, A4

    \n
    \n
    • \n
  • \n 26\n
    \n
    \n

    Tram depot

    \n

    Risograph, A3

    \n
    \n
    • \n
  • \n 30\n
    \n
    \n Last 5\n

    Every colour at once

    \n

    Risograph in four layers, A2

    \n
    \n
    • \n
\n \n
\n
\n
\n
\n\n
\n
\n \n
\n
    \n
  1. Shop
    2. \n
  2. Prints
    3. \n
  3. Loud morning
    4. \n
\n
\n
\n

Loud morning

\n

A risograph print in two colours by Ines Marchetti. A3, edition of 80, signed in pencil.

\n
\n
\n All prints\n Add to basket\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
The whole sheet, 30 by 42 centimetres.
\n
\n
\n
\n
The corner, where the two colours miss each other.
\n
\n
\n
\n
\n \n \n
\n
\n Ines MarchettiPoster maker, 9 prints in the shop\n
\n
\n
\n Print of the week\n New\n A3\n In stock\n Few left\n Sold out\n
\n
\n

Take it home

\n
\n

24

\n

61 of 80 left. Posted flat between two boards within two days.

\n
\n \n Add to basket\n
\n What is a risograph?A stencil printer that lays down one colour at a time\n
\n
\n
\n
\n Paper and size \n

Uncoated 170 gram paper, 297 by 420 millimetres. It fits any A3 frame without a mount.

\n
\n
\n Delivery \n

Posted flat within two days. Free over 40.

\n
\n
\n Returns \n

Send it back within 30 days, flat, and we refund the print and the postage.

\n
\n
\n
\n
\n
\n\n
\n \n
\n
\n

About this print

\n

Ines cut the shapes from painted paper on a Monday morning with the radio too loud, and printed them the same afternoon.

\n

How it is printed

\n

Each colour goes through the machine on its own, so the two never land in quite the same place. The number pencilled on the back, such as LM-061, tells you which sheet of the edition is yours.

\n
    \n
  • Two soy inks, tomato and cobalt
    • \n
  • Signed and numbered by hand
    • \n
  • No two sheets line up the same way
    • \n
\n

Looking after it

\n

Keep it out of direct sun and do not laminate it. The ink stays a little soft for the first week.

\n
\n
\n \n
\n

Edition

\n
\n
Sold19 of 80
\n \n

When the eighty are gone the stencil is thrown away.

\n
\n
\n
\n
\n
\n
\n\n
\n
\n \n
\n
    \n
  1. Shop
    2. \n
  2. Basket
    3. \n
  3. Delivery
    4. \n
\n
\n
\n

Your basket

\n

Two things and a wrapper, posted flat within two days.

\n
\n
\n Keep looking\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n Nearly there\n

Add 4 more and delivery is free.

\n
\n
\n Sold out\n

The last copy of Tram depot went while it was in your basket.

\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
ItemSizeStatusNumberPrice
Loud morningInes MarchettiA3In stock124
Dotted notebooksSet of threeA5In stock112
Gift wrapA misprint, no chargeOne sheetFew left10
Tram depotRosa KiviniemiA3Sold out00
To payDelivery 4340
\n
\n

Where it goes

\n
\n
\n
\n
\n \n \n
\n
\n \n \n

Enter a full address, such as name@example.org.

\n
\n
\n
\n \n \n
\n
\n \n \n

We write the note on the parcel in felt pen.

\n
\n \n
\n \n \n \n \n
\n
\n
\n
\n
\n
\n
\n

Your order

\n
\n

40

\n

Two things for 36 and 4 for the post.

\n
Free delivery36 of 40
\n \n \n
\n
\n \n
\n
\n
\n\n
\n
\n
\n

Empty the basket?

\n ×\n
\n
\n

Loud morning is held for you for ten more minutes. Emptying the basket puts it back on the wall.

\n
\n
\n Keep it\n \n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.memphis.shop.s04.p05.t05.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"memphis\",\n \"years\": [\n 2016,\n 2022\n ]\n },\n \"archetype\": \"shop\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-me-4555\",\n \"short\": \"v1-me-4555\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f1f1ee;\n --color-canvas: #f1f1ee;\n --color-surface: #ffffff;\n --color-surface-alt: #e2e2de;\n --color-surface-strong: #ffd9ec;\n --color-bar: #ffa3d1;\n --color-bar-text: #0d0d0d;\n --color-bar-alt: #0d0d0d;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #0d0d0d;\n --color-inverse-text: #ffffff;\n --color-text: #0d0d0d;\n --color-text-muted: #5b5b58;\n --color-heading: #0d0d0d;\n --color-heading-alt: #b00a59;\n --color-link: #b00a59;\n --color-link-quiet: #0d0d0d;\n --color-link-visited: #6d4a5c;\n --color-link-hover: #de1173;\n --color-link-active: #0d0d0d;\n --color-border: #0d0d0d;\n --color-border-strong: #0d0d0d;\n --color-border-muted: #c6c6c1;\n --color-accent: #de1173;\n --color-accent-text: #ffffff;\n --color-accent-alt: #0d0d0d;\n --color-fill-1: #de1173;\n --color-fill-2: #0d0d0d;\n --color-fill-3: #5a5a57;\n --color-fill-4: #8f0a4b;\n --color-button: #de1173;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #0d0d0d;\n --color-button-secondary-text: #ffffff;\n --color-input: #ffffff;\n --color-input-text: #0d0d0d;\n --color-input-border: #0d0d0d;\n --color-disabled: #d3d3cf;\n --color-disabled-text: #6a6a66;\n --color-danger: #b3001b;\n --color-danger-surface: #ffe1e4;\n --color-success: #1d7a46;\n --color-warning: #a35a00;\n --color-notice: #ffd9ec;\n --color-notice-text: #0d0d0d;\n --color-focus: #de1173;\n --color-shadow: #a9a9a4;\n --color-overlay: rgb(13 13 13 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: \"Manrope\", \"Public Sans\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n --font-heading: \"Syne\", \"Unbounded\", \"Bricolage Grotesque\", \"Arial Black\", \"Helvetica Neue\", sans-serif;\n --font-ui: \"Manrope\", \"Public Sans\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: \"JetBrains Mono\", ui-monospace, Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 15px;\n --text-large: 22px;\n --text-display: 96px;\n --text-h1: 54px;\n --text-h2: 36px;\n --text-h3: 20px;\n --line-body: 1.45;\n --line-heading: 1.05;\n --line-display: 0.94;\n --weight-body: 400;\n --weight-bold: 800;\n --weight-heading: 800;\n --weight-display: 800;\n --weight-ui: 700;\n --heading-transform: lowercase;\n --heading-tracking: -0.02em;\n --display-tracking: -0.04em;\n --figure-shift: 0em;\n --ui-transform: lowercase;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 999px;\n --radius-panel: 0 40px 0 0;\n --radius-pill: 0;\n --radius-page: 0 0 120px 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: conic-gradient(from 0deg at 10px 10px, transparent 75%, color-mix(in srgb, var(--color-border-muted) 55%, transparent) 0) 0 0 / 56px 56px, var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: conic-gradient(var(--color-accent) 25%, transparent 0 50%, var(--color-accent) 0 75%, transparent 0) 0 0 / 20px 20px, var(--color-bar-alt);\n --fill-inverse: repeating-linear-gradient(-45deg, var(--color-fill-1) 0 14px, transparent 14px 42px), repeating-linear-gradient(-45deg, transparent 0 24px, var(--color-surface) 24px 28px, transparent 28px 42px), var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-inverse);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px dashed var(--color-focus);\n --transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4), background-color 0.18s linear;\n --backdrop-blur: 0px;\n}\n" } }